Hey there! I'm back with a new fantastic blogger tutorial. In this particular article we'll discuss about how to make a contact form using telegram bot token API. Before we start ,I will tell you about what is it, what are the requirements and pros & cons of this contact form.Let's start.....
What is Contact Form & Errors
This is a form why which your users will contact you. If you're using blogger then you can use its pre build contact form with its own pre installed theme only.
Because the blogger contact form has some limitations with third party theme, which makes the form , low loading or sometimes zero loading it just show only one text all time "Sending Your message.....".
But I'm giving you the script, in which you can customise all the information according to you and this will work in all themes. There Is no matter which theme you're using, this will work from a blogger own theme to third party theme.
Requirements to make form.
There is some requirements before we start our Tutorial.
1) A blogger good looking Theme.
2) A new Page/ Old page to edit it.
3) The HTML Codes of contact form.
4) Telegram private group & ID.
5) Telegram Bot & API Token
6) Setting up the api and group I'd.
7) Testing of form.
8) HTML Obstructer Tool
Pros & Cons of Contact Form
There is some pros and cons of this contact us form using telegram bot token API.
Pros:
1) The submission will deliver with ease.
2) No delay in submission.
3) Fantastic Design and Responsiveness.
4) Easy to Use and Customise.
Cons:
1) There is limit of words to send to telegram.
Because there is limit of 4096 words in telegram to send at once.
2) May not work if any internet error occurs.
How to make a contact form using telegram bot token API
1. A Blogger Template
There is no worries about , which theme you're using. But it is recommended that to use good looking Theme. It will help your form looks more good. You can use either Blogger own theme or third party theme i.e. Ugla UI Blogger Template.
2. New Page/Old Page
Secondly, you need a page in which you'll add all the codes. You can create this by following steps;
1) Go to Blogger Dashboard.
2) Go to pages.
3) Click on + icon or choose already made page.
3. The Html Code Of Contact Form
Use these codes to make a contact form in your blogger blog.
<link href="styles.css" rel="stylesheet"></link> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div class="container"><h4>Made with love by LAS Studios</h4> <form id="contactForm"> <label>Name:</label> <input id="name" name="name" required="" type="text" /><label>Email:</label><input id="email" name="email" required="" type="email" /><label>Message:</label><textarea id="message" name="message" required=""></textarea><button type="submit">Submit</button></form></div><script> $(document).ready(function () { const botToken = 'YOUR_BOT_API' const chatId = 'CHAT_ID'; $("#contactForm").submit(function (event) { event.preventDefault(); const formData = { name: $("#name").val(), email: $("#email").val(), message: $("#message").val(), }; $.ajax({ url: `https://api.telegram.org/bot${botToken}/sendMessage`, method: "POST", data: { chat_id: chatId, text: ` New Contact Form Submission Name: ${formData.name} Email: ${formData.email} Message: ${formData.message} `, }, success: function () { alert("Message sent successfully!"); $("#contactForm")[0].reset(); }, error: function () { alert("Error sending the message. Please try again later."); }, }); }); }); </script><style>
body{font-family:Arial,sans-serif;background-color:#f5f5f5;margin:0;padding:0}.container{max-width:400px;margin:40px auto;padding:20px;background-color:#ffffff;box-shadow:0 2px 4px rgba(0,0,0,0.1);border-radius:5px}h1{text-align:center;margin-bottom:20px}form{display:flex;flex-direction:column}label{font-weight:bold;margin-bottom:8px}input,textarea{padding:10px;border:1px solid #ccc;border-radius:4px;margin-bottom:20px}textarea{resize:vertical}button{padding:10px;background-color:#007bff;color:#ffffff;border:none;border-radius:4px;cursor:pointer}button:hover{background-color:#0056b3}</style>Copy all the codes and paste all the codes in html section of the page.
You can also customize the color and size of form according your theme color and your requirements.
4. Telegram Private Group
Now, you need to make a private group and gain it's ID. It is recommended that name your group with crispy name. I'm saying this because, if you name your group with your name or blog name, anyone can easily join your group and can read all the submission of your users.
To make private group;
1) Go to Telegram.
2) Click on "New Group."
3) Name your Group.
4) To get the I'd.
Go to web.telegram.org .
Now , click on your recently made private group.
5) Now head to the url of this Group and copy the last Number of the url.
6) add 100 after the - and before the numbers.
After adding 100 this will looks like
"-1001963977235"
7) Copy the numbers now.
5 Telegram Bot API Token
To get the telegram bot token;
1) Go to telegram app or web
2) Now search for @botfather account.
3) Now click on official verified botfather I'd.
4) Now to create a new bot, click on start and
Type /newbot
After this a new bot will be made ,
5) Now name your bot ( don't use your name or blog name)
Now, botfather will give your the API Token of the bot . Copy all the api Token.
6. Setting up API Token and group id
To setup all of these; go to the page in which you paste all the html codes.
Now , replace these two items;
YOUR_BOT_API
CHAT_ID
from the html codes with your actual API and I'd.
7. Testing your form
Now , test your form , that is it working properly or not. You can type your name , email and a message in it to check whether, your form sends the submission to your telegram group or not.
8. HTML Obstructer Tool ( Recommend )
It is recommended to you , that obstruct all your contact form html codes to safe your bot api and group I'd. Because anyone can easily find your bot token and can misuse it. If you not want to Obstruct the codes, you can modify your Token time by time if you see any errors with your bot.
Conclusion
So, in this particular article, I guide you to how to make a contact form using telegram bot token API. I think you like this post and make sure to share it with your friends too! If you have any questions or problems, please comment I'll reply you as soon as possible.