Generate Directions with Mapbox API on New Form Submission from Gravity Forms API

Pipedream makes it easy to connect APIs for Mapbox, Gravity Forms and 2,800+ other apps remarkably fast.

Trigger workflow on

New Form Submission from the Gravity Forms API

Next, do this

Generate Directions with the Mapbox API

No credit card required

▶

Watch us build a workflow

8 min

Watch now ➜

Trusted by 1,000,000+ developers from startups to Fortune 500 companies

Developers ♥ Pipedream

Getting Started#

This integration creates a workflow with a Gravity Forms trigger and Mapbox action. When you configure and deploy the workflow, it will run on Pipedream's servers 24x7 for free.

Select this integration
Configure the New Form Submission trigger
1. Connect your Gravity Forms account
2. Configure timer
3. Select a Form ID
Configure the Generate Directions action
1. Connect your Mapbox account
2. Configure Start Coordinate
3. Configure End Coordinate
4. Select a Transportation Mode
5. Optional- Configure Steps
6. Optional- Configure Alternatives
7. Optional- Select one or more Exclude
Deploy the workflow
Send a test event to validate your setup
Turn on the trigger

Details#

This integration uses pre-built, source-available components from Pipedream's GitHub repo. These components are developed by Pipedream and the community, and verified and maintained by Pipedream.

To contribute an update to an existing component or create a new component, create a PR on GitHub. If you're new to Pipedream component development, you can start with quickstarts for trigger span and action development, and then review the component API reference.

Trigger#

New Form Submission on Gravity Forms

Description:Emit new event when a new form submission is received.

Version:0.0.1

Key:gravity_forms-form-submitted

View on GitHub

Gravity Forms Overview#

The Gravity Forms API allows you to interact programmatically with Gravity Forms, a WordPress form plugin, to create, update, delete, and retrieve form entries. Within Pipedream, you can leverage this API to automate workflows, integrate with other apps, and manipulate form data in real-time. By connecting Gravity Forms to Pipedream's serverless platform, you open up possibilities to sync form submissions with databases, trigger notifications, or even process payments automatically.

Trigger Code#

import { DEFAULT_POLLING_SOURCE_TIMER_INTERVAL } from "@pipedream/platform";
import gravityForms from "../../gravity_forms.app.mjs";
import sampleEmit from "./test-event.mjs";

export default {
  key: "gravity_forms-form-submitted",
  name: "New Form Submission",
  description: "Emit new event when a new form submission is received.",
  version: "0.0.1",
  type: "source",
  dedupe: "unique",
  props: {
    gravityForms,
    db: "$.service.db",
    timer: {
      type: "$.interface.timer",
      default: {
        intervalSeconds: DEFAULT_POLLING_SOURCE_TIMER_INTERVAL,
      },
    },
    formId: {
      propDefinition: [
        gravityForms,
        "formId",
      ],
    },
  },
  methods: {
    _getLastId() {
      return this.db.get("lastId") || 0;
    },
    _setLastId(lastId) {
      this.db.set("lastId", lastId);
    },
    async startEvent(maxResults = false) {
      const lastId = this._getLastId();
      const response = this.gravityForms.paginate({
        fn: this.gravityForms.listEntries,
        formId: this.formId,
        maxResults,
      });

      const responseArray = [];

      for await (const item of response) {
        if (item.id <= lastId) break;
        responseArray.push(item);
      }

      if (responseArray.length) {
        this._setLastId(responseArray[0].id);
      }

      for (const event of responseArray.reverse()) {
        this.$emit(event, {
          id: event.id,
          summary: `New Form Submission with ID: ${event.id}`,
          ts: Date.parse(event.date_created),
        });
      }
    },
  },
  hooks: {
    async deploy() {
      await this.startEvent(25);
    },
  },
  async run() {
    await this.startEvent();
  },
  sampleEmit,
};

Trigger Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI and CLI.

Label	Prop	Type	Description
Gravity Forms	`gravityForms`	`app`	This component uses the Gravity Forms app.
N/A	`db`	`$.service.db`	This component uses `$.service.db` to maintain state between executions.
	`timer`	`$.interface.timer`
