Google Maps integration with WP Fluent Forms
The latest version of WP Fluent Forms brings you another awesome feature which is, integrating Google Maps with WP 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.
Ar first, go to the Global Settings of Fluent Forms and click on Google Maps Integration. Here, you have to include the Google Map API key to integrate it. To get this key, you have to go to https://developers.google.com/. 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.
When you click on the Places API, make sure to click on the Enable button to enable the API.
In the same way, click on the 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.
Then go back to the WP Fluent Forms’ Google Map Integration Settings and paste the API Key in the input field. And don’t forget to click on the Save Settings button.
Go to the WP 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 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.