Search for a plugin or theme

How to Create a User Registration Form Using Elementor

How to Create a User Registration Form Using Elementor

Would you like to use the Elementor to enable users to register to your WordPress website? If so, you came to the right place.

In this article, you will learn how to create a user registration form with Elementor.

Although that Elementor does not have a default widget to let visitors sign up, we can still achieve it in two different ways, by using a PHP function or by using an add-on.

Before starting the process, we will first need to enable the user registration option of WordPress.

Enable User Registration In WordPress

The first step is to open our website for registrations and allow our website visitors to sign up.

Enable that by navigating to Settings -> General and check the Anyone can register.

The new user default role is set to ‘subscriber’ and I recommend you to leave it that way.

To read more about user roles and the differences between user roles click here.

Enable user registration in WordPress

Once enabling the membership option, scroll to the bottom of the page, save the changes, and choose one of the ways below to create the signup form.

User Registration Form Without an Add-on

With this method, we will use the default Elementor Pro form widget to build the form and a PHP function to add the new user to the database.

It may sound complicated but it really isn’t. Just follow the instructions exactly as explained and it will work perfectly fine.

Create the form

Drag the form widget from the left sidebar to the desired section.

Elementor default form widget

Then, name the form ‘User Registration Form’ under the Form Fields tab.

Name the user sign up form

Modify the form to contain five (5) different fields:

  • First Name
  • Last Name
  • Username (Required)
  • Email (Required)
  • Password (Required)

Creating the registration form

Because the PHP function contains variables and it is all case-sensitive, the trick for the function to work is to name the form and the field’s label exactly as described in the table below.

Any small mistake will prevent the function from working properly or working at all.

Field Type Label Required
First Name Text First Name No
Last Name Text Last Name No
Username Text Username Yes
Email Email Email Yes
Password Password Password Yes

The table above is showing you to set the email field an email option, label it as Email (uppercase E), and make it required. It should look like that:

Example how to set up the form fields

Verify that all the other fields are formatted exactly as shown in the table above and move forward to paste the PHP function.

Use the PHP function

Once created the signup form and saved the changes, move to the next step and use the PHP function that will make it work.

Paste the function below inside the functions.php file of your child theme. If you don’t already have one, read our ‘how to create a child theme‘ article first.

From inside your WordPress dashboard, navigate to Appearance -> Theme Editor and click on the functions.php file from the right sidebar.

Scroll to the bottom of the file, paste the function below and save the changes.

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

function p4wp_elementor_reg_form($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 ('User Registration Form' !== $form_name) {
        return;
    }
    $form_data = $record->get_formatted_data();
    $username=$form_data['Username']; //Get tne value of the input with the label "User Name"
    $password = $form_data['Password']; //Get tne value of the input with the label "Password"
    $email=$form_data['Email'];  //Get tne 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 tne value of the input with the label "First Name"
    $last_name=$form_data["Last Name"]; //Get tne 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

    /* Automatically log in the user and redirect the user to the home page */
    $creds= array( // credientials for newley created user
        "user_login"=>$username,
        "user_password"=>$password,
        "remember"=>true
    );
    $signon = wp_signon($creds); //sign in the new user
    if ($signon)
        $ajax_handler->add_response_data( 'redirect_url', get_home_url() ); // optinal - if sign on succsfully - redierct the user to the home page
}

 

Paste function in the functions php file

The function above will log-in and redirect the user to the homepage after submitting the form, if you would like to redirect the user to a different page, replace the get_home_url() in the last row with get_permalink(PAGE-ID-GOES-HERE) (make sure to enter the ID of the desired page).

Test the signup form

After the form and the PHP function are ready, test and make sure new users can register.

Visit your website as a logged-out user. You can use a different browser or an incognito window. Fill in the fields and submit the form.

Elementor widget libraries

Testing the signup form

If everything worked as expected, the new user should be logged in and redirected to the page specified in the function (the default is the homepage).

As an admin, navigate to the Users tab and make sure the new user was signed up and added successfully.

New user was added

Hopefully, you find this method simple and easy to follow. If not, don’t worry, down below you will learn how to create a similar form in a simpler way by using an Elementor add-on.

Create a Signup Form With an Addon

Although you should be able to easily create the form with a PHP function, some may find it intimidating and would like to achieve it in an easier way.

In this section, you will learn how to create a user registration form using an add-on plugin.

There are tons of widget libraries that will add a signup option to Elementor and in this article, we will use the Essential Addons plugin because it’s simple and free.

Install Essential Addons for Elementor

The first step is to install the Essential Addons plugin.

Navigate to Plugins -> Add new, search, and install the Essential Addons for Elementor plugin.

Install the Essential Addons for Elementor plugin

After activating the plugin, a new set of awesome widgets were added to your widgets library.

Register form widget

Launch the Elementor editor screen of the page you would like to display the sign-up form and scroll to the bottom of the widgets sidebar.

Browse between all the additional widgets that were added under the Essential Addons tab. The ones with the EA tags are free and the ones with the lock are part of the pro version.

Essential addons added widgets

If you see any pro version that you would like to try, you can buy the pro version from the official website for full price, or from us for only $4.99 (the exact same plugin).

The signup form widget is included in the free version. Just drag it to your desired section.

EA Signup widget

The login widget will display a sign in form, to change it to a registration form, expand the ‘general tab, and change the ‘default form type to Registration.

Change the default form type

The form will display three different fields: username, email, and password.

To add additional fields, expand the Register Form Fields tab, and add your desired fields such as first name, last name, and website.

Register form fields

Another interesting setting about this widget is the Register Form Options tab. Under this tab, you have the option to send the new subscriber an email, automatically log in, or redirect them to another page after submitting the form.

Register form options

There are few more cool options such as agreeing to the terms and conditions or customize the validation messages.

All form options

When finished building the form, move to the style and advanced tabs to customize the look of it similarly to any other default Elementor widget.

After satisfied with the result and the appearance, use an incognito window to visit your website register using this new form.

If it was set up correctly, the new user was added successfully and can be found on the users’ screen.

Conclusion

This article taught you how to create a registration form using Elementor in two different ways.

The first way is by using a PHP function and the second way is by using an add-on.

Leave us a comment down below and let us know which one of the methods you used.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply