Getting Started with States and Multi-step Forms in Thrive Leads

In the latest version of Thrive Leads, we have now added functionality that will enable you to create two-step forms effortlessly from within the builder itself.

Not only this, but you’ll also be able to do the following:

• Tie an unlimited number of actions together. For example, if the user presses button A, then lightbox A opens, if they press button B then lightbox B opens.
• Show different content to those users that have already opted into your sign-up form.
• Split test all of the above and create the best conversion-optimized lead magnets for your site.

Here’s the kind of forms that you can now build quickly and effortlessly:

What forms does this apply to?

The ability to build new multi-step forms applies to every form type. That includes those in lead groups and those outside of lead groups.

Introducing States

We have added “states” to the new editor interface. To access them, look for the green “+” icon and hover over it:

Then, the “Current States” panel will show right up:

A state is basically another “view” of your opt-in form. So whenever someone clicks on a button from your opt-in that is set to trigger another state, that person will be next prompted with another view of your opt-in, just as you’ve configured it here.

If you click on “Add New State”, there are multiple states that you can add:

“New State”

​A new state is another view of the default form that you’re editing. For example, if you’re editing a post footer, and you add a new state, then you can essentially create two views of the post footer.

You can then tie the two views up with an action, like a button click, using the “Animation and Action” options.

Switch States Example

For example, you could create a default view that every visitor sees that asks whether the visitor would like to learn about Search Engine Optimisation or whether they would like to learn about PPC:

If the user clicks “Learn about SEO”, then you could show them this view:

And, if they click “Learn about PPC”, then you could show them this view:

In order to do this, you would create the above three states in the editor by adding them using the “Add New State” button and then creating the designs.

The first view is always the default state – this is the state that everyone who hasn’t already signed up sees. You would then build a state each for the SEO guide and for the PPC guide.

Once you’ve done this, your state bar will show all three states:

Now you have all three states built, you simply need to tie them together. That’s where the “Animation & Action” option comes in.

If you aren’t already familiar with the “Animation & Action” option, then you might want to take a few minutes to learn about them in our video here.

You can add an action to anything that you can click, so this includes a text hyperlink, an image, or a button.

In the default state, we have two buttons that we want to tie up with the two other states that we’ve built:

To do this, open the “Animation & Action” section of the left sidebar list of options:

Select “Custom Integrations”:

Here we can add a new click action that triggers a change to the new state:

Select a state and apply:

Having saved the action, we have successfully created an action that will enable to form to switch states, should the user decide.

We can then go ahead and add another action to the other button in the default state to tie up with the remaining state.

​And we’re done!

We can take this one step further, and add back buttons to the additional two states. This gives the visitor an opportunity to go back to the default state.

To do this, I’m going to add a “Text” element to both “State 1” and “State 2”, and create a text link in both the SEO and the PPC state that looks something like this:

I can then click on the text, select the “Insert Link” option (or press Ctrl+K), and link the back button up to the default state:

Select the “Switch State” checkbox, insert it, and make sure that the
“Default State” is selected here:

We now have a ​full flow of triggers that allows the user to make a choice, and then revert back if he/she changes his mind.

Here’s what the final output looks like now:

The Lightbox State

The lightbox state can be used to trigger lightboxes from within your lead forms.

You can use this to open up lightboxes from all form types, except lightboxes themselves (simply because opening a lightbox on top of another lightbox is not great useability and doesn’t have much of a use case).

The lightbox state works in exactly the same way as the “New state” option. Simply select “Lightbox” from the add state menu:

The editor will then switch to lightbox editing mode and you can build your lightbox as you see fit.

Lightbox States Example

Continuing our previous example, I’ll now add a lightbox state. By default, I’ll be given the standard lightbox template, but by going to “Thrive Leads Settings” and then “Choose Opt-in Template” I can choose another template:

I can then modify the default form so that there’s a new button to link up with this lightbox.

And to link this new button up to the lightbox, we do the same as before. Click the button, go into the Animation & Action > Custom Integrations > Lightbox State:

Select the lightbox that you’ve just created, “Lightbox 1”, apply, and you’re done!

So we now have an awesome multi-step form design:

Closing the Lightbox

If you’re editing a lightbox state, you’ll notice that we’ve added a new action to the “Insert Link” feature. This will allow you to trigger a lightbox close.

So, in the example above, we can add a close lightbox hyperlink to a text link at the bottom of the form that will close the lightbox, returning the visitor to the default state:

So now we have a full and complete loop for the visitor to the site.

Already Subscribed State

Another new state is the “already subscribed state”.

This allows you to show a different set of content to someone who has already subscribed to this particular lead form.

If you want to take advantage of this feature, you can simply go to the “Add States” menu and click on the “Already Subscribed”.

Any content you build in the already subscribed state will appear in place of the opt-in form to all users that have already signed up to the mailing list.

The “Already Subscribed” state has a new feature that helps you show no state at all to already subscribed visitors. You can learn how to use this feature in the video below:

Switching from One Lightbox to Another

If you’re editing a lightbox and you want to open another lightbox, then you need to make sure that the action is “Switch state”, as shown below:

Powerful New Possibilities Available to You

With this new functionality, you now have a lot more options available to you as a Thrive Leads user. For instance:

1. You can have an unlimited number of states, enabling you to segment your site visitors so that they sign up for things that they’re interested in, allowing you to send them more relevant and targeted information and offers.
2. You can split-test multi-step forms against non-multi step forms to see which are more effective for your site.
3. You can use multi-step forms in lead groups, whereas before you only had use of a multi-step shortcode.

Note: Please keep in mind that testing your opt-in forms while you are still logged in on your website will not be accurate. In order to properly test the forms that you create, you should use the Incognito Mode of your browser. This way the conversions/impressions will also be added to the Thrive Leads statistics.

We think you’re going to enjoy experimenting with this feature within the Thrive Leads editor!