Super Forms
  • Drag & Drop Form Builder for WordPress
  • Quick start
    • Installation
    • Registration
    • Starting your 15 day trial
    • Purchasing a license
    • Activating a license
    • First time setup
    • Secure file uploads
    • Creating a form
    • Adding form elements
    • Editing elements
    • Publishing your form
    • FAQ
  • Account
    • Dashboard
      • Your Invoices
      • Billing details
      • Your Licenses
      • E-mail Notification
      • Password reset
      • Cancel subscription
  • Common problems
    • Common problems
      • Email delivery problems
        • Why is my form not sending emails?
        • Why are emails going into spam folder/inbox?
      • File upload problems
      • Session expired
      • reCaptcha Troubleshooting – Fix “Not Loading” & Verification Errors
  • Elements
    • Layout elements
      • Column/Grid
      • Multi-part / step
    • Form elements
      • Calculator
      • Signature
      • File upload
      • Datepicker
      • Variable field
      • Dropdown
      • Text field
      • Autosuggest
      • Keywords
      • Radio button
      • Keyword Field
      • Button
      • Audio Recording (microphone)
    • HTML elements
      • Heading
      • HTML (raw)
      • Image
      • TinyMCE
      • Divider
      • Spacer
      • PDF page break
      • Google map element WordPress form
  • Features
    • Basic
      • Confirmations emails
      • Save Form Progression (continue later)
      • Build In Translation System
      • Populate form
      • Popups
      • Import & Export
      • Hide form after submitting
      • Hide or lock out user from your forms
      • Validation
    • Advanced
      • WordPress form with Google sheets dropdown
      • Custom registration form for WordPress
      • Custom login form for WordPress
      • Custom lost password form for WordPress
      • Update current logged in user
      • Secrets
      • Prevent duplicate entries
      • Lock & hide form
      • Password protect
      • Conditional Logic
      • Tags system
      • Address lookup/auto complete
      • Analytics Tracking
      • Conversion Tracking
      • Distance & Duration Calculation
      • If statements
      • Foreach loops
      • E-mail Reminders
      • Variable Fields
      • Form templates - Include elements into other forms - WordPress
      • Transferring data from one form to another
    • Integrations
      • PDF Generator
      • Listings
      • WooCommerce Checkout
        • Fixed price checkout
        • Dynamic price checkout
        • Variable product checkout (variations)
        • Replacing the "Add to cart" on a product page with a form
        • Hiding product from shop and order via custom form
      • PayPal
      • MailChimp
      • Mailster
      • Zapier
      • Stripe (BETA)
      • WooCommerce Instant Order (in progress)
  • Tutorials
    • WordPress Form to Google Sheet Integration
    • GDPR Consent / Terms agreement
    • How to update the plugin
    • Sending emails to specific department for WordPress contact forms
  • Example Forms for WordPress
    • Booking 24 hours ahead of time
  • Developers
    • Code Examples
      • Lookup City by Zipcode for your WordPress form
      • Audio Recording Field
      • Custom API Phone Number Validation for Your WordPress Form
      • Updating WordPress user meta data after login
      • Automatically redirecting to next step after displaying text or a progress bar
      • Dropdown with groups (categories)
      • Prevent form submission based on entered field values
      • Track form submissions with GTM (Google Tag Manager)
      • Tracking Multi-part steps with Google Analytics
      • Tracking Multi-part steps with GTM data layer (dataLayer.push)
      • Track form submissions with third party
      • Compare input field value with database value
      • Insert form data into a custom database table
      • Delete database row after contact entry is deleted in WordPress
      • Limited date availability (slots) for your WordPress booking form
      • Send submitted form data to another site
      • Exclude empty fields from emails
      • Execute custom JS when a column becomes conditionally visible
      • Toolset Plugin: Update comma separated string to Array for meta data saved via Front-end Posting
      • Toolset Plugin: Update file ID to file URL for meta data saved via Front-end Posting
      • Delete uploaded files after email has been send
      • Increase Cookie lifetime for client data such as [Form Progression]
      • Altering cookie secure and httponly parameters
      • Define fake cronjob to clear old client data if cronjob is disabled on your server
      • Define page language attribute based on page ID or URL
      • Define custom headers when doing a POST request
      • Change checkbox/radio layout to vertical on mobile devices
      • Show remaining available form submission allowed
      • Global fields / elements
      • Trim values of fields
      • Re-sending E-mails after editing entries via Listings for WordPress
      • Combine multiple field values into one column on Contact Entries page
      • Altering the attachments for E-mails via PHP code for WordPress
      • Generate dynamic columns with dates based on user selected date from Datepicker element
      • Hide `eye` icon from Listings row based on user role
    • Data storage
    • BETA version
  • Changelog
  • Support
Powered by GitBook
On this page
  • About
  • When to use this feature?
  • How to enable it?
  • Example form
  1. Features
  2. Advanced

Distance & Duration Calculation

How to calculate traveling duration or distance between two locations (addresses) in your WordPress form.

Note: To use this feature you must first obtain a Google API key via your API manager. Also make sure the Directions API library is enabled in your API manager. After you obtained your API key you require to enter it under "Super Forms > Settings > Form Settings".

About

With this feature for Text fields you can calculate either the distance or duration between 2 different locations. When calculating the distance you can return the total kilometers (metric) or miles (imperial). When calculating the duration (travel time) you can return the total seconds or minutes.

The distance and duration between the two locations are calculated with the google directions API.

Note: In order for this feature to work you must enable the Directions API within

When to use this feature?

You will want to use this feature whenever you need to calculate travel time or travel distance between 2 different locations. The value returned can be populated to another Text field that you can optionally set to be disabled to not allow the user to edit the field. You can also put this field in a hidden column to make it invisible to the end user.

How to enable it?

This feature can be enabled for any Text field in your form.

In order to do so, go ahead and edit the element. Now choose Distance & Duration Calculation (google directions) from the dropdown menu. Now check the Enable distance calculator option to enable the feature for this field.

Note: It is strongly suggested to also enable the Address Auto Complete feature.

When enabled, you will have to choose if the field acts as the Start or Destination address. You can select this via the Select if this field must act as Start or Destination option.

Depending on whether the field is the Start or Destination you will now see some extra options.

When the field acts as Start address, you will have to define what the Destination address is. When the field acts as Destination address, you will have to define what the Start address is.

Note: For Destination address or Starting address you can either enter a fixed address/zip code or enter the unique field name to retrieve dynamic location from user entered.

When you have chosen to use the field as the Start address, you can now choose what value you wish to return from the API. You can choose one of the following options:

  • Distance in meters (Tip: use this option in combination with Calculator element to do calculations)

  • Duration in seconds (Tip: use this option in combination with Calculator element to do calculations)

  • Distance text in km or miles

  • Duration text in minutes

Now we have to Select a unit system for the value returned by the API. You can choose between Metric (kilometer/meters) or Imperial (miles/feet) unit system.

The final step is to enter the Unique field name which the distance/duration value should be populated to. This can either be a Text field or Hidden field (only enter the unique field name without any brackets).

Example form

You can find an example form that uses conditional logic under: Super Forms > Demos > Distance calculator

PreviousConversion TrackingNextIf statements

Last updated 1 year ago