QR Codes and Barcodes

GlobalForms can draw QR codes and barcodes for you. Show one on a form, for example a QR code that links to a web page, or a Code 128 barcode of an invoice number that staff can scan later.

The barcode address

Every GlobalForms server creates barcode images at /barcode/. Add the barcode type and the text to encode to the address, and it returns a PNG image:

https://forms.example.com/barcode/?bcid=qrcode&text=Hello%20World

Open the address in a browser to try different settings before you add a code to a form. Keep the slash after barcode; without it the image doesn't load.

Signing in isn't needed to load a barcode image, so codes appear on public forms too.

Settings

If a setting is wrong, the address returns a short error message instead of an image, for example when text is missing or the barcode type is unknown.

Barcode types

Many more types are available. They follow the names used by the open source BWIPP barcode library.

Encoding the text

The text is part of a web address, so characters such as spaces, &, #, +, % and / must be URL-encoded. For example, a space becomes %20 and & becomes %26. Text that isn't encoded is cut short or changed, and the code holds the wrong value.

Show a fixed code on a form

Use this for a code that is the same for everyone, such as a link to your website.

1. Add an HTML Element component to the form.

2. In its Content, add an image whose address starts with /barcode/:

   HTML

   <img alt="QR code for our website" src="/barcode/?bcid=qrcode&text=https%3A%2F%2Fwww.example.com&scale=4&paddingwidth=4&paddingheight=4">
   

3. Save the form and open it to check the code.

An address that starts with /barcode/ always uses the server the form is on, so you don't need to include the server name.

Show a code from a form field

To build the code from what the user enters, for example an invoice number, take the value from the form data. The code updates as the user types.

Simple values

If the field only ever contains letters, numbers, dashes and dots, put the field's property name in double braces in an HTML Element:

<img alt="Invoice barcode" src="/barcode/?bcid=code128&includetext&height=12&scale=2&text={{ data.invoiceNumber }}">

The value is inserted without URL encoding, so don't use this method for values that can contain spaces or other special characters. Placeholders like {{ data.invoiceNumber }} work in the HTML Element component, but not in the Content component.

Any value

For values that may contain spaces or special characters, such as names, addresses or web links, set the image address with a short script that encodes the value:

1. Add an HTML Element with an empty image that has an ID:

   HTML

   <img id="invoiceQr" alt="Invoice QR code">
   

2. Add a Text Field and select Hidden on its Display tab.

3. On its Data tab, add this Calculated Value. Change invoiceNumber to your field's property name, and invoiceQr to the image's ID:

   JavaScript

   var img = document.getElementById('invoiceQr');
   var url = '/barcode/?bcid=qrcode&scale=4&paddingwidth=4&paddingheight=4&text=' +
     encodeURIComponent(data.invoiceNumber || '');
   if (img && img.getAttribute('src') !== url) { img.setAttribute('src', url); }
   value = url;
   

The hidden field saves the image address with the submission, which is harmless. See Rules and Scripting for more on calculated values.

Tips

• Test every code with the scanner or phone that will read it, at the size it will be printed or shown.

• Add padding around QR codes, and keep the text short. Shorter text gives a less dense code that scans more easily.

• To change the size on screen without changing scale, set a width on the image, for example style="width:150px".

Related pages

• Rules and Scripting

• Building Forms