How can I create a multi-step form (funnel)?

Multi-step forms are an excellent way to enhance user experience by breaking down long forms into manageable sections. This approach not only makes forms feel less overwhelming but also improves completion rates, as users can focus on one step at a time. With our latest update, forms and quizzes are now seamlessly combined into a single element, offering greater flexibility and simplicity. Whether you want to create a straightforward single-step form or an engaging multi-step form, this new element provides all the tools you need in one place.

Create form

Forms and multi-step forms are no longer elements (such as a text, a list or an image), but now belong to the sections. To create a form section, simply add any form field to an existing section (e.g. a selection, drop-down or name field).

📌 Please note: Each section can be turned into a form in the section settings or by simply adding any form element

How to edit the form

At the top left of the form section you will see the "Edit form" button - click on it to start editing.

Now you can edit each step individually. To do this, select the desired step in the menu on the left and configure the required elements on the right - similar to normal sections!

Deciding between multi-step and single-step - adding steps

Previously, forms and quizzes were separate elements that could not be converted into each other at will. Now they belong together: You can start with a simple form, add steps to turn it into a multi-step form, or simply remove steps to turn it back into a normal form.

Multi-step

To add additional steps, please click on Edit form ➡️ Add step. Our templates and blank layouts are available here.

Add and edit actions

*Also known as end steps

The action is executed after the form has been sent. In other words, an action step is the last step in a form.

You can add them by clicking on Edit form ➡️ Add action.

There are 5 actions available to you here:

Show frame content
Open Link
Show fame content and open link
Show frame contend and open modal
Open modal

Flexible editing of the step structure - Professional mode

With the new "Professional" mode, you can edit your form flexibly: add additional columns and rows, edit spacing with greater precision, grid view.

You can activate the "Pro" mode at the bottom left, next to the "Update" button.

Below you will find a short demonstration.

Set up navigation buttons

By default, each step is provided with a navigation button for "Next" and "Previous step".

Hide navigation buttons

If required, you can hide the navigation buttons for a specific step, which is helpful, for example, if the visitors are automatically redirected to the next step after making a selection.

Or you can hide them for the entire multi-step form:

Add your custom navigation buttons

You have the option of setting up your own navigation buttons by adding a corresponding element at the desired position:

Here you can choose between the "Send/next step" or the "Previous step" action.

Activate and edit progress bar

Our new multi-step forms offer a variety of new progress bars that show users how far they have progressed in the form. This improves orientation, motivates users to complete the form and ensures a better user experience.

To activate the progress bar, please click on Edit form ➡️ Settings and activate the "Progress bar" option.

📌 Please note: Some form templates already have an active progress bar. You can edit or deactivate this if required.

If required, you can hide the progress bar for a specific step. This is particularly helpful in the first step.

Edit design

To access the settings for the progress bar, you can click on it directly in the editor or click on Edit form ➡️ Settings ➡️ Progress bar.

Here you can choose from different types of progress bars, along with all the necessary design settings to customise them.

Overview of the form elements

We have added many new fields in the "Form" category.

You can find these in the "Form elements" menu. Each field has its own setting options that you can use to convert it into several different styles - some fields offer up to 5 options. You can find the full list of new fields here (click to expand).

🧱 Basic elements:

Short and Long text

Short text: Allows you to enter short answers.

Long text: Provides space for longer, detailed answers.

Number

This element is used to enter a specific number and has 3 different configurations:

Please don't confuse it with the phone number (you will find this element in "contact elements" section).

Navigation buttons (submit and next/previous step)

This element has 3 possible actions:

Next step
Send
Previous step

You can define the position of this button yourself, which offers an alternative to the standard placement.

You can find more information in this section.

📞 Contact elements:

Name (First name, Last name and Middle name)

Here you can collect only certain data if you wish (e.g. first name only).

The Email element makes it possible to enter an e-mail address and at the same time check whether it is a business e-mail. It can also block temporary emails.

Address

Here you can collect only certain data if you wish (e.g. only city, postcode and address). Please simply deactivate the fields that are not required.

Phone

The Phone element can either recognise the country automatically or use a predefined country code.

❓Selection elements:

Select (Checkbox, Checklist, Cards, Chips, Dropdown)

The select element makes it possible to offer various options for a question. The user can then select one or more options, depending on the settings of the form.

There are 5 possible configurations:

Checkbox
Checklist
Cards
Chips
Dropdown

Scale (Rating)

The scale element makes it possible to collect ratings. Configurations with numbers, emojis or icons are available for this purpose.

🔎 Other elements:

Range slider

This element is used to enter a number range and several display formats are available here.

ReCaptcha

ReCaptcha is a security feature that protects your forms from spam and abuse. It ensures that entries come from real users and not from automated bots by requiring a simple check.

You can find instructions for the ReCaptcha here: ReCaptcha setup

Uploader

This element allows you to specify whether a single or multiple files should be expected and to define the file size. The maximum file size is 10 MB.

Consent

The element makes it possible to obtain the user's consent to certain conditions or guidelines. It is often used for privacy policies or terms of use.

⚠️ Important: The consent is not displayed in all steps before sending, as was the case in the previous version. Please set it up manually in the relevant steps.

Datepicker (including Timeslots)

The date picker allows the user to select the date and time. It can be configured as an input field or a calendar.

Date range picker

This element allows you to select a period with a start and end date. It can be configured as an input field or a calendar.

Loader

The loading animation gives the impression that information is being processed. The duration can be set in seconds. The maximum duration is 5 seconds.

Hidden field

The hidden field is used to capture customised UTM parameters.

You can find detailed instructions here: URL Parameters, UTM Parameters and Hidden Fields

Set up logical rules

With our now much wider range of different elements, we have added new logic rules that allow you to create precise step combinations to achieve the desired results.

We have created separate instructions for this topic: Logical rules in forms

📌Please note: To be able to use this function, you need to purchase the "Forms and quizzes" extension.

Lead information

You can view the leads received directly in the internal CRM system. Have a look at our instructions: Onepage CRM. Basics

Alternatively, you can view the leads within the form: click on Edit form ➡️ Results ➡️ Leads.

Form Analytics

With the analytics tool, you can check various key figures such as the number of sessions and their duration, the number of leads and the conversion rate. You can also see where the most bounces occur, as well as other useful functions for optimising your forms.

We have created a special instruction for this topic: Analytics in multi-step forms

📌Please note: To be able to use this function, you need to purchase the "Forms and quizzes" extension.

Frequently asked questions and solutions

How can I convert a form section back into a normal section?

To do this, use the settings window in the upper right corner:

How can I deactivate consent in a specific step?

The consent is not displayed in all steps before sending, as was the case in the previous version. Please set it up manually in the desired steps.

Now the consent is built in as a separate element.

How can I set the design (e.g. background) for a specific step or for the form in general?

For a specific step, it goes like this:

For the general design settings, please use the options at the top right:

How can I ignore the leads from a specific action step?

Please activate the following option in the required step:

Logic rules in forms

How do I set up and use analytics for my website and forms?

Onepage CRM. Basics

Setup ReCaptcha

💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