Modal forms are a great way to convert your website visitors into subscribers
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. Then, when users click this link, image, or button, your modal subscribe form will appear.
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!
Embed the modal form in your website
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!
NOTE: Don't see this option? You might be working on a landing page, not a form. Landing pages cannot be launched with a modal popup.
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.
With these two snippets of code on your site, clicking the link will force the form to pop up, just like you see in the video at the top of this article.
NOTE: Modal trigger links are also their own link. This means that even if you don't put the JavaScript snippet on the page, your form will still work. It will just open in a new browser tab when its link is clicked.
Using an image link
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 your link (or image or button), 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 200%.