← Typeform + Twilio integrations

Send SMS with Twilio APIon New Submission from Typeform API

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

Trigger workflow on
New Submission from the Typeform API
Next, do this
Send SMS with the Twilio 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 Twilio 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 Send SMS action
    1. Connect your Twilio account
    2. Select a From
    3. Configure To
    4. Configure Message Body
  4. Deploy the workflow
  5. Send a test event to validate your setup
  6. Turn on the trigger

Details

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

Description:
Version:0.0.4
Key:typeform-new-submission

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 {
    isoDate,
    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: {
    typeform,
    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,
        tag,
        secret,
      });
    },
    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'));
      hmac.update(body);
      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.
LabelPropTypeDescription
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:

offlineaccounts:readforms:writeforms:readimages:writeimages:readthemes:writethemes:readresponses:readresponses:writewebhooks:readwebhooks:writeworkspaces:readworkspaces:write

About Typeform

People-Friendly Forms and Surveys

Action

Description:Send a simple text-only SMS.
Version:0.0.4
Key:twilio-send-sms

Action Code

// Read the Twilio docs at https://www.twilio.com/docs/sms/api/message-resource#create-a-message-resource
const twilio = require("../../twilio.app.js");
const { phone } = require("phone");

module.exports = {
  key: "twilio-send-sms",
  name: "Send SMS",
  description: "Send a simple text-only SMS.",
  type: "action",
  version: "0.0.4",
  props: {
    twilio,
    from: {
      propDefinition: [
        twilio,
        "from",
      ],
    },
    to: {
      propDefinition: [
        twilio,
        "to",
      ],
    },
    body: {
      propDefinition: [
        twilio,
        "body",
      ],
    },
  },
  async run() {
    // Parse the given number into its E.164 equivalent
    // The E.164 phone number will be included in the first element
    // of the array, but the array will be empty if parsing fails.
    // See https://www.npmjs.com/package/phone
    const toParsed = phone(this.to);
    if (!toParsed || !toParsed.phoneNumber) {
      throw new Error(`Phone number ${this.to} couldn't be parsed as a valid number.`);
    }

    const data = {
      to: toParsed.phoneNumber,
      from: this.from,
      body: this.body,
    };

    return await this.twilio.getClient().messages.create(data);
  },
};

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.

LabelPropTypeDescription
TwiliotwilioappThis component uses the Twilio app.
FromfromstringSelect a value from the drop down menu.
Totostring

The destination phone number in E.164 format. Format with a + and country code (e.g., +16175551212).

Message Bodybodystring

The text of the message you want to send, limited to 1600 characters.

Action Authentication

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

In Twilio, create an API key. There are two types of keys: Master and Standard. You'll need a Master key to interact with certain API endpoints, like /Accounts. If you don't need to interact with those endpoints, you can use a Standard key.

Once created, you'll receive an Sid and Secret here that you should enter in the corresponding fields below.

Then, in your Twilio Dashboard, you'll see your Account SID listed near the top. This is required for certain API operations. Enter that in the AccountSid field below.

About Twilio

Cloud communications platform for building SMS, Voice & Messaging applications on an API built for global scale

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."
@heyellieday
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.