How to Display Images on Your Forms

Last Update: 

This guide shows how to add images to your form using form elements and widgets.

Note

Use a secure HTTPS address when choosing URL as the image source to avoid mixed content blocking.

Using the Image Element

The Image element comes with basic options for displaying images like resizing, aligning, and linking the attached image.

Here’s how to use the Image element:

  1. In Form Builder, add an Image element to your form.
form-builder-image-element-min
  1. Click on Choose a File in the right panel.
  2. Finally, choose the source for your image.
form-builder-image-top-choose-file-min

Here are your options for the image source:

  • Upload — Select an image file from your device.
  • My Images — Choose one from your previously uploaded images. You can also delete your uploaded images here.
  • Enter URL — Provide the link or address to your image.

After adding the image, you can change its size and alignment. To link the image, go to the Advanced tab in Image Properties, enable Link Image, then enter the URL.

Using the Paragraph Element

The Paragraph element, as a rich text editor, can do all the Image element can do plus more.

Here’s how to display images using the Paragraph element:

  1. In Form Builder, add a Paragraph element to your form.
form-builder-add-paragraph-element-min
  1. Click on the Insert Image icon in the editor.
form-builder-paragraph-insert-image-min
  1. Choose the source for your image.
form-builder-paragraph-image-source-min

Here are your options for the image source:

  • Upload — Select an image file from your device.
  • My Images — Choose one from your previously uploaded images.
    Note: To delete your uploaded images, use the Image element.
  • Enter URL — Provide the link or address to your image.

Finally, click on Insert Image.

Using Widgets

For displaying multiple images, you can either use the Image Gallery or Image Slider widget.

form-builder-image-gallery-settings-min
Image Gallery
form-builder-image-slider-settings-min
Image Slider

Here’s how:

  1. In Form Builder, select Widgets in the left panel.
  2. Search for “image.”
  3. Choose Image Gallery or Image Slider from the results and it to your form.
form-builder-image-gallery-slider-widgets-min
  1. In the widget settings panel, click on Choose Images.
form-builder-image-gallery-widget-choose-min
  1. Finally, choose the source for your image:
    • Upload — Select image files from your device.
    • My Images — Choose from your previously uploaded images.
    • Enter URL — Provide the links to your images.
Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • JessicaBSL - Profile picture
  • Jason - Profile picture
  • CscProvidence - Profile picture
  • pikablink - Profile picture
  • clmconsultorialegalmigratoria - Profile picture
  • globalessensa - Profile picture
  • imglobaldesi - Profile picture
  • KellyO - Profile picture
  • EltonCris - Profile picture
  • Lightray - Profile picture
  • evgor - Profile picture
  • posnaforms - Profile picture
  • beme2014 - Profile picture
  • odofertas - Profile picture