Building a Multi-step Registration Form for WordPress

The default login, registration and password reset forms included in WordPress often do not conform to the design and branding of the site.

Earlier when the WordPress was a blogging engine, this was fine. WordPress has since evolved into the content management system (CMS), leading to an ever increasing demand for custom login, registration and password reset forms.

Don't Miss: 7 WordPress Admin Themes to Rebrand the Backend

In this post, we will learn how to build a WordPress multi-step registration form using a plugin named ProfilePress.

Below is the design of the multi-step registration form which we will have to build by the end of this post.

Here you can see the live demo of the form in a WordPress powered site.

Without any other fuss, let’s get back to the process of building a multi-step registration form.

Diving into Coding

In the demo above, the Social Profiles section contains a Facebook, Twitter and Google+ field; which are not present in the default WordPress user profile. As a result, we need to create contact methods for the above social profile fields in order for WordPress to save the data entered into the fields against the profile of registered users.

Adding Contact Fields using the ‘function.php’ File

There are many numbers of online tutorials that describe how to add contact information fields to a WordPress user profile, including:

• Customize WordPress User Profile’s Contact Info


• Add Extra Contact Methods to User Profiles


• Extend the User Contact Info in WordPress

All these above tutorials explains that if the following code is pasted into your theme’s functions.php file, it will add a Facebook, Twitter and Google+ field to the contact information section in a WordPress user profile.

Adding Contact Fields Using the ProfilePress Plugin

Using the plugin, contact information fields can be added by filling a key/label form. This is located in the Contact information settings page, where key is a unique name used internally by the WordPress to recognize the field and label the field description that is displayed to the users.

For more information about this, you can take a look at Adding the contact into to WordPress profile with the ProfilePress plugin.

Navigate to your WordPress profile to see the Facebook, Twitter and Google+ field displayed.

Having added the Facebook, Twitter and Google+ contact info fields to your WordPress profile, you will be then needed to build the multi-step form via the mélange feature.

Building the Multi-Step Form

I am not at all going to discuss through the process of how the multi-step form is built with HTML, CSS and JavaScript. Feel free to poke around the world the source code to learn about that. Rather, here we will learn how to convert the form into an actual functioning WordPress registration form.

The mélange feature of this plugin is capable of converting just about any login, registration password reset and can even edit the profile form template so that a working WordPress which is equivalent is available.

With the plugin installed, click the mélange menu as shown in the image below and then the Add New button to start the building process.

A form will be presented to you. Fill the fields as follows:

Enter a name for the form in the Name field. Let’s call its Stride Multistep Signup Form.

Copy the HTML code of the multi-step form to the mélange design TinyMCE editor and then replace the input fields with their respective shortcode equivalents like so:

We could have left the fields in the form the way they were without replacing them with their ProfilePress shortcode equivalent. However, using the shortcodes takes care of adding the correct name attribute for the input fields.

If you can determine the name attribute for the fields for an instance, for the username fields; the name attribute is reg_username, you might as well do away with using their shortcodes.

Since ProfilePress doesn’t include a text area for inserting the JavaScript, the JavaScript code will go into the mélange design field immediately after the HTML code of the form.

Note: the novalidate attribute was added to the <form> tag to prevent the annoying “An invalid form control with name = is not focusable” error in the blink based browsers (chrome and opera) that prevents the form from being submitted.

Code Explanation

Firstly we included a deferred call to the jQuery Easing Library. This was done to add an easing effect to the form that is followed by the JavaScript codes that actually handles the multi stepping.

Paste the CSS of the multi-step form into the CSS Stylesheet code area.

Note: Errors generated by the registration forms are powered by the ProfilePress which are wrapped in a div with class name profilepress-reg-status; hence the class is in the style sheet.

Enter the code below in the Registration Success field to display the customized notice on the successful user registration.

Save the form and navigate back to the mélange catalog.

Copy the generated shortcode and paste it to a WordPress page of your choosing. Save the page and then preview to see the multi-step registration in action.

Summary

In this post, we learned how to build a WordPress multi-step registration form using a plugin ProfilePress. This plugin handles the server-side PHP validation, authentication and authorization of custom login, registration, password reset and front-end edit profile forms.