How to Add Images for Checkbox or Radio Buttons

Are you looking for a way for your users to select images on your form rather than text? Formstack makes it easy to add images as selection options to Radio Button and Checkbox fields.

First, you will need to drag a Radio Button or Checkbox field onto your form. Then open the Advanced Options Editor.

Once in the Advanced Options Editor, you will need to select the "Use Images" checkbox under the List Options. Once the checkbox is selected you'll see another column appear. This is where you can drag and drop, or upload from your computer, the images you want to appear in your form.

After your images have been uploaded, you'll want to set the Image Dimensions. Type a specific pixel size to constrain your images, or choose to just define one dimension (height or width) by leaving the undefined dimension input blank. Next, you'll want to select whether you want your images to be laid out vertically down the form or horizontally across the form. After that, you have the option to select where your text labels will appear in relation to your images. Labels are not required, but you can have them appear above, below, or to the left of your images. Finally, select the "Save Options" button in the top right-hand corner to save your field.

When you're back in the form builder you will see placeholder image for the images you've uploaded and the text labels below them. In order to make your form load faster, we do not render your images in the form builder. You can see how your images will display in the Style tab or by viewing your form.

When users open your form they will see your images on the form. A drop shadow will appear when you hover over an image, and a green border and checkmark icon will appear when an image is selected. There is no way to alter these colors. Once a user submits their form, the label of the image selected will appear in your submission table. When viewing an individual submission, you can choose to "show images". 

Some additional notes:

  • Images are restricted to 2 megs per image.
  • Image options cannot be saved as a list.
  • An image placement holder will appear when no image has been uploaded.
Was this article helpful?
33 out of 59 found this helpful