How to build a Serverless-React contact form integrating email, Slack, MS Teams and creating Trello tickets.

Alright! If you are looking for how to build a contact form for your users and receive that data by mail, in your channel in Slack, Microsoft Teams, create tickets in Trello or ALL TOGETHER, you are in the right place! 🎉🎉

And for that you’ll use cool stuff, of course: React, AWS Lambda and Serverless.

First, let’s define what we’ll use:

  • React.
  • AWS Lambda (a compute service that lets users run code without provisioning or managing servers).
  • Serverless (a tool that allows users to build & deploy functions using cloud providers such as AWS).
  • Amazon Simple Email Service (a cloud-based email sending service by Amazon).
  • Trello API
  • MS Teams API
  • Slack API

You can find and use the code here: https://gitlab.com/ChristianCastillejo/contactform-to-trello-mail-slack-msteams.

Let’s do it 😉

1- Clone the repo:

git clone https://github.com/ChristianCastillejo/serverless-react-contact-form.git

2- Rename secrets.example.json to secrets.json:

{
"ENV":"prod",
"NODE_ENV":"dev",
"EMAIL":"your@email.com",
"DOMAIN":"*",
"PROFILE":"default",
"TEAMS_KEY":"https://outlook.office.com/webhook/bla/IncomingWebhook/bla",
"TRELLO_API_KEY":"blablabla",
"TRELLO_LIST_ID": "blablabla",
"TRELLO_TOKEN":"blablabla",
"SLACK_PATH":"/services/blablablabla/blablabla/blablabla"
}

3- Connect to Slack

Create the Slack webhook

For posting messages to a Slack channel, an incoming webhook needs to be obtained. Such a webhook is nothing more than a special URL identifying the account and channel concerned. No credentials are involved, so it’s essential to conceal the URL from the public. To have one generated for you, proceed as follows:

  • Log into your Slack account.
  • Open the Incoming WebHooks page.
  • If you don’t have permission to add a (webhook) configuration, request it. Open the URL you are given.
  • Click “Add Configuration”.
  • Select the channel you wish to send messages to and click “Add Incoming WebHooks integration”.

4- Connect to Microsoft Teams

  • Open your MS Teams client and choose a channel to receive your notifications.
  • Go to the options screen for that channel (the three dots: …) and choose “Connectors”.
  • Select the “Incoming Webhook” connector, fill in the options and hit the “Create” button.
  • Copy the URL to your secrets.json file.

5- Connect to Trello

For Trello you need an App Key and a User Token, the dev site is a great place to start and their 5 min intro is super handy. Get your App Key and as we’ll only be using our own account you can manually generate a token on the page you get your App Key.

  • Visit the Trello board page that you want to create cards in and grab the Board ID from the url which is something like this: https://trello.com/b/BOARD_ID/personal
  • Then we’ll need the List ID, it isn’t easy to grab this so we need to make an API call to get it. Visit the below URL in a browser and plug in the bits in bold and you have from above.
https://api.trello.com/1/boards/BOARD_ID/lists?key=APP_KEY&token=TOKEN
  • You’ll get a JSON response and for there you can grab the List ID of where you want to create cards e.g.
[{"id":"LIST_ID","name":"To Do"...]

Boom! Bit long winded but now you have everything for you’ll need to create Trello cards with their API from a Lambda function.

  • Copy the “TRELLO_API_KEY”, “TRELLO_LIST_ID” and “TRELLO_TOKEN” to your secrets.json file.

6- Locally testing and debugging

  • In secrets.json edit "ENV":"dev".
  • Go to /serverless/ folder.
  • Run yarn.
  • Run serverless invoke local --function send --data '{"name": "Sarah", "email": "hey@sarah.com", "message: "I like your websites and I would love you to build mine! :)" }' .

7- Deploying to AWS

  • To communicate with your AWS account you need to configure an IAM User. Jump over here for the explanation, then come back and run the command below, with the provided keys.
  • Run serverless config credentials --provider aws --key xxxxxxxxxxxxxx --secret xxxxxxxxxxxxxx with your AWS credentials.
  • In secrets.json edit "ENV":"prod".
  • Go to /serverless/ folder.
  • Run yarn.
  • Run serverless deploy
  • In line 27 in /client/App.js replace the URL with the new generated endpoint.

Yay! You did it!! 🎉🎉

Sources:

Lambda AWS: https://dev.to/adnanrahic/building-a-serverless-contact-form-with-aws-lambda-and-aws-ses-4jm0

Trello: https://medium.com/@james_fairhurst/using-aws-cloudwatch-lambda-to-create-trello-cards-from-laravel-logs-18bbb3e994e0

Slack: https://www.scrivito.com/posting-form-content-to-a-slack-channel-via-an-aws-lambda-function-e73e3fb7a95c76f3

Teams: https://github.com/KangarooBox/lambda-cloudwatch-event-msteams

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade