WordPress Tutorials, Tips, and Resources to Help Grow Your Business
Do you want to add a Google Map to your contact page in WordPress? Embedding a map in your contact form will help save you time and bring more business to your store. In this tutorial we’ll walk you through how to display a WordPress contact form with a map.
Why Add a Map in a Contact Form?
You might be wondering why you would add a map to your contact form rather than just embedding it on a page.
When you create a contact form with WPForms, you’re able to embed that same form in multiple locations. Placing it in various locations around your site can help you get more leads through your contact form.
With a map embedded in the form itself, it’ll be automatically included with the form, no matter where you place it. You’ll save yourself some time having by not having to embed the code every time.
Making a Contact Form
Let’s get started creating your form with a map embedded.
Also, you’ll need to have a form created. See our tutorial on How to Create a Simple Contact Form as an example to get started.
Creating a Map to Your Business
Now we’ll need to generate the code to display your map. To do this, we’ll use Google Maps.
After you open Google Maps, search for your business in the top left corner.
On the next screen you’ll have a few steps to go through:
- Confirm that you see your company name.
- Select Share to see a popup modal.
- Select Embed map.
- You’ll have several sizes of the map available to you. Select whichever one you prefer.
- Highlight and copy the embed code that begins with
Adding a Map to a WordPress Form
Next, you’ll need to add an HTML field to your form. This is where the code provided by Google Maps will go.
After dragging the field to the top of the form, click on it in the right-hand preview panel to see the Field Options.
Paste your code into the box on the left hand column.
Next, we need to edit the width of the map. Because we’re placing a map inside your form, it won’t display the full width of your form unless we add just a bit of code.
Copy this code:
Then, paste it like you see in the image below.
Now be sure to save your form before moving on to the next step.
Publishing Your Form With a Map
To publish your contact form with a Google Map, go to your contact page.
Select the Add Form button and find the contact form that you just made.
Then you can save and publish your post to see it live.
You can also add your contact form in a sidebar widget if you like.
That’s it! You’ve just created a WordPress contact form with a map. Your form containing a map to your store should look something like this:
Want to add your logo or an image to your form? You might also want to check out our guide on how to add an image to a WordPress form.
What are you waiting for? Get started with the most powerful WordPress forms plugin today.