How To Show Your Growform As An Overlay

In this scenario, you may have a clear call-to-action on your landing page like "GET A QUOTE" and wish for your Growform to appear as an overlay when it is clicked.

1 - Create a form on Growform

It almost goes without saying that you'll need to set up a form on Growform. We have a 14 day free trial (with no credit card required) - you can 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 - Ensure your button has a class name and take note of it

For this step, we're assuming you're using Google Chrome as a browser.

Find the button you wish to use as a "trigger". Right click it (and hit "Inspect") to inspect the element and find its class name.

The element below has class names of "lp-element" and "lp-pom-button". Either would work, but for this example, we'll use "lp-pom-button", as it's more precise.

The element below has class names of "lp-element" and "lp-pom-button". Either would work, but for this example, we'll use "lp-pom-button".

3 - 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 second option - "Show Growform as an overlay when your users click something on your website".

Click the code and copy it to your clipboard:

4 - Paste your code into website's HTML editor

Paste the code into your website's HTML editor. You need to add the code just before the end of your website's tag for it to work.

Then, replace the word "myButtonClass123" with the class name you took note of in step 3.

5 - Check out your new multi-step form!

Hit the button you chose in preview (or live) mode to see your new multi-step form:

Need help? Tinkering with HTML can be a bit fiddly for some users - just let us know if you need help and we can help you install and adjust the code.