Trigger a modal with a link click

Modal Forms are a great way to start converting your website visitors into Subscribers. Sumo did a study on 2 billion (yes, BILLION) email pop-ups and found that on average these type 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 and this article is here to show you how to make the magic happen!

This is how Pat Flynn triggers the subscribe form on the footer of his site:

Screen Shot 2015-10-24 at 5.21.09 PM

So how do you get all of this set-up? Well let's start by creating a Form!

Create a new form

Create a new form by going to the Form Tab and selecting the Form box.

Select the Modal style Form. 

You can then choose to display it on exit intent (they move their mouse outside the browser window), timing, or scroll percentage. Just click on the little cog image to find these Settings. ;) 

Or you can trigger it manually with a link click. Which is what we'll be doing. 

Embed the form and link

Head on over to the Embed Tab and copy the one line of Javascript into your site. You can put this anywhere on the page. It is helpful to paste the JavaScript and then place the Form Modal code right beneath the JavaScript so you can always find it for future edits.

That looks like this:

<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.

*NOTE*

Modal Trigger Links are now each there 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 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 :D

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)

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 :D

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%.

Still need help? Contact Us Contact Us