If you want to accept user registration on your WordPress site then you need to create a user registration page whereby your candidate users are able to create an account via a registration form on the page. There are lots of WordPress plugins that you can use to create a user registration form out there. Elementor is one of which.

In case you haven’t known about it. Elementor is a popular page builder plugin that comes with a visual editor to create a beautiful web page on your WordPress site. You are provided with over 90 design elements — called widgets — to create a web page. One of the widgets offered by Elementor is the Form widget. As the name suggests, this widget is used to add a form to your page. You can use this widget to create any type of form, including a user registration form. But, you need a little trick to do so.

To create a user registration page using Elementor‘s Form widget, you need to add a new function to add a new user to your WordPress. No worries, it’s not that scary if you have no coding skills.

In case you are new to Elementor, you can read this guide to learn how to use Elementor. Just for your information that the Form widget is only available on Elementor Pro so you need to use pro version to be able to create a user registration page. Read the differences between Elementor Free vs Elementor Pro to learn more about the benefits you will from Elementor Pro.

Step 1: Create a user registration form

Assuming you have installed and activated Elementor Pro on your WordPress site, create a new page (Pages -> Add New) and edit it with Elementor. You can name your page something like “Registration” or “Create a New Account”

You will be taken to the Elementor editor after clicking the Edit with Elementor button above. Add a new section by clicking the red plus icon and add the Form widget to the canvas area by dragging it from the left panel.

Go to the left panel once the form widget is added. The first thing you need to do is to give your form a name. In this example, we name the form with the name “Create New User”. Make sure to use the same name, including the uppercase and the lowercase as we will use this form name as the variable on the PHP script we will use later.

Next, set the fields of the form. We will use 5 fields as follows:

To add a new field, you can click the ADD NEW item on the Form Fields block under the Content tab. Make sure to set a label for every field (as you can see on the table above). For the Username, Email, and Password fields, set them as required fields.

Note: Make sure to use the same form fields as the ones on the table since we will use them as the variables on the PHP script. Notice the upper and the lowercase.

Once done setting the form fields, open the Action After Submit block. Since you want to create a registration form, you can set the action to Redirect to redirect your users to the login page of your WordPress site (you can also create a custom login page with Elementor, by the way).

Open the Redirect block and paste the URL where you want to redirect your users after they have successfully created an account.

Next, open the Additional Options block and enable the Custom Messages option. You can replace the default message with something like “The user was successfully created”

Your form is now ready to use. You can continue to edit your page by adding other elements you like. Publish your page once you are done.

Step 2: Add a new function

After creating the user registration form, the next step you need to do is to add a new function to add a new user to your WordPress site. To do so, you can edit the functions.php file of your WordPress theme. Go to Appearance -> Theme Editor. Click the functions.php file on the right panel to edit it.

Add the following PHP script to the end section of the file.

add_action( 'elementor_pro/forms/new_record',  'thewpchannel_elementor_form_create_new_user' , 10, 2 );

function thewpchannel_elementor_form_create_new_user($record,$ajax_handler)
{
    $form_name = $record->get_form_settings('form_name');
    //Check that the form is the "create new user form" if not - stop and return;
    if ('Create New User' !== $form_name) {
        return;
    }
    $form_data = $record->get_formatted_data();
    $username=$form_data['Username']; //Get the value of the input with the label "User Name"
    $password = $form_data['Password']; //Get the value of the input with the label "Password"
    $email=$form_data['Email'];  //Get the value of the input with the label "Email"
    $user = wp_create_user($username,$password,$email); // Create a new user, on success return the user_id no failure return an error object
    if (is_wp_error($user)){ // if there was an error creating a new user
        $ajax_handler->add_error_message("Failed to create new user: ".$user->get_error_message()); //add the message
        $ajax_handler->is_success = false;
        return;
    }
    $first_name=$form_data["First Name"]; //Get the value of the input with the label "First Name"
    $last_name=$form_data["Last Name"]; //Get the value of the input with the label "Last Name"
    wp_update_user(array("ID"=>$user,"first_name"=>$first_name,"last_name"=>$last_name)); // Update the user with the first name and last name

}

Here is the example of placement. Click the Update File button to update the file.

The bottom line

By default, WordPress sets the role for a new user as Subscriber. Chances are, your users won’t be able to access the dashboard of your WordPress site if you keep this default setting. In some cases, only users with at least a Contributor role have access to the WordPress dashboard. To change this default setting, you can go to Settings -> General. Scroll down to the New User Default Role option and select the role from the dropdown menu.

Don’t forget to click the Save Changes button on the bottom to apply the new change.

If you enjoy using Elementor due to its intuitive interface, you can install add-ons to enhance your experience. Two Elementor add-ons we recommend are Happy Addons and JetElements.