Map Field for Contact Form 7

Description

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.

✨ Key Features

• Google Places Autocomplete — real-time address suggestions powered by the Google Places API (new PlaceAutocompleteElement)
• Always-visible interactive map — map renders on page load using your configured default centre; no address selection required
• Draggable marker — users drag the pin to the exact location; address and lat/lng fields update automatically via reverse geocoding
• Responsive map heights — set separate pixel heights for desktop (> 768 px) and mobile (≤ 768 px) from the admin
• Default map centre — configure a default latitude and longitude so the map opens on the right region for your audience
• Address component sub-fields — optionally show separate inputs for Street Number, City, State, Postcode, and Country; each auto-populated on place selection
• Country filter — restrict autocomplete suggestions to one or more countries using ISO 3166-1 alpha-2 codes (e.g. in, us, gb)
• Place type filter — limit suggestions to specific place types such as airport, restaurant, or art_gallery
• Mail-tag support — use [fieldname-locality], [fieldname-state], [fieldname-postcode], and [fieldname-country] mail tags in CF7 email templates
• Lat/Lng hidden fields — latitude and longitude are captured as hidden fields for backend processing or CRM integrations
• Elementor popup compatible — autocomplete and map re-initialise correctly when used inside Elementor popups
• Elegant form field design — modern, accessible frontend styling with focus rings, smooth transitions, and validation error states
• Translation ready — all field labels are customisable from the settings page; compatible with WPML and Polylang

🗺️ How It Works

1. Install and activate the plugin (Contact Form 7 must be active)
2. Go to Contact → Google Place API and enter your Google Places API key
3. In any CF7 form editor, use the new Field Autocomplete tag to insert a [googlemapfield] tag
4. Configure map height, default centre, and address sub-fields from the settings page
5. The map appears automatically on your form — users pick an address and the marker updates in real time

🔑 Google API Key Setup

This plugin requires a Google Cloud API key with the following APIs enabled:

• Maps JavaScript API
• Places API (New)

Full setup guide →

📬 Mail Tag Reference

After adding a [googlemapfield your-location] tag to your form, use these mail tags in your CF7 email template:

Mail Tag
Returns

[your-location]
Full formatted address

[your-location-locality]
City / Locality

[your-location-state]
State / Province

[your-location-postcode]
Postal code

[your-location-country]
Country

💼 Use Cases

• Delivery forms — capture precise delivery addresses with postcode and city auto-filled
• Event registration — let attendees specify their nearest location or venue
• Job applications — collect applicant location with lat/lng for distance filtering
• Real estate enquiries — capture property address with map confirmation
• Service booking — validate service area coverage before form submission
• Travel & hospitality — autocomplete hotel, airport, or attraction names

Privacy Policy & External Services

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:

• Google Maps Platform Terms of Service
• Google Privacy Policy

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.