Blog iTeam OS
Trang chủ
Blogspot Tips

Hướng dẫn tạo Biểu mẫu liên hệ sử dụng Telegram Bot API

hướng dẫn tạo biểu mẫu gửi trực tiếp đến Nhóm Telegram của bạn. Bạn cũng có thể thêm các trường bổ sung trong biểu mẫu này, tức là Số điện thoại di độ

Như chúng ta đã biết, API biểu mẫu liên hệ của Blogger đã được cập nhật gần đây và bây giờ nó yêu cầu mã thông báo mỗi lần gửi biểu mẫu thành công, điều đó có nghĩa là bạn cần thêm Tiện ích biểu mẫu liên hệ thông qua Bố cục, điều này dẫn đến việc tải trang chậm do javascripts widget của blogger, mà chúng tôi đã sử dụng chỉ trong trang biểu mẫu trước đó. Hầu hết các blogger sử dụng Telegram, vì vậy tôi đã đưa ra một bài đăng mới có tiêu đề Cách tạo biểu mẫu liên hệ bằng cách sử dụng Telegram Bot API

Hôm nay, tôi sẽ chia sẻ các mã sẽ cho phép bạn nhận các biểu mẫu gửi trực tiếp đến Nhóm Telegram của bạn. Bạn cũng có thể thêm các trường bổ sung trong biểu mẫu này, tức là Số điện thoại di động, Trang web hoặc bất kỳ thứ gì, điều này không thể thực hiện được trong Biểu mẫu liên hệ Blogger.

Đây là một hướng dẫn giáo dục. Vui lòng xem xét sử dụng nó để tăng cường tốt.

Cách tạo biểu mẫu liên hệ bằng Telegram Bot API
Cách tạo biểu mẫu liên hệ bằng Telegram Bot API

Trước khi bắt đầu, chúng ta hãy xem qua Demo của nó.

Demo
Tham khảo bài: Hướng dẫn tạo BOT và gửi thông báo Telegram

Yêu cầu

  1. Một bot điện tín, nếu bạn không có, bạn có thể đọc tài liệu here. Mã thông báo Bot API là bắt buộc.
  2. ID của Telegram Group, để tạo một nhóm riêng tư, đăng nhập vào Telegram Web, mở nhóm, bạn sẽ nhận được Group ID trong url, tức là. -1200190470, thêm 100 ngay sau - và trước đó 1200190470, bây giờ id trò chuyện sẽ được -1001200190470 ghi chú lại. Đừng quên thêm bot vào nhóm của bạn..

Không nên sử dụng siêu nhóm vì bất kỳ ai có tên nhóm đều có thể dễ dàng tham gia và đọc các bài gửi của khách truy cập của bạn.

Hạn chế

  1. Người dùng không thể gửi tin nhắn có hơn 3000 ký tự vì Telegram có giới hạn khi gửi tin nhắn có hơn 4096 ký tự. Để đảm bảo tất cả các lần gửi đều thành công, chúng tôi phải đặt giới hạn dưới 4096 ký tự, tức là 3000 ký tự.

Hướng dẫn tạo một biểu mẫu liên hệ?

Step 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Step 2: Trên Bảng điều khiển Blogger, nhấp vào Trang.

Step 3: Tạo trang mới bằng cách nhấp vào biểu tượng hoặc nhấp vào trang hiện có để thêm mã vào đó..

Step 4: Chuyển sang chế độ xem HTML.

Step 5: Dán các mã sau vào đó và Xuất bản trang của bạn.

Contact Form 1

