Skip to the content

International Forms

Make your address entry forms multi-national.


Country Auto-Detection

Help your users out by selecting the right country for them by default

The default country selection is based on two settings, initialCountry and fallbackCountry.

The initialCountry setting specifies which country is selected by default. This can be set as an ISO standard 2-character country code, e.g. "GB" or "US", or it can be set to "auto".

If it is set to "auto", the default country is determined based on the user's IP address, utilising our Country Detection service. Note that you must have credits for the Country Detection service for this to work.

If the automatically detected country is one that is not currently supported by PredictiveAddress, or a country cannot be determined automatically, the country specified by the fallbackCountry setting is used. This should be set to an ISO standard 2-character country code.

Separate Country Field

Store the selected country in one of your address fields

If your form has a drop-down list to contain the country of the address, this can be connected to the PredictiveAddress control by including an entry in the fields configuration section:

var txt = document.getElementById('address1');
new data8.predictiveaddressui(txt, {
    // Change this to your own Ajax key
    ajaxKey: 'your-ajax-key',
    fields: [
        { element: 'address1', field: 'line1' },
        { element: 'address2', field: 'line2' },
        { element: 'address3', field: 'line3' },
        { element: 'city', field: 'town' },
        { element: 'county', field: 'county' },
        { element: 'postcode', field: 'postcode' },
        { element: 'countrylist', field: 'country' }
    ]
});

In this example, PredictiveAddress will take the default country from the selected value in the countrylist drop-down list. When an address is selected, the country that address is in will be selected in that drop-down list.

Country Format

By default we assume countries are stored in a drop-down list with the values as codes, e.g. "GB"

If you instead store country names rather than codes, you can use the countryFieldFormat option to set this up:

var txt = document.getElementById('address1');
new data8.predictiveaddressui(txt, {
    // Change this to your own Ajax key
    ajaxKey: 'your-ajax-key',
    fields: [
        { element: 'address1', field: 'line1' },
        { element: 'address2', field: 'line2' },
        { element: 'address3', field: 'line3' },
        { element: 'city', field: 'town' },
        { element: 'county', field: 'county' },
        { element: 'postcode', field: 'postcode' },
        { element: 'countrylist', field: 'country' }
    ],
    countryFieldFormat: 'name'
});

Limiting Countries

PredictiveAddress will normally allow the user to select from a list of all our available

However, you may wish to restrict this list in some way, perhaps because you only deliver to a certain country or can't deliver to specific excluded countries. We facilitate these two approaches using the allowedCountries and barredCountries settings.

To allow the user to select only countries that you explicitly allow, supply the ISO 2-character codes for those countries as the allowedCountries settings, e.g.

var txt = document.getElementById('address1');
new data8.predictiveaddressui(txt, {
    // Change this to your own Ajax key
    ajaxKey: 'your-ajax-key',
    fields: [
        { element: 'address1', field: 'line1' },
        { element: 'address2', field: 'line2' },
        { element: 'address3', field: 'line3' },
        { element: 'city', field: 'town' },
        { element: 'county', field: 'county' },
        { element: 'postcode', field: 'postcode' }
    ],
    allowedCountries: [ 'GB', 'US' ]
});

This would allow the user to only select United Kingdom or United States from the country list. If only one country is allowed the country selector will not be shown at all.

To allow the user to select from any of our supported countries except specific exclusions, use the barredCountries setting instead, e.g.

var txt = document.getElementById('address1');
new data8.predictiveaddressui(txt, {
    // Change this to your own Ajax key
    ajaxKey: 'your-ajax-key',
    fields: [
        { element: 'address1', field: 'line1' },
        { element: 'address2', field: 'line2' },
        { element: 'address3', field: 'line3' },
        { element: 'city', field: 'town' },
        { element: 'county', field: 'county' },
        { element: 'postcode', field: 'postcode' },
        { element: 'countrylist', field: 'country' }
    ],
    barredCountries: [ 'AU' ]
});

This would prevent the user from selecting Australia from the country list, but would allow any of our other supported countries without having to list them all individually.

Alternative Languages

By default the PredictiveAddress service will return all addresses in English.

However, if you want to return Welsh addresses in Welsh you can add the following option:

var txt = document.getElementById('address1');
new data8.predictiveaddressui(txt, {
    // Change this to your own Ajax key
    ajaxKey: 'your-ajax-key',
    fields: [
        { element: 'address1', field: 'line1' },
        { element: 'address2', field: 'line2' },
        { element: 'address3', field: 'line3' },
        { element: 'city', field: 'town' },
        { element: 'county', field: 'county' },
        { element: 'postcode', field: 'postcode' },
        { element: 'countrylist', field: 'country' }
    ],
    preferredLanguage: 'cy'
});