Tassos Marinos Developer of Joomla Extensions

The QR Code Field

Updated 03 Jul, 2023

The QR Code custom field gives you the ability to add a QR Code and store information such as text, link, telephone, email, skype, vcard and more.

How to add a QR Code Custom Field to Joomla! Articles

The QR Code field provides you the way to set the size of the QR Code image, set the foreground and background color of the QR Code.

acf-qr-code-field-settings

Let's see what each option does.

Name Description
Name The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title.
Label The label of the field to display.
Description A description of the field that will be displayed in the label tooltip.
Required Is this a mandatory field?
Default Value Set the default value of the field
Size Set the size of the QR Code image in pixels. Example: 150.
Color Set the foreground color of the QR Code.
Background Color Set the background color of the QR Code.

Usage

Once you are in your Article's Edit screen, choose the "Fields" Tab to see the QR Code custom field as you can see in the screenshot below.

acf-qr-code-field-usage

In the input field, you can enter the text to store within the QR Code.

QR Code Formats:

Text

To store text you simply enter the text you desire within the input field.

Link

To store a link you simply enter the link you desire within the input field.

Telephone

To store a telephone you enter the following format within the input field.
tel:+302101234567

Email

To store an email you enter the following format within the input field.
mailto:[email protected]

Skype

To store a skype username you enter the following format within the input field.
skype:USERNAME

vCard

To store a vCard data you enter the following format within the input field.
BEGIN:VCARD%0d%0aFN:NAME%0d%0aTEL;WORK;VOICE:TELEPHONE%0d%0aEMAIL:EMAIL%0d%0aADR;TYPE=home;LABEL=ADDRESS:PO_BOX;ROOM_NO;STREET;TOWN;POST_CODE;COUNTRY%0d%0aEND:VCARD

Frontend Display

Take a look at the screenshot below to see how it could be displayed in your frontend.

acf-qr-code-frontend

Frequently Asked Questions

What is a QR Code?

A QR code (short for "quick response" code) is a type of barcode that contains a matrix of dots. It can be scanned using a QR scanner or a smartphone with built-in camera. Once scanned, software on the device converts the dots within the code into numbers or a string of characters. For example, scanning a QR code with your phone might open a URL in your phone's web browser.

Which browsers does it support?

All browsers will let you display a QR Code. What you need to scan them is either a mobile device with an app that can read the QR Codes or a browser extension which can do the same thing from inside the browser.

Which is the ideal size for a QR Code?

People often ask how big or small (physically) a QR Code can be, well the simple answer is that there are no limits, a QR Code doesn’t have to be a set size and can be printed to any required size. The surface area of a QR Code is only limited by its environment and expected use combined with the resolution of the scanning device, there isn’t a technical limitation.

Do QR Codes have to be black and white?

Although most QR Codes are black and white, they don't have to be. They can have any color or even multiple colors as long as the contrast between the QR code foreground and background is strong enough. So you can create blue, red, green, color gradient QR codes.

This works because QR code readers look for color contrast to detect a QR code and not for color value. You can also color the white background of the QR code as long as there is enough contast to the foreground color.

Can QR Codes be scanned via mobile devices?

QR codes can be used on various mobile device operating systems. There are many free QR code reader for smartphones. However, they differ significantly in terms of usability, scanning speed and standards compliance (in particular regarding the processing of vCards).

The smartphone devices have to support URL redirection, which allows QR codes to send metadata to existing applications on the device.

Is QR Code Field based on a 3rd party service?

The QR Code Field uses the API provided by goqr.me which let's us generate QR codes.

Does it support the standard barcode?

There are different barcode standards. In general, barcodes are used as optical machine-readable labels on objects, containing information about the object on which they are glued. The most popular barcode type is used on the product packaging and can be viewed at every grocery store where they make the Universal Product Code machine readable. Because of their omnipresence, the terms “barcode” is often used synonymously for this UPC-A barcode symbol, although there are many other barcode types.

How can I override the layout of "ACF - QR Code" custom field?

To override the "ACF - QR Code" custom field, read here: How to override the "ACF - QR Code" custom field.