Do you know Typeform? It is a popular online form creator well-known for its interactive style. In Typeform, you can create an interactive, multi-step online form for a wide range of purposes. If you have a WordPress-based website powered by Elementor, you can effortlessly embed your Typeform forms with the help of Essential Addons. Since version 2.9, Elementor itself has had a feature that you can use to create multi-step forms. In this article, we will show you how to create a multi-step form in WordPress using Elementor.
A multi-step form itself is a great idea to save space on your design (be it page or theme builder template). It allows you to shorten a long form into a simpler form.
How to Create a Multi-Step Form in Elementor
Before getting started, make sure you have upgraded your Elementor to the pro version in case you haven’t done so since the Form widget (the Elementor widget to create forms) is only available in the pro version (read Elementor Free vs Elementor Pro).
If you are new to Elementor, you can read our previous article to learn how to use Elementor. In this article, we will go straight to adding the Form widget. The multi-step form we will create consists of three steps as follows:
- Step 1: Name and Gender
- Step 2: Phone and Email
- Step: Radio button
First off, drag the Form widget to the canvas area.
Go to the settings panel on the left side to make the settings. On the Form Fields block under the Content tab, set the fields according to your needs. In our case, the fields are:
You can read this article if you haven’t created a form in Elementor before.
Once you are done adding and setting the form fields you need, add another field and set the field type to Step. This step will automatically add a new field at the top order and a new field at the bottom. You can set the label of the top field to something like Step 1.
Next, drag the bottom field and place it right above the field of the second step (the Phone field in this case).
Add another field and set the field type to Step. Drag it and place it right above the field of the third step (the Hobby field in this case).
That’s it. You can preview the result before you style up the form. By default, the step type is set to number and text. You can change from the Steps Settings block under the Content tab.
You can go to the Style tab to style up your form. There are 5 setting blocks you can open.
- Form: You can open this block to set the gap between columns and rows of the form, the typography (font family, font size, font style, and so on) of the form labels, and the text color of the form labels.
- Field: You can open this block to set the typography of the form fields, the text color of the form fields, the background of the form fields, border width, border color, and border radius.
- Button: You can open this block to style up the buttons. Be it the submit button, the previous button, or the next button. You can set things like the button text typography, button text color, background button color, and so on.
- Message: You can open this block to set the typography of the messages as well as the text color.
- Steps: You can open this block to set the typography of the steps, the color, divider width, divider gap, and so on.
Once you are done editing your page/theme builder template, you can publish/update it.
If you want to insert the form you have just created into a Gutenberg page (or maybe you want to insert it into a blog post), you can save the Form widget as a global widget. You can then import the widget using the help of the Elementor Blocks for Gutenberg plugin. Read this article for more detailed instructions.