Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Geolocation

Last Updated: October 18, 2022

Knowledge Base → Add-Ons → Other Integrations → Geolocation

Integrate Formidable forms with Google Maps API and collect geographical data with the Formidable Geolocation add-on. With address autocomplete, you can allow your visitors to begin typing what location they are looking for to find it easily.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!
Subscribe on YouTube

Download and Install

  1. If you haven't already done so, install and activate Formidable Forms Pro.
  2. In your WordPress admin, go to Formidable → Add-Ons and click the Install button for the WordPress Geolocation plugin.

Set up Geolocation Forms

Get a Google Places API Key

  1. Go to the Google Cloud Platform Console. Select an existing project or create a new project.
  2. After opening the project, it will redirect you to the APIs & Services Dashboard. Or you can click the menu icon on the top left corner of the screen and select APIs & Services.
    Geolocation API Services
  3. Click + ENABLE APIS AND SERVICES.
    Geolocation Enable API Services
  4. Search for the following APIs in the API Library and enable each by clicking the Enable button.
    • Geocoding API
    • Maps JavaScript API
    • Places API

    Geolocation Search API Services

  5. After enabling all the required APIs, go to APIs & Services → Credentials. Click + CREATE CREDENTIALS and select API key to generate a key.
    Geolocation Create Credentials
  6. It will open a popup window with your generated API key. Click Edit API Key to configure the restrictions.Geolocation Generate API Key
  7. To allow your key to be used with Formidable Forms, select Application restrictions → HTTP referrers (web sites).
    Geolocation Application Restrictions
  8. It is recommended to restrict which domains can be used by the key for security purposes. Selecting Website Restrictions → ADD AN ITEM, and enter your website’s domain in the field provided. Click the Add an Item link to add more sites. To allow your key to be used across an entire domain, enter it with a forward slash (/) followed by an asterisk (*) at the end.
    Geolocation Website Restrictions
  9. To restrict your key by API, select API restrictions → Restrict Key. From the dropdown, select the following APIs.
    • Geocoding API
    • Maps JavaScript API
    • Places API

    Geolocation API Restrictions

  10. Click the Save button to save your settings.
Notes:

  • To use the Google Places feature, Google requires that you have an SSL certificate for your site (i.e., to load over HTTPS) and have enabled Cloud billing on your account.
  • You can enable the API key to be used on all of your subdomains by adding *.yoursite.com/* as an item to your API Key credentials → Website restrictions. 

Save keys in global settings

After generating an API key, click the Copy API Key icon under the Key column to copy the value.

  1. Go to Formidable → Global Settings → Geolocation tab.
  2. Paste your Google Maps API Key on this page and click the Update button.
    Geolocation Global Settings API Key

Create an Address Autocomplete Form

Now that you have added the Google Maps API key to your Formidable settings, it is time to create your Geolocation forms.

  1. First, create a form in the same way as other Formidable forms.
    Create Address Autocomplete Form
  2. There are two ways to add an address autocomplete to your form, either by using a single line text field or an Address field.
    • Single line text: Select this type to display the address on a single line.
      Geolocation Single line text field Address Autocomplete
    • Address: Select this type to display the address on multiple lines.
      Geolocation Multiple fields Address Autocomplete
  3. On the field options, select the Add address autocomplete checkbox to enable Address Autocomplete to your form field.
  4. Select the Show map checkbox to display an interactive Google map in your form. It will automatically show the map below your form field.
  5. Click the Update button to save your settings. Below is an example of what it may look like with address autocomplete and the Google map enabled to your form field.
    Geolocation Form Display Text field

View Geolocation Data

You can view the geolocation data of a specific entry by following the instructions below:

  1. Go to your form Entries page and click View to open the entry details.
  2. You can find the geolocation data such as city, state, country, and the interactive map on the right side of the entry page.
    Geolocation Entry Details
  3. You can find the geolocation data, such as latitude and longitude coordinates, on the left sidebar under the Entry Details section.

Troubleshooting

This page can’t load Google Maps correctly

Geolocation Google Map not Loading
If you see this error message, check each of the following:

  1. Have you enabled Google Cloud billing on your account?
  2. Have you enabled the following APIs in your Google Cloud account: Geocoding API, Maps JavaScript API, and Places API.
  3. Have you added the correct website restriction in your API settings?
    • To use it on a single domain, use yoursite.com/*
    • To use it on all your subdomains, use *.yoursite.com/*

Related customizations

Autocomplete without geolocation autofill

Use this code example to use the Google autocomplete without the autofill for the user geolocation. Replace the lat and lng values with your default location.

add_filter('frm_geo_default_location', 'disable_geo_autofill' );
function disable_geo_autofill() {
    return array(
        'lat' => 40.7831,
        'lng' => -73.9712,
    );
}

Related Articles

  • Gravity Forms Google Maps Alternative The Best Gravity Forms Google Maps Alternative
    Read More
    Best WordPress Geolocation Plugins 6 Best WordPress Geolocation Plugins
    Read More
    How to Add Google Geolocation Autofill How to Add Google Address Autofill to WordPress Forms
    Read More
  • Download and Install
  • Set up Geolocation Forms
    • Get a Google Places API Key
    • Save keys in global settings
  • Create an Address Autocomplete Form
  • View Geolocation Data
  • Troubleshooting
    • This page can’t load Google Maps correctly
  • Related customizations
    • Autocomplete without geolocation autofill
  • Related Articles
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

You do not have permission to view this form. Maybe you need to log in?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews