How to add address autocomplete to Contact Form 7?

This article provides a detailed guide on how to add address autocomplete to Contact Form 7. It explains two methods, add it while creating a new form or adding it to an existing form.

Unlike other forms in WordPress, Contact Form 7 doesn't automatically assign an id attribute to fields therefore you will have to manually add them.

if you need help with other forms please see the article about Google address autocomplete in WordPress by WPCube.

Add address autocomplete to an existing form

To add an id attribute to an existing form please follow these steps.

  1. Go to Contact Forms and locate the form where you want to add address autocomplete.

  2. Edit the form

  3. Find the field

  4. Add id attribute just after the name attribute. For instance, id:some-id-name

  5. Click Save button to save the changes

  • Then copy the newly added id and paste in Simple Address Autocomplete settings.

  • Click Save Changes to save it

  • Viola, your field has now address autocomplete functionality.

Add address autocomplete to a new form

While creating a new form in Contact Form 7, all you need to do is fill in the id attribute filed and add it Simple Address Autocomplete settings.

Follow these steps to create a new form with address field.

  • Go to Contact

  • Create a New Form

  • Name the new form

  • Add a new Text Field. It is important that you select TEXT field otherwise you may encounter errors

  • Add id attribute.

  • Click Insert Tag to add the field to the form.

  • Click Save to save the new form

  • Then copy and paste the id to Simple Address Autocomplete settings as shown above.

Last updated