How to Add Side Images in Signup Forms

read
Last updated at:

Overview

Including a high-quality image to the left or right of your signup form content can create a beautiful and compelling experience for visitors to your site. In this article, you’ll learn how to create a signup form with a side image, like the one below. 

Side_image_example.png

Add a Side Image to Your Form

To add an image on either side of your signup form content, open an existing signup form in Klaviyo or create a new one. 

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 tab and remove the background image. Then scroll down to Form Styles and remove any excess padding on the right or left side. 

In the Styles tab, navigate to the Side Image section and select the side where you’d like to add an image (left or right). Click on the empty image placeholder; then, click Browse to add an image from your Klaviyo Image Library, or Import from URL to upload a new image.

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. For a smaller or larger form, choose different Size options in the Form Size section. 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. 

Form_styles.gif

Your form’s side image will be hidden on mobile devices by default, as screen space on mobile devices is limited. If you’d like your side image to display on all devices (desktop, tablet, and mobile), toggle on the option to Display on mobile

Side Image Styles

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

Side_Image_settings.png

Image Position 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. 

image_position.gif

Use Alignment and Vertical Alignment to choose whether the image is centered or aligned to the top, bottom, left, or right of the image area. 

Additional Resources

x
Was this article helpful?
0 out of 0 found this helpful