← Typeform + Slack integrations

Build and Send a Block Kit Message with Slack API on New Submission from Typeform API

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

Trigger workflow on
New Submission from the Typeform API
Next, do this
Build and Send a Block Kit Message with the Slack API
No credit card required
Intro to Pipedream
Watch us build a workflow
Watch us build a workflow
8 min
Watch now ➜

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

Adyen logo
Appcues logo
Bandwidth logo
Checkr logo
ChartMogul logo
Dataminr logo
Gopuff logo
Gorgias logo
LinkedIn logo
Logitech logo
Replicated logo
Rudderstack logo
SAS logo
Scale AI logo
Webflow logo
Warner Bros. logo
Adyen logo
Appcues logo
Bandwidth logo
Checkr logo
ChartMogul logo
Dataminr logo
Gopuff logo
Gorgias logo
LinkedIn logo
Logitech logo
Replicated logo
Rudderstack logo
SAS logo
Scale AI logo
Webflow logo
Warner Bros. logo

Developers Pipedream

Getting Started

This integration creates a workflow with a Typeform trigger and Slack 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 Build and Send a Block Kit Message action
    1. Connect your Slack account
    2. Select a Channel
    3. Optional- Configure Notification Text
    4. Optional- Configure Send as User
    5. Configure Add app to channel automatically?
    6. Optional- Configure Schedule message
    7. Optional- Configure Include link to Pipedream
    8. Optional- Configure Customize Bot Settings
    9. Optional- Configure Bot Username
    10. Optional- Select a Icon (emoji)
    11. Optional- Configure Icon (image URL)
    12. Optional- Configure Reply to Thread
    13. Optional- Configure Message Timestamp
    14. Optional- Configure Send Channel Message
    15. Optional- Configure Add Message Metadata
    16. Optional- Configure Metadata Event Type
    17. Optional- Configure Metadata Event Payload
    18. Optional- Configure Configure Unfurl Settings
    19. Optional- Configure Unfurl Links
    20. Optional- Configure Unfurl Media
    21. Optional- Select a Add Blocks - Reference Existing Blocks Array or Configure Manually?
  4. Deploy the workflow
  5. Send a test event to validate your setup
  6. 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

Description:Emit new submission
Version:0.0.8
Key:typeform-new-submission

Typeform Overview

The Typeform API furnishes you with the means to create dynamic forms and collect user responses in real-time. By leveraging this API within Pipedream's serverless platform, you can automate workflows to process this data, integrate seamlessly with other services, and react to form submissions instantaneously. This empowers you to craft tailored responses, synchronize with databases, trigger email campaigns, or even manage event registrations without manual intervention.

Trigger Code

import { createHmac } from "crypto";
import sampleEmit from "./test-event.mjs";
import { uuid } from "uuidv4";
import common from "../common/common.mjs";
import constants from "../../constants.mjs";
import utils from "../common/utils.mjs";

const { typeform } = common.props;
const { parseIsoDate } = utils;

export default {
  ...common,
  key: "typeform-new-submission",
  name: "New Submission",
  version: "0.0.8",
  type: "source",
  description: "Emit new submission",
  props: {
    ...common.props,
    http: {
      type: "$.interface.http",
      customResponse: true,
    },
    db: "$.service.db",
    formId: {
      propDefinition: [
        typeform,
        "formId",
      ],
    },
  },
  methods: {
    ...common.methods,
    generateSecret() {
      return "" + Math.random();
    },
  },
  hooks: {
    ...common.hooks,
    async activate() {
      const secret = this.generateSecret();
      this._setSecret(secret);

      let tag = this._getTag();
      if (!tag) {
        tag = uuid();
        this._setTag(tag);
      }

      return await this.typeform.createHook({
        endpoint: this.http.endpoint,
        formId: this.formId,
        tag,
        secret,
      });
    },
    async deactivate() {
      const tag = this._getTag();

      return await this.typeform.deleteHook({
        formId: this.formId,
        tag,
      });
    },
  },
  async run(event) {
    const {
      body,
      headers,
    } = event;

    const { [constants.TYPEFORM_SIGNATURE]: typeformSignature } = headers;

    if (typeformSignature) {
      const secret = this._getSecret();

      const hmac =
        createHmac(constants.ALGORITHM, secret)
          .update(body)
          .digest(constants.ENCODING);

      const signature = `${constants.ALGORITHM}=${hmac}`;

      if (typeformSignature !== signature) {
        throw new Error("signature mismatch");
      }
    }

    let formResponseString = "";
    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;
      formResponseString += `### ${field.title}\n${parsedAnswer}\n`;
    }

    data.form_response_string = formResponseString;
    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,
    });

    this.http.respond({
      status: 200,
    });
  },
  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.
