Multi-Step Forms

 

Multi-Step Forms Add-on lets you to easily transform Profile Builder Registration and Edit-Profile forms into Multi-Page forms on your website.

Install the Multi-Step Forms Add-on

Multi-Step Forms is an Advanced add-on, available with a Profile Builder Hobbyist or Pro license only.

After purchasing the add-on, the .zip file will be available for download under your account page by clicking the “Add-ons Download” button.

Profile Builder Pro - Account Page - Download Add-on

Once downloaded, you can install the add-on as a normal WordPress plugin, by uploading the .zip file in your WordPress Admin -> Plugins -> Add New -> Upload Plugin.

Alternatively, you can install the Multi-Step Forms add-on by extracting the folder found inside the archive and uploading the entire folder via FTP to your /wp-content/plugins folder found inside your WordPress install.

Note – For Multi-Step Forms add-on to work as expected, you’ll also need to have the following plugin installed and activated on your site:

Multi-Step Forms Options

After you install and activate the add-on go to Profile Builder -> Manage Fields and you will have access to the following options:

Add Form Break Point

To Add a Form Break Point go to Profile Builder -> Manage Fields -> Hover over a field and you will see the “+” sign that you will need to click in order to add a Break Point.

Profile Builder Pro - Multi-Step Forms - Add Form Break Point

After you add the Form Break Point click on the “Update Multi Step” button. A successful notification will be displayed after you click on the “Update Multi Step” button.

Profile Builder Pro - Multi-Step Forms - Update Multi-Step

Form Break Point in Profile Builder Registration Form

This is how the Registration form looks like in Front End.

User Side – Step 1

In the first Step the user needs to fill in the following fields: Username, First Name, Last Name, Nickname, as we defined the Form Break Point. After we finish filling in the fields the user needs to click on “Next”.

The “Previous” button is disabled because this is the first step.

Profile Builder Pro - Multi-Step Forms - Add Form Break Point - Registration Form - User Side - Step 1

User Side – Step 2

After we click on “Next” the form will be processed and a spinner will be displayed.

Profile Builder Pro - Multi-Step Forms - Add Form Break Point - Registration Form - User Side - Spinner

If the user didn’t fill in all the required fields he will not be able to go to the next step and an error will be displayed.

Profile Builder Pro - Multi-Step Forms - Add Form Break Point - Registration Form - User Side - Required Field

Clicking on the “Next” button the user will be taken to the next step where he will be able to fill in all other fields and also to Register. The “Next” button is disabled because this is the last step.

Profile Builder Pro - Multi-Step Forms - Add Form Break Point - Registration Form - User Side - Step 2

Admin Side

As Admin you can register users in Front End if you go to the Registration form.

Profile Builder Pro - Multi-Step Forms - Add Form Break Point - Registration Form - Admin Side

Form Break Point in Profile Builder Edit Profile Form

This is how the Edit Profile form looks like in Front End.

User Side – Step 1

After Login users will be able to edit their profile if they access the Edit Profile Form. The “Previous” button is disabled because this is the first step.

User Side – Step 2

Users can update their profile in Step 1 and also in Step 2. If they have empty required fields an error will be displayed. The “Next” button is disabled because this is the last step.

Profile Builder Pro - Multi-Step Forms - Add Form Break Point - Edit Profile Form - User Side - Step 2

Admin Side

As Admin you can Edit User Profiles in Front End if you go to the Edit Profile form.

You will see a Select drop-down field called “User to edit” that you can use to select any user and edit their profile.

Profile Builder Pro - Multi-Step Forms - Add Form Break Point - Edit Profile Form - Admin Side

Remove Form Break Point

To remove a Form Break Point go to Profile Builder -> Manage Fields and click on the “-” sign.

After you remove the Form Break Point click on the “Update Multi Step” button. A successful notification will be displayed after you click on the “Update Multi Step” button.

Profile Builder Pro - Multi-Step Forms - Remove Form Break Point

Enable or Disable Multi-Step Forms

To enable or disable Multi-Step Forms on Profile Builder Registration and Edit Profile Forms you will need to go to Profile Builder -> Manage Fields -> Multi-Step Forms -> Enable on.

Profile Builder Pro - Multi-Step Forms - Enable on

