Breadcrumbs

Adding Images To Forms

There are three ways to show an image, such as a logo, on a form. Choose based on where the image lives.

Method

Best for

Trade-off

Image component (recommended)

Most images. Upload it in the form builder.

Stored inside the form, which grows in size

HTML Element linking to a web address

Images already published on your website

Breaks if the image moves; the site must be allowed by your security headers

HTML Element with embedded image data

When you need full control of the img tag

Same size cost as the Image component, more work

Use the Image component

See Image. Upload the picture on the component's Display tab and set its size.

  1. Add an HTML Element and set HTML Tag to img.

  2. Under Attributes, add src with the image's full address, for example https://www.example.com/images/logo.png. Add alt with a short description, and optionally width.

The image is loaded from that address each time the form opens. If it's moved or removed, the form shows a broken image.

GlobalForms' default security headers only allow images from the GlobalForms server itself. To load images from another site, add that site to the img-src part of the Content-Security-Policy header. See Security Headers.

Embed the image data

  1. Convert the image to Base64 text with an image-to-Base64 tool.

  2. Add an HTML Element, set HTML Tag to img, and add a src attribute whose value starts with the image type, for example data:image/png;base64,iVBORw0KGgo…

Like the Image component, the picture is stored inside the form. Keep it small.

Don't copy image files into the GlobalForms program folders on the server. Automatic updates replace those folders, and the files are deleted.