Configure a Pop Up When a Button is Clicked



One way to be more targeted with your pop-ups is to only have a pop-up display after someone clicks a certain button. For example, when someone clicks to view a collection or a certain section of your website.

This guide will explain how to add a pop-up that displays "on click" of a button.

Configure a Pop-Up When a Button is Clicked

Learn more

Learn more about how to customize a pop-up for your site.

When you copy and paste the code snippet for a customized Klaviyo pop-up form on your website, you're actually pasting two things:

  • The code for the form
  • The code to let our JavaScript library know which element on your page represents your sign up form

To configure a pop-up so that it only appears after a button is clicked, you don't need to adjust your form code. You only need to adjust the method by which the form is called.

To build your own pop-up, use the HTML below as a starting point. This contains Klaviyo classes to get the same look as a basic Klaviyo pop-up form:

<div class="klaviyo_modal" id="k_id_modal" style="display:none;">
<div class="klaviyo_inner">
<a href="#" class="klaviyo_close_modal klaviyo_header_close">×</a>
<form action="//" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
<input type="hidden" name="g" value="List_name">
<div class="klaviyo_fieldset">
<p class="klaviyo_header">Interested in our Newsletter?</p>
<p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
<div class="klaviyo_fieldset">
<div class="klaviyo_field_group">
<label for="k_id_modal_$email">Email Address</label>
<input type="email" id="k_id_modal_$email" name="email">
<label for="klaviyo_form_first_name">First Name:</label>
<input id="klaviyo_form_first_name" type="text" name="first_name" value="" />
<label for="klaviyo_form_last_name">Last Name:</label>
<input id="klaviyo_form_last_name" type="text" name="last_name" value="" /></div>
<div class="klaviyo_fine_print"></div>
<div class="klaviyo_form_actions">
<button type="submit" class="klaviyo_submit_button">
<div class="klaviyo_below_submit" ></div>
<div class="error_message" ></div>
<div class="success_message" ></div>

Make sure to replace LIST_ID with the ID of the list you want new subscribers to sync to. The code above will give you a form that looks like the following:


Next, you will need to add code to trigger this pop up with the click of a button. Add the following code snippet right below the form code you've already pasted in:

<script type="text/javascript" src="//"></script>
<button onclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true, ignore_cookie: true, success_message: false});">Click me</button>

Things to note here:

  • Your form will have an ID associated with it that can be found in the first line. In the above example, our form ID is k_id_modal. You will notice that in the second snippet, this same ID is referenced as follows: #k_id_modal. This is important to ensure the "on click" functionality added is connected to the right form on your site.
  • In this example, the button isn't styled and the button text set is "Click me!" -- when you use this on your site, you will probably want to use an existing button. To do this, copy the full "onclick" function used in the example: onclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true});"
Was this article helpful?
0 out of 1 found this helpful