How to trigger a sign-up form to appear when a button is clicked

You will learn

Learn how to trigger a sign-up form to appear on your website when a visitor clicks on a certain button. This guide will walk you through adjusting your form to show on a custom trigger, creating and adding a new button to your site, and pasting a short code snippet into your site’s HTML so that clicking on the button triggers the sign-up form.

If you're a developer and want to custom-code a trigger for your sign-up form, head to our developer resource on how to custom trigger a popup or flyout form.

Before you begin, make sure Klaviyo’s onsite JavaScript (Klaviyo.js) is installed on every page where you add the button. Verify that sign-up forms are enabled on your website.

Create a new button

This content requires Functional cookies to be enabled.

Update Cookie Settings

Before adding a new button to your website, set up your sign-up form in Klaviyo:

1. Create a new sign-up form to appear when the button is clicked, or choose a form that you've already created.
2. Select Edit styles in the form editor. Set Form type to Popup, Flyout, Full page, or Banner. Embedded forms cannot be triggered when a button is clicked.
3. Select Targeting & behavior > Display. Under Timing, set Show form to Only on a custom trigger.

Custom triggers bypass the form’s targeting, device, and frequency rules. If you need to limit who can open the form, apply those conditions to your website’s button or custom code.

1. When you're satisfied with your form's design and content, click Publish or schedule, select the Publish now option, then click Publish now to make the form live.
2. Copy the code below:

<button class="klaviyo_form_trigger">Click here</button>

1. Paste the code into the HTML of any page on your website that you'd like the button to appear on. This button will use the default styles from your site’s template. If you would like to customize the button's appearance further, consult your developer or a Klaviyo Partner.

If you add multiple buttons to the same page, give each button a unique class name (e.g., klaviyo_form_trigger1, klaviyo_form_trigger2), even if they open the same sign-up form. The JavaScript snippet below attaches to only the first button with a matching class. Add a matching snippet for each button.

Set the button to trigger your sign-up form

This content requires Functional cookies to be enabled.

Update Cookie Settings

Now that you've added a new button to your website, you'll next need to set up the trigger so your sign-up form appears when it's clicked. Set up the trigger by adding a small, custom JavaScript snippet to your site:

1. Copy the code snippet below:

<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

1. Paste the code snippet directly below the button code that you added to your site in the last section.
2. In the snippet you just pasted, replace FORM_ID with your sign-up form's ID.
   • To find your form ID, navigate back to Klaviyo and open the form editor for your sign-up form. Copy the ID immediately after /forms/ in the URL. The ID can contain letters and numbers; keep its capitalization exactly as shown when replacing FORM_ID in your snippet.
     

3. The completed code should include the new button code, and the sign-up form trigger with your unique form ID. Make sure to paste this on every page where you added the button code.
   • Here’s an example of the completed code in a Shopify page editor:
     

1. Save your changes.

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