Home / Magento 2 - Magezon Blog / How to add Google Maps to Magento 2 contact form in Blue Form Builder?

How to add Google Maps to Magento 2 contact form in Blue Form Builder?

Magento 2 form builder _ Add Google Maps to Magento 2 contact form

Adding Google Maps to your contact form is an easy way to show customers your business’ locations and addresses. At the same time, you can gain more trust from them. Besides that, when embedding forms in multiple locations, it means that you add Google Maps around your site without embedding code many times.

In today’s article, we’ll walk you through the process of adding Google Maps to a Magento 2 contact form with Blue Form Builder.

  1. Activate Google Maps element
  2. Add Google Maps to contact form
  3. Customize Google Maps

Before starting, you need to install Magento 2 Form Builder and create a contact form.

1. Activate Google Maps element

To activate Google Maps form element, you need to:

  • Get Google Maps API key.
  • Go to Content > Blue Form Builder > Settings > General Settings. Then enter the key into ‘Google Map API Key’ field.
Magento 2 form builder _ Add Google Maps API key

2. Add Google Maps to contact form

Now that Google Maps element is activated, open form builder section of your contact form. On the left panel, click SECURITY & OTHER tab and you’ll see Google Maps element.

Magento 2 form builder _ Form builder section

Drag & drop element into the editor on the left.

Magento 2 form builder _ Drag & drop Google Maps element

3. Customize Google Maps

After that, a popup with element settings will appear so that you can customize.

Appearance tab:

Magento 2 form builder _ Google Maps appearance tab

Advanced tab:

Magento 2 form builder _ Google Maps advanced tab
  • Latitude / Longitude: enter latitude and longitude of your location. To quickly find them, click Get Latitude and Longitude button at the top. Enter your address at the top field. After clicking Apply button, the Latitude and Longitude fields will be auto filled.
Magento 2 form builder _ Quickly get latitude and longitude
  • Width: width of the map (px or %).
  • Height: height of the map (px).
  • Zoom: zoom level of the map.
  • Type: display type of the map including Roadmap, Satellite, Hybrid and Terrain.
  • Disable UI: if yes, you will disable Google Maps user interface elements.
  • Scrollwheel: if yes, you can use mouse scroll wheel zoom on the map.
  • Draggable: if yes, you can drag the map.

Markers tab:

In this tab, you can enter multiple locations of your business with markers.

Magento 2 form builder _ Google Maps markers tab
  • Icon: icons used for markers.
  • Latitude / Longitude of your locations.
  • Infowindow: information that will appear in a box when you hover over the marker icon on frontend.

Design Options tab: style Google Maps element.

Magento 2 form builder _ Google Maps design options tab

Here is how Google Maps look on frontend:

Magento 2 form builder _ Google Maps on frontend

Conclusion

This article has showed you how to add Google Maps to Magento 2 contact form with Blue Form Builder. If you have any comments, don’t hesitate to leave us one below.

About Trang Vu

Check Also

Magento 2 form builder extension _ Add file upload field

How to add file upload field to a Magento 2 form with Blue Form Builder?

As a web owner, sometimes you may want to collect files from customers through an …

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.