Feature

Pop-up forms: open a form when a button is clicked

Growform opens your form in a pop-up over the page when someone clicks a button you choose. Your landing page keeps its full width for the offer, and the form appears once the customer is ready.

Start free trial

One form, three ways to publish it

You can embed the form in the page, open it as a pop-up from a button, or share it as a link. The steps, logic and tracking stay the same in all three.

What is a pop-up form?

A pop-up form is a form that opens in a window over the page when someone clicks a button or link. It is also written as popup form, and some page builders call it an overlay form. The page stays where it is, and the customer starts on step one without being sent to another address.

Growform's pop-up is triggered by a click. It opens because the person asked for it, which is different from a pop-up that interrupts them.

Can several buttons open the same pop-up form?

Yes, any number of buttons can open the same form. Give each button the same class name and add the pop-up code once, at the end of the page. The button in your hero, the one in your header and the one in your footer then all open the form in place.

What if your page builder does not let you set a class?

You can target an ID, or a class the button already has. Replace growformTargetClass with growformTargetId in the code and enter the ID without the “#”. To find an existing class, right-click the button in your browser and inspect it.

Which page builders work with Growform as a pop-up form builder?

Growform has in-app pop-up guides for Elementor, HighLevel, Instapage, Leadpages, Unbounce, Webflow and WordPress, and a generic guide for any other site.

How to add a pop-up form to your page

Copy the pop-up code

Open your form and choose “Share form”. The pop-up code is under “Show advanced options”, where it is labelled “Requires HTML experience”.

Give your button a class

Add a class name such as open-growform to the button. Set the button's link to “#” and keep it opening in the same tab.

Point the code at it

In the pop-up code, replace the placeholder value of growformTargetClass with the class name you chose.

Paste, publish and click

Paste the code into the page below the button, because it only works when it comes later in the page. Publish, then click the button.

Why a click-to-open form helps your landing page

Your offer keeps the whole page.
The form takes no space in the layout until someone clicks, so the headline, proof and images are not squeezed beside it.
Every call to action leads to the first question.
Each button on a long page opens the form where the customer is, with no scroll back to the top.
Campaign tracking is kept.
The customer never leaves the landing page, so hidden fields still read the UTM parameters in its address.
You maintain one form.
The pop-up shows the same form as your embed and your share link, so a change you save appears in all of them.

Which plans include pop-up forms?

The pop-up embed is available on all four plans, from Basic upward.

Basic: Yes
Professional: Yes
Scale: Yes
Custom: Yes

Frequently asked questions

Why is my pop-up form not opening?

Check two things. The class name in the pop-up code must match the class on your button, and the code must sit in the page after the button.

Can a pop-up open on a timer or on exit intent?

Yes, with the pop-up feature of your landing page builder. Build the pop-up there and place the standard Growform embed inside it. Growform’s own pop-up opens on a click.

Do I need a developer to install a pop-up form?

No. You set a class on a button and paste a snippet into your page, and Growform support can help if you get stuck.

Can a text link open the pop-up instead of a button?

Yes. The code targets any element that has the class or ID you chose, so a text link or an image works in the same way.