IP Geo Fields (Autocomplete)

In this article, we will try to explain how to set up Contact Form 7 Auto Populate Field (City, State, Country, Zip) Feature with the help of our Pro Addon “Contact Form 7 Autocomplete”.  Filling in the usual country, state, or zip fields in a form can affect the user experience. Instead, identifying their IP geolocation and filling in the fields automatically can cut down on the effort and time required to fill the forms — making user retention likelier. 

What is Contact Form 7 Autocomplete?

The Contact Form 7 Autocomplete Addon enables you to implement IP Geolocation for auto-filling the Country, City, State, and Zip fields in Contact Form 7. These fields will automatically populate based on the user’s IP address. Additionally, you have the option to designate certain countries and a default selection in the country dropdown menu.

What’s needed

Contact Form 7 Address Autocomplete

Contact Form 7 Address Autocomplete – Live Example

In this tutorial, we will create a Contact Form 7 form that automatically displays address fields such as city, state, country, and zip code. You can easily follow these steps to create your own form.

contact form 7 autocomplete

Check our main demo to explore all the features of the Contact Form 7 Address Autocomplete Addon.

Let’s Create Our Autocomplete Form

Go to Contact -> Add New in your WordPress Dashboard to create a new form. In the form editor, you will see buttons labeled City, State, Zip Code, and Country Dropdown.

contact form 7 zip code field

Choose your Field

Click on City, State, Zip Code, or Country Dropdown. Each field offers a variety of options. For each one, you’ll find an option called Auto-complete field using user’s network IP. Tick this option along with any others you prefer.

cf7 addons

Insert Tag

After configuring the field, click the Insert Tag button at the bottom of the Form-tag Generator popup. The tag will be inserted into your form editor.

contact form 7 address city state zip

Repeat the process for all the other address fields (city, state, zip code, country). Your form should now contain the necessary address tags, and it will look like the example shown above.

Rearrange Your Fields

You can rearrange the fields, rename the labels, or modify tags based on your requirements.

Copy the Shortcode

Once your form is complete, click Save and copy the Contact Form shortcode.

Copy Short Code - Themefic

Time to Publish

Paste the shortcode wherever you want to display the form (Pages, Posts, Custom Post Types, or Sidebars). The final result should look like the example shown in the demo.

Looking for Country Dropdown with Flag?

In the free version of the addon, you can set up a Contact Form 7 Country Dropdown with Flag using the Country Dropdown Field Addon. Check out the live demo example of the form.

Watch Complete Video

If you’re still unsure, watch our video tutorial for a step-by-step guide on how to set up the autocomplete field with Contact Form 7:

Full Form Code

Here is a sample code of our above form:

<label> Country
     [uacf7_country_dropdown uacf7_country_dropdown-911 country_auto_complete] </label>

<label> Your State
    [uacf7_state uacf7_state-804 state_auto_complete] </label>

<label> Your City
    [uacf7_city uacf7_city-201 city_auto_complete] </label>

<label> Zip Code
    [uacf7_zip uacf7_zip-130 zip_auto_complete] </label>
[submit "Submit"]

Still Not Clear? Please contact us. If you are a pro user, you can open a ticket from here.