Exciting News! Flipper Code is now WePlugins! Same commitment to excellence, brand new identity.

Displays CF7 form submissions on Google Maps

Sandeep Kumar Mishra
Sandeep Kumar Mishra
September 14, 2024
5 minutes read
This WP MAPS PRO add-on takes visitor’s inputs from cf7 form, creates a custom post type in backend and display all the submitted entries on google map in an interactive way. Creates google’s autosuggest address field, allowing visitors to provide their exact location easily through the CF7 form. Before activating this extension, you need first to activate Contact Form 7 & WP MAPS PRO. Please follow the given steps to configure this add-on.

Displays CF7 Form Submissions On Google Maps:

  1. Step 1: Create a new CF7 form Contact Form -> Add New Form, You 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.
    Add New Form

    This field must be set as mandatory by using the default “*” character. Please see the above image for reference.

  2. Step 2: After adding address field now click on Additional Settings tab and add 4 lines of text displayed in the below image in the additional settings tab.
    Additional Settings

    cf7entry : true (For specifying that submission from this form needs to be saved in the database)cf7entry_title_field : your-name (Name of the field whose value will be displayed as title in info window)cf7entry_message_field : your-message (Name of a field whose value will be displayed as main content in info window)
    cf7entry_featured_image_field : your-image (Name of file control field whose image needs to be saved on a server and later displayed on info window)

  3. Step 3: Please navigate to Add or Edit Map and scroll down to the 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

    cf7 entries GEO Tags

    Also, you can change the info window design & listing style from the edit map page according to you.

  4. Step 4: Save the map. The shortcode generated by this map will display all the entries submitted by the CF7 form on any page.
  5. Step 5: Users could submit their details with current location from the CF7 form very easily with google’s autosuggest address control.
    current location from the CF7
  6. Step 6: All submitted entries now displayed in given map
To view a demo please click here.

Explore the latest in WordPress

Trying to stay on top of it all? Get the best tools, resources and inspiration sent to your inbox every Wednesday.