Contact Form
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.
Limitations
Telegram users are unable to send messages longer than 3000 characters due to the 4096 character limit per message. We must fix the character limit to be less than 4096, or 3000, in order to guarantee that all entries are accepted.
How to Create a Contact Form?
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>
<!-- 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', '20736535517'); // 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.
Warning!
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: