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