Customize a Pop-Up or Modal Form

Overview

Using a modal or pop-up sign up form to encourage visitors to subscribe to an email list can be an effective way to increase sign ups. If you'd like to add a pop-up to your site, Klaviyo offers a default modal form that you can customize. Here's what the default looks like:

654577

Copy the Pop-Up Form Code

Navigate to the list you would like new signups to be added to. Then, select Sign Up Forms > Pop Up. Here, you can style your pop-up and copy the code.

After customizing your form's basic styling in Klaviyo, you will see the corresponding code below:

 2017-05-19_11-55-02.png

After you've pasted the above snippet, you just need to update the LIST_ID placeholder to reference the ID of the Klaviyo List you'd like people added to when they subscribe. 

If you prefer to start from scratch, and add your own HTML/CSS styling, you can build your own modal sign up by following this guide.

Pop-Up Custom Configuration Options

If you've used our default pop-up form code, there are different custom configuration options available, including:

  • liststring, required. ID for the list that subscribers will be added to. Example, ABcDeF.
  • pages: array, optional. Limits your form to show on these specific page paths for your website. If this isn't set and "excluded_pages" isn't set, the form will display on all pages. The asterisk(*) character can be used as a wildcard. Example: pages: ["/", "/products/*"]
  • excluded_pagesarray, optional. Excludes your form from showing on these specific page paths for your website. If you set this and don't set "pages", the form will appear on every page except for these. Example: excluded_pages: ["/cart", "/checkout"]
  • delay_seconds: optional, float, default: 0.1. The delay, in seconds, before your form appears on the page.
  • delay_num_pagesoptional, int, default: 0. The delay, in number of pages, before your form appears on your website.
  • has_closed_modal_cookie_nameoptional, string. By default, when a user closes a fly out or pop-up, all fly outs and popups will remain closed on all pages. Use this option to give a fly out or pop-up a specific name, thus causing only others with the same name to remain closed.
  • ignore_cookie: optional, bool, default: false. If a user closes a fly out or pop-up, all other fly outs and pop ups on your site will remain closed as the user continues to navigate the site. Set this option to true to force your fly outs and popups to always appear.
  • extra_properties: optional, dictionary. Assign custom properties to someone's profile when the form submits. Example: If you want to track that someone is signing up from the form on your home page: extra_properties: { $source: 'HomePageSignUp' }
  • success_url: optional, string. After a successful form submission, the page will redirect to this URL.
  • success: optional, function. Set a custom function to run on a successful AJAX post.
  • custom_success_message: boolean, default: false. If true, the success message for the form will be replaced with your success_message <div> if one exists, or the "success_message" option below.
  • success_message: optional, string/HTML. The default Success Message for every form is, "Thanks for subscribing! Check your email for a confirmation message." If you would like to choose your own Success Message, leverage this configuration option.
  • hide_form_on_success: boolean, default: false. If set to true, this will hide the form fields after a user submits the form.
  • content: dictionary, optional, not available for custom built modal forms.
    • extra_fields: optional, array. Example: extra_fields: ["$first_name", "$last_name"]. Adds extra input fields to your form. Klaviyo will automatically assume these fields are text fields. If you want to specify a different type of field you can use an array of JSON data to create these fields with specified types.
    • clazz: optional, string. Assign a custom class to your form.
    • header: optional, string, default: "Interested in our newsletter?". Header message for your form.
    • subheader: optional, string, default: "Check your email for a confirmation message". Informational text under form header.
    • button: optional, string, default: "Subscribe". Text that displays on a form button.
    • success: optional, string/HTML, default: "<div>Thanks for subscribing!</div><div>Check your email for a confirmation message.</div>". Success message someone see's after updating their email.

Change a Form's Default Content

If you've used the form code from Klaviyo's form builder, the first thing you'll want to customize is the default content of the form: the header, subheader, button text, and success message. You will find all of these in your form's "Content" array:

KlaviyoSubscribe.attachModalSignUp ({  
   list: 'LIST_ID',
   content: {  
      header: 'Want exclusive deals?',
      subheader: 'Be the first to know about special offers',
      button: 'Sign Up',  
      success: 'Thanks! Check your email for a confirmation.'  
   },  
   modal_content: false 
});

Make sure that if you customize the text here, you use the same syntax and don't delete or change the use of quotations, commas, or brackets.

Change When a Modal is Displayed

There are a number of options that allow you to control when the modal is displayed. The most common is changing the amount of time a browser stays on a page before your pop-up form is shown.

To change the delay time before your pop-up appears on a page, set the delay_seconds option:

KlaviyoSubscribe.attachModalSignUp({
  ...
  delay_seconds: 15,
  ...
});

The delay_seconds option is counted in seconds and can be any positive number. If not set, the default value is to show the sign up form immediately.

Styling Your Pop Up/Modal Form

If you'd like to change the default styling of your sign up form -- a more technical option -- this the HTML structure of the sign up:

<div class="klaviyo_modal">
 <div class="klaviyo_inner">
 <a href="#" class="klaviyo_close_modal klaviyo_header_close">×</a>
 <form class="klaviyo_subscription_form">
      <p class="klaviyo_header"></p>
      <p class="klaviyo_subheader"></p>
      <div class="klaviyo_fieldset">
          <div class="klaviyo_field_group">
               <label>Email Address</label>
                <input type="email" name="email">
          </div>
      </div>
      <div class="klaviyo_form_actions">
          <button type="submit" class="klaviyo_submit_button"><span>Subscribe</span></button>
      </div>
 </form>
      <div class="success_message" ></div>
 </div>
</div>

You can then add your own HTML/CSS styling.

Add Custom Fields to a Pop-Up

Here is an example of customized pop-up code that adds "First Name" and "Last Name" fields.

As you can see, this leverages the extra_fields array within the content dictionary mentioned above:

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
     KlaviyoSubscribe.attachModalSignUp({
            list: 'nA8b4j',
            delay_seconds: 10.5,
            content: {
               clazz: ' klaviyo_modal_nA8b4j',
               header: 'Join our Newsletter!',
               subheader: 'Get the latest and greatest news from us.',
               button: 'Subscribe Me!',
               success: 'Thanks! Check your email for a confirmation.',
               extra_fields: ["$first_name", "$last_name"],
               styles: '.klaviyo_modal.klaviyo_modal_nA8b4j { font-family: "Helvetica Neue",                                            Arial}.klaviyo_modal.klaviyo_modal_nA8b4j .klaviyo_header { color:#222;}.klaviyo_modal.klaviyo_modal_nA8b4j .klaviyo_subheader { color:#222;}.klaviyo_modal.klaviyo_modal_nA8b4j .klaviyo_submit_button,.klaviyo_modal.klaviyo_modal_nA8b4j .klaviyo_submit_button span { background-color:#0064cd; background-image: none; border-radius: 2px;}.klaviyo_modal.klaviyo_modal_nA8b4j .klaviyo_submit_button:hover,.klaviyo_modal.klaviyo_modal_nA8b4j .klaviyo_submit_button span:hover { background-color:#0064cd; background-image: none; }.klaviyo_modal.klaviyo_modal_nA8b4j .klaviyo_inner,.klaviyo_modal.klaviyo_modal_nA8b4j .klaviyo_fieldset .klaviyo_field_group input[type=text],.klaviyo_modal.klaviyo_modal_nA8b4j .klaviyo_fieldset .klaviyo_field_group input[type=email] { border-radius: 2px;}'
           }
           });
</script>
Was this article helpful?
1 out of 1 found this helpful