Code examples

In this page

Address widget for Javascript libraries

Make use of a variety of popular libraries to integrate Addressfinder into your form/page.

Custom address widget examples

1. Urban address search only - The example demonstrates the widget being filtered to return only urban addresses. Rural addresses are being excluded from the search results.

   #Restrict #Urban

2. Physical address search (no PO boxes) - The example demonstrates the widget being filtered to return only physical addresses. PO box and Private Bag address types are excluded from the search results.

   #PO Box #Restrict

3. Capturing Address Metadata - Demonstrates capturing several of our metadata attributes, and saving them into hidden fields on a form. In this example, we capture GPS coordinates, the meshblock ID, the NZ Post DPID field and also the name of the region. The example of the AddressFinder widget showcases some of the extra data that can be collected along side each Address. The addresses GPS location, meshblock ID and DPID are all collected in this example.

   #DPID #GPS #Meshblock #Metadata #Region

4. Custom styling: Fixed width adjustment - The example of the Addressfinder widget has the manual styling feature turned on. This enables the styling to be set by the customer rather than using the default style. When you make a search, the address results in this example will span to the width of the input element instead of the variable width option the widget usually returns.

   #Styling #User Interface

5. Smart Billing and Shipping Checkout Form - The example shows how Addressfinder can be used in a smart way within an address collecting form. By toggling the 'Ship to my billing address' button a user can specify a separate shipping address (no PO Box type addresses) to their billing address (address delivered to by New Zealand Post).

   #Multiple Widgets #PO Box #Shipping

6. Multiple country address form - The code demonstrates the searching of an address from either AU or NZ. It then the populates the address info into the address fields. The country select box is used to determine which address database is searched.

   #Multiple Countries #Multiple Widgets

7. Restriction by Geofence - The code produces a pop-up which notifies the user whether or not they are in the designated location.

   #Geofence #Logic #Restrict

8. International Address Autocomplete - Demonstrates how to use the widget to search for addresses within 15 different countries.

   #International #Multiple Countries

9. Open Street Maps Address Geocoding with SA1 - The example shows how you can capture Addressfinder data and populate it on Open Street Maps while also obtaining SA1 metadata. It functions for both AU and NZ.

   #GPS #Maps #Multiple Countries #Multiple Widgets #Open Street Map

10. Form without address line 2 - The example shows the basic use case of the AddressFinder widget but on a form that has fewer address fields. This form only has one "address line" so the widget has been modified to combine the 'Address_Line_1' and 'Address_Line_2' elements when populating the content into the appropriate field.

    #DOM #Logic #Split Fields #Street

Custom Email widget examples

1. Allow all emails - With this, you will not block any email from being submitted, but you will have the ability to ask your customers to add a better email address if possible. The message is optional and a nicely worded default will be provided if omitted.

   #Email

2. Strict blocking - With this, you will block all addresses apart from valid, corporate email addresses.

   #Email

3. Verify email and address autocomplete (NZ) - This form demonstrates the verification of an email field, as well as the address autocomplete widget being used on the same form.

   #Email #Multiple Widgets #Split Fields

Other code examples