<style>
/* 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) }
<!--[ Xóa đoạn dưới này đi nếu bạn đang sử dụng theme Plus UI ]--> 
/* Widget ContactForm */ .ContactForm{max-width:500px;font-size:14px} .cArea:not(:last-child){margin-bottom:25px} .cArea label{display:block;position:relative} .cArea label .n{display:block;position:absolute;left:0;right:0;top:0; color:rgba(8,16,43,.4);line-height:1.6em;padding:15px 16px 0;border-radius:4px 4px 0 0;transition:all .1s ease;} .cArea label .n.req::after{content:'*';font-size:85%} .cArea textarea{height:100px} .cArea textarea:focus, .cArea textarea[data-text=fl]{height:200px} .cArea input:focus ~ .n, .cArea textarea:focus ~ .n, .cArea input[data-text=fl] ~ .n, .cArea textarea[data-text=fl] ~ .n{padding-top:5px;color:rgba(8,16,43,.7);font-size:90%;background:#ececec} .cArea .h{display:block;font-size:90%;padding:5px 16px 0;opacity:.7;line-height:normal} .nArea .contact-form-error-message-with-border{color:#d32f2f} .nArea .contact-form-success-message-with-border{color:#2e7b32} .tNtf img.contact-form-cross{display:none} .ContactForm input[type=text], .ContactForm input[type=email], .ContactForm textarea{display:block;width:100%;outline:0;border:0;border-bottom:1px solid rgba(0,0,0,.25);border-radius:4px 4px 0 0;background:#f3f3f4; padding:25px 16px 8px 16px; line-height:1.6em; transition: all .1s ease;} .ContactForm input[type=text]:hover, .ContactForm input[type=email]:hover, .ContactForm textarea:hover{border-color:rgba(0,0,0,.42);background:#ececec} .ContactForm input[type=text]:focus, .ContactForm input[type=email]:focus, .ContactForm textarea:focus, .ContactForm input[data-text=fl], .ContactForm textarea[data-text=fl]{border-color:var(#482dff);background:#ececec} .ContactForm input[type=button], .ContactForm input[type=submit]{display:inline-flex;align-items:center; padding:12px 30px; outline:0;border:0;border-radius:4px; color:#fffdfc; background:var(#482dff); font-size:14px; white-space:nowrap;overflow:hidden;max-width:100%} .ContactForm input[type=button]:hover, .ContactForm input[type=submit]:hover{opacity:.7}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<!--[ Toast Notification ]-->
<div class="tNtf" id="toastNotifC"></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?</p>
<p>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" id="name" name="name" type="text" />
        <span class="n">Name</span>
      </label>
    </div>
    <div class="cArea">
      <label>
        <input class="cInpt cMail" id="email" name="email" type="email" />
        <span class="n req">Email</span>
      </label>
      <span class="h">Valid email is required</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 class="cInpt cMsg" id="message" name="message" rows="3" style="resize: vertical;"></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"><i class='icon demo'></i>Send</button>
    </div>
  </form>
</div>

<script>
  /*<![CDATA[*/
  (function(){
    /* Form Configuration - Sensitive (obfuscate it after making changes) */
    var formConfig = {
      botToken: '5771306298:AAGp40HmJJxvuRwY4Pngnxxr6qBPZtS8S4Y',
      chatId: '-1001626906373',
      text: '\n{{FORMDATA}}',
      form: 'form[name=cForm]',
      blogData: {
        homeTitle: 'Hani Mansour',
        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>
<div id='aChp'></div>

Contact Form 2

<style>
/* 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) }
<!--[ Xóa đoạn dưới này đi nếu bạn đang sử dụng theme Plus UI ]--> 
/* Widget ContactForm */ .ContactForm{max-width:500px;font-size:14px} .cArea:not(:last-child){margin-bottom:25px} .cArea label{display:block;position:relative} .cArea label .n{display:block;position:absolute;left:0;right:0;top:0; color:rgba(8,16,43,.4);line-height:1.6em;padding:15px 16px 0;border-radius:4px 4px 0 0;transition:all .1s ease;} .cArea label .n.req::after{content:'*';font-size:85%} .cArea textarea{height:100px} .cArea textarea:focus, .cArea textarea[data-text=fl]{height:200px} .cArea input:focus ~ .n, .cArea textarea:focus ~ .n, .cArea input[data-text=fl] ~ .n, .cArea textarea[data-text=fl] ~ .n{padding-top:5px;color:rgba(8,16,43,.7);font-size:90%;background:#ececec} .cArea .h{display:block;font-size:90%;padding:5px 16px 0;opacity:.7;line-height:normal} .nArea .contact-form-error-message-with-border{color:#d32f2f} .nArea .contact-form-success-message-with-border{color:#2e7b32} .tNtf img.contact-form-cross{display:none} .ContactForm input[type=text], .ContactForm input[type=email], .ContactForm textarea{display:block;width:100%;outline:0;border:0;border-bottom:1px solid rgba(0,0,0,.25);border-radius:4px 4px 0 0;background:#f3f3f4; padding:25px 16px 8px 16px; line-height:1.6em; transition: all .1s ease;} .ContactForm input[type=text]:hover, .ContactForm input[type=email]:hover, .ContactForm textarea:hover{border-color:rgba(0,0,0,.42);background:#ececec} .ContactForm input[type=text]:focus, .ContactForm input[type=email]:focus, .ContactForm textarea:focus, .ContactForm input[data-text=fl], .ContactForm textarea[data-text=fl]{border-color:var(#482dff);background:#ececec} .ContactForm input[type=button], .ContactForm input[type=submit]{display:inline-flex;align-items:center; padding:12px 30px; outline:0;border:0;border-radius:4px; color:#fffdfc; background:var(#482dff); font-size:14px; white-space:nowrap;overflow:hidden;max-width:100%} .ContactForm input[type=button]:hover, .ContactForm input[type=submit]:hover{opacity:.7}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<!--[ 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: 'Fineshop Design',
        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>

Nên xoá thư viện jquery nếu Blogger/Blogspot các bạn đã có

Xóa đoạn /* Widget ContactForm */ nếu bạn đang sử dụng theme Plus UI

Lưu ý:
Thay thế các bộ phận được đánh dấu bằng các thông tin chính xác.

Hoàn toàn không an toàn khi công bố công khai Mã thông báo Bot API của bạn. Sử dụng bất kỳ trình xáo trộn javascript nào để làm xáo trộn mã Cấu hình biểu mẫu sau khi thực hiện tất cả các thay đổi. Bạn có thể thu hồi và tạo Mã thông báo API mới của bot của mình thông qua Bot Father bất kỳ lúc nào bạn nghĩ rằng có điều gì đó không ổn với mã thông báo bot.

Kết luận

Đây là tất cả về việc tạo Biểu mẫu liên hệ bằng Telegram Bot API . Tôi hy vọng bạn thích bài viết này. Xin vui lòng chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào thì hãy hỏi chúng tôi trong hộp bình luận.

© Copyright:
https://iteamos.blogspot.com

Truy cập Bypass Google Account APK để tải file APK nhé