內容簡介
Map Field for Contact Form 7 是一個完整的解決方案，能為您的 Contact Form 7 表單新增 Google Places 地址自動完成欄位。用戶只需輸入幾個字元，從即時建議中選擇，即可立即顯示互動式 Google 地圖，無需重新載入頁面。
【主要功能】
• Google Places 自動完成
• 始終可見的互動地圖
• 可拖曳的標記
• 響應式地圖高度
• 預設地圖中心設定
• 郵件標籤支援
外掛標籤
開發者團隊
原文外掛簡介
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
Install and activate the plugin (Contact Form 7 must be active)
Go to Contact → Google Place API and enter your Google Places API key
In any CF7 form editor, use the new Field Autocomplete tag to insert a [googlemapfield] tag
Configure map height, default centre, and address sub-fields from the settings page
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.
