You will learn
Learn how to use Klaviyo’s sign-up form builder to design your form by editing the design settings available in the Styles section. Style settings apply across your sign-up form, including in all of a form’s steps and in its success message.
To optimize your form, you'll want to keep a few things in mind. First, your form should be clear, uncluttered, and have one main purpose. Additionally, you'll want to make it easy to read and follow. Head to our article on building accessible emails and forms in Klaviyo to ensure that your form is accessible to all.
To learn how to set up your form’s behaviors, like which visitors should see it and when it should appear, head to our article how to choose form targeting and behavior settings.
Before you begin
Before styling your sign-up form, create your form and add any content and input blocks you’d like to include.
Form types
At the top of the styles section, you can choose a form type: popup, flyout, embed, or full page:
- Popups appear in the middle of the browser's window. A popup is attention-grabbing, and is best used for important offers or critical messaging. Popups have the highest conversion rate of any form type.
- Flyouts slide into the browser's window from any direction you select. These, like popups, can be used to get someone to accomplish something or redirect them, but because it’s a less intrusive option, you can use it to gather information about your browsers in a passive way.
- Embedded forms appear where you paste the provided code snippet on your site. Embedded forms are the least intrusive sign-up form and are typically used in the footer of a site to collect email addresses.
- Full page forms display over the entire browser window, capturing your shoppers' full attention. These are high-converting forms since they cannot be easily overlooked, however this also makes them more intrusive since shoppers' must interact with the form to close it.
Consider using a full page form as a landing page to grow your subscriber list. Design your full page form in the editor, then navigate to the targeting and behavior section and set the form's display timing to Show immediately on page load.
Backgrounds and side images
To add custom imagery to your sign-up form, use a side or background image. Side images appear to the left or right of your form content, while background images are displayed behind your form fields.
When using an image in a form, use a reasonably high-quality image for best results. As with all images viewed on the web, larger file sizes lead to slower load times. Aim for a file size of 50-100 KB for side images and less than 200 KB for background images to ensure your image looks high-quality without slowing down your site.
Add a Side Image
To add a side image, head to the Styles section and scroll to the Side Image settings. Click Left image or Right image, depending on where you’d like the image to appear, then select an image. Note that side images are set on the step level, so you can set separate images for each step of your form. For detailed instructions, head to our article How to add side images in sign-up forms.
Add a background image
To add a background image, toggle on the Background Image setting under Form Background, upload your image using the Browse button, and adjust the display settings to your liking.
If you add a side or background image to your form, preview all form steps, including the success message. By default, your form’s height adjusts based on the content and form fields on each step, so some steps may be taller or shorter than others. When your form includes an image, some image content can be cut off on smaller-sized steps. To avoid this, set a minimum height under Form Type in the Styles section.
Color and spacing options
Use the Form Styles, Input Field Text Styles, and Input Field Text Styles settings to set padding, margins, colors, and a site overlay for your form. These settings will apply across all steps, unless conflicting settings (e.g., for text or colors) are applied within a content block’s style settings.
Fonts and text styles
Choose a font for your input blocks (e.g., an email or phone number field) in the Styles section under Input Field Text Styles. Other text settings, like fonts for text and button blocks, can be set in the styles settings for each block.
Your sign-up form can use Klaviyo’s built-in fonts, or you can add your own custom fonts. Learn how to use custom fonts in your sign-up forms.
Close icons
You can adjust the size, color, and style of your form’s close icon (the X in the top right corner). Click the icon in the form editor, then adjust the settings in the editor on the left. Learn more about styling a form’s close icon.
If you selected to use a full page form, the only way your shoppers can dismiss this form is by clicking the close icon. This is helpful for capturing their attention, but be sure that the close icon is clear and visible so shoppers don't get frustrated by the interruption of your full page form.
Custom HTML and CSS
Klaviyo’s sign-up form editor does not currently support custom HTML or CSS content. For tips and inspiration on customizing your form using Klaviyo’s editor, head to the Community forum.
Next steps
Once you’ve published a sign-up form, you can:
- Customize your opt-in confirmation email, if double opt-in is turned on for your list
- Build a welcome series to deliver your form’s offer (e.g., a discount or free shipping on their first order) and introduce new subscribers to your brand
- Learn how to view form responses
- Optimize your forms by A/B testing your message and design