How to Trigger Multiple Modals on the Same Page Correctly

By default all of our forms share the same modal ID which is ck_modal. Because of this, if you have multiple modals on the page to be triggered by a link click, when clicking on a link, it can't distinguish which form to load and as a result, loads the last modal that is loaded on the page. To fix this, you simply need to use the HTML embed code for each form.

HTML Embed CSS Code

Depending on your site, you may need to move the CSS of your HTML embed to the bottom of your stylesheet to ensure the design of the form looks proper. Unlike our Javascript embed, which automatically loads our form CSS after your site CSS loads, the HTML form loads CSS in place so sometimes your site CSS can override our form CSS causing it to look weird. If this is the case in your situation, simply move the CSS portion of the HTML embed code to the end of your site's stylesheet.

HTML Embed ID Change

Next, for every form, you'll want to embed the HTML embed code somewhere on the site and then change the ID from ck_modal to something else such as ck_modal1 for the first form, ck_modal2 for the second form, etc. 

Once you've done this, when creating the link that triggers the modal, just make sure the link follows the following format:

<a href="#ck_modal1" rel="ck_modal">TEXT HERE</a>

or

<a href="#ck_modal2" rel="ck_modal">TEXT HERE</a>

Note that the rel="ck_modal" does not change. Only the href in reference to the new ID. 

Now each link should trigger the correct form modal that should show up.

Still need help? Contact Us Contact Us