theme funda

Google Map Field for Contact Form 7 is the most complete solution for adding a Google Places address autocomplete field to your Contact Form 7 forms. Users type a few characters, select from live suggestions, and an interactive Google Map appears instantly — no page reload needed.
The draggable marker lets users fine-tune the exact pin position. When dragged, the address and coordinates update automatically via reverse geocoding — so what gets submitted is always accurate.
<h3>✨ Key Features</h3>
<ul>
<li>Google Places Autocomplete — real-time address suggestions powered by the Google Places API (new PlaceAutocompleteElement)</li>
<li>Always-visible interactive map — map renders on page load using your configured default centre; no address selection required</li>
<li>Draggable marker — users drag the pin to the exact location; address and lat/lng fields update automatically via reverse geocoding</li>
<li>Responsive map heights — set separate pixel heights for desktop (> 768 px) and mobile (≤ 768 px) from the admin</li>
<li>Default map centre — configure a default latitude and longitude so the map opens on the right region for your audience</li>
<li>Address component sub-fields — optionally show separate inputs for Street Number, City, State, Postcode, and Country; each auto-populated on place selection</li>
<li>Country filter — restrict autocomplete suggestions to one or more countries using ISO 3166-1 alpha-2 codes (e.g. <code>in</code>, <code>us</code>, <code>gb</code>)</li>
<li>Place type filter — limit suggestions to specific place types such as <code>airport</code>, <code>restaurant</code>, or <code>art_gallery</code></li>
<li>Mail-tag support — use <code>[fieldname-locality]</code>, <code>[fieldname-state]</code>, <code>[fieldname-postcode]</code>, and <code>[fieldname-country]</code> mail tags in CF7 email templates</li>
<li>Lat/Lng hidden fields — latitude and longitude are captured as hidden fields for backend processing or CRM integrations</li>
<li>Elementor popup compatible — autocomplete and map re-initialise correctly when used inside Elementor popups</li>
<li>Elegant form field design — modern, accessible frontend styling with focus rings, smooth transitions, and validation error states</li>
<li>Translation ready — all field labels are customisable from the settings page; compatible with WPML and Polylang</li>
</ul>
<h3>🗺️ How It Works</h3>
<ol>
<li>Install and activate the plugin (Contact Form 7 must be active)</li>
<li>Go to Contact → Google Place API and enter your Google Places API key</li>
<li>In any CF7 form editor, use the new Field Autocomplete tag to insert a <code>[googlemapfield]</code> tag</li>
<li>Configure map height, default centre, and address sub-fields from the settings page</li>
<li>The map appears automatically on your form — users pick an address and the marker updates in real time</li>
</ol>
<h3>🔑 Google API Key Setup</h3>
This plugin requires a Google Cloud API key with the following APIs enabled:
<ul>
<li>Maps JavaScript API</li>
<li>Places API (New)</li>
</ul>
<a href="https://www.codesmade.com/create-google-map-place-api-key/" rel="nofollow ugc">Full setup guide →</a>
<h3>📬 Mail Tag Reference</h3>
After adding a <code>[googlemapfield your-location]</code> tag to your form, use these mail tags in your CF7 email template:
 Mail Tag 
 Returns
 <code>[your-location]</code> 
 Full formatted address
 <code>[your-location-locality]</code> 
 City / Locality
 <code>[your-location-state]</code> 
 State / Province
 <code>[your-location-postcode]</code> 
 Postal code
 <code>[your-location-country]</code> 
 Country
<h3>💼 Use Cases</h3>
<ul>
<li>Delivery forms — capture precise delivery addresses with postcode and city auto-filled</li>
<li>Event registration — let attendees specify their nearest location or venue</li>
<li>Job applications — collect applicant location with lat/lng for distance filtering</li>
<li>Real estate enquiries — capture property address with map confirmation</li>
<li>Service booking — validate service area coverage before form submission</li>
<li>Travel & hospitality — autocomplete hotel, airport, or attraction names</li>
</ul>
<h3>Privacy Policy & External Services</h3>
This plugin connects to Google’s servers to load the Maps JavaScript API and retrieve place suggestions and geocoding results. By using this plugin you agree to:
<ul>
<li><a href="https://cloud.google.com/maps-platform/terms" rel="nofollow ugc">Google Maps Platform Terms of Service</a></li>
<li><a href="https://policies.google.com/privacy" rel="nofollow ugc">Google Privacy Policy</a></li>
</ul>
No personal data is collected or stored by this plugin itself. Address data entered by users is sent directly to Google’s API from the visitor’s browser.

