How to Trigger a Popup or Flyout Form When a Button Is Clicked

read
Last updated at:

Overview

Learn how to trigger a popup or flyout form to appear when a visitor to your site clicks a button. To implement this, you’ll need to customize a short code snippet and paste 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 signup form. Your Form Type should be set to Popup or Flyout. 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

show_on_custom_trigger_setting.jpg

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 signup form in the Klaviyo editor and view the page’s URL. Copy the six-character code at the end of the URL; this is your form’s ID. 
    form_id.jpg
  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 (){
		var _klOnsite = window._klOnsite || []; 
		_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: 

button_in_shopify.jpg

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 signup form will appear. 

Having trouble? Head to Klaviyo’s Community Forum for guidance from other Klaviyo users. 

Additional Resources

x
Was this article helpful?
27 out of 62 found this helpful