How to Add Your Form As A Pop-Up In Webflow

1 - In Webflow, create a button. Hit the settings cog, and then "Show all settings":

2 - Add a "style selector" (class name) to your button: In our example, we use "open-growform", but this can be anything you wish. We'll use this to identify the button in a later step.

3 - Edit the Growform code - You'll need to replace "myButton123" with the class name you chose in the second step. For example, our code would look like this:

4 - Go to page settings, and add the popup code to your page. You'll find Webflow's page settings by hitting the "cog" icon in the top and center of the builder. Custom code is the furthest option down on the list.

5 - Publish your page: Due to the way Webflow works, the pop-up will NOT work until the page is published, and should not be expected to work in preview mode.

FAQs:

Q: My pop-up isn't showing - why isn't it working?

A: First, check that "growformTargetClass" in your embed code corresponds to the class name on the button (i.e. it is not still "myButton123"). It is also essential that the pop-up code appears on the page after the button or triggering element, so try adding this further down the page.

Q: Are there any other ways to achieve a pop-up?

A: Yes. The simplest way would be to simply send users to your form's share link, and set this to open in a new tab. Alternatively, some customers choose to create a pop-up or overlay in their landing page builder (sometimes with an extension or plug-in), and embed our standard HTML code into that space. This can give more control over the layout of the overlay and allow for more advanced triggering.

Q: Can I have multiple buttons on one page, pointing to the same pop-up form?

A: Yes - simply give each button the same class name ("open-growform" in the above examples), and ensure the pop-up code is added only once, at the end of the page.