Form Design: How to Add Images That Automatically Adjust Size Without Distortion

Is there a better element similar to the paragraph element that I can add images too that will automatically adjust ratio size? Currently the images are distorted when pasted inside the paragraph box.

Hi Kendall,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

For adding images that automatically adjust their aspect ratio without distortion, instead of using the Paragraph element, you should use the Image element in Jotform. The Image element is specifically designed for visuals and keeps the original aspect ratio by default when resizing images to fit the form width.

Here’s how to add and set up the Image element to avoid distorted images:

1. Click on Add Element in Form Builder on the left side.
2. Select the Image element from the Basic tab and drag it to your form.
3. Upload or choose your image from your device, My Images, or by URL.
4. Set the size of the image. By default, it keeps the aspect ratio unless you manually unlock it.
5. Adjust alignment as needed (left, center, right).

This method ensures your images maintain their original ratio and do not get distorted like when pasted inside the Paragraph element.

If you want to display multiple images in a neat, interactive way, you can also consider using the Image Slider widget or the Image Gallery widget, which handle multiple images with proper sizing and layout.

Give it a try and let us know how it goes.

I want text and images to be together so when I use conditional formatting, it keep it simpler versus having to hide multiple elements with each conditional format.

Hi Kendall,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

To have text and images together in one element for simpler conditional formatting, you can use the Paragraph element in Jotform. The Paragraph element supports adding formatted text along with embedded images within the same block. This way, you only need to apply conditional logic to one element instead of multiple separate elements.

Here’s how to add images and text together in the Paragraph element:

1. Add a Paragraph element to your form from the Basic Elements tab.
2. Click the Pencil icon on the Paragraph field to open the rich text editor.
3. Use the Insert Image icon in the editor toolbar to add images from your device, My Images, or via URL.
4. Add and format your text around the images as needed using the editor’s formatting tools.
5. Save your changes by clicking the checkmark icon on the Paragraph field.

Note that images added inside the Paragraph element might not automatically maintain aspect ratio perfectly and could get distorted if resized improperly. To avoid distortion, try to keep images at their original size or use the Image element separately if precise aspect ratio control is critical.

Using the Paragraph element to combine text and images simplifies conditional formatting because you only need to hide or show one element instead of multiple.

Give it a try and let us know how it goes.