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. Many users 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, professional look that potential customers will trust.
It's much easier to embed a Google Map in your contact form. You don't need special WordPress map plugins or coding experience. This post will walk you through the step-by-step process for getting it all setup and functioning correctly.
Soon, you'll have a professional contact form that 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 use to hold your Google Maps. You can either do this from scratch or use our handy Contact Us form template to give you a head start.
Alternatively, you can now use a contact form you've built and add the Google Map to your WordPress site.
Step 2 - Get your Google Map code
You'll need to get a special code from Google to link Google Maps and pull over your location to display on your website.
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. Select whichever one you prefer 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, 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 publish it on your Contact page.
Your Contact page is the main source of information for website users, so it must be your first step before you publish it anywhere else.
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 can boost your conversion rates. If all the information they need is there, people won't have to scroll up and visit your Contact page; they can sign up wherever they are. Adding a map can draw the eye and let users know where you are based.
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