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.
You might need to add Google Maps to WordPress forms for many reasons. We get a lot of users who need to show their potential customers where they're based, and clearly displaying this information is 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 much easier. You don't need a special Google Maps plugin or coding experience. This post will take you through the step-by-step process to get it all setup and functioning correctly.
Soon you'll have a professional contact form that instantly tells people exactly what to expect and where to find you.
Step 1 - Create a form to embed your Google Map in
The first step is creating a new contact form to hold your Google Maps in. You can either do this from scratch or use our handy Contact Us form template to give you a head start.
Alternatively, you can just use a contact form you've 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 correct location, click on it and select 'Share'. This will bring a little modal popup with a few options, including the 'Embed map' option. 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 return to your contact form. In your form fields area, find an 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 map's width, which you can do by including style="width:100%;" and adjusting the percentage however 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 going 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.
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 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 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.
Leave a Reply