Multi-Step Forms
Multi-Step Forms lets you split long forms making them easier to complete & boosting conversion rates.
Customize each step of the form to match your website’s design and ensure a smooth flow for users.
Perfect for registrations, applications, surveys, conversational and any form that requires detailed information.
Features
Break down long forms into smaller steps, making them less overwhelming.
Stylized progress indicators to let users see how far they’ve come.
Show the progression in steps, a progress bar even with simple text titles.
Easily customize the colors, number of steps and the fields within each step.
Ideal for registrations, applications, surveys even conversational forms.
Optimized for smooth navigation on both desktop and mobile devices.
Demo
[steps type="steps" bar_color="#1e90ff" bg_color="#ddd" text_color="#fff"]
[step title="General Information" prev="Previous" next="Next"]
[row]
[column]
[text name="text_475" value="" label="Name" desc="Please, enter your name"]
[/column]
[column]
[email name="email_475" value="" label="Email" desc="Please, enter your email"]
[/column]
[/row]
[/step]
[step title="Required Field" prev="Previous" next="Next"]
[text* name="text_924" value="" label="Required text field" desc="A required field prevents you to move to next step until fill it. Just enter any text to continue."]
[/step]
[step title="Final Step" prev="Previous" next="Submit"]
[radio* name="radio_728" value="" label="Do you like BBForms?" inline="no"]
Yes
No
[/radio]
[radio* name="radio_616" value="" label="Favorite Spanish tortilla" inline="no"]
With onion
Without onion
[/radio]
[/step]
[/steps]
[steps type="progress" bar_color="#1e90ff" bg_color="#ddd" text_color="#fff"]
[step title="General Information" prev="Back" next="Continue" align="right"]
[row]
[column]
[text name="text_476" value="" label="Name" desc="Please, enter your name"]
[/column]
[column]
[email name="email_476" value="" label="Email" desc="Please, enter your email"]
[/column]
[/row]
[/step]
[step title="Informational Step" prev="Back" next="Continue" align="right"]
You can add an informational step without fields.
This can be used to inform the user about something specific, for example, Did you noticed that buttons are [b]aligned to the right[/b]?
In addition, for this multi-step form we setup the previous and next buttons with the labels "Back" and "Continue".
[/step]
[step title="Final Step" prev="Back" next="Finish" align="right"]
[select* name="select_161" value="" label="Do you like BBForms?" placeholder="Please, choose an option"]
Yes
No
[/select]
[/step]
[/steps]
[steps type="none"]
[step title="Step 1" prev="Previous" next="Next" align="left"]
Setting the steps style to name will display a multi-step form without a visual progress, just the titles and the next and previous buttons.
[/step]
[step title="Step 2" prev="Previous" next="Next" align="left"]
The workflow will be the same than other multi-step forms, you can add multiple fields per step and the required ones will not let the user to continue until fill them.
[row]
[column]
[text name="text_478" value="" label="Name" desc="Please, enter your name"]
[/column]
[column]
[email* name="email_478" value="" label="Email" desc="Please, enter your email"]
[/column]
[/row]
[/step]
[step title="Step 3" prev="Previous" next="Next" align="left"]
In addition, for this demo, we set the buttons to get aligned to the left.
[select* name="select_165" value="" label="Did you got amazed?" placeholder="Please, choose an option"]
Yes
No
[/select]
[/step]
[/steps]
[steps type="none" style="background:#444;padding:10em;color:#eee;"]
[step title="" prev="" next="" align="center"]
[center][size="22"]Whats your name?[/size][/center]
[text* name="name" value=""]
[center style="opacity: 0.8;"][size="12"]This form does not have a next button, so press enter to continue[/size][/center]
[/step]
[step title="" prev="Prev" next="Next" align="center"]
[center][size="22"]What's your favorite food?[/size][/center]
[text* name="food" value=""]
[center style="opacity: 0.8;"][size="12"]Press enter to continue or click the following buttons[/size][/center]
[/step]
[step title="" prev="" next="" align="center"]
[center][size="22"]Please, enter your email[/size][/center]
[email* name="email" value=""]
[center style="opacity: 0.8;"][size="12"]Press enter to submit[/size][/center]
[/step]
[/steps]