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:
- Make sure Contact Form 7 and Ultimate Addons for Contact Form 7 are installed on your WordPress site.
- Download & Install Ultimate Addons for Contact Form 7 Pro and IP Geolocation Addon from our Client Portal.
- 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:
- 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 – 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.
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.
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:
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.
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.
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.