Get Contact Form Submissions on Telegram

Here's how to receive instant notifications on Telegram whenever someone submits the contact form on your website.

While it is also possible to implement WhatsApp or Email Notifications , Telegram Notifications are seamless, easy-to-setup and completely free to use, as long as you don't exceed the fair usage limits. For more details, check out the Telegram Bots FAQ Page .

Create a Telegram Bot

  1. Open Telegram and Go to Bot Father

  2. Type in and send the command /newbot.

    /newbot

    Then follow the instructions and choose the display name and the username for your bot.

  3. Copy the bot token that follows the line "Use this token to access the HTTP API" and add it to .env

    process.env.TELEGRAM_BOT_TOKEN = '<your-bot-token-here>'

Get Your Chat ID

  1. Open your bot from the link provided by Bot Father in the previous step (or search for your bot with its username). Send the /start command to activate your bot.

      /start

  2. Now, open the getUpdates method to get the chat ID using the URL below (replace <your-bot-token-here> with your actual bot token).

    https://api.telegram.org/bot<your-bot-token-here>/getUpdates

  3. In the JSON response, you can find your chat ID in the id field in the chat object.

    {
  "ok": true,
  "result": [
    {
      "update_id": 8xxxxxxx6,
      "message": {
        "message_id": 8,
        "from": {
          "id": 1xxxxxxxx2,
          "is_bot": false,
          "first_name": "Deepak",
          "last_name": "B",
          "username": "DpakB",
          "language_code": "en"
        },
        "chat": {
          "id": 1xxxxxxxx2,
          "first_name": "Deepak",
          "last_name": "B",
          "username": "DpakB",
          "type": "private"
        },
        "date": 1752742049,
        "text": "/start",
        "entities": [
          {
            "offset": 0,
            "length": 6,
            "type": "bot_command"
          }
        ]
      }
    }
  ]
}

  4. Copy the chat ID and add it to your .env file:

    process.env.TELEGRAM_CHAT_ID = '<your-chat-id-here>'

You can add the bot to any group chat, send /start in the group, and then use the same getUpdates method to find the group's chat ID in the JSON response.

Create an API Route Handler

  1. Create a new route handler like /api/telegram-notifications/route.js

  2. Add a POST request handler to send the message to your Telegram bot.

    export async function POST(request) {
  try {
    const { name, email, message } = await request.json();
 
    // ...
  } catch (error) {
    // ...
  }
}

  3. Escape special characters in the name and message to avoid them from being treated as tags by the HTML parser of the Bot API.

    const userName = name.replace(
  /[&<>]/g,
  (char) =>
    ({
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
    }[char])
);
 
const userMessage = message.replace(
  /[&<>]/g,
  (char) =>
    ({
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
    }[char])
);

  4. (Optional) Style the message using HTML entities for better readability. I'm using unicode escape sequences for emojis in the code.

    const msg = `
      <b><i>\u{1F4DD} NEW ENQUIRY</i></b>
 
      <b>\u{1F464} Name</b>
      ${userName}
 
      <b>\u{1F4E7} Email</b>
      ${email}
 
      <b>\u{1F4AC} Message</b> 
      ${userMessage}
    `;

  5. Use the sendMessage method from the Telegram Bot API. Send your chat_id and the message to the request body.

    const telegramURL = `https://api.telegram.org/bot${process.env.TELEGRAM_BOT_TOKEN}/sendMessage`;
 
const res = await fetch(telegramURL, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    chat_id: process.env.TELEGRAM_CHAT_ID,
    text: msg,
    parse_mode: "HTML",
  }),
});

  6. Here's the complete code for the route handler /api/telegram-notifications/route.js

    export async function POST(request) {
  try {
    const { name, email, message } = await request.json();
 
    const telegramURL = `https://api.telegram.org/bot${process.env.TELEGRAM_BOT_TOKEN}/sendMessage`;
 
    const userName = name.replace(
      /[&<>]/g,
      (char) =>
        ({
          "&": "&amp;",
          "<": "&lt;",
          ">": "&gt;",
        }[char])
    );
 
    const userMessage = message.replace(
      /[&<>]/g,
      (char) =>
        ({
          "&": "&amp;",
          "<": "&lt;",
          ">": "&gt;",
        }[char])
    );
 
    const msg = `
      <b><i>\u{1F4DD} NEW ENQUIRY</i></b>
 
      <b>\u{1F464} Name</b>
      ${userName}
 
      <b>\u{1F4E7} Email</b>
      ${email}
 
      <b>\u{1F4AC} Message</b> 
      ${userMessage}
    `;
 
    const res = await fetch(telegramURL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        chat_id: process.env.TELEGRAM_CHAT_ID,
        text: msg,
        parse_mode: "HTML",
      }),
    });
 
    if (!res.ok) {
      console.log(await res.json());
      throw new Error(res.statusText);
    }
 
    return new Response(JSON.stringify({ success: "true" }), {
      status: 200,
    });
  } catch (error) {
    console.log(error);
    return new Response(JSON.stringify(error), { status: 500 });
  }
}

Send Data from Contact Form

Apart from contact forms, you can also use the Bot API to perform any other action you want.

  1. Build a contact form and send the data to /api/telegram-notifications upon form submission.

    export default function ContactForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
 
    const formData = new FormData(e.target);
 
    const object = Object.fromEntries(formData);
 
    const jsonData = JSON.stringify(object);
 
    fetch(`/api/telegram-notifications`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: jsonData,
    })
      .then((data) => {
        console.log(data);
 
        // handle response
      })
      .catch((error) => {
        console.log(error);
 
        // handle error
      });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          maxLength={100}
          id="name"
          name="name"
          placeholder="Your Name"
          required
        />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input
          type="email"
          maxLength={200}
          id="email"
          name="email"
          placeholder="email@example.com"
          required
        />
      </div>
 
      <div>
        <label htmlFor="message">Message</label>
        <textarea
          maxLength={1000}
          id="message"
          rows="5"
          name="message"
          placeholder="Write your message here"
          required
        />
      </div>
 
      <div>
        <button type="submit">Send</button>
      </div>
    </form>
  );
}

  2. Submit the form and you will instantly receive a message on Telegram.

With this setup, you can receive instant notifications for contact form submissions on all your devices seamlessly.

Similarly, you can also setup Google Forms Notifications for contact form submissions.

On this page