zerion

Scroll
Follow

Add Images to Form

Adding Images to Forms

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.


Image Label

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.

iFormBuilder Image Label
In this example, I am using my dropbox account, but you can point to any public folder on the web. The image “android_q3.png” is placed inside of the iformMedia folder at the root level of my dropbox account. Next, I add an element to my form that has the input property "Image Label." The last step is to make sure the data column name of this Image Label matches the file name in dropbox.
Image Label
 
Data Column Name: android_q3

 

Element Input (Widget) Icons

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:

Screen_Shot_2012-07-09_at_10.01.40_PM.png

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.

 
Option List Icon Examples:
 
Select Option List
(Users selection will always be highlighted in grey.)

Pick-List Option List


 
Multi-Select Option List
 
 
 
Can't find what your looking for?  Before submitting a request look here!
    Was this article helpful?
    1 out of 1 found this helpful
    Have more questions? Submit a request

Comments

  • Avatar
    Daryl Vogan

    will this work when offline?

  • Avatar
    Simon Wessberg

    Are there limitations to what formats the images are allowed to be in?

  • Avatar
    Tony Ruth

    @Daryl, this will continue to work when disconnected from the web as all assets are downloaded to the device at the time of sync.

    @Simon, you should be using .png for all assets.

    Cheers,

    Tony

Powered by Zendesk