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.

Subscribe on YouTube

Download and Install

1. If you haven't already, install and activate the current version of Formidable Forms Premium on your WordPress site.
2. After confirming your Formidable Forms license, proceed to the Formidable → Add-Ons page and toggle on 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.
   
3. Click + ENABLE APIS AND SERVICES.
   
4. Search for the following APIs in the API Library.
   
   • Geocoding API
   • Maps JavaScript API
   • Places API

   Then, enable each library by clicking the Enable button.
   

5. After enabling all the required APIs, go to APIs & Services → Credentials. Click + CREATE CREDENTIALS and select API key to generate a key.
   
6. It will open a popup window with your generated API key. Click Edit API Key to configure the restrictions.
7. To allow your key to be used with Formidable Forms, select Application restrictions → HTTP referrers (web sites).
   
8. It is recommended to restrict which domains can be used by the key for security purposes. Select 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.
   
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

   

10. Click the Save button to save your settings.

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.
   

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.
   
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.
     
   • Address: Select this type to display the address on multiple lines.
     
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. Select the Use visitor location checkbox to access a user's location. By default, this feature is enabled. Disabling it will remove the prompt requesting permission to access your location.
6. 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.
   

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.
   
3. You can find the geolocation data, such as latitude and longitude coordinates, on the left sidebar under the Entry Details section.

Display Geolocation data

If you want to display the geolocation data, insert the following shortcodes into a View or email.

• Display the geolocation data such as city, state, and country.

  [x]

  Replace x with the field ID or key of the text or address field.

• Display the state abbreviation when using an address field.

  [x show="state_abbreviation"]

  Replace x with the field ID or key of the address field.

• Display the latitude of the geolocation data.

  [x show="lat"]

  Replace x with the field ID or key of the text or address field.

• Display the longitude of the geolocation data.

  [x show="long"]

  Replace x with the field ID or key of the text or address field.

• Display the map of the geolocation data. Use the show=map option and include keepjs=1 in the shortcode to avoid scripts appearing on the page.
  
  This shortcode can only be used within Views and is unavailable in emails.

  [x show="map" keepjs=1]

  Replace x with the field ID or key of the text or address field.

Limitation

• Geolocation is currently not compatible to work with repeaters.

Troubleshooting

This page can not load Google Maps correctly

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

Add latitude and longitude post meta keys

Use this code example to add new lat and long post meta keys from a single address field that can be used when creating a new post. It uses the frm_new_post hook.

add_filter( 'frm_new_post', 'modify_my_post', 10, 2 );
function modify_my_post( $post, $args ) {
$target_form_id = 1128; //Replace 1128 with the ID of your form
$address_field_id = 19139; //Replace 19139 with the ID of your address field.

if ( $target_form_id !== (int) $args['form']->id ) {
return $post;
}

if ( empty( $_POST['geo_lat'] ) || empty( $_POST['geo_lng'] ) || ! is_array( $_POST['geo_lat'] ) || ! is_array( $_POST['geo_lng'] ) ) {
return $post;
}

if ( ! array_key_exists( $address_field_id, $_POST['geo_lat'] ) || ! array_key_exists( $address_field_id, $_POST['geo_lng'] ) ) {
return $post;
}

$lat = floatval( $_POST['geo_lat'][ $address_field_id ] );
$long = floatval( $_POST['geo_lng'][ $address_field_id ] );

$post['post_custom']['lat'] = $lat;
$post['post_custom']['long'] = $long;

return $post;
}

Save geolocation coordinates from address field

Use the frm_validate_field_entry hook to save the latitude and longitude coordinates from an address field. Create a hidden field first for each coordinate.

Custom Google map size

Use this CSS example to adjust the Geolocation map size displayed on the form. You may add custom CSS in your Formidable → Global Settings → Custom CSS.

Related developer hooks

• Assign a default location for the user geolocation with the frm_geo_default_location hook.
• Change the initial zoom level on the map with the frm_geo_map_zoom hook.
• Extend the flexibility of the autocomplete results by choosing which type with the frm_geo_autocomplete_options hook.