Gravity Forms QR Code Scanner: Fill Fields by Scanning a QR Code

The doors open in ten minutes, two hundred people are queuing, and your check-in form asks each of them to read out a twelve-character ticket code while a volunteer types it on a phone. One typo and the lookup fails, the line stops, and someone starts spelling. The ticket already carries a QR code; the only thing missing is a way for your Gravity Forms form to read it.

This guide shows how to add a Gravity Forms QR code scanner to any form, so a field is filled by pointing a camera at a code instead of typing. We will use the Gravity Forms QR Code Generator Premium Add-on, which already creates QR codes from entries and, from version 1.1.0, can also scan them back in.

Where Scanning Into a Form Saves Time

• Event check-in: scan the code on the ticket, confirm, done.
• Vouchers and coupons: staff validate a code at the counter without typing it.
• Equipment and asset forms: scan the label on a laptop, a tool or a room to log a loan, an inspection or a repair.
• Deliveries and returns: read the parcel or order code into a receipt form.
• Membership cards and badges: look up a member at the door or at a class.

In every case the code already exists as a QR code. Typing it by hand is slow on a phone and error-prone, and errors in codes are exactly the kind that are hard to spot later.

Your Options

1. A separate scanner app

A QR app on the phone can read the code, but then someone has to copy the text, switch back to the browser and paste it into the right field. It works for one or two codes, not for a queue.

2. A hardware barcode scanner

USB and Bluetooth scanners type the code into whatever field has focus. They are fast, but they cost money, need charging and pairing, and you need one per desk or volunteer.

3. Scanning inside the form

The simplest option is a button next to the field that opens the camera and fills the field when it recognises a code. Any phone, tablet or laptop with a camera becomes a scanner, and nothing has to be installed.

How the Scan Button Works

The add-on adds a setting to every Single Line Text field. When it is turned on, a Scan QR code button appears under the field. Tapping it opens a small camera window; as soon as a QR code is in view, its text is written into the field and the camera closes.

Scanning happens in the visitor’s browser. Browsers that have a built-in QR reader use it; the others use the reader that ships with the add-on, so phones and computers are both covered. No picture is uploaded or sent to any service. If there is no camera, or camera access is blocked, the window offers Use a photo instead, so a picture of the code works too.

Step-by-Step: Add a QR Code Scanner to a Gravity Forms Field

Step 1: Install or update the add-on

Install the QR Code Generator add-on, or update it to version 1.1.0 from the Plugins screen, and make sure your license is active in Forms → Settings → QR Code Add-On.

Step 2: Turn on scanning for a field

Open your form, click the Single Line Text field that should receive the code (for example “Ticket code”), open the Advanced tab and tick Show a “Scan QR code” button.

Step 3: Decide whether a scan should submit the form

For a check-in desk, tick Submit the form after a successful scan. Fill in any fields that come before the scan (for example the staff member or the gate), and each scan then sends the form on its own. For forms where people still need to add details after the scan, leave it off.

Step 4: Publish and test on a phone

Open the form on a phone. Tap Scan QR code, allow the camera once, and point it at a code. The field is filled and you can continue with the rest of the form.

Camera access only works on secure pages, so the form must be served over https:// (which every live site should be anyway).

What Gets Written Into the Field

The field receives the exact text stored in the QR code. For a ticket that is usually a short code such as TICKET-4821; for a code that holds a link, it is the full address. If the text has several lines, as the codes created by the QR Code Generator feeds do, the lines are joined with spaces (a single-line field cannot hold line breaks), so it is worth choosing what goes into a code with scanning in mind: a single ticket or member number is the easiest to look up later. Because the scanned value lands in a normal field, it appears in the entry, in notification emails, in exports and in any feed that uses that field, exactly like a typed value.

When the Camera Is Not Available

Some visitors use a computer without a camera, some browsers block the camera on a page until it is allowed, and some company devices block it entirely. The scan window explains what happened and offers Use a photo instead. On a phone this opens the camera app or the photo library; on a computer it opens a file picker. The code in the picture is read the same way, and visitors can always type the value.

Generating and Scanning With the Same Add-on

The QR Code Generator add-on already turns submissions into QR codes: a feed builds the code from the fields you choose, and merge tags place the image, its URL or a download link in confirmations and notification emails. That makes a complete loop possible with one form builder:

1. A registration form creates a QR code with the ticket number and emails it to the attendee.
2. At the event, a check-in form with a scan field reads the code from the attendee’s phone or printout.
3. Both forms store entries in Gravity Forms, so you can compare registrations and check-ins.

From version 1.1.0, the generated images are saved in your uploads folder with unique, hard-to-guess file names, and links in earlier entries and emails keep working.

Practical Tips

• Keep codes short: a ticket number or ID is read faster and more reliably than a long text.
• Light matters: in a dark venue, turn up the screen brightness of the phone showing the code, or use printed codes.
• Validate the value: combine the scan with Gravity Forms validation (for example a fixed length or an input mask) so a wrong code is caught before submission.
• One device per entrance: with “submit after scan” turned on, a single phone on a stand can handle a whole queue.
• Test before the event: scan a few printed and on-screen codes with the devices your team will use.

Frequently Asked Questions

Does it work on iPhone and Android?

Yes. The scanner runs in the browser on current iPhone and Android phones, and on computers with a webcam. It needs an https:// page.

Do visitors need to install an app?

No. Everything runs in the browser, and the photo option covers devices without camera access.

Is the camera picture stored or uploaded?

No. The picture is read in the browser and only the text of the QR code is written into the field.

Can I still type the value?

Yes. The field stays a normal text field; scanning is just a faster way to fill it.

What’s new in 1.2.0: scan barcodes, not only QR codes

The Gravity Forms QR Code add-on can now fill a field from a product or shipping barcode. It reads EAN-13, EAN-8, UPC-A, UPC-E, Code 128, Code 39, ITF and PDF417 as well as QR codes.

Quick tutorial: a stock check-in form

1. Add a Single Line Text field called “Product barcode”.
2. On its Advanced tab, turn on the scan button and click the Retail (EAN / UPC) preset.
3. Tick “Only accept values that match an allowed format” so a mistyped barcode is caught on submit.
4. Open the form on a phone, tap Scan barcode and point the camera at the product. The field fills in as soon as the code is read.

Wrong reads are thrown away: EAN and UPC codes must pass their check digit, and the scanner ignores formats you did not allow. Existing QR scan fields keep working exactly as before. Full steps are in the setup guide.