Ready to build a website that does it all? 🏆 Get the free Webflow x Typeform ebook

here
Signup
 

Add images and GIFs to your forms

You can add images and animated GIFs to your questions, as well as to the Welcome screen and the Ending screen. This will help you to brand your typeforms with your own logos, design and photography. Time to get creative!

Here we explain how to add media to your typeforms, going through the process of inserting images and animated GIFs.

There are two ways to add images to your typeform: using our integrated Unsplash-powered library, or uploading your own (see step 2 below). You can also set how they look using our Layouts feature.

1. Click on any question you want to add an image to, then click + next to Image or video under Question settings to open the media gallery.

Add_image.png

2. Now you can upload an image or GIF by clicking Upload, or dragging and dropping an image into the Upload field.

addimages1.png

You can upload GIFs the same way as you would upload images, as long as they comply with the following specifications:

- File format: JPEG, PNG, static and animated GIF (typeforms support PNG files with transparent backgrounds).

- File size: 4MB maximum.

3. In the Image tab, you can search for a picture via the Unsplash image library. Simply type in a search term, and scroll through the images until you find one you like. I’m looking for "kittens".

addimages2.png

4. Click the image you want to load automatically into your typeform.

addimages3.png

Then, close the gallery.

HC_BobRoss_ilu_cropped.png
Tip! All the images you find with the Unsplash image search tool are free to use however you like. You can use them for private or commercial purposes. You have a non-exclusive copyright license to download, copy, modify, distribute, and use photos from the library, without the need for permission or attribution to the photographer (though giving credit is always appreciated).

5. To edit your image, hover over it and click Edit.

Screenshot 2024-04-03 at 16.35.37.png

This will open the Image editor.

2023-11-17_13-56-56.png

You can crop your image by dragging the blue border around it to the size you want and change its aspect ratio. Drag the small dots to the left or right to adjust the degree angle of the image. 

In the Adjustments tab, you can flip or rotate the image and adjust the brightness, contrast and saturation. 

2023-11-17_14-05-25.png

You can also change the image by adding a filter. Click the Filters tab, and browse until you find one you like.

2023-11-17_14-08-33.png

Once you're happy with your image, hit Save, and you can decide on your image Layout.

6. Under Question settings, you can choose a different layout for Mobile and Desktop devices. Click on the dropdown and select the layout that suits you. 

Screenshot 2024-04-03 at 16.37.29.png

Unsplash images come with an Alt text description. This helps people with impaired vision understand what is on the screen. You can add or edit the Alt text by typing into that field.

7. You can drag and drop the Focal point or adjust the Brightness of the image you've added, or hit the Reset button to restore the original focal point.

Screenshot 2024-04-03 at 16.38.50.png

You can also optimize your respondent experience on mobile by checking what images will look like with different mobile layouts and focal points.

In the example below, the image is cut off in one of the mobile layouts when using the original focal point.

Screenshot 2024-05-23 at 13.15.52.png

However, this issue can easily be fixed by adjusting the focal point for that mobile layout, as seen in the screenshot below.

Screenshot 2024-05-23 at 13.01.15.png

At any time, you can click the Change, Edit, or Remove button to edit or delete your images, GIFs, or videos.

Tap into our community knowledge