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

These are the list of things we need to do to create a Contact Form 7 address autocomplete form:

contact form 7 autocomplete addon

  • After installation of the plugins, you need to add your license key for the pro version. Once you do that, it should look like this:

contact form 7 auto populate field

  • Go to Contact -> Ultimate Addons menu in your WordPress Dashboard and enable the IP Geo Fields from Ultimate Addons settings.  

contact form 7 address autocomplete

Contact Form 7 Address Autocomplete – Live Example

In this tutorial, we will create a Contact Form 7 form which will show address: city, state, country and zip field automatically. You can, for sure, create your form following the same steps.

contact form 7 autocomplete

Check our main demo to see all the features of our Contact Form 7 address city state zip addon.

Let’s Create Our Autocomplete Form

Go to Contact -> Add New in your WordPress Dashboard to create a new form.  You will get a contact form editor on your admin screen with some buttons named City, State, and Zip Code, as well as the Country Dropdown.

contact form 7 zip code field

Choose your Field

Now, click on City/State/Zip Code/Country dropdown button. You will find separate options on each. However, on each of them you will find the option called “Auto complete *** field using user’s network IP”. Tick that along with any other options you prefer:

cf7 addons

Insert Tag

Click the Insert Tag button beside at the end of the Form-tag Generator popup and you will see the tag inserted in your editing panel.

contact form 7 address city state zip

Now, do the same for all the other address field. It should look something like the above photo.

Rearrange Your Fields

You can rearrange the fields or rename the labels or tags based on your needs.

Copy the Shortcode

If your form is ready, click save and copy the Contact form shortcode.

Copy Short Code - Themefic

Time to Publish

Paste the shortcode wherever you want to show your form (Pages/Posts/Custom Post Types/Sidebars). The result should be something similar to the above form.

Looking for Country Dropdown with Flag?

On our free version, you can set up Contact Form 7 Country Dropdown with Flag easily with the help of our Free Addon “Country Dropdown Field”. Here is a live demo example of the form.

Watch Complete Video

If you are still confused, we suggest you watch this video. In this video, we tried to describe the whole step of How to setup autocomplete field with Contact Form 7:

Full Form Code

Here is a sample code of our above form:

<label> Your name
    [text* your-name autocomplete:name] </label>

<label> Your email
    [email* your-email autocomplete:email] </label>

<label> City
[uacf7_city* your-city city_auto_complete]</label>

<label> State
[uacf7_state* your-state state_auto_complete]</label>

<label> Zip
[uacf7_zip* your-zip zip_auto_complete]</label>

<label> Country
[uacf7_country_dropdown* your-country country_auto_complete]</label>

<label> Your message (optional)
    [textarea your-message] </label>

[submit "Submit"]

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