Map Field for Contact Form 7

Add a Google Maps autocomplete address field with a live interactive map to any Contact Form 7 form. Supports draggable marker, address components, an …

Autocomplete Location Field for Contact Form 7 is the easiest way to add a smart Google Address Autocomplete field to any Contact Form 7 form on your WordPress website.
Powered by the Google Places API, this plugin delivers real-time address suggestions as users type — reducing typos, incomplete submissions, and user frustration. Whether you run a delivery service, real estate agency, booking platform, or local business, this plugin helps you collect accurate location data effortlessly.
🔗 <a href="https://www.codesmade.com/store/autocomplete-location-field-contact-form-7-pro/" rel="nofollow ugc">Pro Version</a> | <a href="https://www.codesmade.com/contact-us/" rel="nofollow ugc">Support</a> | <a href="https://www.codesmade.com/create-google-map-place-api-key/" rel="nofollow ugc">Get a Google Places API Key</a>
<h3>Why Use Autocomplete Location Field for Contact Form 7?</h3>
Manually typed addresses are prone to errors. This plugin eliminates that problem by integrating Google’s powerful address intelligence directly into your CF7 forms. Users get instant, accurate suggestions — and you get clean, reliable data.
Perfect for: 
– 📦 Delivery and shipping address forms 
– 🏠 Real estate and property listing sites 
– 📅 Booking and appointment forms 
– 🛠️ Service area and local business websites 
– 📬 Business contact and inquiry forms
<h3>✅ Key Features (Free)</h3>
<ul>
<li>Google Address Autocomplete — Real-time suggestions powered by Google Places API</li>
<li>Seamless CF7 Integration — Works natively inside the Contact Form 7 editor</li>
<li>Simple API Key Setup — Connect your Google API key in minutes</li>
<li>Lightweight & Optimized — Minimal impact on page load speed</li>
<li>Easy Field Insertion — Add the autocomplete field with a single click in the CF7 editor</li>
</ul>
<h3>🚀 Pro Features</h3>
Upgrade to <a href="https://www.codesmade.com/store/autocomplete-location-field-contact-form-7-pro/" rel="nofollow ugc">Pro</a> for advanced location control:
<ul>
<li>🌍 Country Restriction — Limit autocomplete suggestions to specific countries (e.g. US, UK, AU)</li>
<li>🗺️ Google Map Display — Show an interactive map when a location is selected</li>
<li>🧩 Separate Address Components — Capture Street, City, State, Country, and Postcode in individual fields</li>
<li>🏷️ Place Type Filtering — Restrict suggestions by type (e.g. establishments, geocodes, art galleries)</li>
<li>🌐 Custom Placeholder Translation — Localize your field placeholder text</li>
<li>⚡ Priority Support — Get fast, dedicated help from our team</li>
</ul>
<h3>How It Works</h3>
<ol>
<li>Install and activate the plugin.</li>
<li>Navigate to Contact → Google Place API in your WordPress admin.</li>
<li>Paste your Google Places API Key.</li>
<li>Open any Contact Form 7 form editor.</li>
<li>Click “Field Autocomplete” to insert the location field shortcode.</li>
<li>Save the form and publish your page.</li>
</ol>
That’s it — your form now has intelligent address autocomplete!
<blockquote>
Get your free Google API Key: <a href="https://www.codesmade.com/create-google-map-place-api-key/" rel="nofollow ugc">Step-by-step guide</a> | <a href="https://developers.google.com/maps/documentation/javascript/places-autocomplete" rel="nofollow ugc">Official Google Docs</a>
</blockquote>
<h3>Additional Information</h3>
<ul>
<li>Support: <a href="https://www.codesmade.com/contact-us/" rel="nofollow ugc">codesmade.com/contact-us</a></li>
<li>Pro Version: <a href="https://www.codesmade.com/store/autocomplete-location-field-contact-form-7-pro/" rel="nofollow ugc">codesmade.com/store</a></li>
<li>API Key Guide: <a href="https://www.codesmade.com/create-google-map-place-api-key/" rel="nofollow ugc">codesmade.com/create-google-map-place-api-key</a></li>
</ul>

Autocomplete Location Field for Contact Form 7


I used the free version for a little while, and decided to upgrade to premium for the additional functionality. It was also easy to code up a little modification of my own to further customise it. Great plugin!


Great plugin, does what it says it will!

Add a Google Address Autocomplete field to Contact Form 7 forms. Powered by Google Places API for real-time address suggestions and accurate data coll …

Map Field for Contact Form 7 vs Autocomplete Location Field for Contact Form 7