Do you want to display a map on your website’s contact form?
You can use geolocation to pre-fill a user’s address and show their location by placing a pin on a map. This makes filling in the form more manageable, leading to a better completion rate.
This video will show you how to embed a Google Map in contact forms with a map pin.
Written tutorial: https://www.wpbeginner.com/plugins/how-to-embed-a-google-map-in-contact-forms/
Top Resources
⚡Use Promo Code WPBVIP⚡
►WPForms https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
Hey friends in today's video I'm going To show you how to embed Google Maps in Your contact forms or any kind of forms On your WordPress website let's go So there are a couple of prerequises That you need to fulfill before you can Actually follow along the tutorial that I'm going to show you right here the First one being that you'll need to have A form plugin on your website very Obvious but the more important part Being you need to have a form plugin That supports embedding a Google map Inside the phone in my case I'm using a Form plugin called WP firms you can see It right here I have it installed on my Site the website is called WP forms if You want to check it out it's a Fantastic plugin used by 5 million Websites fantastic features tons of Exciting features very easy to use and Very I say cost effective as well one Thing to note is that there's a free Version of this plugin which is very Powerful but the free version does not Support this Google Maps embed so you Need the premium version of the plugin Which I already have it installed on my Site also activated using my license key Once that is done you'll need to also Create a Google Maps API key and what You can do is first thing before you Generate the API key what you need to do Is enable the feature from inside WP
Forms so if you don't know WP forms Similar to WordPress has its own add-ons This keeps the core plugin very simple And I say lightweight so if you see There's an add-on section here and Inside the add-on section there are tons Of add-ons that I can install and Activate right you can see the form Abandonment plugin the drip add-on form Pages get response MailChimp but I'm Interested in the jio location add-on This is the Plugin or this is the add-on That I'll need what I can do is just Click the install add-on button and the Install or the add-on will be installed Directly pulled in from the website Because my license key is installed and Activated and this is the basis this is The first step I'll need before I even Generate the maps API key and then use It on my website using this uh WP forms So I'll install the add-on first I'll Click this button and let's wait for it To finish it just takes a few seconds of Your time once this is done we'll start The process of generating the maps API Key so the add-on is now installed and Activated as you can see it's already Activate I can deactivate it if I want To but there's no need to then I'll go To the settings And inside the settings there's a Geolocation option I'll go to it and Then I have the option of enabling the
Places provider that means what kind of Forms you have to have on your website Or at least in the forms so of course I'm going to choose Google Places API And I'm going to enable this option Detect and pre-fill users location on Form load work for both maps and inputs Now what this means is let's say if a User is trying to fill in their address The autocomplete and also the form Location will automatically be selected As soon as the user starts typing Something which is important now this is The places API API key which we have to Fill in and once we once we figure out Once we create an API it this is where We need to put it so I'll save my Settings first without the API key and Now we have set up the form plugin at Least what we need to and now we can Start creating the Google Maps API key For that we need to go into the Google Cloud console so this is how the Google Cloud console looks like the URL is Console.cloud.google.com forward slash Apis don't worry I'll place it on the Screen as well as I'll make it or link It down in the description or this video You can easily click it and reach this Area now inside this Google Cloud Console you have to do a few different Things we have to first enable the apis That we need to use there are three Different apis we'll need to enable we
Also need to create a new API so that we Can use it so credentials API and also We need to create a billing account so That you actually Google can bill us if We exceed the free tier now just to Clarify the free tier is very generous And Google even after submitting credit Card which you need to do Google does Not automatically bill you if you exceed The free tier so you already are always In control of if any money is being Spent and the free tier is very generous I think 25 000 map loads and 2500 Requests so for most basic websites the Creator is more than enough so what I'm Going to do is start with the billing Account because that's essential so what I'll do is just click the hamburger menu And you will see the billing option or If you can't find it just scroll down And you'll find the billing options Somewhere we will inside your products I'll just open it up in a new tab and You'll see that I don't have any billing Account created you can create multiple Billing accounts if you want to so I'll Just uh link a billing account I'll just Create a new billing account for this And create billing account just go Through the process and I'll need to add Some of my basic details so what I do is Uh this is a very straightforward Process so if there is something Important I'll just stop and explain it
To you otherwise I'm going to speed up This part of the video where I'm just Adding a billing account because it's Very straightforward just enter your Details and enter credit confirmation Validated and all that right so I'm Going to speed up the video once this is Done I'll show you what we need to do After creating a Billet account so we Can start using the API Keys all right So let me finish this up So I've set up my billing account now And it was a very straightforward Process just asked for my business Information or personal information also Added my credit card with a small charge Mate which will be refunded after as per Google and now my free trial has begun Similar to what you already see on the Screen now I have a billing account Already so I'll just go back to this Main screen I'll just refresh this page So that the information is refreshed and We'll start enabling the apis first Which is something that we need to do to Start using the services of Google Cloud Console so there was a small glitch I Refreshed the page a few times and it Starts working now and what I need to do Is enable the apis and services that I'll use from Google Cloud console so I'll enable or click this button open it Up a new tab which will open up all the Services that Google Cloud console
Offers we just are interested in a few Different apis from the maps experience So instead of looking at through all the Different apis I'll just go to the maps Option And this will bring up all the maps apis That are available we just need to Enable three of them the first one is The geolocation API this is the one then The maps JavaScript API and also the Places API I believe I might have Already enabled this so if you go here And if you see it's enabled it's already Enabled uh if you or if it's when it's Not available on your account you'll see A button called enable just click on it It takes a few seconds and if you don't Have a billing account it might prompt You to connect to billing account first So the geolocation API is connected the Maps JavaScript API is also connected or At least enabled and the places API is Also connected now going back all the Apis are now enabled which I need to use But I need to still create a new API or Credentials so that I can communicate With Google Cloud console and that will Do inside the credentials options so I'll go to credentials And this will open up the credentials Creator or where I can create my Credentials so instead of or from all Three options the API key the oauth and Service accounts will create an API so
Click the create credentials so I'll Create the API key which is obvious I'll Create a new API key for me to use on my Website which I can connect Google Maps And other services from Google or Google Cloud on my site So once I've copied the API key I'll Head back to my site and the place where I need to paste the API key is already Open so I'll just paste the API again of Course I'll blur it out and I'll save my Settings and the page will reload and It's already detecting my location with The pin which is good sign so if you Reach this location where the maps or The map for your current location is Showing up you might see a pop-up on This uh this side of your browser that's Okay this website is trying to access Your location you have to enable that Because of course that's what's needed So once you have done this that means Your form plugin is set up correctly the API key has been generated and set up Correctly and that's all you need for The uh it's a groundwork now you can Start creating a form which will have The functionality to embed the actual Google form all right let's get started With that process now So to create a new form with the wp Forms you can just enter or use the menu Entry right here using WP forms just Click the add new button I'll open up
The form creation menu where you'll be Able to either choose a template or Start creating a complete form from Scratch so you can use a blank form but Just with the demonstration what I'm Going to do is use a simple contact form Because it's the basic thing right so I'll click the use template button which Will load up this contact form on the Site and what I can do is maybe change The name of the form or let's keep it to Some simple contact form and the form That's already added here has a name a First name last name and the email and The comment so these are the basic Fields but I also want to show the Google Maps right or the maps embed how Do I do that so what I do is I just use The single line text I'll just drag and Drop it here between the email and the Comment And I'll click this and change the label To Address All right and in the advanced field I'll Go here and I have two options I have The enable address autocomplete and once I enable that I also have another Setting which is called display map I'll Enable both of these options and Automatically you see that there's a Placeholder for a map and also enable Address autocomplete means that if Somebody tries to enter the address
Google will try to guess what the Address is similar to how Google search Works right you try type something in Google tries to guess what you're typing In so both of these have been enabled For this field and the display map map Means that the map will also show up and This is the form so if you want to make Any changes or any other things changes To a form that's completely up to as Well you can go to the ad Fields you can Add any of the fields that you have or If you want to enable any other fields That then you can just drag and drop File uploads maybe a date picker or Anything else that's some it's very easy To do just add that right here on the Screen and once you're happy with Whatever form you've created you can Save it and also embed it on a page Right so I'll click this save And I'll embed this on a page and the Easiest way to do that is just by Clicking the embed button and I'll Create a new page I'll just call it uh Contact form with Address Let's go and what this will do is that WP forms will create a new page on the Site and automatically embed this uh Entire form on the page which is very Simple to do but let me also demonstrate If you don't want to go this out I'll Just delete this how would you do this
If you were just starting out so you Just create a regular page in WordPress And then you will add a WP forms block On the page so I type in forward slash WP forms you'll see the wp forms block I'll click on it and then I'll have the Option of selecting the form that I want To embed on the page since I just Created the one form on this site I just Have the one form I'll just select this And the form will be embedded so that's How you do it manually but the automated Process is much faster so I use that so Once this is done everything works I'll Publish the page and then we'll open it Up a new tab and see how it works I'll Just open it up in a new tab And this is the contact form with the Address I'll just type in my name And type in a dummy address or email Email at email .com and it's already trying to guess my Address but what I'll try and do is just Delete this and add some different Address let me see if I from top of my Head if I can come up with something I'll just type in the most popular Address in the world Times Square Times Square New York so odd you see the Autofill is already appearing here if I Select this then automatically it'll Just take me to that specific section And I can zoom in zoom out all the Details uh the Google for what what are
The features Google Maps provide is Already visible with this map so two Things happened here or multiple things Happened first the jio location API Automatically try to detect my location Which is very very useful so even if Users don't fill out fill out this Detail explicitly you know where they're Coming from this is very valuable Information second they can start typing In the address the autocomplete happens And once they select or they type in an Address the maps automatically updates To this section where the address is Autocomplete or whatever makes sense so You have three distinct Max Functionality or Maps functionality Happening with this simple form and you Can type in a commented message as well Blah blah blah whatever And submit this form and this will be Submitted now the best part is that not Only is this users are able to actually Address or give this information up or Share this information but WP forms also Records this information because of Course without it how what useful or how Define and use for this right so if I go Back to the site I go back to my uh Admin area I go to w performs I go to Entries This is where I'll see the entries for This form so I see the simple contact Form on the site I have this entry right
Here this blah blah blah and you can see The address here so if I click the view Option it'll show up this this entry With details now I can see exact address Where this entry was made from so this Is very powerful uh or this is a very Very powerful feature because just Because users can enter this information Is not valuable but if you can see this Information then you can make decisions On what you need to do right so this is How you add a simple contact form with Google forms embedded or you can create Any kind of firms with Google forms Embedded on your site very simple to Understand let me just recap what we did We just installed WP forms the premium Version We enable the add-on for the Geolocation API then we went to the Cloud console and made a lot of changes We created three apis or enabled three Apis we enabled or created a billing Account also created a new API key which You see on the screen and then we use The API to connect with Google forms or Google Maps and then once we had all That set up we created a new form Enabled the Google Maps API the function The W performs provides and then we are Able to see the location information for All the users that they actually present Right simple stuff a lot of different Steps but simple stuff to understand Very powerful stuff so if you enjoyed
This if you have understood everything Just make let me know in the comments And if you still have any questions About this video leave that in the Comments as well and if you enjoyed this Make sure to hit the thumbs up and if You like this these kind of videos Simple to follow along WordPress Tutorials then make sure to subscribe to Our Channel as well because that's what We do we make simple to easy to follow Along WordPress tutors for you guys I Hope this is this video was fun it was Very fun for for me to record and if you Enjoyed this make sure to subscribe once Again and I'll catch you next video very Soon take care stay safe
