How to choose styles for a signup form

read
Last updated at:

You will learn

Learn how to use Klaviyo’s signup form builder to design your form. This article explains the design settings available in the Styles section as well as other areas of the editor. Style settings apply across your signup 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.

Want 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 signup 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, or embed.

  • 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 signup form and are typically used in the footer of a site to collect email addresses. 

Backgrounds and Side Images 

To add custom imagery to your signup 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 Signup 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. 

background_image.jpeg

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.

text_block_styles.jpg

Your signup form can use Klaviyo’s built-in fonts, or you can add your own custom fonts. Learn how to use custom fonts in your signup 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

Custom HTML and CSS

Klaviyo’s signup 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 signup form, you can: 

Additional Resources

x
Was this article helpful?
7 out of 12 found this helpful