Understanding styles for a sign-up form

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.

Keep the design of your sign-up form simple. It should be clear, uncluttered, and have 1 main purpose. Additionally, you'll want to make it easy to read and follow.

Before you begin

Before styling your sign-up form, navigate to Sign-up forms > Create form. If prompted to choose a channel, enter a name, select Web and click Create. You can customize a pre-built template from the form library, or create a brand new sign-up form template. Add any content and input blocks you’d like to include before styling.

If you're building a mobile-only sign-up form, see basics: mobile form design.

Form types

At the top of the Styles section, choose a Form type: Popup, Full page, Flyout, Embed, or Banner.

• 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.
• Banners appear as a bar at the top or bottom of a webpage. They're less intrusive than popups or full page forms, offering continuous visibility and a mobile-friendly design that integrates smoothly with your website. You can set the banner to scroll with the page or stay fixed, add content blocks or input fields directly to the banner, or configure the banner so that when someone clicks on it it triggers a different form from your account to open.
  • To trigger another form from a banner, click the banner’s button in the preview and set Action to Open another form. Choose a live popup, flyout, or full page form under Form to open. Embedded forms can also use this action, but an embedded form, banner, or back in stock form cannot be the form that opens.

Background images and side images

To add custom imagery to your sign-up form, use a side image 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, there are a few things to keep in mind:

• There are many types of image formats to choose from. JPEGs balance quality and size well for colorful images, while PNGs can keep transparent images or logos looking sharp.
  • Aim for a file size of 50-100 KB for side images and less than 200 KB for background images to ensure high quality imagery without slowing down your site's loading times.
• As with all images viewed on the web, larger file sizes lead to slower load times.
  • Reducing an image’s pixel dimensions or compressing it can reduce its file size, but may also reduce its quality. Consider the tradeoff between image quality and load time when choosing images.
• Be sure to use a reasonably high-quality image for best results.
  
  • To balance image quality and load speed, try to keep your images between 600 and 1000 px in width and less than 2000 px in height for full-width images. Images that are less than the full width of the form can be smaller than 600 px.
    • If you're using a full page sign-up form, you'll need a larger, high-resolution image (e.g., a minimum width of 1980 px) to fit the larger form. Keep in mind that this can still impact load time.
• Add alt text to your image to promote accessibility for all users interacting with your forms.

Sign-up forms appear in web browsers, while emails appear in email clients. Use high-resolution images with manageable file sizes, and test their appearance on each type of device. Images uploaded through the form editor must be 5 MB or smaller.

Add a side image

Side images are available for popup, flyout, embedded, and full page forms. To add a side image:

1. Head to the Styles section and scroll to the Side image settings.
2. Select Left image or Right image, depending on where you’d like the image to appear.
   

3. Click the empty side image area in the form preview, then click Select image to choose an image from your library or upload a new one.

By default, adding a side image sets popup, flyout, and embedded forms to 780 px wide, with a Medium side image. Adjust the image’s share of the form in Styles > Side image. Adjust the overall form width in Popup settings, Flyout settings, or Embed settings. For full page forms, adjust the content width in Full page settings.

Note that side images are set on the step level, so you can set separate images for each step of your form. For more information on display options for side images, head to our article how to add side images in sign-up forms.

Side images are hidden on mobile devices by default. To show one on mobile too, go to Styles > Side image and select All Devices. Preview the mobile layout after making this change.

Add a background image

To add a background image:

1. In Styles, turn on Background image.
2. Click Select image to choose an image from your library or upload a new one.
3. Choose how the image fits: Cover fills the area and may crop the image; Contain shows the full image and may leave empty space; Custom lets you set its width. Adjust the alignment to position the image.

If you add a side or background image to your form, preview all form steps, including the success message, by selecting each step in the top menu bar. 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 steps. For popup, flyout, and embedded forms, adjust Min height under Popup settings, Flyout settings, or Embed settings in Styles. Full page forms do not have this setting. Check the image fit and alignment on every step and device size as well.

Color and spacing options

In Styles, use Background color, Border, Padding, and Margin to adjust the form’s colors and spacing. Use Input field styles to style the input fields. Margin is not available for embedded forms. These settings apply across all of your form’s steps, unless you apply conflicting settings within a specific block.

Fonts and text styles

Use Styles > Input field text to edit the font, size, and color for input fields such as email and phone number fields. Use Text and headings to set shared styles for text blocks, choosing Body or a heading level before adjusting its appearance.

Edit text for a specific Text block by clicking on the block in the form preview and using the Content editor that appears. Klaviyo's form editor uses the UTF-8 coding standard, which means it supports Latin characters, emojis, double byte characters, and more.

Your sign-up form can use the web-safe fonts native to the Klaviyo editors, one of our Klaviyo-hosted custom 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 by default). Click the X icon in the form preview, then adjust its Close icon settings. Embedded forms do not have a close icon. Learn more about styling a form’s close icon.

Shoppers can dismiss a full page form using the close icon or the Escape key. Keep the close icon clear and visible so shoppers don't get frustrated by the interruption of your full page form.

Custom HTML and CSS

Paid Klaviyo accounts can use custom HTML and CSS in sign-up forms. These features are intended for people comfortable writing code. Klaviyo does not provide support for custom code, and incorrect code can break your form. Preview and test your form on desktop and mobile before publishing.

• To change styling with CSS, go to Styles > Custom CSS and turn on Enable custom CSS. Enter your code in Custom CSS code. Learn how to use custom CSS in sign-up forms.
• To add custom content, drag an HTML block from Add blocks onto your form, then select it to enter your markup. This adds content within the block; it does not edit the HTML of existing blocks. Use only supported tags and attributes. Learn how to use a custom HTML block in sign-up forms.

For tips and inspiration on customizing your form using Klaviyo’s editor, head to the Community forum.

Outcome

You've now learned how to adjust various style settings in the form editor to design your sign-up form.

Next steps

Once you’ve styled your sign-up form, learn how to set up your form’s behaviors, including which visitors should see the form and when it should appear. Head to our article how to choose form targeting and behavior settings.

Your styling edits must be published before they appear on your website, including changes to a form that is already live. Once the design and targeting are ready, follow the steps to publish and test your sign-up form.

Once you've published your sign-up form, customize your opt-in confirmation email, if double opt-in is turned on for your list. Then, 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.

Additional resources