Table of Contents
Multi-Step Forms Add-on lets you to easily transform Profile Builder Registration and Edit-Profile forms into Multi-Page forms on your website.
Multi-Step Forms is an Advanced add-on, available with a Profile Builder Basic, Pro, or Agency license only.
After purchasing a premium version of Profile Builder, you can check the following guide on how to install Profile Builder.
For the Multi-Step Forms add-on to work as expected, you’ll also need to have the following plugin installed and activated on your site:
After you install and activate the add-on go to Profile Builder -> Manage Fields and you will have access to the following options:
To Add a Form Break Point go to Profile Builder -> Form 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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
/*
* 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
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:
.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.
Combine the power of Profile Builder with Paid Member Subscriptions to set up user registration, memberships, and recurring revenue.
Get 25% off with the bundle