How to Add and Set up the Image Element on Your Form

With Jotform, you can easily add images to your form to make it more branded, visual, and easier to understand. The Image Element is useful for displaying logos, banners, product photos, sample images, visual instructions, or any supporting graphic that helps guide respondents through your form. It’s a simple way to make forms look more polished while giving users helpful context before they submit their responses.

Here are a few ways to use it:

• Add a logo, banner, or other visual to reinforce your brand on the form.
• Show product photos, mockups, or sample designs on order and request forms.
• Include reference images to help customers describe what they want more clearly.
• Add images to event, promotion, or announcement forms to make them more engaging.
• Use it in feedback, intake, or registration forms to give users helpful visual context.
• Display artwork, portfolio pieces, or design examples when collecting creative requests.

Adding the Image Element

Whether you’re creating a new form or updating an existing one, you can add 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. Then, in the Form Elements menu, under the Basic tab, scroll down and then click on Image. Or, just drag and then drop it to where you want it to be on your form.

Once you’ve added the Image Element to your form, the Image Properties menu opens automatically on the right side of the page, where you can customize how it looks and behaves through the following tabs:

• General
• Advanced

Configuring General Tab Properties

After adding the Image Element, you can configure its basic properties to control how it appears on your form. Here’s how to set it up:

1. In the Image Properties menu, under the General tab, click on the Choose a File button of the Image property, and 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.

In Card Forms, the tabs for adding an image are shown by default, and you can enter text in the Description and Question properties to add context or instructions that appear above your image.

2. Next, continue configuring these properties:
   • Size — Keep your image’s original size or let it fit the width of your form if it’s too wide. Or, use the Width and Height input boxes if you want to manually set its size in pixels. You can also click the Padlock icon between the fields to unlock the aspect ratio and set a custom width and height separately. You’ll only find this property in Classic Forms.
   • Image Alignment — Keep this set to Center to position the image in the middle of the form’s width, or click on Left or Right to position it on either side.

That’s it. You’ve configured the Image Element’s General tab properties. If you want to create a copy of it with the same setup, you can click on the Duplicate button at the bottom of the tab.

Customizing Advanced Tab Properties

Once you’ve added the Image Element to your form, you can customize its additional properties to control how it behaves for respondents. Here’s what to do next:

1. In the Image Properties menu, go to the Advanced tab and you’ll see this list of properties you can customize:
   • Alternative Text — Enter alternative text if you want to describe the image for accessibility and SEO purposes. This text may also appear if the image can’t be loaded.
   • Link Image — Toggle this on if you want to make the image clickable. Then, in the field that appears on the right side of it, enter the link where users should be taken when they click on the image.
   • File Reference — Enter a file reference if you want to add a reference value for the image. This can help identify the image when working with custom setups or advanced form use.
   • Hover Text — Enter the text you want to show as a short description when users hover their mouse over the image. You’ll only find this property in Classic Forms.

2. Next, scroll down to the bottom and continue customizing these properties:
   • Shrink — Toggle this on if you want to make the image smaller based on the number of columns set for your form. You can check out our guide on Setting Up Form Columns to learn more. You’ll only find this property in Classic Forms.
   • Move to a New Line — This appears when Shrink is enabled. Toggle this on if you want to move the image to a new line instead of placing it next to another shrunk field.
   • Hide Field — Toggle this on if you want to hide the Image Element from the form. Take a look at our guide on How to Hide Form Elements for more details.
   • Field Details — Click on this section to expand it and view, copy, or update the Image Element’s Unique Name.

That’s it. You’ve customized the Image Element’s Advanced tab properties.

Replacing the Image Element Content

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

1. In Form Builder, click on your Image Element and then click on the Gear icon on the right side of it.
2. Then, under the General tab of the Image Properties menu, click on Remove Image next to the Image Thumbnail.

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