Developer Hub
My Account
Start FREE Trial

Formstack Installation Guide

Formstack eCommerce Integration

Find Data8’s Formstack Installation Guide here to get started with your data validation journey. Our integration for Formstack currently contains integrations for PredictiveAddress, Email Validation, Phone Validation, Name Validation and Bank Validation.

Step 1: add an Embed Code field

To integrate Data8 Validation or PredictiveAddress into your Formstack form, drag an ‘Embed Code’ field onto your form. This can be placed anywhere on your form (start, end etc).

formstack installation guide

Step 2: Generate your configuration code using the form below

Simply fill out the form and click generate to get your custom code.

Client API Key
Perform Validation
Validation will be performed when the value of the field changes
Use PredictiveAddress
Include Multiple Residency Properties (Requires additional licensing)
Include addresses from the UK Multiple Residency database, e.g. multiple flats behind a single letter box, university halls of residence
Include Not Yet Built Properties (Requires additional licensing)
Include addresses from the UK Not Yet Built database, e.g. houses currently being developed
Use Geocoding (Retrieve latitude and longitude information)
Include location information (latitude/longitude, easting/northing and/or grid reference, depending on country) where possible
Use what3words to get Geolocation (Requires additional licensing)
Indicate if the coordinates of the what3words searched for by the user should be included in the response instead of the standard coordinates available for the address. This option consumes a what3words credit in addition to the standard PredictiveAddress credit.
Allowed Countries
An array of ISO2 country codes that the user is allowed to select from, e.g. [ "GB", "US" ] to limit the user to UK and US addresses or ["GB"] for just UK addresses. Leave this set to null to allow the user to select from all the supported countries
Barred Countries
An array of ISO2 country codes that the user is not allowed to select from, e.g. [ "RU", "CN" ] to allow the user to select any country other than Russia or China. Leave this set to null to not block any countries
Use Name Validation
Use Email Validation
Email Validation Level
In addition to the Server level checks, validates that the mail server accepts mail for the full email address.
Use Phone Validation
Default Country Code
Specify the ISO 2-character country code or international dialling code of the country to validate the telephone number in, unless that number contains an explicit country code prefix. i.e. 'GB' or '44'
Use Bank Validation
Use Custom Fields
This option adds the custom field variables into the generated code for you to populate with field Id's. This option is only necessary if the code doesn't automatically detect the fields on your form.

Step 3: Paste code in Embed Code field

Having generated your code above, you can now copy and paste this into your Embed Code field.

formstack installation guide

Additional Configuration

To configure the validation to suit your needs, open the ‘Embed Code’ field and change the value of the variables to suit your needs. An API key is required to use any of the validation or PredictiveAddress services. Each validation service requires the necessary credits to function.

If you are using the PredictiveAddress service, please note that the 'county' property of the address is often not populated in the response as it isn't actually required by the Royal Mail and isn't always possible to retrieve. Therefore, it is recommended that you either remove the county field from your forms, or make sure the county field is not required.

PredictiveAddress Options

When the PredictiveAddress service is enabled, the PredictiveAddress Options box will become visible. This box can be left blank to use the default configuration of PredictiveAddress. However, should you wish to customise your integration, you can do so by entering any combination of the options available for the PredictiveAddress service.

For example, enter the following into the PredictiveAddress options box to detect the initial country in the PredictiveAddress search, from the users IP address:

initialCountry: "auto"

PredictiveAddress & ///what3words

You can search for any 3 word address by simply typing out the three words like so “pitch.tells.civil”.

what3words Address

If you wish to store the 3 word address that was used to retrieve the final address, add the class data8_what3words to an input field to indicate where we should store the what3words address.

what3words Location

If you wish to use what3words to get a more precise latitude and longitude, you will need to pass in the options:

includeLocation: true
includeWhat3Words: true

and then add the classes: data8_latitude and data8_longitude to some text inputs to indicate where to store the returned data.

Using PredictiveAddress with Multiple Address Fields

To attach the PredictiveAddress service to more than one address field, add the data8.customAddressFields = []; option before the closing script tag in the Data8 code. This option takes an array of objects which specify which fields to map PredictiveAddress to (one object per address group). For example:


data8.customAddressFields = [
{
"line1": "address2Line1",
"line2": "address2Line2",
"line3": "address2Line3",
"city": "address2City",
"county": "address2County",
"country": "address2Country",
"postcode": "address2Postcode",
"company": "address2Company"
}
];

Where “address2Line1” is the ID attribute of your line 1 field on the second address group.

You do not need to specify each of the field mappings above for an address. The only required lines are “line1” and “postcode”. The rest can be removed if necessary.

Below is an example of how the option can be used to add PredictiveAddress to 3 address groups (notice the line3, county, country and company lines have been removed from the mapping to match the fields on the example form):

data8.customAddressFields = [
{
"line1": "field76199206-address",
"line2": "field76199206-address2",
"city": "field76199206-city",
"postcode": "field76199206-zip"
},
{
"line1": "field116263591-address",
"line2": "field116263591-address2",
"city": "field116263591-city",
"postcode": "field116263591-zip"
},
{
"line1": "field116263593-address",
"line2": "field116263593-address2",
"city": "field116263593-city",
"postcode": "field116263593-zip"
}];

The Data8 validation in Formstack is compatible with multi-page forms and also with the ‘skip validation between pages’ option.

Usage

After setting up the options to suit your needs, the relevant enhanced data capture and validation will be applied to the appropriate fields on your form. The standard name, email, telephone and address fields will be validated accordingly. Custom/extra fields can be added to the configuration through the ‘custom_..’ variables in the settings.

The following rules can be used to attach Data8 Validation to acceptable fields:

  • Email: Either a field name attribute containing email or a text input of type email, or an id attribute listed in data8_customEmailFields.
  • Telephone: Either a field name attribute containing phone or a text input of type tel, or an id attribute listed in data8_customPhoneFields.
  • Name: A field name attribute containing name (excluding username and company name), the class ‘fsFieldName’ or an id attribute listed in data8_customNameFields.
  • Address (PredictiveAddress and Postcode Lookup): Field id’s for custom address fields can be added data8_customAddressFields in the following format. (Only ‘line1’ and ‘postcode’ are required):


[{ "line1": "", "line2": "", "line3": "", "city": "", "county": "", "country": "", "postcode": "", "company": "" }]

PredictiveAddress

When PredictiveAddress is enabled, any suitable address entry section on your forms will have use of our address autocomplete and verification tool. Simply begin typing an address/postcode/company name into the Address line 1 or company box to start searching and narrowing down results.

formstack installation guide
Close

Join the Conversation

Receive the latest news, views and hot topics directly in your inbox! Sign up below

Follow us on social media