INTEGRATIONSWORDPRESSCONTACT FORM 7
One class per fieldFree — Contact Form 7

Contact Form 7.

CF7 has no address field, so you tag yours. Two minutes, once per form.

Contact Form 7 builds forms from individual tags and has no concept of an address field, so there is nothing for the plugin to detect. You tell it which of your fields are which by adding a class to each tag. Once tagged, it behaves exactly like the automatic builders.

SETUP

Three steps.

Step 1

Install the Postio plugin, activate it, and save your API key under Settings → Postio.

Step 2

Open your form, go to Additional Settings and add: html_class: postio-form

Step 3

Add a class to each address tag, as below.

EXAMPLE

A tagged form.

Copy this into your form and change the field names to whatever you already use — only the classes matter.

[text* your-name]
[email* your-email]

[text address-search class:postio-search placeholder "Start typing your address"]
[text line1 class:postio-line-1]
[text line2 class:postio-line-2]
[text town class:postio-town]
[text postcode class:postio-postcode]
CLASSES

What to tag.

Only postio-line-1is required. Everything else is optional — tag the fields you have and leave out the ones you don't.

CLASSFIELDNOTES
postio-line-1Address line 1Required. Doubles as the search box unless you add postio-search.
postio-line-2Address line 2Optional.
postio-townTown or cityOptional.
postio-postcodePostcodeOptional.
postio-searchSeparate lookup boxOptional. Add this if you want a dedicated "start typing" field above the address.
WORTH KNOWING

Details.

The html_class on the form itself is what lets the plugin find the form at all — without it, the field classes do nothing.

Leave out the postio-search tag if you would rather line 1 doubled as the search box.

Ready in under a minute.

Sign up, grab a key, paste it in. Your first hundred lookups are on us.