How to trigger a popup or flyout form when a button is clicked

read
Last updated at:

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

The targeting and behavior section in the editor with show on custom trigger setting selected 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

  1. 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. 
    The form URL with the 6 character ID highlighted.
  2. In the code snippet below, replace FORM_ID with your form’s ID. 
  3. 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: 

An example of the completed code showing the button code and form trigger 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. 

Additional resources

x
Was this article helpful?
134 out of 334 found this helpful