Embed Google Maps on Your Form

They say a picture is worth a thousand words.

If so, what’s the worth of 360-degree panoramas and interactive maps? A gazillion words? Probably.

Well, if this is the case, you don’t have to stuff your form with words even if you have so much to tell! You know how humans get tired of reading so fast. And how form fillers get easily turned off by a long form.

Let the map do the talking.

Instead of trying to squeeze in the important landmarks in support to the location address that you have plastered on your form, why not embed a Google Map in your event registration form?

event registration online form with map — Your forms can show them the way. Play with this form here.

This jazzed up form is looking good, right? It’s short, sweet and it gives your location clearly. Use it in organizing stellar events or in pointing out your business location to interested clients.

Customizing your form this way doesn’t take hours. It’s fairly easy. Here are the instructions.

Embedding Google Maps Into your Form

If you’re embedding a Google Map, generate the Iframe for your desired location using Google Maps. Embed API by following the instructions on the Google Maps Embed API page.
Login into your EmailMeForm account and navigate to the Form Manager.
To add your Google Map to the form builder, please follow the following steps.
a. Mouse over your desired form and select Edit. This will take you to the Form Builder.
b. Add a Section Break field to your form in the position where you would like to display the Google Map.
c. Enter an appropriate Field Label and then in the “Instructions for User” area, add the generated Google Map IFrame. Please see the screenshot for reference.
d. Save and view the form. The Google Map will be displayed at the specified position in the live view.

Embedding the Form on your Website

Now that you have created an online form with Google Map, you may want to embed it into your website.

To embed using the page code, follow these steps.
a. Mouse over your desired form and select “Options” and then select “Code”. This will take you to the form Link and Embed Code page. Under the Embed Section, click Advanced Embed Options. Please see the screenshot for reference.
b. Place your Iframe code in any one of the 4 sections i.e. IFrame, Full Page IFrame, HTML+CSS+JavaScript and in PHP file (for advanced users).
c. Copy the entire code to your website page. When you view your web page you will see the Map pointing to the location defined by you when generating your Google Map IFrame.

That was easy, huh?

If you have a hard time doing it yourself, don’t be shy to ask help from our support team. Or better yet, hire our Customworks Team to create a form for you, complete with form styling that matches your brand.

Now, where to use it?

Don’t let this form technique go to waste. Here are some ideas on how you can use an online form with map.

For your birthday invitation form, for example, add the Google map of the Airbnb that you’re renting for the weekend (yahoo!)
Planning an event for your organization? Just embed the Google map of the location so they don’t have to ask you where exactly the location is over and over again.
If you have a physical store, you can embed the map of your business location into your online order forms so buyers will know how to drive to your store.

It’s your turn! Think about how your company or organization can benefit from this form trick and get busy working on it.

Good luck and have fun!