Skip to main content
You are here: Forms

How to Capture Multiple Images in a Form

Overview

Discover how to easily configure an image grid in your forms, providing form users a simple way to capture multiple images.

Adding and Configuring the Image Grid

Name Controls

After adding a new control, always name and label it using the Shift+Click quick edit menu.

Step-by-step

  1. Drag the Image Grid component from the Images and Media section of the Component Selector onto your form.

  2. In the Layers tab, select the group within the image grid.

  3. In the Type dropdown menu, select image. Click the + button to add the image field. You may rename the image field (optional).

  4. Under Control Properties, map the image field to the image field you added in the Layers tab using a calculation. Click on the sigma button to open the calculation modal.

  5. Select the correct field in the calculation.

  6. Configure additional settings (annotation, camera, file picker) as needed.

Using the Image Grid

From the designer preview, you can upload multiple images at once from your device's photo files or take new pictures using your device. If you enabled annotation in the control properties, you can also annotate the images.

Advanced Image Grid Options (Optional)

Adding a Title Field

You can add more fields in the Layers tab and map them to Image Fields in the Control Properties.

Image Field Required

Only the image field mapping is needed; all other mappings are optional.

For example, add a string field for image titles. To add a string field, select the image grid group in the Layers tab. Select string from the Type dropdown and click +.

The title field will display on the image and is accessible for the user to edit in annotation mode.

Map additional fields to the corresponding fields in the image grid Control Properties. For example, map the title string field you created. Other optional fields include number of columns, number of rows, subtitle, and icon.