How to Create a Registration Form in Elementor (No Add-on)

The pro version of Elementor has a widget called Form which you can use to create a wide range of form types. Including a registration form. In this post, I will show you how create a user registration form in Elementor using the Form widget. Without involving an add-on.

Although the native Form widget of Elementor supports several form actions, add a new user is not on the list. To accept a new user, you need to add a custom function, which I will provide below.

FYI. The Form widget of Elementor is only available on the pro version. So, before getting started, make sure you already have the pro version installed on your website.

Before You Start

As you may already know, WordPress has a native user registration feature. This feature is disabled by default. To enable it, you can go to the general settings page and tick the Anyone can register option. After enabling the option, you will see a Register link on your login page. Clicking the link will open the registration form.

Here is the default look of the WordPress native registration form.

As you can see, there are only two fields on the form. Plus, its design might doesn’t fit the design concept of your website.

When creating a registration form with the Form widget of Elementor, you have a full control over the design. From color, typography, and more.

Set the User Role

By default, every new user registered to a WordPress website has the role of Subscriber. This user role has extremely limited access on your website. It has even no access to the WordPress dashboard.

You need to change this default user role on your WordPress website before you can create a registration form with Elementor. Otherwise, new users won’t be able to login even if they have successfully registered.

To change the default user role, go to the WordPress general settings page (Settings -> General). Scroll down to the New User Default Role section and select Contributor or the higher roles (Author, Editor, or Administrator).

Just be careful setting the default user role. Never set the default role to Administrator as it is the higher user role level in WordPress. Users with an Administrator role can do anything on your WordPress. For regular users with standard access, Contributor is enough.

Here are the things each user role can do:

	Administrator	Editor	Author	Contributor
Read posts	✅	✅	✅	✅
Post a comment	✅	✅	✅	✅
Create drafts	✅	✅	✅	✅
Delete drafts	✅	✅	✅	✅
Submit drafts for review	✅	✅	✅	✅
Publish own post	✅	✅	✅	❌
Delete own published posts	✅	✅	✅	❌
Upload media	✅	✅	✅	❌
Delete own media	✅	✅	✅	❌
Create pages	✅	✅	❌	❌
Edit posts	✅	✅	❌	❌
Edit media	✅	✅	❌	❌
Edit categories	✅	✅	❌	❌
Edit tags	✅	✅	❌	❌
Edit comments	✅	✅	❌	❌
Moderate comments	✅	✅	❌	❌
Export/import content	✅	❌	❌	❌
Manage users	✅	❌	❌	❌
Manage themes	✅	❌	❌	❌
Manage plugins	✅	❌	❌	❌

Start Creating the Registration Form

Once you are done with the steps above, you can start to create the registration form with the Form widget of Elementor.

Start by creating a new page and edit it with Elementor. Or course, you can also edit an existing page. Add the Form widget to the canvas area. Before making any setting, give your form a name. In this post, I will name the form Create New User.

Proceed to adding new fields and remove the uneeded one. In this example, I will add five fields to the form as follows:

Field	Field Type	Field Label
First Name	Text	First Name
Last Name	Text	Last Name
Username (required)	Text	Username
Email (required)	Email	Email
Password (required)	Password	Password

Here is the form I created on my page:

There are three required fields on the registration form I create in this example: username, email, and password. So, make sure to enable the Required option when setting these fields.

Note: To avoid error, you can use precisely the same form name and field labels as they will be used as the variable values on the code snippet I will provide shortly.

Set the Form Action

Once done setting the form fields, the next step is to set the form action. To do so, open the Action After Submit block on the Form widget settings panel. Remove the default actions and set to Redirect.

A new Redirect settings block will show up on the settings panel after you set the form action to Redirect. On this block, you can add a URL where users will be directed to after they successfully registered. If you want to redirect them to the login page, you can simply paste the login page of your website.

Add the Code Snippet to Accept User Registration

You are almost done.

In order to make the form you have just created accept the user registration, you can add the following code snippet.

add_action( 'elementor_pro/forms/new_record',  'utilizewp_elementor_form_create_new_user' , 10, 2 );

function utilizewp_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 add the above snippet to the functions.php file of your theme. To do so, go to Appearance -> Theme File Editor on your WordPress dashboard and select the functions.php file on the right panel to edit it. A little note. If you use a block theme, you can find Theme File Editor under the Tools menu.

Paste the above snippet right after the last line of the functions.php content. Make sure to click the Update File button to apply the snippet.

What Does the Above Code Do?

First, it adds a new function to create a new user on your website. It will then check the form name. If the form name matches, it will proceed to checking the required form fields. In this case, the form field label is used as the parameter.

If the labels of the required fields match, a new user will be created. If they don’t, the error message will be displayed.

Upon user creation, the code also read the first name as well as the last name fields and add them to the user profile.

Summary

The native Form widget of Elementor is super useful to create a form on your website. It eliminates the need of installing a form builder plugin when you need to create a form on your website. You can use the widget to create a wide range of form types thanks to its extensive form action supports.

Sadly, there is no form action to add a new user by default.

You need to add custom function if you want to use the native Form widget of Elementor to create a registration form without involving a plugin, as I have just elaborated above.

Don’t have Elementor Pro yet? Get it here 👈🏻