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.
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.
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.
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.
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.
- WordPressBest WordPress Contact Form PluginsNona Blackman
- WordPressChoose a Form Builder: The 7 Best WordPress Form Builders ComparedNona Blackman
- WordPress PluginsCreate a Drag-and-Drop Contact Form With the FormCraft 3 WordPress PluginDaniel Strongin
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:
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.
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.
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.
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:
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 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 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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post