Trigger a modal with a link click

If you are doing a content upgrade or putting your modal form behind a button click this article will help you out. 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

Create a new form

Create a new form and set the style to Modal. You can then choose to display it on exit intent (they move their mouse outside the browser window), timing, or scroll percentage.

Or you can trigger it manually with a link click. Which is what we'll be doing.  Screen Shot 2015-10-24 at 5.24.22 PM

Embed the form and link

Then head over to the embed page and copy the one line of Javascript into your site. You can put this anywhere on the page.

That looks like this:
<script async id="_ck_000" src=""></script>
Then from the style page grab the modal trigger link. It looks like this:
<a rel="ck_modal" href="#ck_modal">Your link text</a>

Just replace the "Your link text" with what you actually want the link to say.

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 rel="ck_modal" href="#ck_modal"><img src="IMAGE LINK"></a>

Just replace 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 need slightly different code: 

Your code should look like this: 

<a rel="ck_modal" href="#ck_modal" 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 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