How to trigger a legacy popup when a button is clicked – Klaviyo - Help Center

You will learn

Learn how to target your popup forms to display after a shopper clicks on a certain button, such as clicking to view a collection or section on your site. This guide will walk you through how to add a popup that displays "on click" of a button.

This guide applies to legacy popups. If you would like to use Klaviyo's native sign-up form builder, head to our article on how to use anchor links in your messages and forms.

Because legacy forms use custom HTML and CSS, our support team is unable to assist with troubleshooting legacy forms. Learn more about creating a form using Klaviyo's built-in sign-up form builder instead.

Trigger a legacy 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 2 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="//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">Stay in the know with news and promotions.</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:

image of what the code written above will appear as on your website

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="//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, 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 likely 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});"

Additional resources