To create a WordPress-based user-generated site or other site types that allow user registration, one of the components you need to prepare is the user registration page. If you use Elementor, you can use the Form widget to add the registration form to your registration page. However, you need a little trick as the Form widget of Elementor has no functionality to create a user registration form. In this post, we will show how to add such functionality to the Form widget of Elementor.
There are two required components to create a user registration page in WordPress using Elementor. First, you need a user registration form itself. Second, you need a function (PHP script) to add a new user to your WordPress site.
Before getting started, make sure that you have upgraded your Elementor to the pro version if you have don’t so since the Form widget is only available on the pro version of Elementor. Read the differences between Elementor Free vs Elementor Pro to learn more. In addition, check the default role of a new user on your WordPress site by going to Settings -> General.
Scroll down to the New User Default Role section and select the default role you like from the dropdown menu.
Step 1: Create the user registration form
We assume that you are already familiar with Elementor. If you are new to Elementor, you can read this article to learn the basics of Elementor. Once you are ready, create a new page (Pages -> Add New) and edit it with Elementor. On the Elementor editor, add the Form widget by dragging it from the left panel to the canvas area.
Once the form widget is added, go to the left panel to make the settings. The very first setting you need to make is the form name. Name your form “Create New User”. Make sure to use the same spelling, including the uppercase and the lowercase, as we will use it as the variable on the PHP script.
Next, set the form fields. There are 5 form fields you will need. You can click the ADD ITEM button to add a new form field. The form fields you need are:
| Field Name | Field Type | Label |
|---|---|---|
| First Name | Text | First Name |
| Last Name | Text | Last Name |
| Username (required) | Text | Username |
| Email (required) | ||
| Password (required) | Password | Password |
Again, make sure to use the same field names as the ones on the table above as we will use them as the variables on the PHP script. Also make sure to set the Username, Email, and Password fields as the required fields.
Once done setting the form fields, open the Action After Submit block. Since you want to create a user registration page, you might want to redirect your users to the login page once they have successfully created a new account. So, set the action to Redirect.
Set the redirect URL to the login page of your website (or any URL of your choice) on Redirect block. Just for your information, you can also create a custom login page on your WordPress site using Elementor.
Next, open the Additional Options block and enable the Custom Messages option. Replace the default Success Message with something like “Account was successfully created”.
Your form is now ready to use. You can publish your page once are you done editing it.
Step 2: Add a new function to add a new user
In order to make the form you created above work properly, you need to add a new function to add a new user to your WordPress. You can do so by editing the functions.php file of your active theme. From your WordPress dashboard, 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
}
Click the Update File button beneath the editor to update the file. Here is the example of the script placement.
The bottom line
If you set the default role of the new user to Subscriber, chances are your new users won’t be able to access the dashboard of your WordPress site. If you want them to have access to the dashboard, you can set the role to Contributor or the higher role.
In addition to Elementor, you can also create a user registration page on your WordPress site using a form builder plugin like WPForms (the pro version), Gravity Forms, Caldera Forms, and so on.