How to Embed Google Maps in WordPress Contact Form

Introduction

A contact form is one of the most important parts of any business website. It helps visitors reach you easily. But sometimes, users also want to know your physical location before contacting you. That’s where Google Maps integration comes in handy. By embedding Google Maps into your WordPress contact form, you can increase trust and make your website more user-friendly.

In this blog, we’ll guide you step-by-step on how to add Google Maps to your WordPress contact form.

Why Add Google Maps to Your Contact Form?

• ✅ Builds trust by showing your office/shop location

• ✅ Helps users find directions quickly

• ✅ Enhances local SEO ranking

• ✅ Improves website professionalism

Methods to Embed Google Maps in WordPress Contact Form

1. Using Contact Form Plugins with Google Maps Support

Some plugins allow direct map integration:

• WPForms (Pro feature)

• Contact Form 7 with Maps extension

• Ninja Forms + Google Maps Add-on

Steps (example with WPForms):

1. Install and activate WPForms plugin.

2. Create a new form or edit an existing contact form.

3. Use the “HTML block” or Map widget inside the form.

4. Insert your Google Maps embed code.

2. Embed Google Maps Manually in Contact Form Page

If your contact form plugin doesn’t support maps directly, you can:

1. Go to Google Maps.

2. Search for your business location.

3. Click Share → Embed a map → Copy HTML iframe code.

4. Edit your Contact page in WordPress.

5. Paste the iframe code above or below your contact form shortcode.

Example:

<div style="width:100%;height:300px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18..." width="100%" height="300" style="border:0;" allowfullscreen=""></iframe>
</div>
[contact-form-7 id="123" title="Contact form 1"]

3. Use Page Builders (Elementor / Divi / Nexter)

If you are using Elementor, Divi, or Nexter Builder:

• Simply drag the Google Maps widget

• Place it beside or above the form section

• Style it for responsiveness

Best Practices

• Keep the map responsive (100% width, fixed height).

• Show a landmark or pin of your exact location.

• Don’t overload the page with too many maps.

• Test on mobile devices.

Conclusion

Adding Google Maps to your WordPress contact form is a smart move to enhance trust, improve user experience, and boost conversions. Whether you use a plugin, manual embedding, or a page builder, the process is simple and effective.