Create a Sign Up Form for Your Website

Overview

Klaviyo's sign up forms can be added directly to your website to help you grow your lists. For each list, there is a dedicated sign up form builder that allows you to customize the styling for various types of sign up forms: 

  • Subscribe Page
    This is a Klaviyo-hosted subscribe page for a list. You can style this form to match your brand and also add additional fields to collect more information from your subscribers. To share this form, you can send the URL for this page to anyone (or link to it in an email). You can also embed this subscribe form on your own landing page.
  • Embedded Sign Up Form
    This is great for including a short sign up form in the header, sidebar or footer of your website. It will always be visible, and typically just required the subscriber to share an email address. You can customize this form over, by adding additional fields.
  • Fly Out
    Trigger a "fly out" form when visitors stay on a page for a certain amount of time, scroll down, or view multiple pages. This is a less aggressive way to encourage sign ups as people are browsing. 
  • Pop Up / Modal
    Show a pop-up form to visitors when they stay on a page for a certain amount of time or view multiple pages.

To set up a Klaviyo sign up form, copy and paste a short HTML and JavaScript snippet to your website. If you need more control and are looking for a more technical solution, you may want to consider using the Lists API. You can also further customize the styling of each form using CSS. 

In Klaviyo, you won't create a general sign up form or subscribe page for default use. You will build and customize a sign up form on a per list basis. In other words, you'll need to edit the sign up form or subscribe page that is attached to the list you would like new subscribers to be added to. You will find the Sign Up Forms and Subscribe Pages tabs only after you've clicked on a particular list.

2017-05-17_13-27-38.png

Embedded Form (Standard, Condensed, and Unstyled Embed)

The standard, condensed, and unstyled embed options are very similar. The condensed embed is displayed on one line, and the unstyled embed does not include any styling. The unstyled embed is useful if you only need the HTML for a form and plan on using your website's CSS for styling.

For the standard and condensed options, use the Styles section to edit the appearance. In most cases, you'll want the font and button styles to match your website's design. You can customize the following:

  • Font Family
  • Header / Subheader Color
  • Button / Button Hover Color
  • Border Radius: The higher this number, the more curved the edges of your button will be. A value of 0 will be a completely square box.

Once you've styled your form, below the live preview you'll find the HTML code to copy into your website's template. Hovering over the live preview and clicking will also copy the code to your clipboard.

2017-05-17_13-40-15.png

Learn more

While the sign up form builder offers basic styling options, you also can take your forms to the next level by adjusting configuration options and adding form fields.

Pop Up / Modal Form

A pop-up or modal is a sign up form that appears on top of your website's content after a few seconds or minutes.

631231


You can control the styling by editing the options in the Styles section. In addition to the configuration options you'll see for a simple sign up form, pop-ups have a few unique options. Here are the most common ones:

  • delay_seconds
    The amount of time between the page loading and when the pop-up appears; for example, delay_seconds: 0.5
  • header
    The header text for the pop-up. For example, header: "Interested in our Newsletter?"
  • subheader
    The subheader text for the pop-up. For example, subheader: "Stay in the know with news and promotions."
  • button
    The text of the button. For example, button: "Subscribe"
  • success
    The message displayed after someone signs up. For example, success: "Thanks! Check your email for a confirmation."

 

Learn more

View all the possible configuration options and learn how to completely customize the HTML and style of your pop up (to include an image, for example) in this article.

Fly Out Form

After a page loads, a fly out will slide out from the side of the window after a set period of time or when a visitor scrolls down to a set area. Here are the most common customizable options:

  • delay_scroll
    The percentage of the page's height before the fly out will appear; for example, delay_seconds: 50, will show the fly out when someone has scrolled halfway down the page
  • delay_seconds
    The amount of time between the page loading and when the fly out appears; for example, delay_seconds: 0 will cause the fly out to show immediately once the delay_scroll setting has been satisfied
  • header
    The header text for the fly out; for example, header: "Interested in our Newsletter?"
  • subheader
    The subheader text for the fly out; for example, subheader: "Stay in the know with news and promotions."
  • button
    The text of the button; for example, button: "Subscribe"
  • success
    The message displayed after someone signs up; for example, success: "Thanks! Check your email for a confirmation."

Learn more

View all the possible fly out configuration options here.

Third-Party Form & List Growth Tools

If you are interested in using a third-party tool to build styled sign up forms or landing pages, check out our running list of signup tools that integrate with Klaviyo.

Was this article helpful?
2 out of 7 found this helpful