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.

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.
   
3. Click + ENABLE APIS AND 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

   

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. 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.

Troubleshooting

This page can’t 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

Autocomplete without geolocation autofill

Use this code example to use 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,
    );
}

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.

Related Articles

• The Best Gravity Forms Google Maps Alternative
  Read More

  6 Best WordPress Geolocation Plugins
  Read More

  How to Add Google Address Autofill to WordPress Forms
  Read More