How to add side images in sign-up forms

You will learn

Learn how to include a high-quality image to the left or right of your sign-up form for a compelling sign-up experience that matches your brand's design.

Before you begin

Side images appear to the left or right of your form content. 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. 
• Be sure to use a reasonably high-quality image for best results. 
  
  • Try to keep your images between 600 and 1000px in width and less than 2000px in height for full-width images to balance quality and load time. Images less than full-width can be smaller than 600px
• 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 alt text to your image so that your forms are accessible to all site visitors. 

Because sign-up forms are rendered on browsers (unlike emails, which are rendered on ESP's), there are less recommendations for how to format and adjust them. Browsers can render images of all types and sizes, so in general, stick to high-resolution images, manageable file sizes, and test the appearance on each type of device. 

Add a side image to your form

To add an image on either side of your sign-up form content:

1. Navigate to the Sign-up forms tab.
2. Next to your form, click the 3 dots > Edit Form.
   

   If your form was created prior to July 2021 and uses a right- or left-aligned background image as a side image, remove it before using the side image feature. To do so, navigate to the Form Background section of the Styles section and remove the background image. Then scroll down to Form Styles and remove any excess padding on the right or left side. 

3. In the Styles section, navigate to the Side Image section and select the side where you'd like to add an image (left or right).
   
4. Click on the empty image placeholder in the form preview.
5. Click Browse Image Library to add an image from your Klaviyo image library, upload an image, or import a new image from a URL.
   

Make sure to 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 to ensure your image looks high-quality without slowing down your site. 

Side image display options

Form styles

By default, forms with side images are set to 780px wide with the side image width set to Medium. You can use the Width and Minimum height sections to adjust the form's size. If you’d like the side image to take up more or less space within the form, adjust the size in the Side Image section (e.g., small, medium, large, custom). 

Your form’s side image will be hidden on mobile devices by default in order to optimize the mobile experience as screen space on mobile devices is limited. If you’d like your side image to display on all devices, click on the image in the preview, then scroll to Show on and select All devices.

Side image styles

Use the Styles section of the Side Image settings to choose how the image will display. 

• Alt text
  Add alt text to your image so it's accessible for everyone visiting your website.
• Image Position
  This determines how the image will fit within the Side Image area. Select from the following options: 
  • Contain
    The full image will appear within the section, and will not be cropped at all. If the image doesn’t fit precisely into the image area, the background color for the section will fill in any uncovered areas. 
  • Cover
    The image will completely fill the side image area. Some parts of the image may be cut off, to allow the image to fill the space. 
  • Custom
    Select your own width for the image.
• Horizontal Alignment and Vertical Alignment
  These allow you to choose whether the image is centered or aligned to the top, bottom, left, or right of the image area.
• Background color
  If you're using a smaller image in your form, set a background color to fill the empty space behind it.

Additional resources

• Best practices for building accessible emails and forms 
• Understanding styles for a sign-up form
• Getting started with Canva