After you check an option click on the “Update Multi-Step” button.

Multiple Registration and Edit Profile Forms

Inside Profile Builder Pro we have 2 modules called Multiple Registration Forms and Multiple Edit Profile Forms that are used to create Custom Registration and Edit Profile Forms with different fields for different user roles.

Inside the settings page we can choose if we want to enable Multi-Step Forms on our Custom Registration or Edit Profile Forms. You can enable or disable Multi-Step Forms for each individual form. It only works with Profile Builder Pro.

Multiple Registration Form Settings

Publish the form before adding Break Points. To enable Multi-Step Forms you must add Break Points.

Profile Builder Pro - Multi-Step Forms - Add Form Break Point - Multiple Registration Forms

Multiple Edit Profile Form Settings

Publish the form before adding Break Points. To enable Multi-Step Forms you must add Break Points.

Profile Builder Pro - Multi-Step Forms - Add Form Break Point - Multiple Edit Profile Forms

Pagination and Tabs

To enable Pagination and Tabs, in Multi-Step Forms, on Profile Builder Registration and Edit Profile Forms you will need to go to Profile Builder -> Manage Fields -> Multi-Step Forms -> Pagination and Tabs.

Profile Builder Pro - Multi-Step Forms - Pagination and Tabs

Checking the “Enable Tabs” option lets you set the steps titles. After you check an option click on the “Update Multi-Step” button.

Front End User Side

This how the Registration Form looks like in Front End when we enable Pagination and Tabs. “Step 2” and “Page 2” buttons are disabled because the user needs first to fill in the fields from “Step 1”.

The “Previous” button is disabled because this is the first step.

Profile Builder Pro - Multi-Step Forms - Pagination and Tabs - Registration Form - User Side - Step 1

This how the Edit Profile Form looks like in Front End when we enable Pagination and Tabs. “Step 1”, “Page 1” and “Previous” buttons are disabled because this is the first step.

Profile Builder Pro - Multi-Step Forms - Pagination and Tabs - Edit Profile Form - User Side - Step 1

Front End Admin Side

As Admin you can register users in Front End if you go to the Registration form.

Profile Builder Pro - Multi-Step Forms - Pagination and Tabs - Registration Form - Admin Side - Step 1

As Admin you can Edit User Profiles in Front End if you go to the Edit Profile form.

You will see a Select drop-down field called “User to edit” that you can use to select any user and edit their profile.

Profile Builder Pro - Multi-Step Forms - Pagination and Tabs - Edit Profile Form - Admin Side - Step 1

How To

Change the Previous and Next Strings

You will need to use some custom code in order to modify the Previous and Next strings:

1. Create an empty plugin like this: https://gist.github.com/sareiodata/76f701e01db6685829db

2. Add the following code to the end of it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
 * Filter to modify the Next string inside the Multi-Step Forms add-on
 */
 
add_filter('wppb_msf_next_button_label','wppbc_modify_next_string_inside_msf');
function wppbc_modify_next_string_inside_msf ($content){
    return 'My custom text'; // Modify 'My custom text' with your own text
}
 
/*
 * Filter to modify the Previous string inside the Multi-Step Forms add-on
 */
 
add_filter('wppb_msf_previous_button_label','wppbc_modify_previous_string_inside_msf');
function wppbc_modify_previous_string_inside_msf ($content){
    return 'My custom text'; // Modify 'My custom text' with your own text
}

3. Install this plugin via FTP (copy it inside wp-content/plugins) or create a zip archive with it and install it via the WordPress plugin upload functionality

Hide the “Previous” and “Next” Buttons

You will need to use some .css code in order to hide the “Previous” button displayed in the first step and the “Next” button displayed in the last step:

1. Go to your Dashboard -> Appearance -> Customize -> Additional CSS

2. Add the following .css code:

1
2
3
4
.wppb-msf-button.wppb-msf-prev:disabled,
.wppb-msf-button.wppb-msf-next:disabled {
    visibility: hidden;
}

3. Click on “Save & Publish” to save the changes

Multi-Step Forms is an Advanced add-on, available only with a Profile Builder Hobbyist or Pro license.

Get Multi-Step Forms – Profile Builder Add-on