How do I create a multistep form?

Hi, this is Sandra from GREYD. Today I’d like to show you how easy you can build even complex multi-step forms with our form generator GREYD.Forms. For a positive user experience – and with this better conversions – it can be good, especially with longer forms, to not show them entirely from the beginning, but to have the user fill the form step by step. You can either prepare your form first and then move your fields into the multi-step container or you can build your form directly as a multi-step form. Both is possible. I will now build my example form directly with several steps. Therefore I place the block multi-step container in my form. Before dealing with the individual form steps, let’s have a look at the general settings first.

To start with, you can select the transition animation with which the form moves between its steps.

Down here, you define that after filling all required fields within a step, the form will automatically go to the next step. Alternatively you can work with back and next buttons, which I will show you in a minute.

Down here, you can define whether you want to show a progress bar to the user either in form of a bar or with a pagination.

For both you can then define the alignment, colors, size, border radius and for the pagination the space between the dots.

Let’s now create all form steps.

Up here you can add and delete any number of steps.

And in the box below, you then place the respective form field or fields for each step. So just enter for example an input field. And you can also restyle and layout your form as usual for example with several columns.

As mentioned before, you can also add next and back buttons to your form. You will find a dedicated block that can be placed in each form step and comes with the usual formatting, design and layout options for buttons.

The important setting is now, what the button should do. You can define it as a regular next or back button or you can also use it to jump to individually defined form steps. That way, you can make the user skip or repeat a form step. What you need to take care of is to not skip any required fields as otherwise the user will have problems submitting the form later.

When you now combine this feature for example with conditional fields, you can easily create complex automations in your forms.

For example here: With conditional fields you could show all users that select option 1 a regular next button and all users that select option 2 will get a different next button that skips one or two form steps for example. So there are absolutely no limits here. And by the way, GREYD.Forms also helps you tracking and monitoring your forms as you can see here with each step the URL adapts, so I can see with analytics tools exactly where you lose a user at which step in your form. For more videos and information please visit our Helpcenter.