Super Easy Contact Form with Slack Webhooks and React

Diligent Dev

Feb 10, 2020·3 min read

Creating an email contact form is good, but creating a contact form with Slack webhooks is great. Not only is it easier than setting up an email form, but there are so many use cases for it.

For instance, let’s say you have a customer service or sales team. Wouldn’t you want a message going to that whole team instead of just one email account? It can also be much easier to add a team member or create a new channel to accommodate a team.

*** Scroll To The End For A Video Tutorial ***

Slack Setup

To get up and running, you’ll need to have a Slack account and channel set up. If you don't already have an account go to https://slack.com and sign up. Then create a channel and call it whatever you’d like. For this demo, I’m just going to call my channel “contact”.

Creating a Slack Webhook

To send our contact form submission to Slack, we’ll need to set up a webhook. Sign in to Slack and click on “Apps” on the left-hand side then App Directory.

In the search box search for “webhooks” and select Incoming Webhooks.

Once you click on Incoming WebHooks, click the green button “Add to Slack”. After click that you’ll be directed to a page where you can choose a channel. Optionally, at the bottom of the page, you can configure the icon and name of your webhook bot.

Now that we’ve selected the correct channel and bot preferences, you’ll see a URL we’ll use to make a POST request to our webhook.

Creating Our Contact Form

For our contact form, we’ll be using React. To create a new project, navigate to your desired directory and run the following command:

create-react-app slack-contact-form

Now open that folder in your preferred code editor. For this demo, I’ll be using VS Code ( https://code.visualstudio.com/). Open the terminal in VS Code and run the following command:

npm run start

This will launch your project in the browser on port 3000.

Basic Styling

In order to have some decent styling on our contact form, I’ll be using a lightweight CSS framework called tailwinds. To do this we’ll need to do a few things:
1. Open src/App.css and delete everything in the file. Then add:

body {
  background-color: #EEEEEE;
}

2. Open public/index.html and paste the following inside of the head tag:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Contact Form

Now that we have Slack set up and some basic styling, let’s create the contact form. Inside of src/App.js, we’ll create 2 textboxes for name and email and a text area for a message.

Sending a Message

In order to send a post request to our webhook, we’ll need to import a package called Axios. To install it, run the following command in your terminal:

npm i axios

Inside of our src/App.js file, we’ll write the logic for our form submission.

That’s it, you should now be able to submit to your webhook URL!

You can find a Github Repo for this project here: https://github.com/TheDiligentDev/SlackContactForm

Video Tutorial