Form ID	`formId`	`string`	Select a value from the drop down menu.

Trigger Authentication#

Gravity Forms uses API keys for authentication. When you connect your Gravity Forms account, Pipedream securely stores the keys so you can easily authenticate to Gravity Forms APIs in both code and no-code steps.

To retrieve your Consumer Key and Secret,

Navigate to your WordPress instance with Gravity Forms account and sign in
Go to “Forms” > “Settings” > “REST API”

About Gravity Forms#

Build and manage web forms quickly and easily with Gravity Forms for WordPress.

Action#

Generate Directions on Mapbox

Description:Generates directions between two or more locations using Mapbox API. [See the documentation](https://docs.mapbox.com/api/navigation/directions/).

Version:0.0.2

Key:mapbox-generate-directions

View on GitHub

Mapbox Overview#

The Mapbox API offers a suite of tools for developers to integrate location-based services into their applications. With Pipedream, you can leverage Mapbox's capabilities to create complex automations and workflows, like real-time mapping, geocoding, and route optimization. Whether you're managing delivery routes, analyzing spatial data, or personalizing user experiences based on location, Mapbox provides the geographical intelligence that, when combined with Pipedream's serverless platform, can turn these ideas into efficient, automated processes.

Action Code#

import mapbox from "../../mapbox.app.mjs";

export default {
  key: "mapbox-generate-directions",
  name: "Generate Directions",
  description: "Generates directions between two or more locations using Mapbox API. [See the documentation](https://docs.mapbox.com/api/navigation/directions/).",
  version: "0.0.2",
  annotations: {
    destructiveHint: false,
    openWorldHint: true,
    readOnlyHint: false,
  },
  type: "action",
  props: {
    mapbox,
    startCoordinate: {
      type: "string",
      label: "Start Coordinate",
      description: "The starting point in the format `longitude,latitude`, E.g. `-85.244869,37.835819`",
    },
    endCoordinate: {
      type: "string",
      label: "End Coordinate",
      description: "The ending point in the format `longitude,latitude`, E.g. `-85.244869,37.835819`",
    },
    transportationMode: {
      propDefinition: [
        mapbox,
        "transportationMode",
      ],
    },
    steps: {
      type: "boolean",
      label: "Steps",
      description: "Whether to return steps and turn-by-turn instructions (`true`) or not (`false`, default)",
      optional: true,
    },
    alternatives: {
      type: "boolean",
      label: "Alternatives",
      description: "Whether to try to return alternative routes (`true`) or not (`false`, default). An alternative route is a route that is significantly different from the fastest route, but still close in time.",
      optional: true,
    },
    exclude: {
      propDefinition: [
        mapbox,
        "exclude",
      ],
    },
  },
  async run({ $ }) {
    const directions = await this.mapbox.getDirections({
      $,
      transportationMode: this.transportationMode,
      coordinates: `${this.startCoordinate};${this.endCoordinate}`,
      params: {
        steps: this.steps,
        alternatives: this.alternatives,
        exclude: this.exclude && this.exclude.join(","),
      },
    });
    $.export("$summary", "Generated directions successfully.");
    return directions;
  },
};

Action Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI.

Label	Prop	Type	Description
Mapbox	`mapbox`	`app`	This component uses the Mapbox app.
Start Coordinate	`startCoordinate`	`string`	The starting point in the format `longitude,latitude`, E.g. `-85.244869,37.835819`
End Coordinate	`endCoordinate`	`string`	The ending point in the format `longitude,latitude`, E.g. `-85.244869,37.835819`
Transportation Mode	`transportationMode`	`string`	Select a value from the drop down menu:`drivingwalkingcyclingdriving-traffic`
Steps	`steps`	`boolean`	Whether to return steps and turn-by-turn instructions (`true`) or not (`false`, default)
Alternatives	`alternatives`	`boolean`	Whether to try to return alternative routes (`true`) or not (`false`, default). An alternative route is a route that is significantly different from the fastest route, but still close in time.
Exclude	`exclude`	`string[]`	Select a value from the drop down menu:`motorwaytollferryunpavedcash_only_tollscountry_borderstate_border`