A contact form is a quick way for users to get in touch with you. Some of the benefits of a contact form include the following.

Reduce Spam

One of the ways to cut down on spam is to use a contact form. You will no longer have to put your email address out there, which makes it harder for people to send you spam mail.

Collect Specific Information

A contact form allows you to request specific information or control the information a user provides.  Since you are at liberty to add or remove any form field you wish, you can make particular fields required with a contact form.

Collect Leads

People find it easy to fill a contact form as opposed to calling or sending an email. Having a contact form is an effective way to collect leads and increase conversion rates. Even the simplest contact form can lead to an increase in leads.

Obtain Feedback

You can use a contact form to create a specific form geared towards obtaining questions and feedback from customers, especially for new products or services. This kind of information can be used to make better marketing decisions or improvements.

Obtain Quotes

You can also use a contact form to allow customers to request quotes, especially for service-oriented businesses. Or you can use it to receive quotes from customers.


A contact form provides an easy way for customers to get in touch with you. Instead of scouring through your website to obtain your email, you can place the form in an accessible page where users will find it easy to contact you.

Premium Contact Form Plugins

Free plugins are great when you’re getting started with WordPress, but if you want to go to the next level with your sites and save yourself time while you’re doing it, you should consider a premium contact form plugin from CodeCanyon.

What We’ll Be Building

This tutorial will show you how to add Google Maps to a contact form using Contact Form 7 and the Google Maps Extension for CF7 WordPress plugin. By the end of the tutorial, we should have something like this:

The completed contact form with Google Maps extension

CF7 Plugin for Free Contact Forms

Contact Form 7 provides a simple and flexible contact form for your WordPress website. You can customize the design of the form and configure where information is sent when users contact you. Contact Form 7 is very popular and hence has tons of free and paid add-ons that provide extra features such as Dropbox integration, maps integration, and so on.

The plugin comes with additional features such as AJAX submission, Akismet spam filtering, form upload files, and even the ability to add a CAPTCHA to the form. The most significant advantage of this form is that it’s free to use.

Why Use Contact Form 7?

Many plugins can help you create a contact form for your WordPress website; Contact Form 7 is one of those plugins. Since it’s flexible and easy to use, Contact Form 7 is considered the top choice when choosing a contact form.

This plugin provides a straightforward and uncomplicated way to get set up, especially if you don’t know much about coding.

Install the CF7 Contact Form

The fastest way to install the CF7 contact form plugin is to use the plugin search feature from within WordPress. Go to Plugins > Add New and search for CF7 contact form with the search bar. Click on it and click Install. After the plugin has installed, click on the Activate link to activate the plugin.

Google Maps Extension for CF7

The Google Maps Extension for CF7 provides a great way to enhance your form by adding a map field to it. This allows you to obtain the user’s location. Some of the notable features of this plugin include:

  • collect user information via Google Maps
  • visitors can drop markers or draw any number of rectangles, circles, and polygons on the map
  • automatically obtain a KML file based on the visitor’s location
  • customize Google Maps according to your needs
  • fully responsive maps
  • choose the map type, i.e. Roadmap, Satellite, Hybrid, or Terrain
  • customize attributes such as colors, shapes, thickness, stroke color, and opacity

Purchase and download the Google Maps Extension for CF7. You can find your installable WordPress files in the download section of your account.

Once you download the WordPress files, log in to your WordPress site, and install the plugin. Go to Plugins > Add New and upload the WordPress zip file you got from CodeCanyon. After uploading, click Install Now, wait a few seconds, and then click Activate. You can now start using the plugin.

Google maps are now integrated with the contact form, as shown below.

Google Maps integration in CF7


To add a map to our contact form, we need to generate a Google Maps API Key.

To obtain an API key:

  • Go to the Google Cloud Console and sign in with your Google account.
  • Select or create a new project.
  • Navigate to the Credentials page, and click Create credentials > API key
  • Copy and paste the key to your WordPress site under CF7 Google maps settings.
Getting a Google Maps API key

The Google Maps extension for CF7 provides various ways in which you can configure maps.

  • Users can mark their current location using a marker or highlight an area. They can also draw polygons, polylines, circles, and rectangles.
  • The user’s location inputs can be sent in the default CF7 email along with other form data. View the location data directly on Google Maps.
  • Automatically get the user’s input data as a KML file in the email and view it easily using an online KML file viewer.
  • You can change map types, zoom level, and other map attributes according to your requirements. You can also center the user’s location.

Edit the rest of the settings such as markers, map types, and other attributes from the settings page, as shown below, and save the changes.

Maps and markers setttings

Create a Contact Form With a Map

Go to  Contact > Add New from your WordPress Dashboard menu. Contact Form 7 comes pre-configured with a ready-to-use template which looks like this:

The default Contact Form 7 template

To add a map field, click the Google Maps button and you should see a popup like this:

Google Maps popup

Click on Insert Tag, and the map appears as a field on your form. Your form should now look something like this:

The default contact form with a map


Go to the Mail tab and paste the [maps] shortcode in your email component to receive maps data in an email. Save all the changes. Each form, once created, generates a unique shortcode that you will use to embed it on a page.

Embed the Contact Form With Map Upload in a Page

The last step is to embed the form on a page or any other place you want it to appear. Go to Pages > Add New, give the page a title, and paste the shortcode on the body of the page as shown below.

The completed contact form shortcode

The complete form with a map will look like this:

The completed form with a map

As you can see, visitors can put markers on their location or use the search feature to search for their location. They can also draw shapes and zoom in and out just like on a normal map.


Knowing the locations of visitors filling out your WordPress forms can help you identify who is coming to your site and showing interest. Collecting location information can help you make better decisions about the type of services or products you offer. 


Email platform Constant Contact has added a slate of new capabilities to its interface, including social media and ad management, local search, SEO, and landing page tools to help centralize digital marketing efforts for small businesses.

Why we should care

“Once a small business has built an online presence, getting found online and driving customers to their business is an essential next step as they look to compete in a world where 87% of shoppers begin product searches on digital channels,” said Jeff Fox, CEO of Constant Contact parent company, Endurance International Group.

If Constant Contact is able to effectively unite these disparate channels in one interface, small businesses will have a more localized hub from which they can manage multiple aspects of their online marketing. They may also be able to use Constant Contact’s email marketing platform to continue to engage customers reached via these new integrations.

More on the tool’s features

Social ads. Businesses can create and manage their ad campaigns on Facebook and Instagram. 

Social posts. Businesses can create, publish, schedule posts and engage with their followers on Facebook and Instagram.

Google Ads. After connecting their Google Ads account, providing basic information and setting a budget, businesses can use Constant Contact’s tools to automate their keyword planning and bidding.

Google My Business. A GMB listing can be generated directly through the interface, from which businesses can also manage their Google business profiles and monitor analytics.

SEO features. Constant Contact’s tools will analyze your site and provide a recommendations dashboard.

Landing pages. The tool will also help small businesses create a landing page that promotes a single call-to-action to visitors.  

About The Author

George Nguyen is an Associate Editor at Third Door Media. His background is in content marketing, journalism, and storytelling.