Create a Custom Pop-Up

read

Overview

If you want more control designing a pop-up, this guide will explain how you can write completely custom HTML and still have it interface with Klaviyo's JavaScript library. 

1. Start with Our Basic Form Code

To build your own pop-up, use the HTML below as a starting point, which 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">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"></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>

From here you can customize any of the HTML, keeping in mind a few things.

The <form> itself: The form with the class klaviyo_subscription_form should contain your sign up form and there are two required fields here:

  • A hidden field with name="g" whose value is the list people will be subscribed to. 
  • An input which includes name="email"

Hiding a closed pop-up: Any element with the class klaviyo_close_modal will exit the modal and permanently hide it from that visitor. You can use this on any buttons or icons that close the form.

The submit button: Use the class klaviyo_submit_button on the button that submits your form if you'd like it to be disabled while the form is submitting.

The success message: The element inside the klaviyo_modal wrapper with the success_message class will be shown after someone signs up if it exists.

2. Attach Your Custom Pop-Up to Your Website

Once you've edited your HTML, you'll need to let our JavaScript library know which element on your page represents your sign up form. To do so, pass the CSS selector from your form to the attachToModalForm method along with any other configuration options you'd like to set on that form.

In this example, since our above form has an ID of k_id_modal you will have to use #k_id_modal as seen in the below JavaScript to attach Klaviyo's pop up code to your HTML element. You can add this code right below your form's HTML code on your website.

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
   KlaviyoSubscribe.attachToModalForm('#k_id_modal');
</script>

3. Add Additional Options to Your Pop-Up

You can use the configuration options available to a Klaviyo pop-up form in your custom one. You can find a list of those in our pop-up options guide. For example, this attaches to a form with the id k_id_modal, shows on the home page and blog page, and displays after a 10 second delay:

KlaviyoSubscribe.attachToModalForm('#k_id_modal', {
  pages: ['/', '/blog*'],
  delay_seconds: 10,
});

There is an additional success option you can set, which should be a function to call when the form is successfully submitted. If set, that method will receive a single argument, which is a jQuery wrapper around the form element that was submitted. This can be useful if you show or hide parts of your custom pop-up once the form is submitted:

KlaviyoSubscribe.attachToModalForm('#k_id_modal', {
  ...
  success: function ($form) {
  $form.find('.hide_on_submit').hide();
  },
  ...
});

Add an Image to a Pop-Up

To add an image to the top of your pop-up, consider the following example:

638886


The code:

<div class="klaviyo_fieldset">
 <img style="display:block;margin:0 auto;margin-bottom:8px" src="https://cdn.shopify.com/s/files/1/1057/2060/t/2/assets/logo.png?14435604036577717484" alt="Thank you for signing up">
 <p class="klaviyo_header">Welcome to Candy Corner!</p>
</div>

This <img> input is placed directly above the Klaviyo Header input, where:

  • style = any in-line CSS styling you would like to apply to your image
  • src = the URL link to your image (image must be hosted online already)
  • alt = the text you would like to show if the image does not appear
Was this article helpful?
4 out of 9 found this helpful