How To Create A Contact Form On Blogger Using Telegram Bot API | Tajamal Tech
Introduction
In this post you shall learn how to create a contact form on blogger using telegram bot API, I will share the code necessary to implement this solution and improve the user experience on your website.
 |
| how to create a contact form on blogger using telegram bot API |
Say goodbye to slow and outdated contact forms and say hello to a unique and efficient way of receiving form submissions.
With the recent update to the Blogger Contact Form API, a token is required every time you submit the form, resulting in slow page loading due to Blogger widgets javascript.
By using Telegram, you can create a custom contact form that allows you to add additional fields such as a mobile number or website, which was previously not possible.
how to create a contact form on blogger using telegram bot API for websites, especially bloggers who use the Plus Ui template and will use the Telegram API.
How to make a contact form with the Telegram API for websites? Before that, you must first know what the use of the contact form is and what the benefits of the contact form are for websites.
All living things in this world must have browsed or searched in a browser or Google application to find important knowledge and information.
And if you are someone who reads articles carefully, surely you have come across a contact form that is positioned right below the contents of the article, or more precisely at the bottom right above the footer/copyright of the website owner.
most people when reading an article must focus on one goal of getting information from the contents or content of the article, and not with the contact form, not the searchers? Let's look at the meaning of the Contact Form.
What is Contact Form
Only a small portion uses the Contact Form, and a small proportion is people with problems in the internet world. Usually, they use the Contact Form to exchange information with website owners.
Contact Form if in Indonesian is a Contact Form or website contact page for visitors to contact the organization or individual that provides the website. The page contains one or more lines of items such as Name, email address, and long message. Sometimes it includes an address and a map but that's only for market/eCommerce websites.
Contact Form
This Contact Form will be very useful for websites that have a lot of visitors and these visitors are greatly helped by the problem because of the website, the visitor will send a message to the website owner via the Contact Form to deal with the problem even further.
In fact, not only dealing with problems, but website owners are also willing to work together if other websites are interested in the performance of our article creation
Creating a Contact Form with the Telegram Bot API
How to make a Contact Form for websites, especially bloggers who use the Plus Ui template and will take advantage of the Telegram API.
Why Use Telegram API? In short, we use the Telegram API because many automatic source codes from bloggers don't work, therefore we will use the Telegram Bot API.
Yes, I will share the Contact Form source code specifically for the Plus Ui Blog Template, because some of the code in this Contact Form is embedded in the code in the Plus Ui template.
Applying the Source Code Contact Form is very easy, but we need 2 ingredients that are quite complicated to get, namely the botToken and chatId on Telegram.
Creating Tokens On Telegram Bot
These nine steps are carried out in the Telegram application.
Step 1: Install the Telegram Apk (play store/app store)
Step 2: Register/Login to enter the main page.
Step 3: Search for the @BotFather bot.
Step 4: Click START.
Step 5: Select the Create A New Bot menu.
Step 6: Create a bot name ending with _bot. Example of acting_bot.
Step 7: If it is then it will be. Done! Congratulations.
Step 8: Select the Revoke bot access token menu » Choose your Bot » the token was successfully generated like this 5857523532:AAH0FrOEe
Step 9: Done, you have successfully created a botToken, and Saved it in the Notes. We will use it later to create a Contact Form
Create Group Chat for bots in action
These four steps are carried out in the Telegram application.
Step 1: Click the pencil button and create a New Group.
Step 2: Fill in the name of the group and add the name of the bot that was created earlier, akxy_bot. Then move on.
Step 3: Change the group type to the public, for example, t.me/the group name.
Step 4: Apply your bot to admin, by pressing and holding on the bot name, ignore the option, and just tick it.
Retrieve chatId from web telegram
These Six Steps are done from the Telegram web.
Step 1: Open the Telegram Web site in Chrome in Incognito Mode.
Step 2: Select the country and fill in the telegram number, finish until Login.
Step 3: Enter the Chat group that we created earlier.
Step 4: Take the Group Chat URL like this https://web.telegram.org/z/#-1673951425 and just insert the chatId like this -1673951425.
Step 5: Add -100 in front of the chatId. before» -1673951425 after» -1001673951425.
Step 6: Save the chatId to Notes, we will use it later to create a Contact Form.
Create a Contact Form Page
- Login blogger » open Pages or Pages
- Create a page with the named contact
- Copy the code below then paste it to HTML Mode
<style>
/*<![CDATA[*/
/* Toast Notification */
.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>
/*<![CDATA[*/
/* Toast */ 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>
/*<![CDATA[*/
(function(){
/* Form Configuration - Sensitive (obfuscate it after making changes) */
var formConfig = {
botToken: '110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw',
chatId: '-1001200190470',
text: '#NEW_FORM_SUBMISSION #FineshopDesign\n{{FORMDATA}}',
form: 'form[name=cForm]',
blogData: {
homeTitle: 'Tajamal Tech',
homeUrl: 'https://' + window.location.host,
pageTitle: document.title,
pageUrl: 'https://' + window.location.host + window.location.pathname,
},
callbacks: {
success: () => {
/* Let's redirect user to a location on success */
setTimeout(() => {
toast('Redirecting you to Homepage...');
setTimeout(() => {
/* Location to assign after form is successfully submitted */
window.location.assign('/')
}, 3000)
}, 3000)
},
started: () => {
/* Disable submit button to prevent multiple submits */
document.querySelector('form[name=cForm] .cBtn.button').disabled = true
},
error: () => {
/* Enable submit button on error so user can re-submit it */
document.querySelector('form[name=cForm] .cBtn.button').disabled = false
},
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!'
}
};
/* Main Scripts */
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>
Insert your Telegram bot Token in the [ botToken: ] section and insert the Telegram group Chat ID in the [ chatId: ] section using the (-) sign, for example: -100XXXXXXXXXX
Note: Do not activate the extra mode/line for filling in the Telegram ID in the Contact Form source code. There will be an error if activated, okay.
Advantages of Creating a Contact Form using Telegram Bot API
Improves SEO and makes it easier for visitors to communicate privately. Messages go into the Telegram group chat where Telegram has a message system that will not disappear if the application is deleted
Closing
I'm sorry if the structure and writing of this article are not good, because this website is still a beginner level hehe share how to create a contact form on a blogger using telegram bot API for this article.
Comments
Post a Comment