Best practices

Many registration forms need to capture an address from the customer. Often the address captured is the customer's home address or delivery address. The typical registration form will ask the customer for their address in a format such as:

Address Line 1
Address Line 2
Suburb
State
Postcode

Adding Addressfinder

There are two main approaches to applying Addressfinder to your registration forms. You can either include the JavaScript widget in an existing unmodified form, or you can choose to adjust your form to take advantage of Addressfinder's capabilities. We suggest the second option. Examples of form integrations can be found in our code examples for address, email, and phone verification.

You can add the JavaScript widget to the Address Line 1 field, and configure it to automatically populate the existing address form fields when the user selects an address.

When you add Addressfinder to your form, we suggest that you reduce the number of fields captured to just a single address line. When the user selects an address, all of the address components will remain within that one address field.

Depending on your requirements, you will probably want some or all of the individual address elements. You should store these in hidden form fields.

Capturing address data

As described above, we suggest that you display the selected address on a single line, but store the individual address elements separately in hidden fields.

Hiding these fields from the user will reduce the size of your form, which may lead to a higher conversion rate. In addition, hiding these fields will reduce the opportunity for the user to tamper or adjust them.

As well as the address elements, we also make available additional metadata about the address (e.g. GPS coordinates, canonical address, census data, etc.).

Have a look at the response documentation on the address elements returned. We suggest you store everything so as to future proof yourselves against any future requirements.

Handling missing addresses

Our data comes from authoritative sources (Learn more).

In cases where an address will appear to be missing from Addressfinder, it makes sense to allow your users to provide their address in a manual manner. We suggest adding a link such as "Enter your address manually" which displays a set of hidden address fields when clicked.

Handling failure

Addressfinder is a very stable platform with an impressive uptime. Our infrastructure has multi-site redundancy and handles failure well.

But no service can ever be 100% reliable, and occasionally there may be a problem.

We suggest that you allow users an option to manually enter an address for when Addressfinder is unavailable. You could use the approach suggested above.

Fixing browser quirks

Bypassing autofill

Google Chrome and Safari's autofill features are user-controlled settings that web developers have very limited control over. This presents a problem for us with the Addressfinder widget, since the autofill control will cover the suggestions provided by Addressfinder.

Disable on Chrome

To disable the autofill on Chrome you need to change the autocomplete property to a non standard value such as `"disable-autocomplete".

<input
  type="text"
  name="property"
  autocomplete="disable-autocomplete"
>

NB: the previous solution of setting autocomplete="off" no longer works.

Disable on Safari

The Safari autofill checks the input label, placeholder, field name, and id to determine if the field should be auto-filled. If any of these values contain the word address, the autofill will be enabled. To disable this on Safari, we must remove references to the word address in all of these values. Substituting another word for address such as property will work well. If you must use the word address in your label or as a placeholder value, you can add extra but non-visible characters into the word. For example:

The extra characters can't be seen by the user, but including them tricks the browser into thinking there are no address fields. For example:

<label for="property">Add‌ress</label>
<input type="search" name="property" id="property_field" placeholder="Enter your add‌ress">

Internet Explorer compatibility

The code snippet below is constructed from a combination of the standard address autocomplete JavaScript snippet and supplementary code required for Internet Explorer 7 and 8.

<script>
  function downloadAF(f){
    var script = document.createElement('script');
    script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
    script.async = true;
    script.onload = f;
    script.onreadystatechange = function() {
      if (script.readyState === 'complete' || script.readyState === 'loaded'){
        f();
      }
    }
    document.body.appendChild(script);
  };

  if (document.addEventListener){
    document.addEventListener('DOMContentLoaded', function(){
      downloadAF(initAF);
    });
  } else {
    document.onreadystatechange = function() {
      if (document.readyState === 'complete' || document.readyState === 'loaded'){
        downloadAF(initAF);
      }
    }
  }

</script>

This code snippet is required to be included if Internet Explorer support is required. If you are not supporting versions of Internet Explorer older than 9 then the standard version of the JavaScript snippet can be used from the installation guide.