Do you want to create a registration page in Elementor?
If you want create a website WordPress which allows user registration, the very crucial thing that you need to provide is the registration page. Elementor does not have a default widget to add a online form subscription to a page, but you can add one using the widget Contact Form with a little trick. We will find out shortly in this article.
Since the widget Contact Form is only available on Elementor Pro, you need to upgrade your Elementor to the pro version.
How to create a registration form in Elementor
Elementor does not have a default widget to add a registration form. But, as mentioned before, you can create a user registration page using the Form widget with a little trick. There are two components you will need:
- The user registration form itself
- A PHP Script that allows you to add a new user
Before we start, let's assume that you've been using Elementor for some time and have already created a form using the Form widget.
Once you're ready, follow the steps below to start creating a signup page in Elementor.
Step 1: Create the registration form
First, create a new page and edit it with Elementor. Of course, you can also edit an existing page. Under the Elementor editor, add the Form widget to the edit box by dragging it from the left panel.
Go to the left panel to customize the form. The first block of options you need to open is the block Form Fields under the tab Content. The registration form that we are going to create will consist of 5 fields as follows:
| champ | Field type | the shipping label |
| first name | texts | First name |
| name | texts | Name |
| user (required) | texts | User |
| E-mail (required) | ||
| Password (required) | mot de passe | Password |
Form name: Create a new user
One crucial thing to note. Make sure to use the exact same field labels as in the table above including upper and lower case as they will be used as variables on the PHP script that we will be using.
Read also: How to create a cookie consent popup with Elementor
Also, be sure to give your form a name. Again, make sure to use the exact same name (including upper and lower case) that we are using in this example ("Create a new user" in this case).
Here is the example of the form we created.
Once definition completed form fields, open the block Action After Submit. Since you want to create a user registration form, you can set the action to Redirect.
In the block Redirect, Paste the URL that you want your users to be directed to after creating a new user. For example, you can redirect them to your website's login page.
Open the block Additional Options and activate the option Custom Messages. You can replace the success message with something like “User has been created”.
Your form is now ready. You can publish the page after you have finished editing it.
Step 2: Add a new function to add a new user
Here is the PHP script that allows you to add a new user to your WordPress website.
add_action ('elementor_pro / forms / new_record', 'blogpascher_creer_un_nouvel_user', 10, 2); function blogpascher_creer_un_new_user ($ record, $ ajax_handler) {$ form_name = $ record-> get_form_settings ('form_name'); // Check that the form is "create a new user" otherwise - stop and return; if ('Create a new user'! == $ form_name) {return; } $ form_data = $ record-> get_formatted_data (); $ user = $ form_data ['User']; // Get the value entered as "Username" $ password = $ form_data ['Password']; // Get the value entered as "Password" $ email = $ form_data ['Email']; // Get the value entered as "Email" $ user = wp_create_user ($ username, $ password, $ email); // Create a new user, if successful return the user_id if (is_wp_error ($ user)) {// if there was an error creating a new user $ ajax_handler-> add_error_message ("Impossible create a new user: ". $ user-> get_error_message ()); // add the message $ ajax_handler-> is_success = false; return;} $ first_name = $ form_data [" First name "]; //Get the value entered as "First name"
$ last_name = $ form_data ["Name"]; //Get the value entered as "Nom"
wp_update_user (array ("ID" => $ user, "first_name" => $ first_name, "last_name" => $ last_name)); // Update the user with the first and last name}
You can place the above code in the file functions.php of your theme. To do this, go to Appearance -> Theme editor on your WordPress dashboard. Click on the file functions.php on the right panel to edit it and paste the PHP script at the end of the file functions.php.
Here is a preview.
Click on the button Update file in the editor to update the file functions.php.
Potential errors
Once your users have successfully created a new account, there is a good chance that they will not be able to access the WordPress dashboard even if they have successfully logged in. If you experience this problem, try changing the user's role to Contributor or a higher role (Author or Editor).
Read also: How to export and import Elementor models
To do so, go to Accounts-> All accounts. Hover your mouse over a user whose role you want to change and click on the link Edit.
Scroll down to the option Role and select a new role from the drop-down menu. Click on the button Update user at the bottom to apply the new modification.
If you want each newly registered user to have a Contributor role, you can set it (the Contributor role) as the default role.
See also: How to create a login page with Elementor
To do so, go to Settings-> General. Scroll down to the option Default role for any new account and select a default role from the drop-down menu. Don't forget to click on the button Save Changes at the bottom to apply the new modification.
If you continue to want new users to have a subscriber role and want to allow them access to the WordPress dashboard, you can try to resolve the issue by temporarily disabling active plugins and re-enabling them one by one. until you see which plugin is causing the problem.
Get Elementor Pro Now!
Conclusion
Here is ! That's it for this article which shows you how to create a signup page in Elementor. If you have any concerns on how to get there flet us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
