50/50 Image and Form

#Overview

The 50/50 Image and Form component is designed to split a page section into two distinct halves: one side showcases an image, while the other presents a form and headline. This layout can appear on landing pages, contact pages, or service sign-up sections, where you want to capture user information alongside a visual highlight.

This component enables users to visually balance content by combining an image with a customizable form and headline. The section is versatile, easy to configure, and adaptable to various page styles.

Best use cases

This section is strong enough to stand on its own. For example, you can place this as the only section on your contact page and it'll feel natural. This section also excels as the final call to action at the end of a page.

This should be your go to when you have a great portrait style image. Landscape style images can work too, but they'll be zoomed in to fit the area.

How NOT to use this

Avoid using this component with images that contain text or fine details, as the image may be obscured by the layout. This is especially true for mobile as the image will become the background image of the form on smaller screen sizes. Avoid pairing with forms that contain too many fields, which could disrupt the visual balance.

FAQ, pro tips, and troubleshooting

Pro tip
Because the image grows to take up 50% of the screen at large screen sizes, images with a higher resolution are recommended. However, avoid going bigger than 1920x1080 (landscape) or 1080x1920 (portrait) as images larger than this will take up more space without increasing the displayed quality of the image of on the website.