Contact Form
You can see the demo here⤵
Requirements
1. If you don't have, you can read documentation here
Bot API token is required.
2. Login to your Telegram. Creat a new bot on Botfather and copy its API key. Search 'Telegram Bot Raw' click /start button and copy in own Chat Id.
It is not recommended to use a supergroup, as anyone having the group name can easily join and read your visitors' submissions.
Limitations
As Telegram has a restriction of 4096 characters per message, users cannot send messages longer than 3000 characters. To ensure that all entries are accepted, we must set the character limit to less than 4096, or 3000.
How to Create a Contact Form?
Step 1: First of all Login to your .
Blogger Dashboard
Step 2: On Blogger Dashboard, click Pages.
Step 3: Either create a new page by clicking on icon or click on the existing page to add codes there.
Step 4: Switch to </> HTML view.
Step 5: Paste the following codes in it and Publish your page.
<!-- ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ -->
<html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Contact Form</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div class="container"> <form id="contactForm"> <h2>Contact Form</h2> <label for="name">Name:</label> <input id="name" name="name" required="" type="text" /> <label for="file">Upload File:</label> <input id="file" name="file" required="" type="file" /> <button type="submit">Submit</button> </form> </div> <script src="script.js"></script> </body> </html> <!-- ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ --> <style> /* styles.css */ body { } form { display: flex; flex-direction: column; } input[type="text"], input[type="file"] { padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; } button { margin-top: 20px; padding: 10px; border: none; background-color: #FF1200; color: white; border-radius: 5px; cursor: pointer; } button:hover { background-color: #FF1200; } </style> <!-- ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ --> <script> // script.js document.getElementById('contactForm').addEventListener('submit', function(event) { event.preventDefault(); const name = document.getElementById('name').value; const file = document.getElementById('file').files[0]; if (!name || !file) { alert('Please fill out all fields.'); return; }
const formData = new FormData();
formData.append('chat_id', 'xxxxxxxxx'); // Replace with your actual chat ID
formData.append('caption', `Name: ${name}`);
formData.append('document', file);
fetch('https://api.telegram.org/bot208*******:AAG*******_**********-7*********Z0I/sendDocument', {
method: 'POST', body: formData }) .then(response => response.json()) .then(data => { if (data.ok) { alert('Message sent successfully!'); } else { alert('Error sending message: ' + data.description); } }) .catch(error => { console.error('Error:', error); alert('Error sending message. Please try again later.'); }); }); </script>Replace the marked parts with correct information.
It is not at all safe to make your Bot API Token publicly available. Use any JavaScript obfuscator to obfuscate the Forms Configuration codes after making all the changes. You can revoke and generate new API Token of your bot through Bot Father at any time you think something is going wrong with the bot token.
Conclusion
This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .
Copyright ©
.png)