How to Display Images on Your Form

Adding images to your form is a great way to make it more engaging and easier to use. They provide visual context and help explain things more clearly, show examples, and just make the form more appealing. You might want to include a photo to show what a service request looks like, give a design example, or add a map to point out a location. When used well, images can clear up confusion and help people finish your form faster and with less guesswork.

Using the Image Element

The Image element is a dedicated field for adding visuals to your form. It doesn’t collect any information, but it’s great for displaying things like logos, banners, or even to breaking up your form into nicer-looking sections.

Whether you’re creating a new form or updating an existing one, you can add and set up the Image element in a few easy steps. Here’s how to do it:

1. In Form Builder, click on Add Element on the left side of the page.

2. Now, in the Form Elements menu, under the Basic tab, click on Image. Or, just drag and then drop it to where you want it to be on your form.

3. Then, under General tab of the Image Properties window that opens on the right side of the page, click on Choose a File and then, in the menu that opens, go to one of the following tabs to add an image:
   • Upload — Select an image directly from your device.
   • My Images — Choose from images you’ve previously used and saved in your account.
   • Enter URL — Paste a direct link to the image you want to use.

4. Next, set the size and alignment of your image based on what you need:
   • Size — The Width and Height fields set the image size in pixels and only accept numbers. By default, the image keeps its original size unless it’s wider than the form. In that case, it resizes to fit while keeping its aspect ratio. You can manually change the size and unlock the aspect ratio by clicking the Padlock icon between the fields.
   • Image Alignment — Align the image to the left, center, or right side of the form.

Under the Advanced tab, you can also configure the following advanced settings as needed:

• Alternative Text — Describe the image for screen readers or display text if the image fails to load.
• Link Image — Toggle this On and enter the URL in the box that comes up next to it to turn the image into a clickable link.
• File Reference — Set a reference name for the image, which defaults to its base filename. This name can be used in scripts or internal functions to identify the image.
• Hover Text — Enter text in the box that’ll come up as a tooltip when users hover their mouse over the image.

That’s it. You’ve now successfully added an image to your form using the Image element.

And if the images in your Image Element become outdated, and you want to change them, that’s easy too. Here’s how to do it:

1. Click on the Gear icon on the right side of the Image element to open the Image Properties window.
2. Under the General tab, click on Remove Image next to the Image Thumbnail.

3. Then, click on Choose a File to upload a new file.

Using the Paragraph Element

The Paragraph element lets you add formatted text to your form and also supports embedded images. It’s useful when you want to combine visuals with instructions, descriptions, or other supporting content.

Whether you’re creating a new form or updating an existing one, you can add and set up the Paragraph element to add an image in a few easy steps. Here’s how to do it:

1. In Form Builder, click on Add Element on the left side of the page.

2. Now, in the Form Elements menu, under the Basic tab, click on Paragraph. Or, just drag and then drop it to where you want it to be on your form.

3. Next, on the right side of the Paragraph field, click on the Pencil icon.

4. Then, in the Text Editor, click on the Insert Image icon in the toolbar at the top.

5. Now, in the Insert Image window, go to one of the following tabs to add an image, and then click on Insert Image (once you’ve selected or uploaded an image, or inserted a URL, you’ll be able to click on the Insert Image button):
   • Upload — Select an image directly from your device.
   • My Images — Choose from images you’ve previously used and saved in your account.
   • Enter URL — Paste a direct link to the image you want to use.

6. Finally, click on the Encircled Checkmark icon on the right side of the Paragraph field.

That’s it. You’ve now successfully added an image to your form using the Paragraph element.

Using Form Widgets

There are form widgets you can use to display multiple images at once. They help organize visuals neatly without adding separate Image elements. Depending on how you want the images to appear, you can choose between a gallery or a slider format.

The Image Gallery widget displays several images in a tiled layout, letting users see all visuals at a glance. It’s ideal for showcasing product samples, event photos, or any group of related images.

You can check out our guide on How to Add and Set Up the Image Gallery Widget for more details.

The Image Slider widget shows your images in a rotating slideshow format. This is useful for highlighting before-and-after photos, steps in a process, or any image set where you’d like to have a space-saving, swipeable view.

You can check out our guide on How to Add and Set Up the Image Slider Widget for more details.