{"id":166470,"date":"2022-12-25T14:53:33","date_gmt":"2022-12-25T14:53:33","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/map-field-for-contact-form-7\/"},"modified":"2026-03-15T10:02:43","modified_gmt":"2026-03-15T10:02:43","slug":"map-field-for-contact-form-7","status":"publish","type":"plugin","link":"https:\/\/bal.wordpress.org\/plugins\/map-field-for-contact-form-7\/","author":16973082,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"4.0","stable_tag":"trunk","tested":"6.7.5","requires":"5.5","requires_php":"7.4","requires_plugins":null,"header_name":"Map Field for Contact Form 7","header_author":"Gravity Master","header_description":"Google Map for contact form 7 show as field","assets_banners_color":"3367b8","last_updated":"2026-03-15 10:02:43","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":60,"downloads":1825,"num_ratings":0,"support_threads":1,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":{"4.0":"<p>Major update. The map is now always visible and the marker is draggable. The deprecated <code>google.maps.Marker<\/code> has been replaced \u2014 if you use Maps v=beta this update is required for the map to work correctly. Please re-save your settings after upgrading.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3482996,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3482996,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3482996,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3482996,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":2839107,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":2839107,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":2839107,"resolution":"3","location":"assets","locale":""}},"screenshots":{"1":"Frontend form field with Google Places autocomplete and interactive map","2":"Draggable marker \u2014 drag to fine-tune location, address updates automatically","3":"Admin settings page \u2014 API key, map height, default centre, address sub-fields","4":"CF7 tag generator panel \u2014 insert the googlemapfield tag with one click","5":"Email template using address mail tags"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[17237,1152,1571,6356,4597],"plugin_category":[49],"plugin_contributors":[],"plugin_business_model":[],"class_list":["post-166470","plugin","type-plugin","status-publish","hentry","plugin_tags-address-autocomplete","plugin_tags-contact-form-7","plugin_tags-google-maps","plugin_tags-google-places","plugin_tags-map-field","plugin_category-maps-and-location","plugin_committers-gravitymaster97"],"banners":{"banner":"https:\/\/ps.w.org\/map-field-for-contact-form-7\/assets\/banner-772x250.png?rev=3482996","banner_2x":"https:\/\/ps.w.org\/map-field-for-contact-form-7\/assets\/banner-1544x500.png?rev=3482996","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/map-field-for-contact-form-7\/assets\/icon-128x128.png?rev=3482996","icon_2x":"https:\/\/ps.w.org\/map-field-for-contact-form-7\/assets\/icon-256x256.png?rev=3482996","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/map-field-for-contact-form-7\/assets\/screenshot-1.png?rev=2839107","caption":"Frontend form field with Google Places autocomplete and interactive map"},{"src":"https:\/\/ps.w.org\/map-field-for-contact-form-7\/assets\/screenshot-2.png?rev=2839107","caption":"Draggable marker \u2014 drag to fine-tune location, address updates automatically"},{"src":"https:\/\/ps.w.org\/map-field-for-contact-form-7\/assets\/screenshot-3.png?rev=2839107","caption":"Admin settings page \u2014 API key, map height, default centre, address sub-fields"}],"raw_content":"<!--section=description-->\n<p><strong>Google Map Field for Contact Form 7<\/strong> 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 \u2014 no page reload needed.<\/p>\n\n<p>The draggable marker lets users fine-tune the exact pin position. When dragged, the address and coordinates update automatically via reverse geocoding \u2014 so what gets submitted is always accurate.<\/p>\n\n<h3>\u2728 Key Features<\/h3>\n\n<ul>\n<li><strong>Google Places Autocomplete<\/strong> \u2014 real-time address suggestions powered by the Google Places API (new PlaceAutocompleteElement)<\/li>\n<li><strong>Always-visible interactive map<\/strong> \u2014 map renders on page load using your configured default centre; no address selection required<\/li>\n<li><strong>Draggable marker<\/strong> \u2014 users drag the pin to the exact location; address and lat\/lng fields update automatically via reverse geocoding<\/li>\n<li><strong>Responsive map heights<\/strong> \u2014 set separate pixel heights for desktop (&gt; 768 px) and mobile (\u2264 768 px) from the admin<\/li>\n<li><strong>Default map centre<\/strong> \u2014 configure a default latitude and longitude so the map opens on the right region for your audience<\/li>\n<li><strong>Address component sub-fields<\/strong> \u2014 optionally show separate inputs for Street Number, City, State, Postcode, and Country; each auto-populated on place selection<\/li>\n<li><strong>Country filter<\/strong> \u2014 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>\n<li><strong>Place type filter<\/strong> \u2014 limit suggestions to specific place types such as <code>airport<\/code>, <code>restaurant<\/code>, or <code>art_gallery<\/code><\/li>\n<li><strong>Mail-tag support<\/strong> \u2014 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>\n<li><strong>Lat\/Lng hidden fields<\/strong> \u2014 latitude and longitude are captured as hidden fields for backend processing or CRM integrations<\/li>\n<li><strong>Elementor popup compatible<\/strong> \u2014 autocomplete and map re-initialise correctly when used inside Elementor popups<\/li>\n<li><strong>Elegant form field design<\/strong> \u2014 modern, accessible frontend styling with focus rings, smooth transitions, and validation error states<\/li>\n<li><strong>Translation ready<\/strong> \u2014 all field labels are customisable from the settings page; compatible with WPML and Polylang<\/li>\n<\/ul>\n\n<h3>\ud83d\uddfa\ufe0f How It Works<\/h3>\n\n<ol>\n<li>Install and activate the plugin (Contact Form 7 must be active)<\/li>\n<li>Go to <strong>Contact \u2192 Google Place API<\/strong> and enter your Google Places API key<\/li>\n<li>In any CF7 form editor, use the new <strong>Field Autocomplete<\/strong> tag to insert a <code>[googlemapfield]<\/code> tag<\/li>\n<li>Configure map height, default centre, and address sub-fields from the settings page<\/li>\n<li>The map appears automatically on your form \u2014 users pick an address and the marker updates in real time<\/li>\n<\/ol>\n\n<h3>\ud83d\udd11 Google API Key Setup<\/h3>\n\n<p>This plugin requires a Google Cloud API key with the following APIs enabled:<\/p>\n\n<ul>\n<li>Maps JavaScript API<\/li>\n<li>Places API (New)<\/li>\n<\/ul>\n\n<p><a href=\"https:\/\/www.codesmade.com\/create-google-map-place-api-key\/\">Full setup guide \u2192<\/a><\/p>\n\n<h3>\ud83d\udcec Mail Tag Reference<\/h3>\n\n<p>After adding a <code>[googlemapfield your-location]<\/code> tag to your form, use these mail tags in your CF7 email template:<\/p>\n\n\n\n\n  Mail Tag\n  Returns\n\n\n\n\n  <code>[your-location]<\/code>\n  Full formatted address\n\n\n  <code>[your-location-locality]<\/code>\n  City \/ Locality\n\n\n  <code>[your-location-state]<\/code>\n  State \/ Province\n\n\n  <code>[your-location-postcode]<\/code>\n  Postal code\n\n\n  <code>[your-location-country]<\/code>\n  Country\n\n\n\n\n<h3>\ud83d\udcbc Use Cases<\/h3>\n\n<ul>\n<li><strong>Delivery forms<\/strong> \u2014 capture precise delivery addresses with postcode and city auto-filled<\/li>\n<li><strong>Event registration<\/strong> \u2014 let attendees specify their nearest location or venue<\/li>\n<li><strong>Job applications<\/strong> \u2014 collect applicant location with lat\/lng for distance filtering<\/li>\n<li><strong>Real estate enquiries<\/strong> \u2014 capture property address with map confirmation<\/li>\n<li><strong>Service booking<\/strong> \u2014 validate service area coverage before form submission<\/li>\n<li><strong>Travel &amp; hospitality<\/strong> \u2014 autocomplete hotel, airport, or attraction names<\/li>\n<\/ul>\n\n<h3>Privacy Policy &amp; External Services<\/h3>\n\n<p>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:<\/p>\n\n<ul>\n<li><a href=\"https:\/\/cloud.google.com\/maps-platform\/terms\">Google Maps Platform Terms of Service<\/a><\/li>\n<li><a href=\"https:\/\/policies.google.com\/privacy\">Google Privacy Policy<\/a><\/li>\n<\/ul>\n\n<p>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.<\/p>\n\n<!--section=installation-->\n<h4>Automatic Installation<\/h4>\n\n<ol>\n<li>Log in to your WordPress dashboard<\/li>\n<li>Go to <strong>Plugins \u2192 Add New<\/strong><\/li>\n<li>Search for <strong>Map Field for Contact Form 7<\/strong><\/li>\n<li>Click <strong>Install Now<\/strong>, then <strong>Activate<\/strong><\/li>\n<\/ol>\n\n<h4>Manual Installation<\/h4>\n\n<ol>\n<li>Download the plugin ZIP file<\/li>\n<li>Go to <strong>Plugins \u2192 Add New \u2192 Upload Plugin<\/strong><\/li>\n<li>Upload the ZIP file and click <strong>Install Now<\/strong><\/li>\n<li>Click <strong>Activate Plugin<\/strong><\/li>\n<\/ol>\n\n<h4>After Activation<\/h4>\n\n<ol>\n<li>Make sure <strong>Contact Form 7<\/strong> is installed and active<\/li>\n<li>Go to <strong>Contact \u2192 Google Place API<\/strong><\/li>\n<li>Enter your Google Places API key (<a href=\"https:\/\/www.codesmade.com\/create-google-map-place-api-key\/\">how to get one<\/a>)<\/li>\n<li>Configure map height and default map centre<\/li>\n<li>Open any CF7 form and add the <strong>Field Autocomplete<\/strong> tag via the tag generator<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20require%20contact%20form%207%3F\"><h3>Does this plugin require Contact Form 7?<\/h3><\/dt>\n<dd><p>Yes. Contact Form 7 must be installed and active. The plugin will not load without it.<\/p><\/dd>\n<dt id=\"which%20google%20apis%20do%20i%20need%20to%20enable%3F\"><h3>Which Google APIs do I need to enable?<\/h3><\/dt>\n<dd><p>Enable <strong>Maps JavaScript API<\/strong> and <strong>Places API (New)<\/strong> in your Google Cloud Console. Both must be active on the same API key. <a href=\"https:\/\/www.codesmade.com\/create-google-map-place-api-key\/\">Step-by-step guide \u2192<\/a><\/p><\/dd>\n<dt id=\"can%20i%20restrict%20autocomplete%20to%20a%20specific%20country%3F\"><h3>Can I restrict autocomplete to a specific country?<\/h3><\/dt>\n<dd><p>Yes. In <strong>Contact \u2192 Google Place API<\/strong>, enter comma-separated ISO 3166-1 alpha-2 country codes in the <strong>Country Filter<\/strong> field. For example: <code>in,gb,us<\/code> to allow India, UK, and USA only.<\/p><\/dd>\n<dt id=\"can%20i%20show%20only%20certain%20address%20sub-fields%3F\"><h3>Can I show only certain address sub-fields?<\/h3><\/dt>\n<dd><p>Yes. In the <strong>Address Sub-fields<\/strong> section of the settings page, tick only the components you want to display: Street Number, Postcode, City, State, and\/or Country.<\/p><\/dd>\n<dt id=\"how%20do%20i%20use%20the%20address%20value%20in%20cf7%20emails%3F\"><h3>How do I use the address value in CF7 emails?<\/h3><\/dt>\n<dd><p>Add the mail tag that matches your field name. If your field is named <code>your-location<\/code>, use <code>[your-location]<\/code> in your email template for the full address. For individual components, use <code>[your-location-locality]<\/code>, <code>[your-location-state]<\/code>, etc.<\/p><\/dd>\n<dt id=\"can%20i%20capture%20latitude%20and%20longitude%3F\"><h3>Can I capture latitude and longitude?<\/h3><\/dt>\n<dd><p>Yes. Add hidden inputs named <code>your-field-name_latitude<\/code> and <code>your-field-name_latitude<\/code> to your form. They are populated automatically when an address is selected or when the marker is dragged.<\/p><\/dd>\n<dt id=\"does%20the%20map%20work%20inside%20elementor%20popups%3F\"><h3>Does the map work inside Elementor popups?<\/h3><\/dt>\n<dd><p>Yes. The plugin listens for the <code>elementor\/popup\/show<\/code> event and re-initialises the autocomplete and map automatically.<\/p><\/dd>\n<dt id=\"is%20the%20map%20always%20visible%20or%20only%20after%20address%20selection%3F\"><h3>Is the map always visible or only after address selection?<\/h3><\/dt>\n<dd><p>The map is always visible as soon as the page loads. It centres on your configured <strong>Default Latitude \/ Longitude<\/strong> with a wide zoom level. When the user selects an address, it zooms to street level and moves the marker.<\/p><\/dd>\n<dt id=\"can%20the%20user%20fine-tune%20the%20pin%20location%3F\"><h3>Can the user fine-tune the pin location?<\/h3><\/dt>\n<dd><p>Yes. The marker is fully draggable. When the user drags it, the plugin reverse-geocodes the new position using the Google Geocoding API and updates the address field and coordinate fields automatically.<\/p><\/dd>\n<dt id=\"is%20the%20plugin%20compatible%20with%20caching%20plugins%3F\"><h3>Is the plugin compatible with caching plugins?<\/h3><\/dt>\n<dd><p>Yes. All dynamic data (API key, heights, default coords) is output server-side on page load. Standard full-page caching is compatible as long as the page containing the CF7 form is not cached when the API key is blank.<\/p><\/dd>\n<dt id=\"can%20i%20translate%20the%20field%20labels%3F\"><h3>Can I translate the field labels?<\/h3><\/dt>\n<dd><p>Yes. Every visible label \u2014 including the autocomplete placeholder, City, State, Postcode, Country, and Street Number labels \u2014 can be customised from <strong>Contact \u2192 Google Place API \u2192 Field Labels<\/strong>.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>4.0<\/h4>\n\n<ul>\n<li>New: Map is always visible on page load \u2014 no longer hidden until address selection<\/li>\n<li>New: Configurable default map centre (latitude and longitude) from admin settings<\/li>\n<li>New: Separate responsive map heights for desktop and mobile screens<\/li>\n<li>New: Draggable <code>AdvancedMarkerElement<\/code> with automatic reverse geocoding on drag end<\/li>\n<li>New: Elegant card-based admin settings page with dedicated <code>admin.css<\/code> file<\/li>\n<li>New: Admin CSS loaded only on plugin settings page via <code>admin_enqueue_scripts<\/code><\/li>\n<li>New: Elegant frontend field styling \u2014 rounded inputs, focus rings, transitions<\/li>\n<li>Fixed: Replaced deprecated <code>google.maps.Marker<\/code> with <code>AdvancedMarkerElement<\/code> (required for Maps v=beta)<\/li>\n<li>Fixed: Added <code>marker<\/code> library to Google Maps API script URL<\/li>\n<li>Fixed: Map instance now reused on subsequent address selections \u2014 no more re-creation flicker<\/li>\n<li>Fixed: Replaced deprecated <code>WPCF7_Shortcode<\/code> class with <code>WPCF7_FormTag<\/code> (CF7 5.6+)<\/li>\n<li>Fixed: Settings link in plugin action links now points to the correct admin page slug<\/li>\n<li>Fixed: Include file names now match class names so the autoloader can find them<\/li>\n<li>Fixed: Tag generator \"Setup API Key\" link now points to the correct admin page<\/li>\n<\/ul>\n\n<h4>3.0<\/h4>\n\n<ul>\n<li>Added address component sub-fields (Street Number, City, State, Postcode, Country)<\/li>\n<li>Added mail-tag support for address components<\/li>\n<li>Added country filter and place type filter options<\/li>\n<li>Added translation\/label customisation settings<\/li>\n<\/ul>\n\n<h4>2.0<\/h4>\n\n<ul>\n<li>Added Google Map display on address selection<\/li>\n<li>Added Elementor popup compatibility<\/li>\n<\/ul>\n\n<h4>1.0<\/h4>\n\n<ul>\n<li>Initial release \u2014 Google Places autocomplete field for Contact Form 7<\/li>\n<\/ul>","raw_excerpt":"Add a Google Maps autocomplete address field with a live interactive map to any Contact Form 7 form. Supports draggable marker, address components, an &hellip;","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/166470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=166470"}],"author":[{"embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/gravitymaster97"}],"wp:attachment":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=166470"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=166470"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=166470"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=166470"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=166470"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=166470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}