Notifications
All Notifications

How to Create a Contact Page in Blogger using Telegram Bot API Without Credit

You are observing the Contact Page Script for Blogger using Telegram Bot API. This is the Right Place to you.
How to Create a Contact Page in Blogger using Telegram Bot API Without Credit

Hey Guys! Welcome to Itz TxS website.

Assuming You are observing the Contact Page Script for Blogger using Telegram Bot API. This is the Right Place to you. Since You can get this Script for free and without credit.

Today, in this article, I will Discuss with you about How to Create a Contact Page in Blogger using Telegram Bot API Without Credit.

How to Create

So, to create Contact Page using Telegram Bot API Without Credit on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily make this page in your blogger website.

Step 1

  • You will go to your - Blogger Dashboard
  • Go to Theme
  • Go to - Edit HTML
  • Search - </head> or &lt;/head&gt;
  • Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;
  • Save Theme

You must back up your theme before go to Edit HTML

<style>
.Tbody i,.Tbody span{margin:0 6px 0 0}.Aa span{position:fixed;left:25px;bottom:-150px;display:inline-flex;justify-content:center;margin-bottom:75px;z-index:99999;background:#fff;color:#000;box-shadow:0 0 10px #000;border-radius:5px;padding:16px 25px;opacity:0;animation:2.3s forwards slideup}@media screen and (max-width:480px){.Aa span{margin-bottom:75px;left:25px;right:25px}}@keyframes slideup{0%{opacity:0}20%,50%,80%{opacity:1;bottom:0}100%{opacity:0;bottom:-150px;visibility:hidden}}/* Tool Body CSS By Itz TxS */.Tbody .Select:before,.Tool{box-shadow:0 0 3px #000}.Tbody button,.Tbody2 button{transition:.3s cubic-bezier(.25,.8,.25,1)}.Tbody input,.Tbody textarea{padding:12px;font-size:16px}.Tool h3,.Uploadbutton{font-size:20px}.Tbody,.Tbody .Select:before,.Tool{background:#fff}.Tools{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}.Tool{border:0;border-radius:8px;color:#000;padding:15px;width:300px;height:300px;align-items:center;justify-content:center}.Tool svg{fill:#000000;width:45px;height:45px}.Tool p{font-size:18px;line-height:1.5em;margin:auto}.Tool:hover{box-shadow:0 0 8px #00f}.Tool h3,.Tool svg{line-height:2em;margin:auto}.Tbody{border-radius:10px;padding:25px;width:330px;box-shadow:0 0 5px #000 inset;margin:auto}.Tbody textarea{max-height:200px}.Tbody input,.Tbody select,.Tbody textarea{background:#fff;border:0;box-shadow:0 0 3px #000 inset;border-radius:5px;color:#000;width:100%;margin:12px 0}.Tbody input:focus,.Tbody select:focus,.Tbody textarea:focus,.Tbody2 input:focus{box-shadow:0 0 5px #00f inset}.Tbody button:hover,.Tbody2 button:hover{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.Tbody b{margin:15px 0}.Tbody button{background:linear-gradient(to right,#cc2b5e,#753a88);font-size:16px;color:#fff;padding:15px;border:0;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);width:100%;border-radius:5px;margin:12px 0}.Tbody button:hover{background:linear-gradient(to left,#cc2b5e,#753a88)}.Tbody button i{font-style:normal;font-size:22px;line-height:0}.Tbody input[type=checkbox]{display:inline-block;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;appearance:none;vertical-align:middle;padding:0;margin-right:5px;border-radius:100%}.Tbody input[type=checkbox]:checked:before{height:16px;width:16px;position:absolute;content:'\2714';text-align:center;line-height:16px;transition:.2s ease-out}.Tbody input[type=checkbox]:checked{animation:1s rubberBand}.Tbody .Select{position:relative;display:inline-block;width:100%;margin:12px 0}.Tbody .Select select{font-size:15px;padding:12px;margin:0}.Tbody .Select:after,.Tbody .Select:before{content:"";position:absolute;pointer-events:none}.Tbody .Select:after{content:"\25BC";height:1em;font-size:.9em;line-height:1;right:1em;top:50%;margin-top:-.5em}.Tbody .Select:before{width:2.6em;right:1.3px;top:1.3px;bottom:1.3px;border-radius:5px}.Tbody2 input,.Tbody2 textarea{display:block;padding:12px;font-size:15px;background:#fff;border:0;box-shadow:0 0 3px #000 inset;border-radius:5px;color:#000;margin:12px 0}.Tbody2 input{width:280px}.Tbody2 textarea{width:100%}.Tbody2 input[type=file]{display:none}.Tbody2 button{background:linear-gradient(to left,#753a88,#cc2b5e);border-radius:5px;margin:12px 0;font-size:16px;color:#fff;width:280px;padding:15px;border:none;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)}.Tbody2 hr{margin:40px 0 0}@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.Button{display:flex;justify-content:space-around;margin-top:30px}.Uploadbutton{display:flex;background:linear-gradient(to left,#00f,#f81894);color:#fff;border:1px solid red;border-radius:5px;padding:7px 15px}.Uploadbutton:before{content:'';background-repeat:no-repeat;background-position:center;margin-right:7px;width:25px;height:25px;background-size:24px}.Uploadbutton:before{background-image:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" fill="rgb(255,255,255)" viewBox="0 0 24 24"%3E%3Cpath d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5c0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4c0-2.05 1.53-3.76 3.56-3.97l1.07-.11l.5-.95A5.469 5.469 0 0 1 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5l1.53.11A2.98 2.98 0 0 1 22 15c0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z"%2F%3E%3C%2Fsvg%3E')}.Uploadbutton:active{padding:4px 15px 10px}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

Step 2

  • After Save Theme
  • Create a new Post or Page
  • Copy this HTML & Javascript Code below and Paste in your blog - Post or Page
  • Replace BOTTOKEN and Paste Your Bot API Key
  • Replace CHATID and Paste Your Group Chat ID
  • Publish.
<div class='Tbody'>

<form id='cForm'>
<span class='star'><i class='fa-regular fa-user'></i>Name</span>
<input id='name' placeholder='Enter Your Name Here...' required/>

<span class='star'><i class='fa-regular fa-envelope'></i>Email Address</span>
<input id='email' type='email' placeholder='Enter Your Email Here...' required/>

<span><i class='fa fa-phone'></i>Mobile Number</span>
<input id='mobile' type='number' placeholder='Enter Your Mobile No. Here...'/>

<span><i class='fa fa-at'></i>Telegram Username</span>
<input id='username' placeholder='Enter Your Username Here...'/>

<span class='star'><i class='fa-regular fa-keyboard'></i>Message</span>
<textarea id='message' rows='10' placeholder='Enter Massage Here...' required></textarea>

<button type='submit'>Send Message</button>
</form>

</div>

<div class="Aa" id="Ca"></div>

<script>
document.querySelector("#cForm").addEventListener("submit",async e=>{e.preventDefault();let a=await fetch("https://api.telegram.org/botBOTTOKEN/sendMessage?chat_id=-100CHATID",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:`Name : <b>${document.querySelector("#name").value}</b>
Email : ${document.querySelector("#email").value}
Mobile : ${document.querySelector("#mobile").value}
Message : <code>${document.querySelector("#message").value}</code>
${document.querySelector("#username").value}`,parse_mode:"HTML"})}),t=document.querySelector("#Ca");a.ok?t.innerHTML="<span>Message Sent!</span>":t.innerHTML="<span>Message Failed to Send!</span> :( "+await a.text(),e.target.reset()});
</script>

Conclusion

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Contact and I'll attempt to help.

Blogger Code CSS HTML JS Widget
Itz TxS
Itz TxS
Whats up ! My Name is Samir, a expert Web Designer, Telegram Bot Maker,Logo Designer And UI / UX designer in addition to content material writer from Feni,Dagonbhuiyan,Bangladesh. I really like to Code and create interesting things whilst playing with it.
Join the conversation (2)
2 comments
  1. Test
    02 June, 2023
    Profile
    Test
    Test
    This Person Said: Pls post a tutorial for Post rating instead of clap.
    Pls post a tutorial for Post rating instead of clap.
  2. Test
    02 June, 2023
    Profile
    Test
    Test
    This Person Said: Nice post bro
    Nice post bro