How to Create a Contact Form with Telegram API

Learn how to create a Blogger Contact Form Telegram API. The blogger contact form widget uses tokens to successfully send messages. Contact form widget implemented on a blogger website through blogger layout may cause low loading due to blogger widgets javascript. Get codes to implement to your website and receive your blogger contact form page messages straight to your telegram group. The advantage of the widget over the normal contact widget on normal Blogger website contact pages is the admin panel. Telegram is easier than normal emails which can be easily spammed.

With this Telegram group widget, you can customize your contact form fields by adding more fields for collecting more information. This is an advantage to the default blogger contact form widget which allows only three fields. Let’s get the steps to integrate the widget into your blogger website.

1. A telegram bot, if you don’t have one, you can read the documentation here. Provide bot API token from telegram, learn how to generate one there. 
2. A Telegram Group’s ID, for that, create a private group, log in to Telegram Web, and open the group you will get the Group ID in URL, i.e. -1200190470, add 100 just after - sign and before 1200190470, now the chat id will be -1001200190470 noted it. Don’t forget to add the bot to your group.

How to Create a Telegram Contact Form

1. Go to Blogger Dashboard. Now go to the blogger dashboard.
2. Click On the Layout Link. Click on the layout link.
3. Create HTML/Javascript Gadget. Create a new gadget where we will paste HTML, CSS, and JQuery code.
4. Paste the “Back To Top” Code. Paste the code that you copied.
5. Save Layout. Now click on save.

Replace the marked parts with the correct information.

