If you want to create a user-generated site with WordPress+Elementor or other site types that allow user registration, the very crucial thing you need to provide is the user registration page. Elementor has no default widget to add a user registration form to a page, but you can add one using the Form widget with a little trick. We will cover it shortly in this article.
Since the Form widget is only available on the Elementor Pro, you need to upgrade your Elementor to the pro version if you haven’t done so. Read the differences between Elementor free vs Elementor Pro.
How to Create a User Registration Form in Elementor
Elementor has no default widget to add a user registration form. But, — as mentioned earlier — you can create a user registration using form the Form widget with a little trick. There are two components you will need:
- The user registration form itself
- PHP script to add a function to add a new user
Before getting started, we assume that you have been using Elementor for a quite while and have ever created a form using the Form widget before. If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.
Once you are ready, follow the steps below to start creating a user registration page in Elementor.
Step 1: Create the User Registration Form
First off, create a new page and edit with Elementor. Of course, you can also edit an existing page. On the Elementor editor, add the Form widget to the canvas area by dragging it from the left panel.
Go to the left panel to customize the form. The first option block you need to open is the Form Fields block under the Content tab. The registration form we will create consists of 5 fields as follows:
Field | Field Type | Label |
First Name | Text | First Name |
Last Name | Text | Last Name |
Username (required) | Text | Username |
Email (required) | ||
Password (required) | Password | Password |
Form name: Create New User
A crucial thing to note. Make sure to use the field labels precisely the same as the ones on the table above, including the uppercase and lowercase as they will be used as the variables on the PHP script we will use. Also make sure to give your form a name. Again, make sure to use precisely the same name (including the uppercase and lowercase) as the one we use in this example (“Create New User” in this case). Here is the example of the form we created.
Once done setting the form fields, open the Action After Submit block. Since you want to create a user registration form, you can set the action to Redirect.
On the Redirect block, paste the URL where you want your users to be directed after they successfully created a new user. For instance, you can redirect them to the login page of your website.
Open the Additional Options block and enable the Custom Message option. You can replace the Success Message with something like “The user was created.”
Your form is now ready. You can publish the page once you are done editing it.
Step 2: Add a New Function to Add a New User
Here is the PHP script to add a new function to add a new user on your WordPress site.
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 }
You can place the code above to the functions.php file of your theme. To do so, go to Appearance -> Theme Editor on your WordPress dashboard. Click the functions.php file on the right panel to edit it and paste the PHP script above to the and section of the functions.php file. Here is the example of the placement.
Click the Update File button beneath the editor to update the functions.php file.
Potential Errors
After your users have successfully created a new account, chances are they won’t be able to access the WordPress dashboard even if they have successfully logged in. If you experience this issue, try to change the role of the user to Contributor or the higher role (Author or Editor). To do so, go to Users -> All Users. Hover your mouse over a user you want to change her/his role and click the Edit link.
Scroll down to the Role option and select a new role from the dropdown menu. Cick the Update User button on the bottom to apply the new change.
If you want every newly registered user to have a Contributor role, you can set it (the Contributor role) as a default role. To do so, go to Settings -> General. Scroll down to the New User Default Role option and select a default role you want from the dropdown menu. Don’t forget to click the Save Changes button on the bottom to apply the new change.
If you keep wanting new users to have a Subscriber role and want to allow them to access the WordPress dashboard, you can try to fix the issue by temporarily deactivating the active plugins and reactivate them one by one until you see which plugin causes the issue.
25 thoughts on “How to Create a User Registration Page in Elementor (Without Add-on)”
Thanks for your tutorial. It helps me a lot.
Hi,
Thanks.
How do I get notifications when new user register.
I don’t receive anything…
I try with wp_new_user_notification($user_id, null, ‘admin’); but get nothing.
Thanks in advance
This is really useful, thank you!
Do you have an idea why does not work with ACF field?
I don’t think this works with the latest WP updates 🙁 Thank you though.
it works . thx
Thank you, its possible to turn on email verification link before create new account?
Would it not be more correct to add the php code to plugin rather than to the theme?
How can i add a user role on the registration page, so users can select the preferred role
While the instructions worked perfectly, I recommend using JetEngine for a simpler solution. It is a smart solution to create a dynamic website with Elementor
The JetEngine Form module is now a legacy. Crocoblock decided to build a dedicated form builder plugin called JetFormBuilder. Essential Addons from WPDeveloper is a better alternative for a simpler solution.
With this article you saved me 200$ of plugins like uncanny automator, when I just add these two lines of codes and it works like a charm!
I’d suggest the newbies add this code through the plugin “Code Snippets”.
Luca
Tip the man.
Signup work now i have another form as signing how do I go about it ?
Hi Van,
You can visit this page for custom login page https://www.wppagebuilders.com/create-custom-login-page-wordpress-elementor/
Hello, thanks for this useful post!
How can i add a “customer” role to the added username?
Thankssss
I don’t know if I am too late, but you can add the ‘role’ field in
wp_update_user()
function.wp_update_user(
array(
"ID"=>$user,
"first_name"=>$first_name,
"last_name"=>$last_name,
"role" => "customer"
)
);
Reference: https://developer.wordpress.org/reference/functions/wp_update_user/
Hi, do you have any ideas for how to do a password field validation? I just want the password to have to be at least 12 characters. Using this code you’ve provided (which, by the way, is a HUGE help, thank you), a password of any length (even 1 character) is accepted which isn’t ideal.
Here is the page on it from Elementor, but I’m not a developer and was unable to get a working version of this for the password field even after about 3 hours of trying.
https://developers.elementor.com/docs/hooks/form-validation/
Just following up on this. Wondering if you have a solution.
Hi,
You can add the following snippet to the code, just underneath the password variable (denoted by $password)
if ( strlen($password) add_error_message(“The password length should be bigger than 12 characters”; //add the message
$ajax_handler->is_success = false;
return;
}
I haven’t tested it, so let me know if this works! If not I will take another look for you.
Hi,
I used the php method. It works flawlessly, thank you very much.
Do you know if it would be possible to add a Feld in the registration form? I would like to let users choose one option from a dropdown (teams which they belong to), and maybe it be shown in their backend info.
Would this be possible?
All the best,
Carlo
Nice article thank you for the help! I would like to point out that one should always validate and if not possible sanitize user input before submitting it into your database. This could lead to serious security vulnerabilities! Check the following link for more information:
– https://developer.wordpress.org/apis/security/data-validation/
– https://developer.wordpress.org/apis/security/sanitizing/#sanitization-functions
– https://developer.wordpress.org/apis/security/escaping/
For the non-coders it’s very simple, just add sanitize functions to all user inputted data. All user inputted data in the above code snippet is stored in the form_data variable (denoted by $form_data).
To sanitize for example a text field variable change the existing code
($username=$form_data['Username'];)
tosanitize_text_field( $username=$form_data['Username'] );
. Or for an email field there is a special function sanitize_email, so the code would becomesanitize_email( $form_data['Email'] );
Thanks for the addition, Zedd 🙂
Nice article.
how we can map custom fields like date of birth, phone and additional radio button?
Thanks
I want to add phone numbee field, email id and password.
Can u add a Full code here..because i am a beginner