Multi-step forms are a great way to reduce the size the form takes on a page. WS Form handles multi-step forms with tabs. Fortunately, tabs are easy to add to any form. They’re also easy to style and include several specialized options. Button navigation lets the user intuitively move from one tab to another. In this article, we’ll see how to create multi-step forms in WordPress with WS Form.
WS Form Tabs
WS Form includes a tab feature that makes it easy to create multi-step forms. By default, forms have one tab. The WS From editor includes a Tab tool that makes it easy to add them.
Create a Form
First, we’ll need a form to add our tabs to. In the WordPress dashboard, go to WS Form > Add New and choose your template from the list of options. I’m using the default Contact Us form template. It doesn’t matter which template you use. Tabs can be added to any form.
I want to divide the information into different tabs and add new information. My tabs will include:
- Contact info
- Mailing address
- Social media
- Message with consent
Adding Tabs
You’ll find the tab tool at the top of the form. Click the plus icon to add a new tab. You can change the name of the tab and add content to each tab. Adjust the tabs in the Tab Settings by clicking the gear icon above the form on the right.
This opens the sidebar where you can change the tab’s label. You can also add the tab to your sections, import, export, clone, or delete the tab. Cloning the tab makes a copy that includes all the settings of the tab you cloned. You can then delete the sections you don’t want on each tab. This is a great way to convert a large form into tabs.
Click the Plus icon next to the first tab to add a new tab. This opens more options in the sidebar. It includes a Basic tab with the label field and options to show or hide the label. It also includes a tab for Advanced settings.
Advanced settings include Classes for CSS and Restrictions to specific who can see the tab. Users include any, logged in, logged out, or specific roles or capabilities.
Add the name in the label field, choose to show the label, and save the tab.
Click on the next tab and build the form as normal. This part of the form will only display when the user clicks on the tab.
Select the Tab Settings, provide a label, show the label, and save the settings. Continue the process for every tab you want to add.
I’ve now added the four tabs with different content on each tab.
Rearrange them in any order by dragging and dropping them where you want them.
On the front end, users will see the tabs at the top of the form where they can navigate through the form. You can also add navigation buttons.
Tab Navigation
You can also add Previous and Next buttons to make navigation more understandable. Select the Toolbox icon at the top of the screen. In the Fields tab, scroll down to Buttons. Drag the Previous and Next buttons to the bottom of the form.
You’ll need to repeat this process for each tab. Of course, the first and last tabs will only need a single button. The buttons will automatically navigate through the tabs, so you won’t have to adjust them.
Once you’ve dropped the buttons onto the form you can adjust their settings. Click the settings icon on the button to open its sidebar. Basic settings include Label, Help Text, Scroll options, and Accessibility options.
The Advanced tab includes settings for Style, Classes, Restrictions, Custom Attributes, and Breakpoints.
Navigation buttons can be stacked or placed next to each other. To place them next to each other, drop both buttons on the form. Next, grab the right edge of the Previous button and drag it to resize it.
Then, resize the Next button. Once you get the Next button to the correct size, it will jump into place beside the Previous button. Of course, you can adjust them to any size and location you want.
Here’s how the buttons look on the front end. They take the user through the tabs when clicked.
Remember Last Tab Clicked
It’s possible to allow users to come back to complete the form at a later date. WS Form can remember the last tab the user clicked on. To set this up, select the Form Settings at the top of the screen. In the Basic tab, scroll down to Tabs. Click Remember Last Tab Clicked and save your settings. This adds a cookie so the user’s browser will know where to start the next time they open your form.
Tab Validation
Tab Validation prevents users from navigating to the next tab if they haven’t completed the required fields of the current tab. To set this up, select the Form Settings at the top of the screen. In the Basic tab, scroll down to Tabs and check Tab Validation. Save your settings. Now, the user cannot go to the next tab until the current tab is complete.
Tab Styling
WS Form includes several premade CSS Classes to style the tabs. The Classes can be used independently or in combination. Classes include:
- wsf-steps – displays the tabs as numeric steps. Use in the Tab Wrapper
- wsf-steps-checks – shows checkmarks for the completed steps. Use in the Tab Wrapper
- wsf-steps-success – changes the steps to green. Use in the Tab Wrapper
- wsf-vertical – displays the tabs vertically. Use in the Form Wrapper
To add the Classes, select the Form Settings icon at the top of the screen. Choose the Styling tab in the right sidebar settings. Scroll to the bottom to see a section called Classes. Add your Classes to the Form Wrapper or Tabs Wrapper. I’ve described which goes into each field in the list above.
For my example, I’ve added all three of the Tabs Wrapper Classes.
Here’s how it looks on the front end. The tabs have been converted to steps with checkmarks. The steps turn green as the user progresses through them.
I’ve now added the vertical Class. I kept the other three Classes, so they’ll work together.
The result displays the tabs in a stack and includes the green checkmarks.
This example shows the vertical Class by itself. The tabs have been moved to the left and now stack vertically. This gives you several design options.
Ending Thoughts
That’s our look at how to create multi-step forms in WordPress using WS Form’s tab feature. Tabs are easy to add to WS Form and they’re just as customizable as the form itself. Rename the tabs, rearrange them with drag-and-drop, and customize their settings. Navigation buttons make them easier to use on the front end. Tabs are easy to style using the built-in Classes.
We want to hear from you. Do you build multi-step forms in WordPress? Let us know about your experience in the comments.
