Configure a Popup When a Button is Clicked



One way to be more targeted with your popups is to only have a popup 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 popup that displays "on click" of a button.

Configure a Popup When a Button is Clicked

When you copy and paste the code snippet for a customized Klaviyo popup 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 popup 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 popup, use the HTML below as a starting point. This contains Klaviyo classes to get the same look as a basic Klaviyo popup 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 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 popup 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?
3 out of 8 found this helpful