How do I create a multi-step form?

Let your customer move to the next form by linking your form pages together or splitting your forms into multiple steps.

Linking your form pages together to create multi-step forms opens up a number of advantages not possible with one-page forms:

• Break up longer form pages into steps
• Improve the user experience
• Collect higher-quality data
• Track form abandonment
• Boost conversion rates

Linking form pages together to create a multi-step form

1. Create two or more one-page forms

2. Edit your first form

3. Under After submission, open Confirmation & redirect

4. Check Next page for what your customer sees after their first submission

5. Select your second form from the dropdown

6. Click Save

7. Repeat for every form page being linked together

That’s it, you’ve just created a multi-step form!

There is no limit to the number of one-page form pages in a multi-step form.

When linking form pages, it’s possible to pre-fill fields between forms.

Pro tip!

We recommend duplicating your first form page as a starting point for your second checkout, and so on. This will save you time adding duplicate fields and make pre-filling fields between your forms less error-prone.

Transitioning your customer between form pages

Every subsequent form page will always be displayed in the same way as your previous form page.

Let’s say the first step of your multi-step form was displayed to your customers in a pop-up on your landing page.

The next form steps your customer will see will also be displayed in a pop-up.

This is true for payment links, pop-ups, and responsive embeds.

Pre-filling form fields when linking your form page to another form

When linking one-page forms, fields with the same Reference will be pre-filled.

1. Edit your form

2. Navigate to Fields

3. Click the pencil icon to edit your field

4. Scroll down & click Additional settings

5. Copy Reference

6. Paste Reference into the field in your linked form that you want to pre-fill

Linking two form pages & pre-filling your customer’s email address example

In the following example, you’ll create two form pages, link Form 1 to Form 2, and pre-fill your customer email address in Form 2 from Form 1.

1. Create two form pages

2. Edit your first form

3. Under After submission, open Confirmation & redirect

4. Check Next page for what your customer sees after a successful submission

5. Select your second page from the dropdown

6. Click Save

For the following, we recommend working with two browser tabs open and copying/pasting between them.

1. Edit Form 1

2. Navigate to Fields

3. Click the pencil icon to edit your Email field

4. Scroll down & click Additional settings

5. Copy Reference

6. Edit Form 2

7. Click the pencil icon to edit your Email field

8. Scroll down & click Additional settings

9. Paste Reference from Form 1 into your Email Reference

10. Click Save

That’s it, you’ve linked Form 1 to Form 2, pre-filling your customer’s email address in Form 2 from Form 1.

There is no limit to the type and number of fields you can pre-fill when linking a page to a page.

Pro tip!

We recommend duplicating your first form page as a starting point for your second checkout, and so on. This will save you time adding duplicate fields and make pre-filling fields between your pages less error-prone because your field Reference will be exactly the same.

Hiding page fields

Why hide page fields

Hiding pre-filled page fields is a great way to improve your customer submission experience by reducing barriers and speeding up their submission.

How to hide page fields

1. Edit a form page

2. Navigate to Fields

3. Click the pencil icon to edit any field

4. Scroll down & open Additional settings

5. Check Hide field

That’s it, you’ve hidden this field in your form page.

In your preview, your hidden field will be greyed out. Don’t worry though, your field is only visible to you.

Exceptions to hidden fields

• Hidden fields will be visible to your customers if there is no pre-filled value & the field is required
• For email fields, if the pre-filled value is not a valid email address (display current value)

Confirmation message & email confirmation

No confirmation message is displayed to your customer in-between pages.

However, you can choose to send a confirmation email after each successful submission.

Choose from the following options:

• Default email
• Custom email
• No email

Learn more about confirmation emails

Testing linking your form page to another form page

We recommend testing linking your form to another form to make sure everything is working as expected.

1. Edit your first form page
2. From the Preview, complete your form fields and submit
3. The preview should display the next form page
4. Check to make sure that fields with the same Reference in Form 1 are being pre-filled in Form 2

Testing checklist

• Does each page break up your customer’s journey into logical steps?
• Are your page links in the correct order?
• Are your forms missing information, variants, downloads, or fields?
• Do duplicate fields have exactly the same field reference?
• Are the appropriate fields hidden?