Super Easy Contact Form with Slack Webhooks and React

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”.

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.

Image for post
Image for post
Slack Apps

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

Image for post
Image for post
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.

Image for post
Image for post
Webhook URL

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:

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:

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

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:

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">

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.

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:

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

Form Submission Function

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

Written by

Full-stack developer developer for 7+ years with a passion for learning new things and sharing. For more, check out diligentdev.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store