How to Create a Contact Form Using HTML, CSS, and JavaScript with Telegram Bot Notifications

A contact form is one of the most important elements of any website. It allows visitors to communicate with you easily. In this tutorial, you will learn how to build a fully functional contact form using HTML, CSS, and JavaScript that sends form submissions directly to your Telegram account using a Telegram Bot — all without a backend server.

1. Overview

This tutorial covers the following:

How to design a simple and responsive contact form with HTML and CSS
How to validate form inputs using JavaScript
How to send form data to your Telegram using a bot token and chat ID
How to display success or error messages to users
How to protect sensitive information using Hex encoding

2. Setting Up Your Telegram Bot

Step 1: Create a Telegram Bot

Open Telegram and search for @BotFather.
Type the command /newbot.
Follow the instructions to create your bot name and username.
Once the bot is created, BotFather will give you a Bot Token.

Example Bot Token: 6784154796:AAE1agacRa...FzAAH16cF0

Step 2: Get Your Chat ID

Start a chat with your new bot and send it a message.
Open this link in your browser, replacing <YourBotToken> with your token:

https://api.telegram.org/bot<YourBotToken>/getUpdates

Look for your chat ID in the JSON response:

"chat":{"id":5973278509,"first_name":"YourName"}

3. Building the Contact Form (HTML + CSS)

Here is the front-end part of the contact form. It includes the HTML structure and CSS for styling feedback messages.

<style>
  .feedback {
    text-align: center;
    margin-top: 20px;
    padding: 12px;
    display: none;
    width: 100%;
    margin: 20px auto;
    font-weight: bold;
  }
  .feedback.success {
    color: green;
    border: 2px solid green;
    background-color: #e6f7e6;
  }
  .feedback.error {
    color: red;
    border: 2px solid red;
    background-color: #f8d7da;
  }
  input:invalid {
    border-color: red;
  }
  .tooltip {
    visibility: hidden;
    color: red;
    margin-top: 5px;
  }
  .loading-text {
    color: #4caf50;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
  }
  @keyframes loading {
    0% { content: "Loading."; }
    25% { content: "Loading.."; }
    50% { content: "Loading..."; }
    75% { content: "Loading.."; }
    100% { content: "Loading."; }
  }
  .loading-text::after {
    content: "Loading.";
    animation: loading 1.5s infinite;
  }
</style>

<div class="form-container">
  <form id="contactForm">
    <label for="name">Name <span style="color:red;">*</span>:</label>
    <input type="text" id="name" name="name" placeholder="Enter your full name" required /><br />

    <label for="email">Email <span style="color:red;">*</span>:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email address" required /><br />

    <label for="message">Message <span style="color:red;">*</span>:</label>
    <textarea id="message" name="message" style="resize:vertical;" placeholder="Enter your message" rows="5" required></textarea>

    <button class="button" type="button" onclick="submitForm()">Send Message</button>
  </form>

  <div id="feedback" class="feedback"></div>
  <div id="loadingText" class="loading-text" style="display: none;"></div>
</div>

4. Adding JavaScript to Handle Submission

The following JavaScript handles form validation and sends form data to your Telegram bot using the Telegram API.

<script>
  const hexBotToken = "363738343135343739363a414145316167616352617579736179312d78323335356555313637327a4841483136634630";
  const hexChatID = "32333631383332313336383732";

  const hexBlockedEmails = [
    "6a6f686e2e6c656e737465696e353540676d61696c2e636f6d",
    "66616b652e75736572406578616d706c652e636f6d",
    "7370616d6d792e656d61696c406e6f77686572652e6e6574"
  ];

  const hexTelegramApiBase = "68747470733a2f2f6170692e74656c656772616d2e6f72672f626f74";

  function hexToStr(hex) {
    let str = '';
    for (let i = 0; i < hex.length; i += 2) {
      str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
    }
    return str;
  }

  const botToken = hexToStr(hexBotToken);
  const chatID = hexToStr(hexChatID);
  const blockedEmails = hexBlockedEmails.map(hexToStr);
  const telegramApiBase = hexToStr(hexTelegramApiBase) + botToken + "/sendMessage";

  function submitForm() {
    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim().toLowerCase();
    const message = document.getElementById("message").value.trim();

    if (blockedEmails.includes(email)) {
      displayFeedback("The email you're submitting is invalid. Please use a different email.", "error");
      return;
    }

    if (!name || !email || !message) {
      displayFeedback("All fields are required!", "error");
      return;
    }

    if (!validateEmail(email)) {
      displayFeedback("Please enter a valid email address.", "error");
      return;
    }

    document.getElementById("loadingText").style.display = "inline-block";

    const formData = `New Message\n\nName: ${name}\nEmail: ${email}\nMessage: ${message}`;

    fetch(telegramApiBase, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        chat_id: chatID,
        text: formData,
        parse_mode: "Markdown"
      })
    })
      .then(response => response.json())
      .then(data => {
        document.getElementById("loadingText").style.display = "none";
        if (data.ok) {
          displayFeedback("Message sent successfully!", "success");
          document.getElementById("contactForm").reset();
        } else {
          displayFeedback("Failed to send message. Please try again.", "error");
        }
      })
      .catch(() => {
        document.getElementById("loadingText").style.display = "none";
        displayFeedback("An error occurred. Please try again.", "error");
      });
  }

  function displayFeedback(message, status) {
    const feedbackElement = document.getElementById("feedback");
    feedbackElement.innerText = message;
    feedbackElement.className = `feedback ${status}`;
    feedbackElement.style.display = "block";
    setTimeout(() => {
      feedbackElement.style.display = "none";
      feedbackElement.className = "feedback";
    }, 7000);
  }

  function validateEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  }
</script>

5. Testing the Form

To test your form:

Save the file and open it in your browser.
Enter your name, email, and message.
Click the Send Message button.
If everything is set up correctly, you will receive a Telegram notification instantly.

6. Example Telegram Message

New Message

Name: John Doe
Email: johndoe@example.com
Message: Hello, I would like to collaborate on a project.

7. Improving Security

Although this method works well for static websites, you should take precautions to protect your credentials:

Never expose your bot token in plain text.
Use Hex encoding or server-side environment variables.
Add blocked email addresses to prevent spam.
Integrate Google reCAPTCHA v3 for added security.
Use a backend proxy if handling many form submissions.

8. Conclusion

You have successfully created a contact form with Telegram bot notifications using HTML, CSS, and JavaScript — without any backend. This solution is fast, lightweight, and perfect for portfolios, static websites, and small business landing pages.

With this integration, you can receive messages instantly on Telegram, making it easier to respond to inquiries in real-time.

It Is Unique Official