Search

How to Create a User Registration Page in Elementor (Without Add-on)

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:

FieldField TypeLabel
First NameTextFirst Name
Last NameTextLast Name
Username (required)TextUsername
Email (required)EmailEmail
Password (required)PasswordPassword

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

25 thoughts on “How to Create a User Registration Page in Elementor (Without Add-on)”

  1. 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

    Reply
  2. 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

    Reply
    • 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.

      Reply
  3. 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

    Reply
  4. 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/

    Reply
    • 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.

      Reply
  5. 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

    Reply
  6. 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'];) to sanitize_text_field( $username=$form_data['Username'] );. Or for an email field there is a special function sanitize_email, so the code would become sanitize_email( $form_data['Email'] );

    Reply

Leave a Comment

Haven’t used Elementor Pro yet?