How to Create a Contact Form using Telegram Bot API

Hello Guys and welcome to Sanve Design Our Tutorial today is about How to Create a Contact Form using Telegram Bot API

As we all know, the Blogger Contact Form API was recently updated, and now in order to submit the form successfully, you must enter a token each and every time. As a result, you must add the Contact Form Widget through Layout, which slows down page loading because we were previously only using blogger widgets on the form page. The majority of bloggers use Telegram, thus I've created a new post with the title How to Create a Contact Form using Telegram Bot API.

I'll share some codes with you today that will let you have form submissions sent right to your Telegram group. This form also allows you to add additional fields, such as a mobile number, website, or anything else that was not available with the Blogger Contact Form.

Requirements

1. You can read the documentation for a telegram bot here if you don't have one. You need a bot API token.
2. A Telegram Group's ID, for that create a private group, login to Telegram Web, open the group you will get Group ID in url, i.e. -1200190470, add 100 just after - sign and before 1200190470, now the chat id will be -1001200190470 just note it. Don't forget to add the bot in your group.

Video Tutorial

We can add an infinite number of options to the contact form. Name, Email, Number, Country, and Telegram Username are already options on the contact form.

Extra Code:

For more additional possibilities, see the HTML code below. Don't forget to change this extra_name_type section with the extra html code below.

<div class='cArea'>
      <label>
        <input name='extra_name_type' id='extra_name_type' type='extra_name_type' />
        <span class='n'>extra_name_type</span>
      </label>
    </div>

Full Code:

Add the following HTML Codes in your Blog Posts through HTML View to add Contact Form using Telegram Bot API.

<style>/*<![CDATA[*/
  .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
  @media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
  @keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
  @-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
  .drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
/*]]>*/</style>

<p>Got a question? We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>

<div id='seform'>
  <form name='cForm'>
    <div class='cArea'>
      <label>
        <input name='name' id='name' type='text' />
        <span class='n'>Name</span>
      </label>
    </div>
    
    <div class='cArea'>
      <label>
        <input name='email' id='email' type='email' />
        <span class='n'>Email</span>
      </label>
    </div>
    
    <div class='cArea'>
      <label>
        <input name='mobile' id='mobile' type='text' />
        <span class='n'>Mobile Number</span>
      </label>
    </div>
    
    <!--[ Add here your extra options ]-->
    
    <!--<div class='cArea'>
      <label>
        <input name='extra_name_type' id='extra_name_type' type='text' />
        <span class='n'>extra_name_type</span>
      </label>
    </div>-->
    
    <div class='cArea'>
      <label>
        <input name='country' id='country' type='text' />
        <span class='n'>Country Name</span>
      </label>
    </div>
    
    <div class='cArea'>
      <label>
        <input name='telegram' id='telegram' type='text' />
        <span class='n'>Telegram Username</span>
      </label>
    </div>
    
    <div class='cArea'>
      <label>
        <textarea style='resize:vertical' class='cInpt cMsg' name='message' id='message' rows='3'></textarea>
        <span class='n'>Message</span>
      </label>
    </div>
    
    <div class='cArea'>
      <button class='cBtn button' type='submit'>Send</button>
    </div>
  </form>
</div>


<!--[ Main Javascript ]-->
<script>
const chat_id = '6479848862', botID = '6247328174:AAHPz1FsaXYbK1y4TDAlcOioca57axhodDM';
</script>
<script src='https://cdn.sanvedesign.com/blogger/telegram-api.js' type='text/javascript'/>

Conclusion

In this post, I have talked about How to Create a Contact Form using Telegram Bot API. Tell us What You Say About The Post by Making a Comment and if you have any questions Contact Us at the Contact Us page. Hope You Enjoy In Our Website.

Refrence:
https://www.sanvedesign.com/2023/09/how-to-create-contact-form-using.html