Step 1 : Download Contact Form 7 Plugin & Do Below Settings :
Create a new CF7 form and add 4 lines of text displayed in below image in the additional settings tab.
- cf7entry : true ( For specifying that submission from this form needs to be saved in database)
- cf7entry_title_field : your-name ( Name of field whose value will be displayed as title in infowindow )
- cf7entry_message_field : your-message ( Name of field whose value will be dispalyed as main content in infowindow )
- cf7entry_featured_image_field : your-image ( Name of file control field whose image needs to be saved on server and later displayed on infowindow )
Admin will also need to add a google autosuggest type control along with other form elements on the cf7 form,
so that visitors can specify their location easily and to display that entry on google maps later.
This field must be set as mandatory by using the default “*” character. Please see above image for reference.
Step 2 : Download Advance Google Maps Pro Plugin & Do Below Settings :
Navigate to create a new map screen, go to GEO Tags section and enable the checkbox provided.
Now copy and paste names of three fields in the textboxes provided in front of “cf7_as_entries” post type.
Name of three fields are fc_cf7_autosuggest_place, fc_cf7_autosuggest_lat, fc_cf7_autosuggest_lng
Save the map. The shortcode generated by this map will display all the entires submitted by CF7 form on any page.
Step 3 : Get Your Visitor’s Location Easily From CF7 Form
With this plugin, visitors of your site can provide their current location from CF7 form very easily with with google’s autosuggest address control.
Step 4 : Display All Submitted CF7 Entries On Google Maps Automatically
Once everything is setup properly, for every form submission a new custom post will be generated in backend under “CF7 Entries” menu.
Admin will only need to publish that post after review from backend in order to display it on frontend google map.
How to Get Started?
This plugin is super easy to use.
Step 2: Create CF7 form according to requirements.
Step 3: Add some additional settings on CF7 form’s additional settings tab to specify that this CF7 form submission needs to be stored in database. Specify title, message & image upload field.
Step 4: Changes in google map’s infowindow HTML if you want. It’s not mandatory
Step 5: That’s it You’re done.