Receive Slack Notifications for Typeform Submissions via webhooks!

Typeform is tool for conversational data collection. Using Typeform, you can create personalized conversational forms. With Typeform webhooks, you can receive submissions to your forms on external applications. In this guide, we will wire up Typeform such that when submissions/responses to a form are received, a message is sent to a specified slack channel.

Getting Started

To build out this application, we will have to interact with both Typeform & Slack’s webhooks. To be able to receive a notifications/messages when an event(submission) occurs in Typeform, we will first have to configure Slack’s incoming webhooks.

Configuring Slack Webhooks

To get started with the Slack webhooks, we will create a new Slack app in the workspace we intend to get notified from the Typeform submissions. To create a slack app, click here and fill the pop up menu with the intended App name & select a workspace. Head over to the features page of the newly created app and toggle the activate incoming webhooks button. Scroll to the bottom of the page and click the “Add New Webhook To Workspace” button to give your newly created Slack app access to your workspace. After a successful authorization you should receive a webhook URL from Slack. The webhook URL will look similar to this “https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXX/3XXXXX”. This is the URL(endpoint) which we use to subscribe to Typeform webhooks.

Configuring Typeform Webhooks

With Slack’s webhook in place, the next step is to set up Typeform so that notifications are sent to Slack! To set up a webhook, log into your Typeform account and select a form you would like to receive notifications on Slack when there is submission. Next, Navigate to Connect > Webhooks and click the “Add a webhook” button. Provide your endpoint URL( Slack’s URL from the previous step) & save the webhook. You should see your newly created webhook listed down below. By default, newly created webhooks are turned off. You need to toggle the button on the webhook list to set the webhook live.

Fixing Typeform’s JSON Data Pattern for Slack

At this point, you can go ahead and test the webhook by submitting a form. You will notice that despite submitting a response, you will not receive a slack notification, that sucks! We will get to debugging — click the “view deliveries” button on the specific webhook on the Typeform dashboard. You will notice that Typeform actually sent a response to Slack but Slack was unable to parse this response and send a message to the channel. Slack expects a specific pattern of JSON data which Typeform does not adhere to. To solve this problem, we will have to write some code to format the data Typeform provides and send it as a POST request to the Slack URL we got above.

    const express = require("express");
    const app = express();
    const request = require("request");
    const bodyParser = require("body-parser");

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));

    app.post("/webhook", async (req, res) => {
    //Extract Information About TypeForm Submission From Request Body 
      const Payload = req.body;
      const TypeformResponse = Payload.form_response;
    //Send 200 OK response to Typeform
      res.sendStatus(200);

    //Make HTTP POST Request To Slack Provided URL
      const options = {
        method: "POST",
        url: "Slack_Provided_URL",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify({
          text: `Hey! There is a new submission for your Typeform ${tfResponse.form_id}`,
        }),
      };
      request(options, function (error, response) {
        if (error) throw new Error(error);
        console.log(response.statusCode);
      });
    });

    app.listen(3000, () => console.log("App is running on port 3000!"));

With above code snippet in place, go ahead and deploy the web server — In a development mode, you could use a local tunnel tool like Ngrok to get an SSL secured URL(Here’s a guide we wrote that shows how to setup Ngrok).

Getting Ready For Production

In a Production environment you would want to deploy the web server we created up above to a hosting platform like Heroku(We wrote a guide on deploying servers to Heroku)
Next, We will create a new webhook connection using Hookdeck to manage the ingestion and error handling of the webhook connection to ensure we do not miss any webhook notifications(Check out this guide to get started with creating webhook connections on Hookdeck).
The last step in fixing this problem is to edit the Typeform webhook endpoint by replacing it with the URL obtained when a new webhook connection was created in Hookdeck. With the correct URL in place, you could go ahead and test it by responding a Typeform. Once submitted, you should receive a Slack notification telling you there has been a new form submission. 🎉

Conclusion

So far, we have seen how receive Slack notifications for Typeform form submission via webhooks!
Interested to learn more? Follow Hookdeck where I'll be sharing tutorials and guide about webhooks!
Try Hookdeck For Free. Receive, monitor and manage all your webhooks from a single place. We handle the complexity so you can focus on building your product.