How To Add A Growform Multi Step Form To Unbounce

Unbounce is our favourite landing page builder by a long stretch, but users often wish to build multi-step forms that can’t be done in their interface.

Instead of hacking together hundreds of lines of JavaScript or stringing together multiple landing pages, this guide will show you how to implement Growform – the leading multi step form builder – on your Unbounce landing page.

If you choose to embed your form on the page, you’ll end up with something like this:

… or if you’d rather show your form as an overlay when a button is clicked, you’ll end up with something like this:

First, decide on “embed” or “overlay”

Now you know the difference between the two options, it’s time to choose whether to embed your multi-step form directly on your Unbounce page, or have it “pop up” as an overlay when a button is clicked.

Which one you use will depend mainly on your Unbounce template – there’s no “right answer” – so just go with whichever suits your design best.

Now, choose an option…

⬇️ Embed the form directly on the page (keep reading this guide)
⬇️ Have the form appear as an overlay when a button is clicked

Embed the form directly on the page

1 – Create a form on Growform

Of course, you’ll need to create a form on Growform. There’s a 14 day free trial (no credit card required) – sign up here.

The first step will look something like this:

Follow our getting started guide if you need help creating your first form.

2 – Get your Growform share code

To get your Growform share code, open Growform and make sure your form is saved. Then, navigate to “Share form” in the top blue bar.

Choose the first option – “Embed Growform directly onto your website with an HTML snippet”, click the code and copy it to your clipboard:

3 – Add a custom HTML block to Unbounce and paste in your code

Now, open up your Unbounce page in the editor and drag over the “Custom HTML” block. You’ll then be prompted to paste your code in.

Paste the code you got from step 2, and reposition the box so it fits into your design:

Hit “Save”, and don’t forget to adjust the box’s positioning for mobile, as usual in the Unbounce builder).

4 – Preview your form and make some adjustments

When you hit preview, you should see your multi step form successfully embedded in the Unbounce page:

Here are some adjustments you may wish to make to get your form looking perfect:

• In Growform’s “Theme” settings, set the parent container background to color, and choose a background color matching the color in Unbounce
• Remove any headers/instructions at the top of your Growform form – you can always have these in Unbounce.
• Adjust your form’s primary color (which affects progress bars and accents), as well as the range of other colour settings.

With just a little adjustment, we can get a multi step form that looks like it’s 100% “built in” to the Unbounce page:

5 – Enable Unbounce conversion tracking

Finally – as an optional but finishing touch – you can choose to have Growform form fills tracked as conversions in Unbounce. This simply increments the “conversions” column on your Unbounce landing page stats.

To enable this option, in Growform, go to “Edit form settings” > “Tracking & tagging” > “Enable Unbounce conversion tracking”.

Need more? We’re actively working on our Unbounce offering, including the ability to see leads appear in Unbounce.

Please get in touch with us to provide feedback and help us shape the roadmap.