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