Documentation

Directions Field

Last modified: February 27, 2025

Introduction

The Directions Field in WPForms Geolocation calculates and displays routes, directions, and distances between multiple locations. It integrates seamlessly with the Geocoder Field and Map Field, making it ideal for applications like delivery forms, travel bookings, logistics, or customer route optimization.

Learn more about route calculations and geolocation APIs in the
Google Maps Directions API.

Note: this documentation focuses on the geolocation-specific options provided by the WPForms Geolocation plugin. In addition to these settings, the field includes all standard WPForms options, such as labels, descriptions, conditional logic, and more, which can be configured the same way as any other WPForms field.

Configuring the WPForms Directions Field

The WPForms Directions Field provides several options to customize how routes and distances are calculated and displayed.

1. Usage Type

Choose the type of route calculation to display:

  • Driving Directions: Calculates vehicle routes, factoring in traffic patterns, road conditions, and estimated durations. (Default)
  • Straight-Line: Computes direct distances ("as the crow flies") between points, ignoring roads or terrain. Ideal for aerial or linear distance analysis.

2. Route Points

Assign Geocoder Fields to define the origin, destination, and optional waypoints for the route.

Note: Ensure you have added the Geocoder Fields for the origin, destination, and waypoints to your form. For details on how to set up Geocoder Fields, refer to the Geocoder Field documentation.

Origin Geocoder

Select the Geocoder Field of the starting point for the route.

Destination Geocoder

Select the Geocoder Field of the destination location for the route.

Waypoints Geocoders

Select Geocoder Fields as optional waypoints along the route to define intermediate stops.


3. Trigger Options

Control how route calculations are initiated and customize button labels for user interaction:

Trigger Type

Choose how directions are triggered:

  • Dynamic: Automatically update routes when data changes in the form (Default).

  • Manual: Requires users to click a button to trigger calculations.

Button Labels

Customize labels for manual trigger buttons:

  • Get Directions Button: Label for the "Get Directions" button (Default: Get Directions).

  • Clear Directions Button: Label for the "Clear Directions" button (Default: Reset Directions).

    Note: Leave blank to hide this button.


4. Map Options

Connect the Directions Field to a Map Field to visualize routes.

Note:Ensure a Map Field has been added to your form. For setup instructions, refer to the Map Field Documentation.

Map Field

Select the Map Field where the route will be displayed.

Polyline Options

Customize the appearance of route lines using attributes like color, weight, and opacity.
(Example: strokeColor:'#0088FF', strokeWeight:6, strokeOpacity:0.6)


5. Directions Panel Options

Select the Directions Panel Field to display the route's detailed step-by-step instructions.

Note: Ensure that you have added a Directions Panel Field to your form. For instructions on how to add and configure the field, refer to the Directions Panel Field documentation.


6. Travel Options

Customize preferences for route calculations:

Travel Mode

Select the travel method:

  • Driving: Optimized for vehicle travel. (Default)
  • Walking: Pedestrian routes.
  • Bicycling: Bicycle-friendly paths.
  • Transit: Public transportation options.

Unit System

Choose the distance measurement system:

  • Imperial: Displays distances in miles. (Default)
  • Metric: Displays distances in kilometers.

Avoidance Options

Enable options to exclude specific route types:

  • Avoid Ferries: Exclude ferry routes.
  • Avoid Highways: Exclude highways.
  • Avoid Tolls: Exclude toll roads.

How to Use the WPForms Directions Field

Follow these steps to configure and use the Directions Field:

  1. Add the Directions Field: Insert it into your form via the WPForms builder.
  2. Set Up Configuration Options: Configure settings as described in the Configuring the Directions Field section.
  3. Test Your Setup: Preview the form to ensure the Directions Field works correctly.
menu-circle