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
Have Wordpress platform and Gravity Forms plugin installed or available oncloud.
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.
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