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. Let's look at how to set this up!
This is how Pat Flynn triggers the Subscribe Form on the footer of his site:
Ready to try this for yourself? Here we go.
Create a new Form
Create a new form by going to the Form Tab and selecting the Form box.
Select the Modal style Form.
Or you can trigger it manually with a link click. That's what we'll do here!
Embed the form and link
Here's what it looks like:
<script async data-uid="604c02c113" src="https://f.convertkit.com/604c02c113/dab664205d.js"></script>
Then from the Settings tab grab the Modal Trigger Link. It looks like this:
<a data-sv-toggle="604c02c113" href="https://pages.convertkit.com/604c02c113/dab664205d">Your link text</a>Just replace the "Your link text" with what you actually want the link to say.
Your Form will look like this with no Java Script on the page:
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-sv-toggle="604c02c113" href="https://pages.convertkit.com/604c02c113/dab664205d"><img src="IMAGE LINK"></a>
Just replace <img src="IMAGE LINK"> with the link to your hosted image!
NOTE: Don't forget to change "604c02c113" to your Form code in the Form you are using. (Heh.)
Change the underlined code to the code from your Form code. (This is located on the Settings Tab in your Form.)
Linking Your Form With a Button
Do you want to trigger your modal with a button? The instructions are similar, but you need slightly different code.
Your code should look like this:
<a data-sv-toggle="604c02c113" href="https://pages.convertkit.com/604c02c113/dab664205d" 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.
NOTE: Don't forget to change "604c02c113" to your Form code in the Form you are using.
You just have to change the underlined code to the code from your Form code. (This is located on the Settings Tab in your Form)
Save and refresh!
Now save everything and refresh the page. When you click the link the modal should appear.
NOTE: If you only want the modal to appear based on the click you can set the timing really high (9999 seconds) or set the scroll percentage to 100%.