Lead Forms: Multi-Step Form

Here we will introduce you into the Multi-Step Form option that is available inside the AF Lead Form template and the Lead Form widget.

First things first, Multi-Step is off by default:

Once Multistep is set to on you are able to set up the Form Settings.

Within the Form Settings you have a few options.
I. Use Progress Bar

The progress bar allows you to see which step your on rather than just having a title in place:

 II .Custom Form Steps

You have the ability to have more than two (2) steps:

 

III. Add Custom Fields

Add a new field by clicking on the Add New Field button then on the field added, click on the Field Type, and select the desired field: 

These fields can be further customized:

a. Field Name: If this field is empty, please enter the same information that you’ll use for the label text.

b. Dropdown options: you'll see this option on certain fields like the Select Dropdown field.

c. Column width: toggle the field's width from 20% all the way to 100%.

d. Label: enable this option to display a label above the field.

e. Label Text: enter the text you want to display above the field.

f. Placeholder: enable this option to display a placeholder text on the field.

g. Placeholder Text: enter the text you want to appear as the placeholder inside the field.

h. Required: mark this field as mandatory for the process.

i. Advanced Settings: toggle this on to enable advanced CSS ID and CSS Field fields.

IV. reCAPTCHA

Protect your forms from fraud or abuse with our reCAPTCHA. You have the option to make it invisible or as a checkbox. If you select invisible, you can add it inline, on the left or on the right:

V. Submit Action

For the submit action, you can select to Show Confirmation Message when leads fill out the form:

or select Redirect to new URL when the form is submitted.

On the Redirect URL field if you're redirecting to an existing page on your site you can just type in for the forward slash '/'  and place the last part of the page's slug for example /thank-you. If you're redirecting to page outside of your site then type in the complete URL like this "https://page.com/click-here". We also recommend opening these external urls in a new tab by enabling the Open URL in a new tab option.

VI. Buttons

On Multi step forms you have the ability to show a Previous Button:

If you enable the Previous Button you can edit the label in the Previous Button Label field and also have the entire button as a block. 

To further customize the button, on the last option you can enable an icon before or after the button or choose to only display an icon.

If you require any further assistance on this topic, you're welcome to reach support at support@agentfire.com.