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

1. Create a button: In Instapage, add a button to the canvas. You should keep the button's default settings unchanged, leaving the link setup section blank:

2. Get the button's ID: Right click the button and hit "Edit CSS". You will see the button's id in the explanatory text - for example, in the screenshot below, the button's ID (without quotes) would be "element-355":

   
   

   

   3. Find the Javascript Editor in Instapage: Hit "Escape" on your keyboard once you've saved your changes. You should see "Page settings" on the right. Hit "Javascript":

4. Paste your pop-up code into the "Footer" box.
5. Tweak the code: Replace the text "myButtonClass123" with the ID you chose earlier (ours was "element-355"). Replace the text "growformTargetClass" with the text "growformTargetID". Your final code should look similar to this:

5. Save your changes, and publish your page. To see your form working properly, it is essential to publish the page in Instapage, rather than using the "preview" functionality.

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 in Instapage, 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.