Capture Form Submissions on Telegram, with Nodejs.

Article #4 of my “1 article a day till lockdown ends”.

We will be making a telegram bot which will capture your Contact Us form requests from your website.

Though the use case is very small and it’s not quite scalable for huge things, but works really well in some cases. I recently had to make a small e commerce app for one of my client to deliver chicken in my home town during the lockdown.

The client needed a quick way to capture orders and he wanted it on his phone instantly. I couldn’t make a android app this soon which would send him a notification on order, I even suggested him I would send emails, but he said he’s not the person who checks his emails frequently.

A quick way I found was to make a telegram bot and send order details as a message to a telegram group whenever someone ordered, it was near instant and the client liked it as well. He was able to add his delivery boys to the group, who would mark those orders as delivered, and communicate back to the shop owner.

Why Telegram?

Telegram has been gaining a lot of popularity recently, it has a open api for developers to make bots, send messages programatically, accept payments with stripe right within the chat app, it let’s you do endless things, and did I mention it’s free?

We will be making a contact us form in our website and send the data to a small backend written in Express/Node.

Here’s how it will work from a top level.

Icons made by Flat Icons

Step 1: Create a New Bot

To make a telegram bot, you need to join the telegrams official BotFather bot, and click on the command button “/” or just type “/” and it opens a window which lists options for bots, select “/newbot”.

Step 2: Get the Bot Token

Provide some details to Botfather to get your Bot API key, like below. Once details are submitted, it will reply you with a bot token, copy it we will be using it in our backend. You can open the bot by clicking on the Bot url (t.me/fyz_contact_form_bot) and click “ START ” to subscribe to it.

Step 3: Make a Contact Us form (the frontend part)

Let’s make simple form UI which sends data to a server. I have written it with TailwindCSS and Vue/Nuxt, code shared at the end of the article. Note that its not just restricted to Vue, it can be easily recreated in any framework, since its all javascript at the end. Here is how it looks.

On submitting this form, we need to send the form data to our server, we will use axios to make http requests. Axios is a super popular javascript library to make http requests to apis and servers. It’s promise based which means you can make use of async/await in javascript.

Here is how we make a get request to a api in axios, an example.

Similarly I will send all the above form data to our server, which we will make in a bit, in a POST method, like below, ignore the this.$axios if you using vanilla js and not vue/nuxt.

Step 4: Make a server to send the message (the backend part)

I will make use of glitch.com, Glitch is a awesome tool that let’s you make and host node.js server apps directly from the browser and it’s free (sleeps after 30 mins of inactivity on server). Here is the server which will accept the form data from our website, processes it and sends a message to our telegram bot. Explaing the code below.

https://medium.com/media/590119c77c42294646295ac216dc2859/href

What exactly is the code above doing? It’s written in Node & uses express.js, a very popular de facto Node framework. We have made a REST api, which has two routes, “/” and “/send-message” the / means our main route, if your had a domain like example.com, then the / route’s code will be triggered when example.com is called from a browser. The second route is “ /send-message ” which is of post type, it will be called when example.com/send-message is called (like we are calling from our axios function in frontend app)

Let me explain whats happening above.

1. Line 1 to 10, we are initialising express, axios and body-parser modules, we are basically telling node that we will use these in our code.
2. Line 13 to 17 this was not required but I have added it to explain REST api’s, we are initialising a route called “/” which accepts two parametes, request & response. The request parameter will be having all the data it received it received from whoever called this route. The response parameter will let you respond back the client with data, or files or HTML.
3. Line 21 to 51 is where our actual logic to send the message is written. We have a POST request, which is expecting a body parameter with the message data, which we will be sending from our client(website). We are converting the data received in the body to a html string and making a HTTP GET request to the telegam api’s /sendMessage route endpoint. Since it’s a get request its taking the data in it’s URL, it’s expecting 4 things from us.

• The BOT_TOKEN this is the token we received from botFather when we created our bot,
• The CHAT_ID this is the ID of the user who is subscribed to your bot, since multiple people might have subscribed, you can get a list of subscribers to your bot by opening this url in your browser https://api.telegram.org/bot/getUpdates, this will return a list of users subscribed to your bot like below. Just copy the from.id field and add it to your api url

• Next is the text field, which should contain a URL encoded string of the message you want to send.
• The 4th field I added is optional, the parse_mode what this does is, telegram lets you format the text you want to send in either HTML or Markdown formats, if you do not send this, the message will be sent as plain text. You can find more about this here.
• api url at the end should be looking something like this.

[https://api.telegram.org/botabcd:1234/sendMessage?chat\_id=123456&text=Hello%20there&parse\_mode=HTML](https://api.telegram.org/bot%24%7Bprocess.env.BOT_TOKEN%7D/sendMessage?chat_id=%24%7Bprocess.env.CHAT_ID%7D&text=%24%7Bstr%7D&parse_mode=HTML)

• Now all that’s left is to call this url using axios as a POST request, if everyting goes well, you will a success response from telegram and the message must be delivered to your phone.

Here’s the docs for telegram api, you can see all the things you can do with the telegram bot.

A video on how this is working, you can see how quick the messages are received and the parse_mode HTML works perfectly.

Feel free to clone the backend here on glitch, and change the environment variables in .env file which contains your BOT_TOKEN & CHAT_ID. It’s best not to expose them publicly. Here is the code I wrote for frontend in nuxt.js, clone it and make your own version.

If you do not want to build your own backend, and host it seperately, you can use this awesome tool NoCodeApi by my friend Mohd Danish, where you just add the bot token and chat id, rest everything is handled by it.

You can do much more with telegram than just sending form submissions, send images, send messages at specific times with some data, make a perosnal bot etc. Let me know if you need more stuff related to it.

Comments

[Yuliavasilenko]

Why to reinvent the wheel when there's form2chat.io?

[Alfredo]

More options, free, control, management...

[Jeff-HQ]

Nice article,am having a problem viewing the back end code you wrote on glitch .It seems it has been relocated ,can you please resend it. I would like to look something up