How to Add Multiple Images to a Form

How to Add Multiple Images to a Form


To add multiple images to a form, the images are inserted into an Image Grid control via a workflow transition. 


The end result will look something like the below. The user clicks the “Add an Image” button on their form, then provides an image (through upload, taking a new picture, etc.) and an image title and clicks OK. The user can click “Add an Image” to add an image to the grid as many times as they want. You can configure the size of the images within the grid (you could make the images 5 across instead of 2, for example).


Below we’ll walk through the steps to accomplish this . . . 

(1) Add an Image Grid to your form

  1. Navigate to the Form Designer in Edit Mode
  2. Drag an Image Grid control onto the form 
  3. Go to the Layers tab in the left panel (this is the tab below the Component Selector)
  4. Add one image field into the group within the image grid
  5. Shift & click on the image field in the Layers tab to name it “image”
  6. In the Control Properties tab in the right panel, map the “image Field” to the new field “image” you just added in the layers tab in the previous step
  7. If you want to have a title for the images as well, repeat steps 4-6
  1. Add a string field named “title” in Layers
  2. Map it to Title Field


(2) Create a workflow transition to add images to the grid

  1. Navigate to the Workflow Designer 
  2. Navigate to Chart Mode 
  3. Add a circular transition (don’t put anything for Start Statuses or End Status) to your workflow using the blue + button. This will be the transition used to submit the image. In the example below I have called my transition “add an image”.
    After adding the transition, your new transition should look like this in your workflow chart:
  4. Navigate to Edit Mode  and make sure the new transition is selected at the bottom
  5. Add a section control to the dialog; name can be anything
  6. Add an image field inside the section control in the dialog; name must be “image” exactly
  7. You’ll want some way to allow the user to select an image in the image field, so you can enable attachments, enable camera, add templates, etc. in the Control Properties for your image field
  8. If you added the title field in step 7, then add a text input control into the section as well named “title”
  9. Add a form update using append to array with the below selections
  1. Set: Select the image grid from your form (this should say array in the field browser)
  2. From: Select the group (not the image field) that’s in your dialog
  1. Save your workflow



(3) Optionally, provide a button on the form for users to trigger the new transition

If you’re ok with the “Add an Image” button being like the standard transition button overlaid on top of the bottom right of your form, like below, then you can skip this part. If you want the button on the form like in the screenshot at the top of this article, then follow the below steps.


  1. Navigate to the workflow designer and make sure the add an image transition is selected at the bottom and you’re in Edit Mode
  2. Turn Show Button off in Transition Properties (this will hide the transition button that overlays on the bottom right of your form)
  3. Navigate to Edit Mode in the form designer
  4. Drag a Workflow Transition Button to the desired place on your form
  5. In the Control Properties in the right panel, select your add an image transition in the transition name dropdown


That’s it!