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 WP Pagebuilders.

3 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

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!