You will learn
Learn how to trigger a form to appear when a visitor to your site clicks a button by customizing a short code snippet and pasting it into your site’s HTML.
If you're a developer and want to custom-code a trigger, head to our developer resource on how to custom trigger a popup or flyout form.
Because pasting this code requires access to your site's HTML and ecommerce platform, our support team is unable to offer hands-on assistance. If you don't have a developer on your team and are not comfortable adding the code yourself, consider reaching out to a Klaviyo Partner for assistance.
Before you begin
Before starting, create your sign-up form. Your Form Type should be set to Popup, Flyout or Full Page. Embedded forms cannot be triggered when a button is clicked.
In your form’s Targeting & Behaviors section, select Only show on custom trigger under Display Timing.
Create a button
Copy the code below and paste it into the HTML of any page where you’d like the button to appear.
<button class="klaviyo_form_trigger">Click here</button>
This button will use the default styles from your site’s template. Your developer or a Klaviyo Partner can customize the button’s appearance further.
Note that if you add multiple forms triggered by separate buttons to your site, you’ll need to use a unique class name for each button (e.g., klaviyo_form_trigger1, klaviyo_form_trigger2).
Add a custom JavaScript snippet to your site
- Open your sign-up form in the Klaviyo editor and view the page’s URL. Copy the 6 character code at the end of the URL; this is your form’s ID.
- In the code snippet below, replace FORM_ID with your form’s ID.
- Paste the updated code snippet directly below the button code you added to your site in the last step.
<script type="text/javascript">
document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
window._klOnsite = window._klOnsite || [];
window._klOnsite.push(['openForm', 'FORM_ID']);
});
</script>
Here’s an example of the completed code (the button code plus the form trigger code) in a Shopify page editor:
If you adjusted the button’s class in the last step (i.e., you replaced klaviyo_form_trigger with some other text), make sure to update this code with the text you used.
Test your button
Once you’ve saved all the changes to your site’s code, visit your site and click your new button. When you do, the sign-up form will appear.
Having trouble? Head to Klaviyo’s Community Forum for guidance from other Klaviyo users.