Documentation

INTRODUCTION

WordPress Contact form 7 is one of the most popular plugin for creating and generating forms.It is easy to integrate and equally easy to display.When it comes to wordpress, there are many contact form wordpress plugin and one of the most simple and smart ones is contact form 7 plugin.Google Maps Extension for CF7 brings Google Maps to Contact Form 7. The user can place markers or shapes on google maps. This makes it easier to get a location from the user. You must have installed Contact Form 7 plugin before using Contact Form 7 Google Maps.

PLUGIN INSTALLATION

How to install contact form 7 plugin in wordpress -Step by Step:

• 1Go to Plugins menu.

  

• 2Click on a Add New button.

  

• 3On top of the page, click “Upload Plugin” button.

  

• 4If you have a plugin in a .zip format, click on “Choose File” button.

  

• 5Select the ZIP file from your computer.
• 6Click “Install Now” button.

   

• 7.Wait for a few seconds for wordpress to complete the installation .
• 8Click on Activate button.

  

CREATE API KEY

API key is the mandatory to insert for proper working of a google maps. So please follow the steps to get an API key.

• 1Go to CF7 Google Maps “how to use “menu, click on Google Map API Key.
• 2Click create a project button

  

• 3 Enter your project name.

  

• 4 Click on create button.
• 5Go to Credentials and copy your API key.

  

• 6Go CF7 Google Maps – plugin setting and paste in Google Maps API Key

  

CF7 GOOGLE MAPS PLUGIN SETTINGS

• 1Go to CF7 Google Map menu, click on Plugin Settings.

  

• 2 Go to plugin setting page and insert details.

  

  In plugin setting you will find some setting, where you need to insert some information:

CF7 GOOGLE MAPS SETTING

Map Type: Insert Map Type. Select one of the four available map types that you want to use for the map. 

• Roadmap – displays the default road map view.
  
  
• Satellite – displays satellite images.
  
  
• Hybrid – displays a combination of normal and satellite views.
  
  
• Terrain – displays a normal street map based on terrain information
  

Google Maps API Key : Insert Google Maps API Key of the Google Maps.

Center by Current Location: Tick to center the map based on visitor’s current location.

Snazzy Map Google Map Style : You can create your own custom map style by either writing your own style code or you can use existing map styles from snazzymaps.

Turn Off Zoom Control : Tick to disable zoom control.

Zoom Control : Select position of zoom control.

Turn Off Full Screen Control : Tick to disable full screen control.

Full Screen Control : Select position of full screen control.

Turn Off Map Type Control : Tick to disable map type control.

Map Type Control : Select position of map type control.

MARKER SETTINGS

      

Show Markers : Tick to allow users to add markers on the google maps.

Choose Marker Image

Maximum Markers Allowed for Drawing : Allow visitor to draw marker on frontend CF7 google map.

CIRCLE SETTING

Show Circle: Tick to allow users to add circles on the google maps.

Maximum Circles Allowed for Drawing: Allow visitor to draw circle on frontend CF7 google map.

Circle Fill Color : Select color of the circle.

Circle Border Color : Select border color of the circle.

Border Thickness: Select border thickness of the circle.

Circle Opacity: Select opacity of the circle.

POLYGON SETTING

Show Polygon: Tick to allow users to add polygon on the google maps.

Maximum Polygons Allowed for Drawing : Allow visitor to draw polygons on frontend CF7 google map.

Polygon Fill Color: Select color of the polygon.

Polygon Border Color: Select border color of the polygon.

Polygon Thickness: Inset border thickness of the polygon.

Polygon Opacity: Select opacity of the polygon.

POLYLINE SETTING

Show Polyline : Tick to allow users to add polyline on the google maps.

Maximum Polyline Allowed for Drawing: Allow visitor to draw polyline on frontend CF7 google map.

Polyline Border Color : Select border color of the polyline.

Polyline Border Thickness: Select border thickness of the polyline.

RECTANGLE SETTING

Show Rectangle: Tick to allow users to add rectangle on the google maps.

Maximum Rectangle Allowed for Drawing: Allow visitor to draw rectangle on frontend CF7 google map.

Rectangle Fill Color : Select color of the rectangle.

Rectangle Border Color: Select border color of the rectangle.

Rectangle Border Thickness: Select border thickness of the rectangle.

Rectangle Opacity: Select opacity of the rectangle.

Click on save settings.

CF7 CONTACT FORM PLUGIN SETTING

For displaying a map on front-end CF7 form, You will first need to integrate it along with other form elements from the backend.

• 1Go to contact menu

  

• 2 Go to Contact Forms Add New.

  

• 3Now click on Google Maps menu as shown.

  

• 4Copy the Short-Code given in Form-tag Generator: Google Maps window.

  

• 5And paste the Short-Code in contact form text area.

  

• 6Click on Save button or Update button.

EDIT MAIL SETTING

Put the shortcode{{maps_data}} into the ‘Message Body’ field in ‘Mail’ tab. This shortcode is used to send markers and shapes informations in the email body.

• • 1Click on Mail button.

    

Here’s what each field means:

To — The email address to which the messages will be sent.

From — Sender of the email. By default, it is set to the name of the person using your contact form.

Additional Headers — Space for additional message header fields.

Message Body — The body of the email you will receive.

Exclude lines with blank mail-tags from output. — Tick to exclude lines with blank mail-tags from output

Use HTML content type —Tick to use HTML type.

File Attachments — If your form allows file uploads, the tags for these files belong here.

Mail (2) — An additional mail template often used as an auto responder. Tick to activate.

• 2Click on save button.

SHORTCODE

• 1Go to Pages menu.

  

• 2Click on Add New button.

  

• 3Click on Add Title.
• 4Add Shortcode.

  

• 5Click on Update button.

  

• 6You would then see a contact form  displayed on the frontend of the site.

How to get user’s input in Email?

A user can get his input in email. Here some easy steps are given to get input in email.

Follow the steps to get email:

• 1Insert your name.
• 2Insert your email address.
• 3Now assign your location.
• 4Give a subject and type your message
• 5Click on Send button.

“Receive User”s Input in the Email of Submitted Locations.

You can view location directly On Google Map

You will get your location and other information in KML file through email.