Integrate QR Code With Formidable

Requirement

A long-term client asked us to integrate QR Codes with Formidable Forms. This particular client runs an agency out of Denver, Colorado. Her client is a grocer. This grocer uses Formidable Forms to sign up ambassadors (affiliates) and partners. When an ambassador entry is submitted, the user is sent an email that includes this text:

We'll be sending you, in a separate email, a dedicated QR Code that you can share when recommending our Eatery | Grocer | Spirits. Every time your dedicated QR code is used, you earn points. The Ambassador with the most points wins a $100 store credit, good for ANYTHING in the store.

The partner emails are very similar except that they can earn up to $500 in store credits. It's an interesting approach to affiliate marketing.

The requirement is to create a QR Code that can be used as a tracking instrument to allow the site owner to award points and store credits to their ambassadors and partners.

Coincidentally, the day after we received this requirement, a poster in the Formidable Slack Community asked this question:

Has anyone had any luck using QR codes to auto-fill sections of a Formidable form—for instance, scan a code for an asset already captured by Formidable Forms, and it auto-populates the new form with selected details (like make, model, serial number), like a lookup but using a QR code and mobile phone?

Over the course of 2-days, we fielded two very different requirements for implementing QR Codes with Formidable Forms. Each one has its own challenges and solutions, but each solution is rather simple to implement.

What is a QR Code?

A QR code (abbreviated from Quick Response code) is a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to store data efficiently; extensions may also be used

Wikipedia, https://en.wikipedia.org/wiki/QR_code, Extracted March 16, 2021

QR Code Example

Solution

Let's take the second requirement first, auto-populating a form with a QR Code.

Requirement 2 Solution

Fulfilling this requirement is a very simple process. In fact, this article already explains how it can be done: Populate Form B with Form A Values via Email Link.

But wait! That article is about email links. I want to populate a form with a QR Code.

QR Codes link to content. That content can be almost any static or dynamic content that you can imagine. When scanned with a cell phone's camera, the example QR Code above prompts the user to open this site in the phone's browser.

If you create a QR Code for a URL that includes a query string, you can use that QR Code to auto-populate a Formidable form just as the article explains how to do so for Form B when the email link sent from Form A is clicked. You would just use the [get param] shortcode.

There are an abundance of QR Code generators that you can find by searching the internet. Many of them are free, some require creating an account and paying a fee to access their API. The example QR Code was created at https://www.the-qrcode-generator.com/.

Requirement 1 Solution

Since this requirement is for an agency, they are subscribing to a paid QR Code generating API service. This isn't the greatest API we've seen, but it works for what it is designed to do. It is pretty simple to implement using Formidable's API add-on.

This particular API doesn't require basic authentication. It authenticates through the use of a secret key passed as the first parameter of the query string that creates the QR Code. As is our custom when working with API's, we use the Postman client to first make sure we can get an API working. It was surprising how easy it is to use this API and transfer it over to Formidable's API add-on.

Even though this API doesn't require basic authentication to work, the add-on's Basic Auth field still requires a key/value pair as its content. All parameters required by the API are passed as a query string in the Notification URL field.

This part of the setup is easy, but how do we handle the response. Our client's requirement includes the step to add the QR Code's URL to a field in the entry so the code can be sent to the user in a follow-up email. This means we have to understand the content of the API's response and parse it to retrieve the URL. For this task, we'll use the Kint debugger to examine the parameters sent by the frmapi_post_response to the callback function specified in the add_action. In this case, we're inspecting the $response, $entry, and $form_action variables..

In the code, the $form_action variable is enclosed by ddd() instead of d(). ddd() is kint's method for halting code execution at the insertion point.

The three kint commands produce this output:

Clicking the plus sign in front of the variable expands the display to see the variable's actual content. The $response is actually quite lengthy and includes methods and content added by Formidable. For our needs, all we're interested in is the actual response body returned from the API. To do that, we'll json_decode the $response['body'] and view the results.

The QR Code's URL is the third variable on the list. Since json_decode returns the $results as a PHP object with another PHP object named result, we can assign the QR Code URL to a variable with $qr_url = $results->result->qr;.

Here's the completed code for writing the URL to a form entry's field:

A Note About PHP Versions

As much as we can, we develop code for PHP 8 these days. As of the date of this post, the Formidable API does not support PHP 8. While we were testing in our standard PHP 8 development environment, the API add-on caused fatal WordPress errors. We had to revert back to PHP 7.4.16 in order for development to continue.

In addition, the Formidable log add-on used for documenting API calls, produces a non-fatal error because of changes in PHP since the release of 7.4.0, specifically, with its use of the implode() function. The error produced is "Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /wp-content/plugins/formidable-logs/models/FrmLog.php on line 59".