Who This Is For / When to Use
This feature is for account users who:
Want to improve visual engagement in forms or surveys.
Need to align forms with brand styling.
Want more control over layout and image presentation.
Use images when design, branding, or visual clarity is important for form completion.
Accessing the Forms Builder
Log in to your account.
Navigate to Sites > Forms.
Click + Add Form to create a new form, or open an existing form to edit.
Adding an Image Element to a Form
The Image element allows you to place images directly inside the form layout.
Steps to Add an Image Element
Open the form in the builder.
Click the + icon to open Form Elements.
Scroll to Customized.
Drag and drop the Image element into the form.
Uploading an Image to the Image Element
After adding the Image element:
Click the Image element inside the form.
Click Choose File.
Upload an image from your device.
Image Resizing and Alignment Settings
Each Image element includes configurable display options.
Available settings:
Alt Text for accessibility.
Alignment (left, center, right).
Image Width (in pixels).
Image Height (in pixels).
These options are available in the right-side settings panel when the image is selected.
Adding a Background Image
Background images apply to the entire form page and sit behind all form fields.
How to Add a Background Image
Open the form builder.
Click Styles & Options.
Open Styles.
Expand Colors & Background.
Click the upload area or drag an image into Background Image.
Adding a Header Image
Header images appear at the top of the form and span the full width of the form container.
How to Add a Header Image
Open the form builder.
Go to Styles & Options.
Under Styles, locate Header Image.
Upload or drag an image into the Header Image area.
Styling Context Example
Background and header images can be combined to create immersive layouts that visually frame the form content.
Saving and Previewing Your Form
Click Save to store your changes.
Click Preview to view the form as respondents will see it.
Always preview after adding images to confirm alignment, contrast, and readability.
Example of a Live Form with Image
This is how a form can appear with a background image.
Common Issues and Fixes
Images appear stretched or misaligned
Adjust image width and height manually in the Image settings panel.
Form text is hard to read
Use darker overlays or higher-contrast images for backgrounds.
Slow loading forms
Compress images before uploading to reduce file size.
FAQ
Can I use both a background image and a header image in the same form?
Yes. Background and header images can be used together to create a layered visual design.
What image formats are supported?
Common formats such as JPG, PNG, and GIF are supported.
Can I resize and align images inside the form?
Yes. Each Image element supports manual width, height, alignment, and alt text configuration.
Will images affect form loading speed?
Large images can slow load times. Optimizing image size before upload is recommended.
Where do background images appear?
Background images cover the entire form page behind all fields, while header images appear only at the top of the form.