Gravity Forms

Gravity Forms is a powerful form-building plugin for WordPress that allows you to create complex forms with ease. Utilise Gravity Forms to enhance your workflows with real-time address verification.

Our plugin standardises and verifies AU, NZ and international addresses, email and phone in real-time using the below code.

---

Prerequisites

1. Have Wordpress platform and Gravity Forms plugin installed or available oncloud.

2. Have an active Loqate Harmony API Account. You can sign-up for free trial here.

Enabling Address, Phone and Email verification in Gravity Forms

Here is the actual working demo and actual code used. You can use this as a reference. You just need to supply the user and credential in the code.

https://gbgdemo.wpcomstaging.com/594-2/?frame-nonce=1d232fed1fgbgdemo.wpcomstaging.com

Just copy the below code to your HTML Block component.

<link rel="stylesheet" type="text/css" href="https://common.mastersoftgroup.com/scripts/harmony-2.1.0.min.css">
<script src="https://common.mastersoftgroup.com/scripts/harmony-2.5.0.min.js" type="text/javascript"></script>

<fieldset>
        <label for="Line1">Address Search</label>
        <div class="dropdown">
            <input id="Line1" type="text" placeholder="Start typing your address" autocomplete="off" autofocus style="width: 500px; box-sizing: border-box;" />
            <div id="addressDropdown" class="dropdown-content" style="width: 300px;"></div>
        </div>
</fieldset>

<script>

  function setupLoqate(){

    let al = null;

    Harmony.useEnv('https://hosted.mastersoftgroup.com'); 
    Harmony.useProtocol(Harmony.CORS);
    Harmony.init(<user>,<credential>, Harmony.AUSTRALIA);

    var featureOptions = { exposeAttributes: "1"};

    Harmony.useFeatureOptions(featureOptions);

    var opt = {
    // optional, min 3 chars to trigger the lookup
    minLength: 3,
    //optional, number of candidates to return from search, default is 20
    hits: 20,
    //optional, case type for the output, default is whatever the case in the sot
    // caseType: caseType,

    onSelect: function (ui) {
        console.log("address selected: " + JSON.stringify(ui));
    },

    onRetrieve: function (ui) {        
        //console.log('onRetrieve geocode address selected: ' + JSON.stringify(ui.onRetrieveItem));
        var addressData = ui.onRetrieveItem;
        document.getElementById('Line1').value = addressData.fullAddress;
        document.getElementById('input_1_4_1').value = `${addressData.flatUnitType} ${addressData.flatUnitNumber} ${addressData.floorLevelType} ${addressData.floorLevelNumber} ${addressData.streetNumber} ${addressData.street}`;
        document.getElementById('input_1_4_3').value = addressData.locality;
        document.getElementById('input_1_4_5').value = addressData.postcode;        
        //document.getElementById('Line1').setAttribute('readonly', 'readonly');

    },

    };

    al = HarmonyJS.addressLookup(
    document.getElementById('Line1'),
    'AUSTRALIA',
    'GNAF',
    opt
    );
                 
    var emailInput = document.getElementById('input_1_2');
    var emailOptions = {
            enabled: true, sot: "VE_ALL", options: [ "FORMAT",  "MAILBOX", "MAILSERVER", "DOMAIN", "BLACKLIST" ], //"FORMAT",  "MAILBOX", "MAILSERVER", "DOMAIN", "BLACKLIST"                      
            onValidating: function(email) { 
                console.log("Begin validating email address '" + email + "'"); 
                //additionalInfoInput.innerHTML = "";
            },
            onValidated: function(result) { 
                console.log("Email address " + result.payload.address + " is " + (result.isValid ? "valid" : "not valid")); 
                //additionalInfoInput.innerHTML = "<pre>" + JSON.stringify(result.payload, null, 4) + "</pre>";
                //id="gform_submit_button_15"
                document.getElementById('gform_submit_button_1').disabled = !result.isValid;
            },
            onError: function(messages) {
                console.log("Email validation error: " + messages.join("; "));
                //additionalInfoInput.innerHTML = "<pre>" + JSON.stringify(messages, null, 4) + "</pre>";
            }
        };
        
        emailInput.disabled = false;
        emailInput.value = "";
        //additionalInfoInput.innerHTML = "";
        HraEmailJS.emailValidation(emailInput, emailOptions);

    var phoneInput = document.getElementById('input_1_5');
    var phoneOptions = {
        enabled: true,
        getCountry: function() { 
            return "AU"; 
        },
        onValidating: function(phone) { 
            console.log("Begin validating phone number '" + phone + "'"); 
            //additionalInfoInput.innerHTML = "";
        },
        onValidated: function(result) { 
            console.log("Phone number '" + result.payload.fullPhone + "' is " + (result.status)); 
            //additionalInfoInput.innerHTML = "<pre>" + JSON.stringify(result.payload, null, 4) + "</pre>";
        },
        onError: function(messages) {
            console.log("Phone number validation error: " + JSON.stringify(messages, null, 2));
            //additionalInfoInput.innerHTML = "<pre>" + JSON.stringify(messages, null, 4) + "</pre>";
        }
    };        

    phoneInput.disabled = false;
    phoneInput.value = "";
    //additionalInfoInput.innerHTML = "";
    HraPhoneJS.phoneValidation(phoneInput, phoneOptions);

//id="gform_submit_button_15"

  }      
  
  window.onload=setupLoqate;

</script>

Set-up API Key and the above sample code in Gravity Forms

1. You will need your Harmony API keys (see getting your api keys.)

2. Your user will need domain (e.g. *.wpcomstaging.com) added to key. See (allowlisting domain)

Testing your Installation

You are now ready to test connectivity within your form.

Configuration of requests

You can still use all our API settings (featureOptions).

For example using:

• Dataset / SOT per country - Basic or Pro

• AU Parcel Lockers

• Derived sub-premise feature

See all Address featureOptions here for particular services.