Google Maps integration with Fluent Forms

The latest version of Fluent Forms brings you another awesome feature which is, integrating Google Maps with Fluent Forms. This feature is used to auto-complete the address field.

Simply go through this guide to learn how to apply this feature to your form.

  • Go to the Global Settings from Fluent Forms Pro (WordPress admin panel sidebar) and turn on the Google Maps Integration as shown in the screenshot below.
  • Here, you will be asked for the Google Map API Key to integrate it.
  • To get the API key, you have to go here.
  • Then click on the Get Started button on the top right corner of the page. You will notice a dashboard page appear, where you need to click on your existing project option. Or create a new project by clicking on that option like the one given below –
  • A pop-up box will appear where you have to click on NEW PROJECT for creating a new project.
  • To create a new project, you need to add a Project Name. Then click on the Create button.
  • This will take to you back to the dashboard page, where you click on your Project option to open the list of projects.
  • A pop-up box will appear showing the list of projects, here click on the My Google Map project that was created previously.
  • Now, you have to select the Places API & Maps Javascript API options respectively.
  • When you click on the Places API, make sure to click on the Enable button to enable the API.
  • The next step is to click the Maps Javascript API option.
  • In the same way, click on Enable to enable the API.
  • Now, both of the APIs have been successfully enabled as you can see below.
  • Then click on the three lines option on the left side.
  • Then click on the API & Services option following the Credentials option too.
  • Here, you have to click on the Create Credentials option.
  • And from the dropdown, select the API Key option.
  • A pop-up box will appear, where you can copy the API key.
  • Now, go back to the Fluent Forms’ Google Map Integration Settings and paste the API Key in the input field.
  • Don’t forget to click on the Save Settings button.
  • Go to the Fluent Forms dashboard and create a new form.
  • After that, you can add an Address Field to the form.
  • Then on the Address Field’s input customization, check the Enable Autocomplete (Google Map) option.
  • Save the form and click on the Preview & Design option to view the form.
  • Once you type a phrase of any place on the form, this will automatically show suggestions for the specific addresses you can choose from.

Was this article helpful to you?

5 3

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket