Documentation

Creating a Geolocation-Enabled Form in Gravity Forms

Last modified: January 14, 2025

Introduction

This guide provides step-by-step instructions to create a Geolocation Form in Gravity Forms using Gravity Geolocation. The form will include essential geolocation fields such as the Geocoder Field, Address Field, Locator Button Field, Google Map Field, Coordinates Field, and Reset Location Button.

After installing and activating Gravity Geolocation, you can easily create advanced geolocation-enabled forms. To see an example in action, explore our live demo.

Throughout this guide, we use an example Geocoder Field with ID 1. Be sure to adjust the Geocoder Field ID in your configuration to match your form setup.

Setting Up a Geolocation Form in Gravity Forms

The Geolocation system in Gravity Geolocation is built around the Geocoder Field. This field synchronizes with other geolocation fields to enable seamless interaction and accurate geolocation functionality. Follow the steps below to add and configure each field.

1. Add and Configure the Geocoder Field

The Geocoder Field is the core component that syncs all geolocation fields in your form.

Geocoder Field Setup in Gravity Forms
Geocoder Field setup in Gravity Location Form.
  1. Add the Geocoder Field: Drag the Geocoder Field into your Gravity Form.
  2. Take note of the Geocoder Field ID: For this guide, we use ID 1. Adjust the ID in your setup as necessary.
  3. Configure Geocoder Options: Set up options such as default coordinates and marker settings. Refer to the Geocoder Field documentation for a detailed explanation of settings.

2. Add and Configure the Address Field

The Address Field in Gravity Forms enables users to enter or select an address, synchronized with the Geocoder Field.

Geolocation Form Gravity Forms Address Field Setup
Address Field setup in Gravity Location Form.
  1. Add the Address Field: Drag the Address Field into your Gravity Forms form.
  2. Link the Geocoder Field: Select Geocoder Field ID 1 from the "Geocoder Field" select box under the Address Field settings.
  3. Enable Additional Features: Configure options such as autocomplete and address formatting. For more details, refer to the Address Field documentation.

3. Add and Configure the Locator Button

The Locator Button lets users detect their current location automatically.

Locator Button Setup in Gravity Forms
Locator Button setup in Gravity Location Form.
  1. Add the Locator Button: Drag the Locator Button into your form.
  2. Link the Geocoder Field: Select Geocoder Field ID 1 from the "Geocoder Field" select box under the Locator Button settings.
  3. Enable Locator Features: Configure settings such as IP-based fallback and button styling. See the Locator Button documentation for more options.

4. Add and Configure the Map Field

The Map Field visually represents geolocation data on an interactive map.

Map Field Setup in Gravity Forms
Map Field setup in Gravity Location Form.
  1. Add the Map Field: Drag the Map Field into your Gravity Form.
  2. Link to the Geocoder Field: Select Geocoder Field ID 1 from the "Geocoder Fields" multi-select box in the Map Field settings.
  3. Configure Map Options: Adjust settings like map type, zoom level, and dimensions. Refer to the Map Field documentation.

5. Add and Configure the Coordinates Field

The Coordinates Field allows users to manually enter latitude and longitude values for precise location input.

Coordinates Field Setup Steps
Coordinates Field setup in Gravity Location Form.
  1. Add the Coordinates Field: Drag the Coordinates Field into your Gravity Forms form.
  2. Link to the Geocoder Field: Select Geocoder Field ID 1 from the "Geocoder Field" select-box in the Coordinates Field settings.
  3. Configure Coordinates Options: Set latitude and longitude placeholders. Explore more options in the Coordinates Field documentation.

6. Add and Configure the Reset Location Button

The Reset Location Button clears all synced fields and restores them to their default state.

Locator Location Button Setup Steps
Reset Location Button setup in Gravity Location Form.
  1. Add the Reset Location Button: Drag the Reset Location Button Field into your form.
  2. Link to the Geocoder Field: Select Geocoder Field ID 1 from the "Geocoder Fields" multi-select box in the Reset Location Button settings.
  3. Configure Reset Options: Customize button appearance and reset behavior. Learn more in the Reset Location Button Documentation.

Final Steps

That’s it! You’re ready to test and view your completed geolocation-enabled Gravity Form. Before publishing, follow these steps to ensure everything is functioning as expected:

  1. Preview the Form: Open the form on various devices and browsers to check compatibility.
  2. Verify Geocoder Syncing: Confirm that all fields interact correctly and update based on Geocoder Field ID 1.
  3. Test Reset Functionality: Check that the Reset Location Button clears synced fields effectively.

Feel free to test different configurations and settings to create a form tailored to your requirements. If you need further guidance, explore our documentation or reach out for support.

menu-circle