May 22, 2018
Having a contact form on a landing page is like the basic accessories every webpage is having. The ordinary way handling this is to connect the form to an email address, and wait for the incomes. Since it’s easy to tag up the emails with labels, such as “contact form” or anything, it’s just an other email you have to take care of inbox. Using separate email address is also not too efficient, it’s just makes you follow another account, and so.
In the pas years, Slack has become one of the most widely used communication tool in startups, organisations, smaller companies. Not a coincidence: slack gives you the opportunity of organising, the way email is simply not capable of. The idea is then pretty straightforward? Can we connect our forms on our websites, to post on a dedicated Slack channel?
The answer is: yes!
And to achieve this, we are going to use google’s firebase tools, called
firebase cloud function.
What you will going to need:
1. firebase account at google's 2. npm installed 3. Slack account 4. +1: a _hook_ in your Slack team
Firstly, you have to create an incoming webhook to your Slack channel. To get this done, please follow Slack’s official documentation.
Here’s the prerequisites you have to get yourself through;
Create a new folder for your project, and then enter it:
mkdir slack-form cd slack-form
firebase-tools if you haven’t done it already:
npm install -g firebase-tools
slack-form folder, let’s initialise a new firebase project with
At this point you have to select the Functions and the Firebase project you wish to deploy to.
And now the coding part!
Let’s open the whole folder with the editor of your choice. I am using atom by the way.
You will notice a
functions folder, with a
package.json and an
index.js file. This is where the magic happens.
Create a function named
addMessageToSlack, then let’s implement it.
This piece of code is responsible for invoking an
onRequest function, which sends a
post request towards the previously created Slack hook, which includes the data in
json format, we wish to send to the Slack channel.
Note, that there’s the
request library used, so in the don’t forget to install it via
npm in the
npm install --save request
Ok, so once its done, let’s create a contact form on our frontend.
index.html in the root folder, and place a
form in the
body tag, as the following:
Note, that we are using
jQuery for this example, so add it as a
npm install --save-dev jquery
Create a new
contact.js, where we re processing the form.
ajaxurl variable that contains the end-point we are calling. Since we want to avoid
cross origin errors in our application, we have to route our firebase cloud function.
Let’s create a
firebase.json file in our
root folder, and add the following:
This hooks the route
contact/ to the firebase cloud function we named
And basically that’s it.
Let’s deploy the application to firebase:
And test it out in the browser. Then open up Slack, go to the channel we connected the hook to, and the message should be there.