Are you looking for a way to improve your contact forms by using Google maps? There's no need to embed the map into your page when you can build it directly into the form itself.
There are many reasons why you might need to add Google Maps to WordPress forms. We get a lot of users who need to show their potential customers where they're based and having this information clearly displayed is really important.
The contact form is the perfect place to put location details and what better way to show where you are based than to have a Google Map embedded in your contact form?
This is a great, eye-catching way to display vital information about your business. Everyone knows and recognizes Google Maps instantly. It gives your website and contact page a clean and professional look that potential customers will trust.
If you want to embed a Google Map in your contact form, it's a lot easier than it sounds. You don't need a special Google Maps plugin or coding experience. In this post, we'll take you through the step by step process to get it all set up and functioning correctly.
Soon you'll have a professional contact form that tells people exactly what to expect and where to find you instantly.
Step 1 - Create a form to embed your Google Map in
Alternatively, you can just use a contact form you've been already built and add in the Google Map to your WordPress site now.
Step 2 - Get your Google Map code
To link Google Maps and pull over your location to display on your website, you'll need to get a special code from Google.
You can easily do this by opening up Google Maps and searching for your business.
Once you've found your business and the location is correct, click on it and select 'Share'. This will bring a little modal popup with a few options including the option to 'Embed map'. Click on that and you'll be given several map size options to choose from. Select whichever one you prefer, that will suit your website best.
Copy the embed code which will look something like:
Step 3 - Add your Google map to your WordPress contact form
Now that you've got your Google map code, the next thing to do is go back to your contact form. In your form fields area, find a HTML field and add that to your form wherever you want.
Expand the form field settings and find a Content box. This is where you'll need to paste your Google Maps code.
You may need to adjust the width of the map, which you can do by including style="width:100%;" and adjusting the percentage how ever you want.
Once you're happy, simply save your changes and you're ready to publish it.
Step 4 - Publish your embedded Google Map form
The first thing you should do with your new form is go to your Contact page and publish it there.
Your Contact page is the main source of information for website users so it's important that it's your first step before you publish it anywhere else.
Simply click to add a Formidable Form to your Contact page and select the form you wish to use. This will pull up your brand new form, ready for you to publish and share with your audience. It should look something like this:
Step 5 - Display your contact form in a sidebar (optional)
If you wish to do more with your contact form, you can easily add your form to your WordPress sidebar. You can do the same thing with your website footer if you wish to show your form and map there too.
Adding your contact form in different places like this can really boost your conversion rates. People won't have to scroll up and visit your Contact page, they can sign up wherever they are if all the information they need is right there. Adding in a map can draw the eye and lets users know where you are based straight away.
We hope this has helped you save time when embedding maps on your website. We'd love to know how you get on with yours.
If you're not already a Formidable Forms user, we have plenty more features like this that will help you save time and boost conversions.