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.

Activating the Multi-Step Forms Add-on

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

After purchasing a premium version of Profile Builder, you can check the following guide on how to install Profile Builder.

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 – By clicking on the “+” sign you can transform Profile Builder Registration and Edit-Profile Forms into Multi-Step forms
• Remove Form Break Point – By clicking on the “-” sign you can remove the Break Point
• Enable or Disable Multi-Step Forms – Choose to enable or disable Multi-Step Forms only on specific forms
• Pagination and Tabs – Add Pagination or/and Tabs on your Multi-Step Forms

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.

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.

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.

User Side – Step 2

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

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.

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.

Admin Side

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

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.

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.

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.

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.

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.

Multiple Edit Profile Form Settings

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

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.

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

This is 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.

Front End Admin Side

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

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.

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 Basic or Pro license.

Get Multi-Step Forms – Profile Builder Add-on

• Share:
• Facebook
• Twitter
• Google

Profile Builder Pro

Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.

Unlock PRO Features

Or download FREE version