Customize a Fly Out Form

Overview

A fly out form will "fly out" from the side of your website after a set delay period -- this type of form is less obtrusive than a pop-up form, but more attention-grabbing than an embedded sign up form.

Here's what it looks like:
636114

Copy the Default Fly Out Form Code

In Klaviyo, you can style a basic fly out form and then copy and paste the styled form code into your website's template code. To do this, navigate to the list you would like new signups to be added to and select the Sign Up Forms > Fly Out.

After you customize your form's basic styling in Klaviyo, you will see the corresponding code below. This code snippet will be pre-populated with the correct List ID. If you want to use the same form code but have subscribers get added to a different list, you will have to change the "List: ID" value highlighted here:
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
KlaviyoSubscribe.attachFlyoutSignUp({
    list: 'aBcDEf',
    delay_scroll: 50,
    delay_seconds: 0,
    content: {
        clazz: ' klaviyo_flyout_iFsJdP',
        header: "Interested in our Newsletter?",
        subheader: "Stay in the know with news and promotions.",
        button: "Subscribe",
        success: "Thanks! Check your email for a confirmation.",
        styles: '.klaviyo_flyout.klaviyo_flyout_iFsJdP {  font-family: "Helvetica Neue", Arial}.klaviyo_flyout.klaviyo_flyout_iFsJdP .klaviyo_topbar {  background-color: #0064cd;}.klaviyo_flyout.klaviyo_flyout_iFsJdP .klaviyo_header {  color:#222;}.klaviyo_flyout.klaviyo_flyout_iFsJdP .klaviyo_subheader {  color:#222;}.klaviyo_flyout.klaviyo_flyout_iFsJdP .klaviyo_submit_button,.klaviyo_flyout.klaviyo_flyout_iFsJdP .klaviyo_submit_button span {  background-color:#0064cd;  background-image: none;   border-radius: 2px;}.klaviyo_flyout.klaviyo_flyout_iFsJdP .klaviyo_submit_button:hover,.klaviyo_flyout.klaviyo_flyout_iFsJdP .klaviyo_submit_button span:hover {  background-color:#0064cd;  background-image: none; }.klaviyo_flyout.klaviyo_flyout_iFsJdP .klaviyo_fieldset .klaviyo_field_group input[type=text],.klaviyo_flyout.klaviyo_flyout_iFsJdP .klaviyo_fieldset .klaviyo_field_group input[type=email] {  border-radius: 2px;}'
    },
    modal_content: false
});
</script>

Fly Out Custom Configuration Options

If you've used Klaviyo's default fly out form code, there are different custom configuration options available, including:
  • liststring, required. ID for the list that subscribers will be added to. Example, ABcDeF.
  • modal_content: boolean, required, default: false. Determines if form is a fly out or separate modal.
  • 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 popup, all fly outs and popups will remain closed on all pages. Use this option to give a fly out or popup a specific name, thus causing only others with the same name to remain closed.
  • ignore_cookie: optional, boolean, default: false. If a user closes a fly out or popup, 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' }
  • position: optional, string, values: right, left. The side of your pages that the form will slide out from. Example: position: 'left'.
  • 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.
    • 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 Klaviyo's default form code, the first thing you'll want to customize is the 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.attachFlyoutSignUp ({  
   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 Fly Out is Displayed

There are a number of options that allow you to control when your fly out form is displayed. The two most common ways to trigger a fly out is either when someone scrolls a certain percentage of the way down a page or after someone has been on a page for a set amount of time. First, an example to change the scroll amount that triggers the sign up:
KlaviyoSubscribe.attachFlyoutSignUp({  
   ...  
   delay_scroll: 20,  
   ... 
});

The delay_scroll option can be a number between 0 and 100, "bottom" or false. If it's set to a number, that's the percentage of the page someone must scroll in order to trigger the fly out. If it's set to "bottom", we'll close the fly out when someone reaches the bottom of a page. Finally, if you set the delay_scroll option to false, how far someone scrolls won't be taken into account when showing the fly out.

If you want to show your fly out after a set amount of time rather than based on scrolling, use the delay_seconds option:

KlaviyoSubscribe.attachFlyoutSignUp({  
   ...  
   delay_scroll: false,
   delay_seconds: 5,  
   ... 
});

In this example you need to set the delay_scroll to false, which turns it off, and then specify the number of seconds to wait before showing the fly out.

Styling your Pop Up/Modal Form

If you styled your form already in Klaviyo, you should be all set!

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_flyout">
 <div class="klaviyo_inner">
 <div class="klaviyo_topbar" />
 <a href="#" class="klaviyo_close_flyout klaviyo_header_close">×</a>
 <form class="klaviyo_subscription_form">
 <p class="klaviyo_header"></p>
 <p class="klaviyo_subheader"></p>
 <div class="klaviyo_inline_fieldset">
 <input type="email" name="email" placeholder="Your email address" />
 <button type="submit" class="klaviyo_submit_button"><span></span></button>
 </div>
 </form>
 <div class="success_message" ></div>
 </div>
</div><br>

You can then add your own HTML/CSS styling.

Add Custom Fields

Here is an example of a customized fly out code that adds a "First Name" and "Last Name" field.

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.attachFlyoutSignUp({
            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?
2 out of 5 found this helpful