If you’re looking to display multiple ConvertKit modal forms on a single page of your website, you’ll find out pretty quickly that it doesn’t work because, by default, ConvertKit only allows you to display one modal form on a page. If you’re wondering the reason why this is, it’s because when you trigger the modal form (via link or image), the trigger is looking for the form ID and each form in ConvertKit has the same ID. So when you add multiple triggers to the same page, only the first form will appear regardless of which trigger you click.
There is a workaround for this though and this tutorial will show you how it’s done.
(If you’re more of a video person, scroll to the bottom of this post to watch the video walkthrough).
So you might be wondering why you’d want multiple ConvertKit modal forms on one page. Well, it is actually more common than you think and it could occur unintentionally. For example, a link to a modal form in both your website footer and sidebar or an image in your header that links to your opt-in modal and a link in a post that links to your content upgrade modal. In both of those scenarios, you have one or more triggers in a “global” area of your website (ie. header, sidebar, or footer) and then another on a page-specific area of your site (ie. a post).
Another option that I’ve seen a lot for modal forms is creating a freebie library. If you have multiple freebies that you want to display on the same page, you’ll want each freebie to trigger a unique modal.
Luckily, the workaround is pretty simple and easy to implement regardless of the scenario.
The short gist: by using the HTML embed and giving each form a custom ID while also updating the triggers to match the ID, you’ll be able to trigger multiple modal forms.
Note: This tutorial assumes you’ve already created your forms in ConvertKit and set them to the Modal style
Step 1: Embed the HTML code
By taking the raw HTML code embed code option that ConvertKit provides, you are able to customize it to fit your needs.
For the purposes of this tutorial, I pasted the code into a sidebar and footer widget of my website.
Step 2: Add your link or image trigger
In ConvertKit, under the form Settings, click on the Style tab. You’ll see the Display Options. I always set the timing to a large number (ie. 999999) so the modal won’t appear on it’s own.
Here you’ll also see the code provided for triggering the modal with a link. If you want to add a trigger with an image or button, you can follow my tutorial here.
Add your modal trigger to your website, just below the HTML you pasted in earlier.
Step 3: Create unique IDs for each form
If you only have 2 forms, then you’ll only need to change one ID to make both unique. If you have a freebie library, for example, you’ll want to change all of the forms so it’s easier to keep track.
To do this you’ll need to edit the code in 3 spots.
- The “rel” attribute of your modal trigger
- The “href” attribute of your modal trigger
- The “id” attribute of your form container
As you can see, I changed one of my forms to have the id “ck_modal_naked”. I left the other form as the default “ck_modal” (not pictured).
That’s it! Once everything is saved, you can visit the page on your website and test out each modal.