Configure a Pop Up When a Button is Clicked

Overview

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="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
      <input type="hidden" name="g" value="LIST_ID">
      <div class="klaviyo_fieldset">
        <p class="klaviyo_header">Interested in our Newsletter?</p>
        <p class="klaviyo_subheader">Join our growing community!</p>
      </div>
      <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>
      <div class="klaviyo_fine_print"></div>
      <div class="klaviyo_form_actions">
          <button type="submit" class="klaviyo_submit_button">
          <span>Subscribe</span>
          </button>
      </div>
      <div class="klaviyo_below_submit" ></div>
   </form>
   <div class="error_message" ></div>
   <div class="success_message" ></div>
   </div>
</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:

707806



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="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<button onclick="KlaviyoSubscribe.attachToModalForm('#k_id_modal',{delay_seconds: 0.01, hide_form_on_success: true});">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 0 found this helpful