Creating a Geolocation-Enabled Form in WPForms

Introduction

This guide walks you through creating a WPForms geolocation form using WPForms Geolocation. The form will include a Geocoder Field to group and sync additional fields like Address, Locator Button, Map, Coordinates, and Reset Location Button.

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

In this guide, we will use an example Geocoder Field with ID 1. You will see this field referenced in screenshots and configuration steps. Adjust the Geocoder Field ID in your setup according to your form's configuration.

To see an example in action, check out this live demo.

Setting Up Your WPForms Geolocation Form

The geolocation system is built around the Geocoder Field. This field groups and synchronizes other geolocation fields, ensuring 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 serves as the core field for grouping and syncing other geolocation fields.

1. Add the Geocoder Field: Drag the Geocoder Field into your form using the WPForms builder.
2. Note the Geocoder Field ID: Once added, take note of the Geocoder Field ID, which is 1 in our example. This ID will be used to link the other geolocation fields to this Geocoder Field.
3. Configure Geocoder Options: Set options such as default coordinates for the initial location and configure map marker settings like marker style and visibility. Refer to the Geocoder Field documentation for a detailed explanation of all available options.

---

2. Add and Configure the Address Field

The Address Field allows users to input or select an address, synchronized with the Geocoder Field.

1. Add the Address Field: Drag the Address Field into your form.
2. Select the Geocoder Field: Link the Locator Button by selecting Geocoder Field ID 1 from the "Geocoder Field" option in the Address Field options.
3. Configure Address Options: Enable features like address autocomplete, configure relevant settings like placeholder text or address formats, and refer to the Address Field documentation for additional options.

---

3. Add and Configure the Locator Button

The Locator Button lets users detect their current location automatically.

1. Add the Locator Button: Drag the Locator Button Field into your form.
2. Select the Geocoder Field: Link the Locator Button by selecting Geocoder Field ID 1 from the "Geocoder Field" option in the Locator Button options.
3. Configure Locator Options: Customize button appearance and enable features such as IP-based fallback geolocation. Visit the Locator Button documentation to learn more.

---

4. Add and Configure the Map Field

The Map Field displays a visual representation of the selected location.

1. Add the Map Field: Drag the Map Field into your form.
2. Select the Geocoder Field: Link the Locator Button by selecting Geocoder Field ID 1 from the "Geocoder Field" option in the Map Field options.
3. Configure Map Options: Adjust settings like default coordinates, zoom level, and map dimensions. Refer to the Map Field documentation for more details.

---

5. Add and Configure the Coordinates Field

The Coordinates Field captures latitude and longitude values for the selected location.

1. Add the Coordinates Field: Drag the Coordinates Field into your form.
2. Select the Geocoder Field: Link the Locator Button by selecting Geocoder Field ID 1 from the "Geocoder Field" option in the Coordinates Field options.
3. Configure Coordinates Options: Customize settings for capturing latitude and longitude, and explore advanced 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 initial states.

1. Add the Reset Location Button: Drag the Reset Location Button into your form.
2. Select the Geocoder Field: Link the Locator Button by selecting Geocoder Field ID 1 from the "Geocoder Field" option in the Reset Location Button options.
3. Configure Reset Options: Adjust button labels and styles as needed. Visit the Reset Location Button documentation for more details.

Test Your Form

Before deploying your WPForms Geolocation Form, test its functionality:

1. Preview the Form: Check the form on different devices and browsers.
2. Verify Field Syncing: Ensure all fields interact as expected, using Geocoder Field ID 1 for synchronization.
3. Test Reset Functionality: Ensure the Reset Location Button clears all synced fields.

Helpful Links

• Live Demo: Geolocation Form
• General Settings Documentation
• Geocoder Field Documentation