Sumo did a study on 2 billion (yes, BILLION) email pop-ups, and found that on average, these types of forms have a 3.09% conversion rate, with the top forms converting at 9.28%. That is a lot of email subscribers!

One way to create a modal for your site is to place it behind a link, image or button. For example, this is how Pat Flynn triggers a modal subscribe form when users click a button on his site:

Ready to try this for yourself? Here we go. 

Create a new form

Go to Landing Pages & Forms under the Grow tab in the navigation. Click on the + Create new button, followed by the Form option to create a new form.

Select the modal-style form. 

You can then choose to display the modal form upon:

  • Exit intent (i.e. when the viewer moves their mouse outside the browser window)

  • Timing

  • Scroll percentage

Click on Settings in the form builder to find these options.

Alternatively, you can also have the modal form trigger manually with a link click. That's what we'll do next!

Click on the Publish button on the form builder to get options for embedding your form—including by using your form's JavaScript code.

Copy the one line of JavaScript for your form into your site.

NOTE: You can put this JavaScript anywhere on the page. However, we suggest putting it just before the modal trigger link for your form so that you can easily find it in the future. More on the modal trigger link shortly!

Here's what the modal form's JavaScript code looks like: 

<script async data-uid="FORM ID GOES HERE" src="FORM JAVASCRIPT URL GOES HERE"></script>

Then from the Settings option in the form builder, grab the modal trigger link:

The modal trigger link will look like this:

<a data-formkit-toggle="FORM ID GOES HERE" href="FORM URL GOES HERE">Your link text</a>

Just replace "Your link text" with what you want the link to say, and paste the modified modal trigger link into your website.

Unlike the JavaScript for your modal form, you should paste the modified modal trigger link where you want it to appear on your website.

NOTE: Modal trigger links are now each their own link. This means that the form can be pulled up without the JavaScript on the page. Without the JavaScript, your form will show on a separate page and then redirect to where you have set in the form settings.

Your form will look like this with no JavaScript on the page: 

Do you want to trigger your modal with an image? The instructions are similar, but instead of writing link text, you'll place an image instead! 

Your code should look like this:

<a data-formkit-toggle="FORM ID GOES HERE" href="FORM URL GOES HERE"><img src="IMAGE LINK"></a>

Just replace <img src="IMAGE LINK"> with the link to your hosted image!

Linking your form with a button

Do you want to trigger your modal with a button? The instructions are similar, but you will need slightly different code.

Your code should look like this: 

<a data-formkit-toggle="FORM ID GOES HERE" href="FORM URL GOES HERE" class="button">Button Text</a>

Styling the button will be heavily dependent on your website's theme, so please refer to your theme's support for detailed instructions. 

Save and refresh!

Now save everything and refresh the page. When you click the link (or image or button, depending on what you've set up), your modal form should appear.

NOTE: If you want your modal form to appear only based on the click, you can set the timing really high (like 9,999 seconds), or set the scroll percentage to 100%.

Guide to modal (pop-up) forms

Did this answer your question?