<style>.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><!--[Toast Notification]--><div id='toastNotifC' class='tNtf'></div><script>function toast(e){var tNotif=document.getElementById('toastNotifC');if(tNotif!=null){tNotif.innerHTML='<span>'+e+'</span>'}};</script><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 class='ContactForm'><form name='cForm'><div class='cArea'><label><input class='cInpt cName' name='name' id='name' type='text'/><span class='n'>Name</span></label></div><div class='cArea'><label><input class='cInpt cMail' name='email' id='email' type='email'/><span class='n req'>Email</span></label><span class='h'>Valid email is required</span></div><div class='cArea'><label><input class='cInpt cMob' name='mobile' id='mobile' type='text'/><span class='n'>Mobile Number</span></label><span class='h'>This field is optional</span></div><!--[Extra]--><!--<div class='cArea'><label><input class='cInpt cTel' name='telegram' id='telegram' type='text'/><span class='n'>Telegram Username</span></label><span class='h'>This field is optional</span></div>--><div class='cArea'><label><textarea style='resize:vertical' class='cInpt cMsg' name='message' id='message' rows='3'></textarea><span class='n req'>Message</span></label><span class='h'>Must not contain more than 3000 characters</span></div><div class='cArea'><button class='cBtn button' type='submit'>Send</button></div></form></div><script>(function(){var formConfig={botToken:'110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw',chatId:'-1001200190470',text:'#NEW_FORM_SUBMISSION #Seorunkn{{FORMDATA}}',form:'form[name=cForm]',blogData:{homeTitle:'Seorunk',homeUrl:'https://'+window.location.host,pageTitle:document.title,pageUrl:'https://'+window.location.host+window.location.pathname,},callbacks:{success:()=>{setTimeout(()=>{toast('Redirecting you to Homepage...');setTimeout(()=>{window.location.assign('/')},3000)},3000)},started:()=>{document.querySelector('form[name=cForm] .cBtn.button').disabled=!0},error:()=>{document.querySelector('form[name=cForm] .cBtn.button').disabled=!1},offline:()=>{},tooLong:()=>{}},toast:{blankName:'Name cannot be blank',blankMessage:'Message cannot be blank',longMessage:'Message cannot contain more than 3000 characters',invalidEmail:'A valid email is required',success:'Hey, {{name}}! Your Message has been sent.',started:'Sending...',error:'An error occured!',offline:'{{name}}! Looks like you are offline.',tooLong:'Long message.. Failed to send!'}};function _0xde11c0(o,r){return _0x952e(r-900,o)}var form=document[_0x2566c7(-31,-20)](formConfig[_0xde11c0(924,901)]),toasts=JSON[_0x2566c7(-45,-18)](JSON[_0x2566c7(0,-17)](formConfig[_0x2566c7(5,-16)]));function _0x952e(e,o){var i=_0x30dc();return(_0x952e=function(o,r){var n=i[o=+o];void 0===_0x952e.BygsOe&&(_0x952e.QKFLDW=function(o){for(var r,n,t="",f="",e=0,i=0;n=o.charAt(i++);~n&&(r=e%4?64*r+n:n,e++%4)&&(t+=String.fromCharCode(255&r>>(-2*e&6))))n="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=".indexOf(n);for(var g=0,C=t.length;g<C;g++)f+="%"+("00"+t.charCodeAt(g).toString(16)).slice(-2);return decodeURIComponent(f)},e=arguments,_0x952e.BygsOe=!0);var t=i[0],f=o+t,t=e[f];return t?n=t:(n=_0x952e.QKFLDW(n),e[f]=n),n})(e,o)}function _0x2566c7(o,r){return _0x952e(r- -20,o)}function _0x30dc(){var o=["CxvLCNLtzwXLy3rVCG","zM9YBq","CgfYC2u","C3rYAw5NAwz5","Dg9HC3q","ywrKrxzLBNrmAxn0zw5LCG","C3vIBwL0","ChjLDMvUDerLzMf1Bhq","w25HBwvD","BgvUz3rO","BMfTzq","DMfSDwu","CMvWBgfJzq","jMD0oW","jMX0oW","pgi+jIm4mJi2oYa","Dg9vChbLCKnHC2u","C2XPy2u","oJWVyJ4G","zw1HAwW","D2vIC2L0zq","phbYzt4","y2HHDf9Pza","y2HHDeLK","Dgv4Da","cK5VDgu6ifrOAxmGrM9YBsb3yxmGC3vIBwL0DgvKigf0ifbHz2uGpgeGAhjLzJ0I","yMXVz0rHDge","CgfNzvrPDgXL","pc9HpIbVBIbcBg9NidXHigHYzwy9iG","Ag9TzvrPDgXL","pc9HpI4ktwfKzsb3AxrOieXVDMuGyNKGpgeGAhjLzJ0IAhr0Chm6lY93D3CUzMLUzxnOB3bKzxnPz24Uy29TiJ5gAw5LC2HVCcbezxnPz248l2e+lG","sfrnta","CMvWBhLFBwfYA3vW","rM9YBsbqywDL","CgfNzvvYBa","Dg9mB3DLCKnHC2u","Bwf0y2G","BwvZC2fNzq","yMXHBMTnzxnZywDL","Bg9Uz01LC3nHz2u","y2fSBgjHy2TZ","ue9tva","Ahr0Chm6lY9HCgKUDgvSzwDYyw0UB3jNl2jVDa","C2v0uMvXDwvZDeHLywrLCG","yxbWBgLJyxrPB24VANnVBG","C3rHDhvZ","CMvZCg9UC2vuzxH0","C3vJy2vZCW","zxjYB3i","qMfKifjLCxvLC3q6ig1LC3nHz2uGAxmGDg9VigXVBMC","Dg9Vtg9UzW","C2vUza","B2zMBgLUzq"];return(_0x30dc=function(){return o})()}form[_0xde11c0(906,905)](_0x2566c7(-22,-14),o=>{var r=380,n=355,t=361,f=353,e=358,g=352,C=877,a=876,m=349,v=350,x=365,s=879,z=880,u=877,c=322,D=347,L=882,B=880,d=345,y=363,w=344,H=882,_=886,M=891,l=369,A=359,p=882,h=351,G=877,N=357,b=351,U=348,J=341,Y=323,q=340,K=321,O=338,S=891,V=889,W=892,X=901,j=893,I=893,Z=337,P=334,T=333,k=896,R=890,F=875,E=897,Q=894,$=899,oo=921,ro=346,no=875,to=339,fo=359,eo=884,io=896,go=873,Co=331,ao=328,mo=902,vo=916,xo=316,so=325,zo=902,uo=902,co=354,Do=324,Lo=359,Bo=334,yo=323,wo=906,Ho=907,_o=330,Mo=320,lo=909,Ao=916,po=344,ho=360,Go=869,No=868,bo=366,Uo=359,Jo=290,Yo=311,qo=323,Ko=917,Oo=938,So=464,Vo=461,Wo=507,Xo=523,jo=450,Io=505,Zo=500,Po=462,To=469,ko=794,Ro=462,Fo=456,Eo=806,Qo=820,$o=445,or=807,rr=788,nr=463,tr=443,fr=452,er=808,ir=798,gr=480,Cr=509,ar=865;function mr(o,r){return _0x952e(o-ar,r)}function vr(o,r){return _0x952e(r- -363,o)}o[mr(872,860)]();var xr={},sr=form.querySelectorAll(vr(-r,-n));for(i=0;i<sr[mr(874,876)];++i)xr[sr[i][vr(-t,-f)]]=sr[i][vr(-e,-g)][mr(C,a)](/>/gi,vr(-m,-v))[vr(-x,-351)](/</gi,mr(s,878));var zr,ur,cr=formConfig.text,Dr="";for(zr in formConfig.toast={},xr)for(ur in Dr+=mr(z,u)+(zr[0][vr(-c,-D)]()+zr[mr(L,B)](1))+vr(-353,-d)+(vr(-y,-w)===zr||mr(885,H)===zr?xr[zr]:mr(_,M)+xr[zr]+"</pre>")+"n",cr=cr[mr(877,863)](new RegExp("{{"+zr+"}}","g"),xr[zr]),toasts)void 0===formConfig[vr(-l,-A)][ur]&&(formConfig.toast[ur]=toasts[ur][mr(C,p)](new RegExp("{{"+zr+"}}","g"),xr[zr])[vr(-368,-h)](/{{(.*?)}}/gm,""));cr=cr[mr(G,888)](/{{FORMDATA}}/g,Dr)[vr(-N,-b)](/{{(.*?)}}/gm,"");b={};b[vr(-U,-J)]=formConfig[vr(-Y,-q)],b[mr(889,879)]=cr+vr(-K,-O)+formConfig[mr(S,V)].pageUrl+'">'+formConfig.blogData[mr(W,X)]+mr(j,I)+formConfig[vr(-320,-Z)].homeUrl+'">'+formConfig[mr(S,M)][vr(-311,-P)]+vr(-342,-T),b.parse_mode=mr(k,R),b[mr(E,F)]={},b[mr(E,F)].inline_keyboard=[[{text:mr(898,888),url:formConfig[mr(M,Q)][mr($,oo)]}]];var Lr,o=b;navigator.onLine?void 0!==xr[vr(-ro,-353)]&&""===xr[mr(no,877)]?toast(formConfig[vr(-to,-fo)].blankName):void 0===xr.email||""!==xr[mr(eo,io)]&&null!==String(xr[mr(eo,go)])[vr(-Co,-ao)]()[mr(X,883)](/^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/)?void 0!==xr.message&&""===xr[mr(mo,vo)]?toast(formConfig.toast[vr(-xo,-so)]):void 0!==xr[mr(zo,876)]&&3e3<xr[mr(uo,io)][vr(-373,-co)]?toast(formConfig.toast[vr(-311,-Do)]):(toast(formConfig[vr(-378,-Lo)].started),formConfig[vr(-Bo,-yo)].started(),(Lr=new XMLHttpRequest).open(mr(wo,922),mr(Ho,933)+formConfig.botToken+"/sendMessage",!0),Lr[vr(-_o,-Mo)]("Content-type",mr(lo,Q)),Lr.onreadystatechange=function(){var o,n=758;function r(o,r){return _0x952e(o-n,r)}function t(o,r){return _0x952e(o- -Cr,r)}4===Lr.readyState&&(200===Lr[t(-So,-Vo)]?(o=JSON[t(-Wo,-Xo)](Lr[t(-463,-jo)])).ok?(toast(formConfig[t(-Io,-Zo)][t(-Po,-To)]),formConfig[r(798,ko)][t(-Ro,-Fo)](o)):(toast(formConfig.toast[r(Eo,Qo)]),formConfig[t(-469,-$o)][r(806,826)](o)):r(or,rr)===JSON.parse(Lr[t(-nr,-tr)]).description?(toast(formConfig.toast.tooLong),formConfig[t(-469,-fr)][r(er,818)]()):(toast(formConfig.toast[r(806,794)]),formConfig[r(ir,774)][t(-Vo,-gr)]()))},Lr[mr(Ao,907)](JSON[vr(-po,-ho)](o))):toast(formConfig[mr(Go,No)].invalidEmail):(toast(formConfig[vr(-bo,-Uo)][vr(-Jo,-Yo)]),formConfig[vr(-m,-qo)][mr(Ko,Oo)]()),validated=!1})})()</script>

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 a new API Token of your bot through Bot Father at any time you think something is going wrong with the bot token.