Populating a Vcard QR code using the Infigo Form Builder | FB_029
In this tutorial, we'll take a look at populating a QR code to function as a VCard using the Infigo Form Builder.
Our example will focus on populating a barcode with some basic data consisting of a name, organisation and email address. These pieces of data will be input into our product using fields and variables, the creation and configuration of which are covered in greater detail in other Infigo Academy tutorials. As such, this tutorial assumes some prior knowledge on the fundamental concepts of the Infigo Form Builder.
The vCard is not a concept created by Infigo, we are simply utilising an existing format. You can find more information on the available fields and format of the vCard using the following link:
https://www.evenx.com/vcard-3-0-format-specification
We'll only look at a few basic examples of available fields an configuration options over the course of this guide. Take a look at the last steps of the Tango step-by-step guide to see a full copy of the VCard config for the Infigo Form Builder, as it existed during the creation of this content.
1. Our initial product
We begin with a product which is already utilising some of the fundamental elements of the Infigo Form Builder, including:
Infigo Form Builder script activated on the product
A single line text field created
Two variables created, including both the script config and product-side elements. Here, we have placed both variables in one field.
As we can see, all three inputs are available on the customer-facing main form shown on the right.
2. vCard script config
We configure our vCard elements much in the same way as we configured out variables. There is a set format which we input into the script config.
Inform the script that you are to begin inputting vCard information using the code:
vCardParts: [ {
3. Configuring vCard data (Example 1 - Name)
We will begin configuring our Name field. The name field (or N in the vCard properties) is a REQUIRED property.
In our example, the script config for the name field takes the following form:
title: 'Name:', property: 'N', include: true, values: [ { source: 'field', value: 'Name' } ] },The available inputs in this specification consist of:
title - The name you wish to give to this part of the vCard config
property - The property format expected for the vCard, taken from the provided web page (https://www.evenx.com/vcard-3-0-format-specification)
include - true or false. Is this property to be included in the creation of the vCard.
values - Where you begin specifying the Infigo Form Builder elements this vCard property will link to. Inputs in here consist of:
source - static, field or variable.
static - Link to some static, unchanging text from your script config
field - You wish to link to an entire named field on your product
variable - You wish to link to one of the variables you have configured earlier in the script config and that is to be populated in your product.
value - Either the static text, or the name of the field or variable as it is specified in your product.
So in our example, we are linking the N property of the vCard configuration to a field named "Name" on our Form Builder enabled product.
4. Formatting vCard data (Example 2 - Formatted Name)
Formatted name (or FN in the vCard properties) is another REQUIRED vCard input.
We will format this similar to the Name property and again it will link to the name field on our product.
{ title: 'Formatted Name:', property: 'FN', include: true, values: [ { source: 'field', value: 'Name' } ] },
5. Formatting vCard data (Example 3 - Email)
Our next step is to link an email address entered in our product to the EMAIL property of the vCard configuration.
In this example, we are linking this to a variable within our product rather than an entire field. To accomplish this, we have listed the source as 'variable' and have input the name of the variable specified elsewhere in the script config.
You will also see an additional entry in the config of the email named 'type'. This is a requirement for an email field, for which a value of 'internet' is the default.
Note, there are several vCard properties that will require a 'type' input. You can find the acceptable inputs for each of these properties on the provided web page (https://www.evenx.com/vcard-3-0-format-specification)
{ title: 'E-mail:', property: 'EMAIL', include: true, values: [ { source: 'variable', value: 'Email', type: "internet" } ] },
6. Formatting vCard data (Example 4 - Organisation)
We will repeat the methodology of the previous steps to specify the Organisation (or ORG vCard property).
This will again be linked to a variable in our Form Builder enabled product.
{ title: 'Organization:', property: 'ORG', include: true, values: [ { source: 'variable', value: 'Organisation' } ] }
7. Click on Save and Continue Edit
If you have trouble with the formatting (for example, if you receive an error stating it is not a correct JSON format), it can be useful to run your script config through freely available tools.
Some examples include:
JSON Formatter and Validator: https://jsonformatter.curiousconcept.com/#
ChatGPT:
For your reference, the complete script config for our example, including the two variables, is:
{ textVariablesLookup: { "Organisation": { label: "Organisation", value: "", input: "TextField", uiPlacehodler: "", preFix: '', suFix: '' }, "Email": { label: "Email", value: "", input: "TextField", uiPlacehodler: "", preFix: '', suFix: '' } }, vCardParts: [ { title: 'Name:', property: 'N', include: true, values: [ { source: 'field', value: 'Name' } ] }, { title: 'Formatted Name:', property: 'FN', include: true, values: [ { source: 'field', value: 'Name' } ] }, { title: 'E-mail:', property: 'EMAIL', include: true, values: [ { source: 'variable', value: 'Email', type: "internet" } ] }, { title: 'Organization:', property: 'ORG', include: true, values: [ { source: 'variable', value: 'Organisation' } ] } ] }
8. Enable the Barcode Field script on your product
Before we launch the MegaEdit product, ensure the Barcode Field script is active. This allows us to add and define a barcode in numerous formats, including a QR code.
If you cannot access this script, please contact our Customer Support team.
9. Click on Save changes
Launch the MegaEdit product
10. Click on Fields
11. Click on Add Barcode
This will be available if you enabled the Barcode Field script on this product.
12. Configure the barcode to display a QR format
13. Click on Custom Tab
14. Give a name to the newly created barcode field
15. Access the barcode field advanced configuration settings
16. Switch the vCard toggle
This will tell the field to utilise the vCard information you just configured in the script config.
17. Check Fixed barcode field
18. Click on Back
19. Click on Prep and save
This will save your updated product
20. Entering information into the form fields will both populate the QR code contents, as well as the linked fields and variables
21. This creates a funcational vCard!
By scanning this QR code with my phone, I get prompted to add a contact, where the fields populated in our product are already filled.
22. vCard config
Below you will find a more in-depth example of vCard configuration in the Infigo Form Builder script config.
NOTE: that some properties have slightly more advanced requirements than the basics discussed here, however the format of the config is fundamentally the same.
NOTE: The script example below contains numerous notes to assist you. These are identified with the "//" along with the text that follows it. These should NOT be included in your final script config.
vCardParts: [/*{ title: 'Name:', property: 'N', include: true, values: [ { source: 'field', // field, variable, static value: 'Name' // field/variable name or static text } ] }, { title: 'Formatted Name:', property: 'FN', include: true, values: [ { source: 'field', // field, variable, static value: 'Name' // field/variable name or static text }, { source: 'field', // field, variable, static value: 'Surname' // field/variable name or static text } ] }, { title: 'Address:', property: 'ADR', type: 'work', // dom,intl,postal,parcel,home,work include: true, values: [ // (content in order: Post Office Address; Extended Address; Street; Locality; Region; Postal Code; Country) { source: 'static', // field, variable, static value: '' // field/variable name or static text }, { source: 'static', // field, variable, static value: '' // field/variable name or static text }, { source: 'variable', // field, variable, static value: 'TVLStreet' // field/variable name or static text }, { source: 'variable', // field, variable, static value: 'TVLCityTown' // field/variable name or static text }, { source: 'variable', // field, variable, static value: 'TVLRegion' // field/variable name or static text }, { source: 'variable', // field, variable, static value: 'TVLPostCode' // field/variable name or static text }, { source: 'variable', // field, variable, static value: 'TVLCountry' // field/variable name or static text } ] }, { title: 'Birthday:', //birthday (YYYY-MM-DD) property: 'BDAY', include: false, values: [ { source: 'static', // field, variable, static value: '' // field/variable name or static text } ] }, { title: 'E-mail:', //birthday (YYYY-MM-DD) property: 'EMAIL', include: true, values: [ { source: 'field', // field, variable, static value: 'E-mail', // field/variable name or static text type: "internet" } ] }, { title: 'Geo data:', //information related to the global position ex: 37.144534;-122.264581 property: 'GEO', include: false, values: [ { source: 'static', // field, variable, static value: '' // field/variable name or static text } ] }, { title: 'KEY:', //Public key (type = X509; PGP) property: 'KEY', include: false, type: 'work', values: [ { source: 'static', // field, variable, static value: '' // field/variable name or static text } ] }, { title: 'Language :', //adding a language string as defined in RFC 1766 ex:en-US property: 'LANG', include: false, values: [ { source: 'static', // field, variable, static value: 'en-US' // field/variable name or static text } ] }, { title: 'Note:', //supplemental information ex: This number is operational 0800 to 1730 EST\, Mon-Fri. property: 'NOTE', include: false, values: [ { source: 'static', // field, variable, static value: 'This number is operational 0800 to 1730 EST\, Mon-Fri.' // field/variable name or static text } ] }, { title: 'Organization:', //supplemental information ex: This number is operational 0800 to 1730 EST\, Mon-Fri. property: 'ORG', include: true, values: [ { source: 'field', // field, variable, static value: 'Company name' // field/variable name or static text } ] }, { title: 'Revision:', //last revision , date of last update property: 'REV', include: false, values: [ { source: 'field', // field, variable, static value: 'Revision' // field/variable name or static text } ] }, { title: 'Role:', // role, occupation or business category within an organization property: 'ROLE', include: true, values: [ { source: 'field', // field, variable, static value: 'Department' // field/variable name or static text } ] }, { title: 'Phone:', // telephone number with type property: 'TEL', include: true, values: [ { source: 'field', // field, variable, static value: 'Phone', // field/variable name or static text type: "WORK" //PREF, WORK, HOME, VOICE(default), FAX, MSG, CELL, PAGER, BBS, MODEM, CAR, ISDN, VIDEO },{ source: 'field', // field, variable, static value: 'Mobile', // field/variable name or static text type: "CELL" //PREF, WORK, HOME, VOICE(default), FAX, MSG, CELL, PAGER, BBS, MODEM, CAR, ISDN, VIDEO } ] }, { title: 'Title:', // Job title, functional position or function property: 'TITLE', include: true, values: [ { source: 'field', // field, variable, static value: 'Title' // field/variable name or static text } ] }, { title: 'Time zone:', // Time zone property: 'TZ', include: false, values: [ { source: 'field', // field, variable, static value: 'Time zone' // field/variable name or static text } ] }, { title: 'Unique identifier', // represents a persistent, globally unique identifier associated with the object property: 'UID', include: false, values: [ { source: 'field', // field, variable, static value: 'Time zone' // field/variable name or static text } ] }, { title: 'Website url', // represents Uniform Resource Locator property: 'URL', include: true, values: [ { source: 'field', // field, variable, static value: 'Website' // field/variable name or static text } ] }23. Untitled step