Create Multi-Step Forms in WordPress with WS Form

Create Multi-Step Forms in WordPress with WS Form

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

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:

  1. Contact info
  2. Mailing address
  3. Social media
  4. Message with consent

Adding Tabs

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.

Adding Tabs

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.

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

Adding Tabs

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.

Adding Tabs

Add the name in the label field, choose to show the label, and save the tab.

Adding Tabs

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.

Adding Tabs

Select the Tab Settings, provide a label, show the label, and save the settings. Continue the process for every tab you want to add.

Adding Tabs

I’ve now added the four tabs with different content on each tab.

Adding Tabs

Rearrange them in any order by dragging and dropping them where you want them.

Adding Tabs

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

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.

Tab Navigation

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.

Tab Navigation

The Advanced tab includes settings for Style, Classes, Restrictions, Custom Attributes, and Breakpoints.

Tab Navigation

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.

Tab Navigation

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.

Tab Navigation

Here’s how the buttons look on the front end. They take the user through the tabs when clicked.

Remember Last Tab 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

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

Tab Styling

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.

Tab Styling

For my example, I’ve added all three of the Tabs Wrapper Classes.

Tab Styling

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.

Tab Styling

I’ve now added the vertical Class. I kept the other three Classes, so they’ll work together.

Tab Styling

The result displays the tabs in a stack and includes the green checkmarks.

Tab Styling

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.

Leave a Reply