Sam Webster
Created Feb 15, 2024Populating 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.
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.
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.
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'
}
]
}, 
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"
}
]
}, 
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'
}
]
}
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'
}
]
}
]
}
#
Launch the MegaEdit product
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.
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
}
]
}