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

Last updated on
Mar 12, 2024

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.

The look of default registration form of WordPress.

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

Setting user role in WordPress.

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:

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

Giving form a name in Elementor.

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

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

Here is the form I created on my page:

The fields need to be added to the registration form.

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.

The option to set a required field in Elementor.

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.

Setting the form action 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.

Set the URL where your newly registered users to be redirected to.

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.

Selecting the functions.php file to edit it.

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.

Adding a new custom function to the functions.php file of WordPress.

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.

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

Aliko Sunawang

Aliko is a professional blogger and web creator. He has been blogging with WordPress since 2012. In his spare time, he loves going out to take some photos.

Work smarter with the right stack.