Cara Membuat Formulir Kontak Menggunakan Telegram Bot API

Seperti yang kita ketahui, API Formulir Kontak Blogger baru-baru ini diperbarui dan sekarang perlu token tiap tiap kali untuk berhasil mengirimkan formulir, itu bermakna Anda kudu mengimbuhkan Widget Formulir Kontak melalui Tata Letak yang memicu pemuatan halaman lambat dikarenakan widget blogger javascript, yang kita mengfungsikan cuma di halaman formulir sebelumnya. Sebagian besar Blogger mengfungsikan Telegram, menjadi saya telah memicu posting baru berjudul Cara Membuat Formulir Kontak mengfungsikan Telegram Bot API.

Syarat

• Akun Telegram: Anda wajib mempunyai Akun Telegram, Jika Anda Tidak mempunyainya Anda dapat Mengunduh Telegram dan Membuat Akun.
• Bot Telegram: Anda wajib mempunyai BOT Telegram untuk membuatnya, Jika tidak punya Anda dapat Membuatnya dengan membuat Bot menggunakan Bot Father dan membaca Dokumentasi ini.
• Grup Telegram: Anda harus mempunyai Grup Telegram untuk dapat Menampung Pesan.

---

Demo

Postingan Terkait

Cara Mendapat Token API

Untuk mendapatkan Bot API Token, Kamu bisa mendapatkannya Saat Selesai membuat BOT.

Untuk mendapatkan Grup ID Token dengan Cara: Buka web.telegram.org dan pilih Grup yang ingin Anda Gunakan, Anda dapat melihatnya melalui Kolom Alamat Situs bagian Atas, ID nya Akan mirip seperti Ini -838863918.

---

Cara Membuat Formulir Kontak Menggunakan Telegram Bot API

1. Masuk ke draft.blogger.com.

2. Pada Dashboard Blogger, Klik Halaman.

3. Lalu klik Buat Halaman.

4. Ubah Mode menjadi Tampilan HTML.

5. Tempel Kode Berikut, Dan Klik Publikasikan.

