“Citius, Altius, Fortius” – does that evoke the Olympics-related associations only? Truth be told, this is a non-official motto of modern times. We live in a fast-paced world, where everyone tends to do everything quicker and more effectively. Time is money, as they say. And that is more than true to online business owners. In this article, you’ll learn how to create a multi-step form in WordPress.
These days, to buy goods/book a room/rent a car online, people need to provide their personal and bank details. Do you know what stands between a vendor and a happy client? It’s a 50-something-question form. The moment a client sees that it’s needed to fill out a questionnaire to get the sought-after product. So, they leave the page and go buy from somebody else.
Nobody tolerates lengthy forms. That’s why multi-step form layouts are all the rage now.
Why Build a Multi-Step Form in WordPress?
Multi-step forms are not lengthy. At least, they do not appear to be.
Imagine that you break down a regular 20-question form into steps, giving out each part incrementally. It’s not the same as if you were to lay out everything you’ve got on the table, right? That’s the point. You do not overwhelm users with a whole lot of questions. You act smart asking the information bit by bit. In addition, throw a multi-step progress bar on top, and you’ve challenged the visitor to actually fill the form out.
A form with multiple steps is also a space-saver. It doesn’t require a separate page and can be placed anywhere on the website, even a pop-up will do!
Last but not least, multi-step forms do not bore users to death. You can allow saving the form progress, and the user returns to the form whenever he/she is ready to finish it off.
Started wondering about how to create a multi-step form in WordPress? It’s super easy.
JetFormBuilder: a Multi-Step Form Builder Plugin
JetFormBuilder is a free plugin by Crocoblock that allows you to build simple and complex form layouts. Its toolkit comprises over 18 dynamic features, which you can mix and match to achieve the exact result you need.
By default, WordPress and Gutenberg Editor have no tools to create a form and multi-step progress bar. Let alone styling them. JetFormBuilder makes a good team with another Crocoblock plugin, JetStyleManager, which is specifically designed to style Gutenberg blocks.
Still not impressed? Consider this: both plugins are FREE. so, you can get them right away, install and activate them, and dive into form building head first.
Guidelines for Creating a Multi-Step Form in WordPress
For starters, download the multi-step form builder, then install and activate the plugin.
Once done, let’s proceed to create a form.
1️⃣ Go to JetFormBuilder > Add New to add a new form layout.
2️⃣ Name the form and start adding the fields by clicking on the “+” button on the top toolbar.
alt text: jet form fields section in Gutenberg editor
There are 18+ field blocks to choose from, and – obviously – the number of fields will differ for each form type. Let’s say we want to build a regular booking form. This form implies specifying guest details, check-in and check-out dates, as well as additional services (if any), and the order total.
Keeping it simple but functional, we came up with the following:
3️⃣ Transform it into a multi-step form WordPress layout.
Now, you’re going to use the Form Break field block. Moreover, it allows dividing the form into several parts and separating them visually on the front-end. Place this block in between the main form fields as you please.
alt text: adding the form break block to the form
A quick tip: if it takes a while to complete the form with multiple steps, you might want to add the “Previous Page” button. This will help a user out whenever he/she is willing to double-check the inputted data.
alt text: activating the add prev page button toggle
Lastly, don’t forget about the Label of progress values, as they will be used to mark the steps on the form progress bar. Enter the logical step names here:
alt text: adding labels of progress to multi-step form in WordPress
4️⃣ Configure the post-submit actions.
This step is paramount because once the form is submitted, you need to confirm that you’ve got a request. So, that’s why we’ll use the “Send Email” action. Configure it as follows:
alt text: send email action’s setup window
Now, when a user submits the form, a booking confirmation email will be sent to his/her inbox. You can also go further and redirect the guest to the Checkout page as any booking form normally does. In addition, to make it happen, you are supposed to set up the “Redirect to Page” action and add a payment gateway. In this way, the guest will be able to pay for his/her stay.
We won’t be doing that today; we’ll rather focus on creating a form with multiple steps and displaying it on the page.
5️⃣ Add a multi-step progress bar.
Open the page where you want to place the form in Gutenberg. Press the “+” button and find the JetForm block. Drag and drop it to the page and select the form you’ve just created in the Choose Form drop-down. So, In the Submit Type drop-down list, pick “AJAX”, as it will impede the form from refreshing the page each time the “Next” button is clicked.
Now, to the fun part. Below the Submit Type drop-down, there’s a toggle dubbed Enable form page progress. Activate it to add a progress bar on top of the form.
alt text: enabled multi-step form progress bar
See, the texts underneath the steps are the exact labels you’ve typed on Step 3.
6️⃣ Check how the form works on the front end.
Publish the multi-step form WordPress page and try submitting the form. Everything should work just fine:
As to the confirmation email, here it is:
alt text: booking confirmation email in the inbox
Final Words
Building a multi-step form in WordPress is not rocket science, especially if you have the right tools. JetFormBuilder delivers on the promise here – it’s a lightweight yet powerful plugin. Plus, it’s absolutely free. You don’t pay for the documentation either; it is available to everyone and very helpful. We kept it really simple today and didn’t use JetStyleManager. But if you do, you’ll be able to create a unique and catchy form layout in a page builder that doesn’t imply form creation at all.
