How to integrate AddressFinder with Contact Form 7 (single country)

Upgrade your Wordpress forms to collect verified addresses from New Zealand or Australia.

This tutorial will show you how to collect verified addresses for EITHER New Zealand or Australia. If you are interested in enabling the widget for both countries see this post.

If you are reading this we will assume you have a Wordpress site and you want to collect addresses. The easiest setup option is to add AddressFinder to the free plugin — Contact Form 7.

Contact Form 7 is a customisable contact form creator which helps you collect data from your users. AddressFinder is an address autocomplete widget which makes your forms easier to use, and makes sure collected addresses are complete, accurate and verified.

The information gathered via this enhanced form has many uses, such as enabling you to send out samples of your product, enabling the provision of gifts or rebates to survey/form responders, improves the process of mailing out your newsletter, or for simply gathering contact information.

Lets get started!

Step 1. Confirm that you have the Contact Form 7 Plugin installed by selecting Plugins → Installed Plugins from the Wordpress Admin menu and looking for it in the list. Have it? — Advance to Step 3.

Step 2. If you don’t have Contact Form 7, add it by clicking on the ‘Add New’ button at the top of the page, searching for it, then pressing ‘Install Now’, then the ‘Activate’ button. Activating Contact Form 7 will add a new option: ‘Contact’ to the Wordpress Admin sidebar.

Step 3. In the Wordpress Admin sidebar click on Contact → Contact Forms.

Step 4. Click ‘edit’ on the form that you wish to add AddressFinder to.

Step 5. Copy and paste the code (directly below-right) into the ‘form’ text box. This will create the HTML (directly below-left). If there is already code in the text box you can either delete it or paste this code beneath it. The ‘Name’, ‘Email Address’ and ‘Phone’ fields may be removed or changed if you prefer — they are unnecessary for AddressFinder to work.

1
2
3
4
5
6
7
8
9
<label> Name (required)
    [text* your-name] </label>
<label> Email Address (required) 
    [email* your-email] </label>
<label> Phone (required)
    [tel tel-435] </label>
<label> Address
    [text text-556 id:addressLine1Input]</label>
[submit 'Send']

A screenshot of the form

Step 6. Next, copy and paste the code below into the text box, underneath the HTML code (what you did in step 5).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
  (function(d){
    var widget, initAF = function(){
      widget = new AddressFinder.Widget(
        document.getElementById('addressLine1Input'),
        'ADDRESSFINDER_DEMO_KEY',
        'AU',
        {}
      );
    };
    function downloadAF(f){
      var script = document.createElement('script');
      script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
      script.async = true;
      script.onload = f;
      document.body.appendChild(script);
    };
    document.addEventListener('DOMContentLoaded', function () {
      downloadAF(initAF);
    });
  })(document);
</script>

Step 7. You can setup advanced configuration options by updating the values in this section:

1
2
3
4
5
6
7
widget = new AddressFinder.Widget(
  document.getElementById('addressLine1Input'),
  'ADDRESSFINDER_DEMO_KEY',
  'AU',
  {empty_content: 'no addresses found'}
);

• ‘ADDRESSFINDER_DEMO_KEY’ should be replaced with your own licence key. You can get one of these by signing up for a trial account.

• ‘AU’ refers to the country that you want to find addresses from. If you want New Zealand addresses replace this with ‘NZ’.

• The {} section can be used to add custom options. For example, to change the message a user sees when no addresses can be found you can use the empty_content option. For a full list of possible options check out the options section of our widget documentation.

Step 8. Hit ‘Save’

Step 9. At the top of the page, Contact Form 7 will provide you with a code similar to this one:

1
[contact-form-7 id="124" title="contact_form_1"]

Copy and paste this code into the page or post that you want to see your form on.

Step 10. Navigate to that page and check out Contact Form 7 and AddressFinder in action!

Gotchas

1. Make sure that the javascript code you paste in has no lines of white space. I know it looks a bit confusing/ugly but Contact Form 7 adds extra html elements behind the scenes when it sees empty lines, which will cause an error. If you really dislike this you can add: define( 'WPCF7_AUTOP', false ); in your wp-config.php file.

2. If you copy and paste the code make sure that you haven’t removed any of the speech marks and that they look correct (‘hello’ rather than ’hello’ ). Occasionally styling affects speech marks which can cause values to be incorrect.

Now you are ready to start collecting user contact information and verified addresses! If you want to continue improving your form, check out Flamingo, a free add-on for Contact Form 7 that saves the messages you receive to a database, and displays them in a searchable format so you can easily keep track of the form responses and connect with your users.

I hope this tutorial was helpful and you are happily collecting addresses!

Kate Norquay