Web Development: How to Add Maps to Your WordPress CF7 Contact Form

Thursday, November 21, 2019

How to Add Maps to Your WordPress CF7 Contact Form

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 hence, 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. You can also use it to receive quotes from customers.

Communication

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 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 provide 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 its 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 its 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 CFP 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 rectangle, circle, polygons, 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, and 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.

Configurations

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, click Create credentials > API key.
Copy and paste the key to your WordPress site under CF7 Google maps settings.

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.
Ability to 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.

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:

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

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

Storage

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 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 complete form with a map will look like this:

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 as well as zoom in and out just like a normal map

Conclusion

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.

Web Development