Would you like to know how to create a online form in several steps with Elementor ?
Do you know Typeform? He is a creator of forms popular online platform well known for its interactive style. In Typeform you can create a online form interactive multi-step online for a wide range of purposes.
If you have a WordPress based website powered by Elementor, you can effortlessly integrate your forms Typeform using Essential Addons.
See also: How to add a price grid in Elementor
But since version 2.9, Elementor itself has a feature that you can use to create forms in several stages. In this article we will show you how to do it with the help ofElementor.
Un online form multi-step itself is a great idea to save space on your design (whether it's a page or a 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 you start, make sure you've upgraded your Elementor to the pro version in case you haven't since the Form widget (the Elementor widget for creating forms) is only available in the pro.
Read also: How to create a contact form in Elementor
In this article, we'll jump straight to adding the Form widget. The multi-step form that we are going to create consists of three steps as follows:
- Step 1: Name and gender
- Step 2: Phone and email
- Step 3: Radio button
First, drag the Form widget to Elementor's edit box.
Go to the settings panel on the left side to make the settings. In the block Form fields under the Content tab, define the fields according to your needs. In our case, the fields are as follows:
- Name
- Genre
- Phone
- Hobby
Once you are done adding and defining the form fields you need, add another field and set the field type to Step.
See also: How to create a rounded image in Elementor
This step automatically adds a new field in the top order and a new field at the bottom. You can set the label of the top field to something like Step 1.
Then drag the bottom field and place it just above the field from the second step (the Phone field in this case).
Add another field and set the field type on Step. Drag it and place it just above the field in the third step (the Hobby field in this case).
Here. You can preview the result before you customize the form. By default, the step type is set to number and text.
You can edit from the block Step parameters under the tab Content.
You can access the tab Style to customize your form. There are 5 adjustment blocks that you can open.
- Form : you can open this block to define the space between the columns and the lines of the form, the typography (font family, font size, font style, etc.) of the labels of the form and the color of the text of the latter .
- Fields : You can open this block to define the typography of the form fields, the text color of the fields, the background, the border width, the border color and the border radius.
- Button: You can open this block to customize the buttons. Whether it's the send button, the previous button or the next button. You can define elements such as the typography of the text, the color of the text, the background color, etc.
- Message: You can open this block to define the typography of the messages as well as the color of the text.
- Steps: You can open this block to define the typography of the steps, the color, the width of the separator, the space of the separator, etc ...
Once you are done editing your template, you can publish or update it.
Read also: How to create a team member section with Elementor
If you want to insert the form you 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 plugin Elementor Blocks for Gutenberg.
Get Elementor Pro Now!
Conclusion
Here is ! That's it for this article which shows you how to create a multi-step form with Elementor. If you have any concerns on how to get there flet us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