LabelPropTypeDescription
TypeformtypeformappThis component uses the Typeform app.
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 executions.
FormformIdstringSelect a value from the drop down menu.

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

Typeform lets you build no-code forms, quizzes, and surveys - and get more responses.

Action

Description:Configure custom blocks and send to a channel, group, or user. [See the documentation](https://api.slack.com/tools/block-kit-builder).
Version:0.5.0
Key:slack_v2-send-block-kit-message

Action Code

import buildBlocks from "../common/build-blocks.mjs";
import common from "../common/send-message.mjs";

export default {
  ...common,
  ...buildBlocks,
  key: "slack_v2-send-block-kit-message",
  name: "Build and Send a Block Kit Message",
  description: "Configure custom blocks and send to a channel, group, or user. [See the documentation](https://api.slack.com/tools/block-kit-builder).",
  version: "0.5.0",
  annotations: {
    destructiveHint: false,
    openWorldHint: true,
    readOnlyHint: false,
  },
  type: "action",
  props: {
    slack: common.props.slack,
    conversation: {
      propDefinition: [
        common.props.slack,
        "conversation",
      ],
    },
    text: {
      type: "string",
      label: "Notification Text",
      description: "Optionally provide a string for Slack to display as the new message notification (if you do not provide this, notification will be blank).",
      optional: true,
    },
    ...common.props,
    ...buildBlocks.props,
  },
  methods: {
    ...common.methods,
    ...buildBlocks.methods,
    async getGeneratedBlocks() {
      return await buildBlocks.run.call(this);  // call buildBlocks.run with the current context
    },
  },
  async run({ $ }) {
    this.blocks = await this.getGeneratedBlocks();  // set the blocks prop for common.run to use
    const resp = await common.run.call(this, {
      $,
    });  // call common.run with the current context
    return resp;
  },
};

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
SlackslackappThis component uses the Slack app.
ChannelconversationstringSelect a value from the drop down menu.
Notification Texttextstring

Optionally provide a string for Slack to display as the new message notification (if you do not provide this, notification will be blank).

Send as Useras_userboolean

Optionally pass true to post the message as the authenticated user, instead of as a bot. Defaults to false.

Add app to channel automatically?addToChannelboolean

If true, the app will be added to the specified non-DM channel(s) automatically. If false, you must add the app to the channel manually to post to a private channel as a bot. Defaults to false.

Schedule messagepost_atstring

Messages can only be scheduled up to 120 days in advance, and cannot be scheduled for the past. The datetime should be in ISO 8601 format. (Example: 2014-01-01T00:00:00Z)

Include link to Pipedreaminclude_sent_via_pipedream_flagboolean

Defaults to true, includes a link to Pipedream at the end of your Slack message.

Customize Bot SettingscustomizeBotSettingsboolean

Customize the username and/or icon of the Bot

Reply to ThreadreplyToThreadboolean

Reply to an existing thread

Add Message MetadataaddMessageMetadataboolean

Set the metadata event type and payload

Configure Unfurl SettingsconfigureUnfurlSettingsboolean

Configure settings for unfurling links and media

Add Blocks - Reference Existing Blocks Array or Configure Manually?passArrayOrConfigurestringSelect a value from the drop down menu:{ "label": "Reference an array of blocks", "value": "array" }{ "label": "Configure blocks individually (maximum 5 blocks)", "value": "configure" }

Action Authentication

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

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

chat:writechat:write.customizechat:write.publicfiles:read

About Slack

Slack is the AI-powered platform for work bringing all of your conversations, apps, and customers together in one place. Around the world, Slack is helping businesses of all sizes grow and send productivity through the roof.

More Ways to Connect Slack + Typeform

Archive Channel with Slack API on New Submission from Typeform API
Typeform + Slack
 
Try it
Approve Workflow with Slack API on New Submission from Typeform API
Typeform + Slack
 
Try it
Add Emoji Reaction with Slack API on New Submission from Typeform API
Typeform + Slack
 
Try it
Create Reminder with Slack API on New Submission from Typeform API
Typeform + Slack
 
Try it
Delete File with Slack API on New Submission from Typeform API
Typeform + Slack
 
Try it
New Submission from the Typeform API

Emit new submission

 
Try it
New Channel Created (Instant) from the Slack API

Emit new event when a new channel is created.

 
Try it
New Interaction Events (Instant) from the Slack API

Emit new events on new Slack interactivity events sourced from Block Kit interactive elements, Slash commands, or Shortcuts

 
Try it
New Keyword Mention (Instant) from the Slack API

Emit new event when a specific keyword is mentioned in a channel

 
Try it
New Message In Channels (Instant) from the Slack API

Emit new event when a new message is posted to one or more channels

 
Try it
Create a Form with the Typeform API

Creates a form with its corresponing fields. See the docs here

 
Try it
Create an Image with the Typeform API

Adds an image in your Typeform account. See the docs here

 
Try it
Delete an Image with the Typeform API

Deletes an image from your Typeform account. See the docs here

 
Try it
Delete Form with the Typeform API

Select a form to be deleted. See the docs here

 
Try it
Duplicate a Form with the Typeform API

Duplicates an existing form in your Typeform account and adds "(copy)" to the end of the title. See the docs here

 
Try it

Explore Other Apps

1
-
24
of
2,800+
apps by most popular

Node
Node
Anything you can do with Node.js, you can do in a Pipedream workflow. This includes using most of npm's 400,000+ packages.
Python
Python
Anything you can do in Python can be done in a Pipedream Workflow. This includes using any of the 350,000+ PyPi packages available in your Python powered workflows.
Notion
Notion
Notion is a new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.
OpenAI (ChatGPT)
OpenAI (ChatGPT)
OpenAI is an AI research and deployment company with the mission to ensure that artificial general intelligence benefits all of humanity. They are the makers of popular models like ChatGPT, DALL-E, and Whisper.
Anthropic (Claude)
Anthropic (Claude)
AI research and products that put safety at the frontier. Introducing Claude, a next-generation AI assistant for your tasks, no matter the scale.
Google Sheets
Google Sheets
Use Google Sheets to create and edit online spreadsheets. Get insights together with secure sharing in real-time and from any device.
Telegram
Telegram
Telegram, is a cloud-based, cross-platform, encrypted instant messaging (IM) service.
Google Drive
Google Drive
Google Drive is a file storage and synchronization service which allows you to create and share your work online, and access your documents from anywhere.
HTTP / Webhook
HTTP / Webhook
Get a unique URL where you can send HTTP or webhook requests
Google Calendar
Google Calendar
With Google Calendar, you can quickly schedule meetings and events and get reminders about upcoming activities, so you always know what’s next.
Schedule
Schedule
Trigger workflows on an interval or cron schedule.
Pipedream Utils
Pipedream Utils
Utility functions to use within your Pipedream workflows
Shopify
Shopify
Shopify is a complete commerce platform that lets anyone start, manage, and grow a business. You can use Shopify to build an online store, manage sales, market to customers, and accept payments in digital and physical locations.
Supabase
Supabase
Supabase is an open source Firebase alternative.
MySQL
MySQL
MySQL is an open-source relational database management system.
PostgreSQL
PostgreSQL
PostgreSQL is a free and open-source relational database management system emphasizing extensibility and SQL compliance.
Premium
AWS
AWS
Amazon Web Services (AWS) offers reliable, scalable, and inexpensive cloud computing services.
Premium
Twilio SendGrid
Twilio SendGrid
Send marketing and transactional email through the Twilio SendGrid platform with the Email API, proprietary mail transfer agent, and infrastructure for scalable delivery.
Amazon SES
Amazon SES
Amazon SES is a cloud-based email service provider that can integrate into any application for high volume email automation
Premium
Klaviyo
Klaviyo
Email Marketing and SMS Marketing Platform
Premium
Zendesk
Zendesk
Zendesk is award-winning customer service software trusted by 200K+ customers. Make customers happy via text, mobile, phone, email, live chat, social media.
Premium
ServiceNow
ServiceNow
The smarter way to workflow
Slack
Slack
Slack is the AI-powered platform for work bringing all of your conversations, apps, and customers together in one place. Around the world, Slack is helping businesses of all sizes grow and send productivity through the roof.
Microsoft Teams
Microsoft Teams
Microsoft Teams has communities, events, chats, channels, meetings, storage, tasks, and calendars in one place.