<script>
    document.head.insertAdjacentHTML('beforeend', `<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) }
</style>`)
    // Hapus CSS di bawah ini jika Anda menggunakan template Plus UI
    document.head.insertAdjacentHTML('beforeend', `<style>
/* 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>
<!--[ Toast Notification ]-->
<div id='toastNotifC' class='tNtf'></div>

<div class='ContactForm' id="CtFm">
    <p>Ada pertanyaan? Kami akan senang Mendengarkannya dari Anda. Kirim pesan kepada kami dan kami akan merespons sesegera mungkin.</p>
    <form name='cForm'>
        <div class='cArea'>
            <label>
                <input class='cInpt cName' name='name' id='name' type='text' /> <span class='n req'>Nama</span>
            </label>
        </div>
        <div class='cArea'>
            <label>
                <input class='cInpt cMail' name='email' id='email' type='email' /><span class='n '>Email</span>
            </label>
            <span class='h'>Diperlukan Email yang Valid</span>
        </div>
        <!--[ Tambahan ]-->
            <!--<div class='cArea'>
            <label>
                <input class='cInpt cWeb' name='website' id='website' type='text' />
                <span class='n'>Alamat Situs</span>
            </label>
            <span class='h'>Bidang ini Opsional</span>
        </div>-->
        <div class='cArea'>
            <label>
                <input class='cInpt cMob' name='mobile' id='mobile' type='text' /><span class='n'>Nomor Telepon</span>
            </label>
            <span class='h'>Bidang ini Opsional</span>
        </div>
        <!--[ Tambahan ]-->
        <!--<div class='cArea'>
            <label>
                <input class='cInpt cTel' name='telegram' id='telegram' type='text' />
                <span class='n'>Telegram Username</span>
            </label>
            <span class='h'>Bidang ini Opsional</span>
        </div>-->
        <div class='cArea'>
            <label>
                <textarea style='resize:vertical' class='cInpt cMsg' name='message' id='message' rows='3'></textarea><span class='n req'>Pesan</span>
            </label>
            <span class='h'>Tidak boleh mengandung lebih dari 3000 Karakter</span>
        </div>
        <div class='cArea'>
            <button class='cBtn button' type='submit'>Kirim</button>
        </div>
    </form>
</div>
<script> var inputs = document.querySelectorAll('.ContactForm input[type=text], .ContactForm input[type=email], .ContactForm textarea'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.addEventListener('input', function() {var bg = this.value ? 'fl' : 'nfl';console.log(bg); this.setAttribute('data-text',bg);}); }
</script>
<!--[ Contact Form Script ]-->
<script>
    (function () {
        function toast(e) { var tNotif = document.getElementById('toastNotifC'); if (tNotif != null) { tNotif.innerHTML = '<span>' + e + '</span>' } };
        /* Form Configuration - Sensitive (obfuscate it after making changes) */
        var formConfig = {
      botToken: '5964260722:AAGGZfSKvAc1Njr_Mm2ql3XahvHKVcDi1W8',
            chatId: '-838863918',
            text: '#NEW_FORM_SUBMISSION #PagodaimediaForm\n{{FORMDATA}}',
            form: 'form[name=cForm]',
      blogData: {
        homeTitle: 'Pagodaimedia',
        homeUrl: 'https://' + window.location.host,
        pageTitle: document.title,
        pageUrl: 'https://' + window.location.host + window.location.pathname,
            },
            toast: {
                blankName: 'Nama tidak boleh kosong',
        blankMessage: 'Pesan tidak boleh kosong',
        longMessage: 'Pesan tidak boleh berisi lebih dari 3000 karakter',
        invalidEmail: 'Diperlukan Email yang valid',
        success: 'Hey, {{name}}! Pesan Anda telah Dikirim',
        started: 'Mengirim...',
        error: 'Terjadi Kesalahan!',
        offline: '{{name}}! Sepertinya Anda sedang offline',
        tooLong: 'Pesan terlalu Panjang.. Gagal untuk Terkirim!'
            },
            callbacks: {
                success: () => {
                    /* Let's redirect user to a location on success */
          setTimeout(() => {
            toast('Mengalihkan Anda ke Beranda...');
            setTimeout(() => {
              /* Location to assign after form is successfully submitted */
              window.location.assign('/')
            }, 3000)
          }, 3000)
                },
                /* Disable submit button to prevent multiple submits */
                started: () => { document.querySelector('form[name=cForm] .cBtn.button').disabled = true },
                /* Enable submit button on error so user can re-submit it */
                error: () => {document.querySelector('form[name=cForm] .cBtn.button').disabled = false},
                offline: () => { },
                tooLong: () => { }
            }
        };

        /* Main Scripts */
        var form=document.querySelector(formConfig.form),toasts=JSON.parse(JSON.stringify(formConfig.toast));form.addEventListener("submit",f=>{f.preventDefault();var b={},g=form.querySelectorAll("[name]");for(i=0;i<g.length;++i)b[g[i].name]=g[i].value.replace(/>/gi,"&gt;").replace(/</gi,"&lt;");var a,d,c=formConfig.text,h="";for(a in formConfig.toast={},b)for(d in h+="<b>&#8226; "+(a[0].toUpperCase()+a.slice(1))+":</b> "+("email"===a||"website"===a?b[a]:"<pre>"+b[a]+"</pre>")+"\n",c=c.replace(new RegExp("{{"+a+"}}","g"),b[a]),toasts)void 0===formConfig.toast[d]&&(formConfig.toast[d]=toasts[d].replace(new RegExp("{{"+a+"}}","g"),b[a]).replace(/\{\{(.*?)\}\}/gm,""));c=c.replace(/{{FORMDATA}}/g,h).replace(/\{\{(.*?)\}\}/gm,""),(a={}).chat_id=formConfig.chatId,a.text=c+'Note: This Form was submitted at Page <a href="'+formConfig.blogData.pageUrl+'">'+formConfig.blogData.pageTitle+'</a> on Blog <a href="'+formConfig.blogData.homeUrl+'">'+formConfig.blogData.homeTitle+'</a>.',a.parse_mode="HTML",a.reply_markup={},a.reply_markup.inline_keyboard=[[{text:"Form Page",url:formConfig.blogData.pageUrl}]],a.disable_web_page_preview=!0;var e,f=a;navigator.onLine?void 0!==b.name&&""===b.name?toast(formConfig.toast.blankName):void 0===b.email||""!==b.email&&null!==String(b.email).toLowerCase().match(/^(([^<>()[\]\\.,;:\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!==b.message&&""===b.message?toast(formConfig.toast.blankMessage):void 0!==b.message&&3e3<b.message.length?toast(formConfig.toast.longMessage):(toast(formConfig.toast.started),formConfig.callbacks.started(),(e=new XMLHttpRequest).open("POST","https://api.telegram.org/bot"+formConfig.botToken+"/sendMessage",!0),e.setRequestHeader("Content-type","application/json"),e.onreadystatechange=function(){var a;4===e.readyState&&(200===e.status?(a=JSON.parse(e.responseText)).ok?(toast(formConfig.toast.success),formConfig.callbacks.success(a)):(toast(formConfig.toast.error),formConfig.callbacks.error(a)):"Bad Request: message is too long"===JSON.parse(e.responseText).description?(toast(formConfig.toast.tooLong),formConfig.callbacks.tooLong()):(toast(formConfig.toast.error),formConfig.callbacks.error()))},e.send(JSON.stringify(f))):toast(formConfig.toast.invalidEmail):(toast(formConfig.toast.offline),formConfig.callbacks.offline()),validated=!1})
    })()
</script>

Ubah Bagian yang ditandai Sesuai Keinginan Anda

Tidak Baik jika Token API Bot anda dapat dilhat oleh Publik, Gunakan javascript obfuscator agar Kode Javascript dan Token API Bot Anda menjadi Acak.

Namun ini bukan Cara yang dapat selalu Diandalkan karena Kode dapat Di Deobfuscator dengan Alat Khusus, Sebagai Gantinya Taruh Token API Bot Di sisi Backend (Bisa menggunakan Cloudflare Workers).

Jadi ini adalah Cara Membuat Formulir Kontak Blogger Menggunakan Telegram Bot API.

Buka untuk Melanjutkan

Pergi ke Tautan