Adding Images to a form can make the form itself more visually appealing and more educational. You can add images in many places in your forms such as Element (Widget) Icons, Image Labels that can span the width of the device, and Image Option Lists that take advantage of the Hi-Resolution of some of the newer devices out there.
The purpose of the Image Label is to form builders to add images to their forms. Since these inputs are labels, they will not appear in your data, and will only be visible on the device. To use Image Labels you need to define the directory where the images live in the Edit Form Properties section of a form.
Similar to image option lists, each element on your form can have an icon. The image file name needs to match the data column name within the form.
Since each new form could have a column named “iform”, you can re-use the same image across many forms but not in the same form. These images need to be placed in the same directory as your Image Label assets. So Lets say we have a Dropbox Folder called iform with the following 4 images inside the iform folder:
In the Edit Form Properties Page on the Parent Form, link to the dropbox folder housing the images via the Label Icons URL. The link should be similar to the one in the image below:
From here each data column name in FormBuilder should be called item1, item2, item3, and item4. These data column names will then reference the PNG files in the dropbox folder.
In the following example, the element's label is First Name. The Data Column name is item1.
Image Icon Option Lists
You can link images to options in a list by creating images with the same file name as the option key value. Similarly to how you had to define the Label Icon URL for the image icons above, you need to define the path where all of the images live for the Option Lists as well. This is done in the Option List Manager. Click on the Icons URL section in the Option List Manager to expose the URL field.
In this case these images are hosted in my dropbox folder iFormPics. Each image in the Dropbox Folder have the same name as the KeyValue of the option.
Note: KEY_VALUE is the name of each different option in the list and can be found under the Advanced tab of the Option List Manager.
Pick-List Option List