Adding Images To Forms

It may be necessary to add images, logos, and other graphics to forms for instruction, personalization, or styling.  The HTML Element Component can be leveraged in a number of ways to add images to forms.  An HTML Element can take on many forms.  While the default option is a paragraph tag, almost any HTML tag can be represented through this component.  In this use case, change the default HTML Tag of the component from p (a paragraph tag) to img (an image tag).  HTML Tag is a property found on the Display tab in the component's settings.

Reference a web accessible image

Many times, the required images are already accessible on a public website.  If that's the case, add an src (source) attribute in the Attributes section and use the URL to the image for the attribute's Value.  Many times you will be able to get an image's source URL by right clicking on the image in a web page and choosing the Copy Image Address menu option.  You can add other attributes associated with an image tag as necessary, like width or height.

 Using this approach, images are loaded from the original source location.  If that source location becomes unavailable, the image is removed from that location, or the image is changed in a way that impacts its display, the form will no longer be able to display the image.

Reference an image hosted by GlobalForms

If you have an image file, but don't have a web server readily available to host it, GlobalForms can serve as the host.  Save an image file to the GlobalForms view folder (c:\globalforms\client\dist\view) and the image will be accessible by any form in the system.  As in the example outlined above, use an HTML Element Component, change the tag from "p" to "img", and add an "src" attribute.  Because GlobalForms is hosting the image, it's URL path will be relative.  Simply use the format /view/yourimagefilename for the Value of the img attribute.  Be sure to change "yourimagefilename" with the actual file name and extension of the image you intend on referencing.

Add an image to the form directly

An HTML img tag can directly embed an image in the src attribute's value.  For this to work, the image will need to be Base64 encoded.  Base64 is a method of expressing binary data (the image's raw bytes) in a text format.  There are many tools freely available to convert an image file to a Base64 encoded string of text.  Do an internet search for "base64 image encoding" to find many free websites that will do the conversion without any signup.

Once you have a Base64 encoded string, use it for the src attribute's Value.  Be cautious when embedding images directly in a form.  A GlobalForm can not exceed 15 megabytes in size.  In general, even very complex forms are no where near that size.  If large images are embedded directly into a form however, there is a chance you can reach or exceed the maximum size for that form.

For your Base64 equivalent encoding make sure you have added the image type information to the beginning of it. Like this for a PNG file. data:image/png;base64,

Truncated Example of Value data:image/png;base64,iVBORw0KGgoAAAAN..........................