← Typeform + HTTP / Webhook integrations

Custom Request with HTTP / Webhook APIon New Submission from Typeform API

Pipedream makes it easy to connect APIs for HTTP / Webhook, Typeform and + other apps remarkably fast.

Trigger workflow on
New Submission from the Typeform API
Next, do this
Custom Request with the HTTP / Webhook API
No credit card required
Trusted by 200,000+ developers from startups to Fortune 500 companies:
Trusted by 200,000+ developers from startups to Fortune 500 companies

Developers Pipedream

Getting Started

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

  1. Select this integration
  2. Configure the New Submission trigger
    1. Connect your Typeform account
    2. Select a Form
  3. Configure the Custom Request action
    1. Connect your HTTP / Webhook account
    2. Configure URL
    3. Select a Method
    4. Optional- Configure HTTP Body / Payload
    5. Optional- Configure Query Parameters
    6. Optional- Configure HTTP Headers
    7. Optional- Configure Basic Auth
  4. Deploy the workflow
  5. Send a test event to validate your setup
  6. Turn on the trigger


This integration uses pre-built, open source 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 Code

const typeform = require('../../typeform.app.js');
const {uuid} = require('uuidv4');
const {DateTime} = require('luxon');

function parseIsoDate(isoDate) {
  const dt = DateTime.fromISO(isoDate);
  return {
    date_time: dt.toFormat('yyyy-mm-dd hh:mm:ss a'),
    date: dt.toFormat('yyyy-mm-dd'),
    time: dt.toFormat('hh:mm:ss a'),
    timezone: dt.zoneName,
    epoch: dt.toMillis(),

module.exports = {
  key: 'typeform-new-submission',
  name: 'New Submission',
  version: '0.0.4',
  props: {
    formId: {propDefinition: [typeform, 'formId']},
    http: '$.interface.http',
    db: '$.service.db',
  methods: {
    generateSecret() {
      return '' + Math.random();
  hooks: {
    async activate() {
      const secret = this.generateSecret();
      this.db.set('secret', secret);
      let tag = this.db.get('tag');
      if (!tag) {
        tag = uuid();
        this.db.set('tag', tag);
      return await this.typeform.createHook({
        endpoint: this.http.endpoint,
        formId: this.formId,
    async deactivate() {
      return await this.typeform.deleteHook({
        formId: this.formId,
        tag: this.db.get('tag'),
  async run(event) {
    const {body, headers} = event;

    if (headers['Typeform-Signature']) {
      const crypto = require('crypto');
      const algo = 'sha256';
      const hmac = crypto.createHmac(algo, this.db.get('secret'));
      if (
        headers['Typeform-Signature'] !== `${algo}=${hmac.digest('base64')}`
      ) {
        throw new Error('signature mismatch');

    let form_response_string = ``;
    const data = Object.assign({}, body.form_response);
    data.form_response_parsed = {};
    for (let i = 0; i < body.form_response.answers.length; i++) {
      const field = body.form_response.definition.fields[i];
      const answer = body.form_response.answers[i];

      let parsedAnswer;
      let value = answer[answer.type];
      if (value.label) {
        parsedAnswer = value.label;
      } else if (value.labels) {
        parsedAnswer = value.labels.join();
      } else if (value.choice) {
        parsedAnswer = value.choice;
      } else if (value.choices) {
        parsedAnswer = value.choices.join();
      } else {
        parsedAnswer = value;
      data.form_response_parsed[field.title] = parsedAnswer;
      form_response_string += `### ${field.title}\n${parsedAnswer}\n`;
    data.form_response_string = form_response_string;
    data.raw_webhook_event = body;
    if (data.landed_at) data.landed_at = parseIsoDate(data.landed_at);
    if (data.submitted_at) data.submitted_at = parseIsoDate(data.submitted_at);
    data.form_title = body.form_response.definition.title;
    delete data.answers;
    delete data.definition;

    this.$emit(data, {
      summary: JSON.stringify(data),
      id: data.token,

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.
TypeformtypeformappThis component uses the Typeform app.
FormformIdstringSelect a value from the drop down menu.
N/Ahttp$.interface.httpThis component uses $.interface.http to generate a unique URL when the component is first instantiated. Each request to the URL will trigger the run() method of the component.
N/Adb$.service.dbThis component uses $.service.db to maintain state between component invocations.

Trigger Authentication

Typeform uses OAuth authentication. When you connect your Typeform account, Pipedream will open a popup window where you can sign into Typeform and grant Pipedream permission to connect to your account. Pipedream securely stores and automatically refreshes the OAuth tokens so you can easily authenticate any Typeform API.

Pipedream requests the following authorization scopes when you connect your account:


About Typeform

People-Friendly Forms and Surveys


Description:Make an HTTP request using any method and URL. Optionally configure query string parameters, headers and basic auth.

Action Code

import { axios } from "@pipedream/platform";
import http from "../../http.app.mjs";

export default {
  key: "http-custom-request",
  name: "Custom Request",
  description: "Make an HTTP request using any method and URL. Optionally configure query string parameters, headers and basic auth.",
  type: "action",
  version: "0.1.1",
  props: {
    url: {
      propDefinition: [
    method: {
      propDefinition: [
    data: {
      propDefinition: [
    params: {
      propDefinition: [
    headers: {
      propDefinition: [
    auth: {
      propDefinition: [
  async run({ $ }) {
    const {
    } = this;
    const config = {
    if (this.auth) config.auth = this.http.parseAuth(this.auth);
    return await axios($, config);

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.

HTTP / WebhookhttpappThis component uses the HTTP / Webhook app.

The URL you'd like to send the HTTP request to

MethodmethodstringSelect a value from the drop down menu:GETPOSTPUTPATCHDELETEHEADOPTIONS
HTTP Body / Payloaddatastring

The body of the HTTP request. Enter a static value or reference prior step exports via the steps object (e.g., {{steps.foo.$return_value}}).

Query Parametersparamsobject

Add individual query parameters as key-value pairs or disable structured mode to pass multiple key-value pairs as an object.

HTTP Headersheadersobject

Add individual HTTP headers as key-value pairs or disable structured mode to pass multiple key-value pairs as an object.

Basic Authauthstring

To use HTTP basic authentication, enter a username and password separated by | (e.g., myUsername|myPassword).

Action Authentication

The HTTP / Webhook API does not require authentication.

About HTTP / Webhook

Get a unique URL where you can send HTTP or webhook requests

About Pipedream

Stop writing boilerplate code, struggling with authentication and managing infrastructure. Start connecting APIs with code-level control when you need it — and no code when you don't.

Into to Pipedream
Watch us build a workflow
Watch us build a workflow
4 min
Watch now ➜
"The past few weeks, I truly feel like the clichéd 10x engineer."
Powerful features that scale
Manage concurrency and execution rate
Manage concurrency and execution rate

Queue up to 10,000 events per workfow and manage the concurrency and rate at which workflows are triggered.

Process large payloads up to 5 terabytes
Process large payloads up to 5 terabytes

Large file support enables you to trigger workflows with any data (e.g., large JSON files, images and videos) up to 5 terabytes.

Return custom responses to HTTP requests
Return custom responses to HTTP requests

Return any JSON-serializable response from an HTTP triggered workflow using $respond().

Use most npm packages
Use most npm packages

To use any npm package, just require() it -- there's no npm install or package.json required.

Maintain state between executions
Maintain state between executions

Use $checkpoint to save state in one workflow invocation and read it the next time your workflow runs.

Pass data between steps
Pass data between steps

Return data from any step to inspect it in a human-friendly way and reference the data in future steps via the steps object.