Hello! Welcome to Action CodeD.
You are looking for How to Create a Contact Form using Telegram then this post is just for you.
The instruction that follows is informative. Please think of a good reason to use it.
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.
<!-- Tecky AaryaN -->
<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>
<!-- Tecky AaryaN -->
<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>
<!-- Tecky AaryaN -->
<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', '2021145517'); // 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
I hope you have successfully added your Contact Form. If you are facing any problem in any section or you have any question then ask us in the comment box.
Copyright:
