Cara Membuat Widget Kontak Form Multi Metode di Blogger

Widget Kontak Form Blogger Multi Metode dengan JavaScript

Di artikel kali ini saya akan membagikan sebuah script untuk membuat widget kontak form multi metode (Email, Telegram dan WhatsApp) menggunakan JavaScript murni. Kenapa kontak form? Ya, karena beberapa waktu belakangan ini banyak bloger yang mengeluhkan widget kontak form bawaan Blogger (blogspot) yang tidak berfungsi seperti biasanya.

Oleh karena itu, saya mencoba membuat alternatif kontak form lain dengan menambahkan beberapa opsi atau pilihan metode kontak, yaitu kontak melalui akun Telegram, Email dan juga WhatsApp. Widget kontak form Blogger ini dibuat menggunakan JavaScript. Jadi bisa diterapkan di semua platform atau CMS blog, baik itu Blogger, WordPress atau yang lainnya.

Selain menambahkan opsi metode kontak, saya juga menambahkan fungsi redirect ke masing-masing metode kontak untuk menghindari tindakan pesan spam dengan mengisi formulir secara tidak valid (sering terjadi jika menggunakan widget kontak form bawaan Blogger). Jadi ketika ada yang ingin mengirimkan pesan melalui kontak form ini, dia akan langsung dialihkan ke masing-masing aplikasi (Gmail, Telegram atau WhatsApp) dan harus menggunakan email atau akun asli yang valid.

Untuk tampilan widget kontak form ini cukup simpel, minimalis dan bisa dikustomisasikan dengan template blog masing-masing. Untuk demo tampilan widget kontak form Blogger ini, kamu bisa lihat di halaman kontak yang ada di blog ini.

Disclaimer, kolom pada bagian "Email Admin" dalam widget kontak form ini dilengkapi dengan fungsi auto hide and show. Jadi kolom tersebut akan otomatis muncul jika metode kontak yang dipilih adalah "Email" dan otomatis akan hilang jika metode kontak yang dipilih bukan "Email" (misalnya Telegram atau WhatsApp). Lebih jelasnya, kamu bisa lihat langsung demo widget kontak form Blogger di atas.

Cara Memasang Script Widget Kontak Form Multi Metode

Di sini saya contohkan menggunakan platform Blogger (blogspot). Jika kamu ingin memasang widget kontak form ini di platform lain, kamu bisa lewati langkah ini dan tinggal ambil saja script yang ada.

Masuk ke akun Blogger kamu.
Kemudian buatlah sebuah halaman statis baru khusus untuk memasang widget kontak form ini. Atau kamu juga bisa gunakan halaman statis yang sudah ada.
Setelah itu salin dan tempel semua script di bawah ini dalam mode HTML bukan COMPOSE.

HTML
CSS
JS

<form class="form-kontak">
  <label for="name">Nama:</label>
  <input type="text" id="name" required="" placeholder="Tulis nama kamu di sini..." />
  <label for="contactMethod">Metode Kontak:</label>
  <select id="contactMethod" onchange="toggleEmailInput()" required="">
    <option value="">Pilih metode</option>
    <option value="email">Email</option>
    <option value="telegram">Telegram</option>
    <option value="whatsapp">WhatsApp</option>
    <!-- Tambahkan ini -->
  </select>
  <div id="emailInput" style="display:none;">
    <label for="email">Email Admin:</label>
    <input type="email" id="email" value="[email protected]" readonly="" /> <!-- [ ganti teks [email protected] dengan alamat email kamu ]-->
  </div>
  <label for="subject">Judul Email:</label>
  <input type="text" id="subject" disabled="" required="" placeholder="Tulis judul / subjek email..." />
  <label for="message">Pesan:</label>
  <textarea id="message" required="" placeholder="Tulis isi pesan kamu di sini..."></textarea>
  <button type="button" onclick="submitForm()">Kirim Pesan</button>
</form>
<div id="igneliuscom"></div>

.form-kontak input,
.form-kontak select,
.form-kontak #message {
  background: #fff;
  padding: 1rem 1.25rem;
  border-radius: 7px;
  font-size: 12px;
  margin: 1rem 0;
  border: none;
  outline: none;
  width: 100%;
}
.form-kontak label {
  font-size: 16px;
  font-weight: bold;
}
#message {
  height: 230px;
  overflow: scroll;
}

.form-kontak select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path d="M1.5 5.5a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l6 6a1 1 0 1 1-1.414 1.414L8 2.414 2.207 8.207a1 1 0 0 1-1.414 0z"/></svg>');
  background-size: 12px;
  background-position: right 10px center;
  background-repeat: no-repeat;
}

<script>//<![CDATA[
// formulir kontak blogger multi metode by ignelius.com (updated: 7 januari 2024)
let kontakForm = {
  credit : {
    name: "www.ignelius.com", // credit script, jangan dihapus atau diganti
    visibility: "hidden" // konfigurasi credit script, "visible" untuk menampilkannya dan "hidden" untuk menyembunyikannya
  },
  medsos : {
    telegram: "username_telegram", // ganti dengan username Telegram kamu tanpa '@'
    whatsapp: "6281234567890" // nomor harus diawali dengan "62" bukan "0"
  },
  alert : {
    warning: "Silakan isi semua kolom yang kosong terlebih dulu." // notifikasi alert ketika user mengklik tombol 'kirim pesan' namun ada kolom yang masih kosong
  }
}

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0 A=2,u=2,5=2;(8(a,b){0 c=2,X=2,H=2,I=a();1M(!![]){1N{0 d=-6(c(1O,\'1f\'))/1g*(6(X(1P,\'1h\'))/Y)+6(c(1Q,\'1#Z\'))/1R*(6(X(1S,\'10\'))/11)+-6(c(1T,\'12\'))/1U+-6(H(1V,\'U\'))/1i+-6(c(1W,\'1j\'))/1X*(6(H(1Y,\'y[35\'))/1Z)+6(c(20,\'1f\'))/21+-6(H(22,\'*1k\'))/23*(-6(H(24,\'25!&\'))/26);C(d===b)27;J I[\'1l\'](I[\'1m\']())}28(29){I[\'1l\'](I[\'1m\']())}}}(K,2a));8 K(){0 a=[\'2b\',\'2c\',\'2d\',\'2e\',\'13/2f\',\'2g\',\'2h\',\'2i\',\'2j\',\'2k\',\'2l/2m\',\'2n\',\'2o\',\'2p\',\'2q\',\'2r\',\'2s\',\'2t\',\'2u\',\'2v\',\'2w\',\'2x\',\'2y\',\'2z+2A/2B\',\'2C\',\'2D\',\'2E\',\'2F\',\'2G\',\'2H\',\'2I\',\'2J\',\'2K\',\'2L\',\'2M/2N\',\'2O\',\'2P\',\'2Q\',\'13/2R\',\'2S\',\'2T\',\'2U\',\'2V\',\'2W\',\'2X\',\'2Y/2Z/30\',\'31\',\'32\',\'33\',\'34\',\'36\',\'37\',\'38\',\'39\',\'3a/3b\',\'3c\',\'3d/3e\',\'3f+3g\',\'3h\',\'3i\',\'3j\',\'3k\',\'3l/3m\',\'3n\',\'3o\',\'3p+3q\',\'3r\',\'3s\',\'3t\',\'3u\',\'3v\',\'13/3w\',\'3x\',\'3y\',\'3z\',\'3A\',\'3B\',\'3C\',\'3D\',\'3E/3F\',\'3G\',\'3H\',\'3I\',\'3J\',\'3K\',\'3L\',\'3M\',\'3N\'];K=8(){E a};E K()}8 1n(a,b){0 c=2,1o=2,3O=2,14=9[c(3P,\'y[35\')](a);E 14||(L[c(3Q,\'3R\')][1o(3S,\'1h\')]=b),14}C(A(3T,\'1p&\')!==N[\'3U\'][A(3V,\'1q\')])L[u(3W,\'1r\')][5(3X,\'3Y\')]=\'1s://3Z.40.41\';J{0 e=9[u(42,\'15%e\')](\'a\');e[5(43,\'1t%D\')]=A(44,\'W\'),e[5(45,\'1t%D\')]=u(46,\'P\'),e[5(47,\'16\')][5(48,\'49\')]=N[A(4a,\'1u%e\')][A(4b,\'12\')]||5(4c,\'1v@\');0 t=1n(u(4d,\'*1k\'),e[u(4e,\'1p&\')]);t[A(4f,\'15%e\')][u(4g,\'4h\')](e,t)}8 4i(){0 a=5,F=u,v=5,Q=9[a(1w,\'W\')](\'4j\'),o=9[F(4k,\'1#Z\')](F(4l,\'1q\'));v(x,\'1x^R\')===9[F(1w,\'W\')](a(4m,\'U\'))[\'1y\']?(Q[a(4n,\'17\')][\'4o\']=v(4p,\'^4q\'),Q[v(4r,\'1r\')](a(4s,\'4t\'),!3),o[a(4u,\'W\')](v(4v,\'18@q\')),o[v(4w,\'U\')](F(4x,\'1u%e\'),!3)):(Q[F(4y,\'^4z\')][a(4A,\'17\')]=\'4B\',Q[v(4C,\'V*4D\')](F(4E,\'4F\')),o[v(4G,\'16\')](a(1z,\'4H\'),!3),o[a(4I,\'10\')]=\'\',o[\'4J\'](a(4K,\'(4L\')))}8 2(l,m){0 n=K();E 2=8(f,g){f=f-1A;0 h=n[f];C(2[\'1B\']===1C){0 i=8(a){0 b=\'4M+/=\';0 c=\'\',o=\'\';S(0 d=3,p,s,G=3;s=a[\'4N\'](G++);~s&&(p=d%11?p*4O+s:s,d++%11)?c+=1D[\'1E\'](1z&p>>(-Y*d&1i)):3){s=b[\'4P\'](s)}S(0 e=3,1F=c[\'19\'];e<1F;e++){o+=\'%\'+(\'4Q\'+c[\'1a\'](e)[\'4R\'](4S))[\'4T\'](-Y)}E 4U(o)};0 j=8(a,b){0 c=[],7=3,T,1b=\'\';a=i(a);0 d;S(d=3;d<x;d++){c[d]=d}S(d=3;d<x;d++){7=(7+c[d]+b[\'1a\'](d%b[\'19\']))%x,T=c[d],c[d]=c[7],c[7]=T}d=3,7=3;S(0 e=3;e<a[\'19\'];e++){d=(d+1g)%x,7=(7+c[d])%x,T=c[d],c[d]=c[7],c[7]=T,1b+=1D[\'1E\'](a[\'1a\'](e)^c[(c[d]+c[7])%x])}E 1b};2[\'1G\']=j,l=4V,2[\'1B\']=!![]}0 k=n[3],1c=f+k,1d=l[1c];E!1d?(2[\'1H\']===1C&&(2[\'1H\']=!![]),h=2[\'1G\'](h,g),l[1c]=h):h=1d,h},2(l,m)}8 4W(){0 a=5,z=5,4=5,1I=9[a(4X,\'1j\')](\'4Y\')[z(4Z,\'1v@\')],p=9[\'50\'](\'51\')[4(52,\'18@q\')],s=9[z(53,\'16\')](a(1A,\'18@q\'))[\'1y\'],G=9[a(54,\'1J]O\')](\'55\')[a(56,\']M@w\')];C(1I&&p&&G){C(z(x,\'1x^R\')===p){0 b=z(57,\'10\')+9[a(58,\'1K\')](\'59\')[z(5a,\'P\')]+\'?5b=\'+1e(s)+4(5c,\'1#Z\')+1e(G);L[4(5d,\'P\')][\'5e\']=b}J{C(4(5f,\'P\')===p){0 c=N[4(5g,\'B)1L\')][\'5h\'];L[z(5i,\']M@w\')](\'1s://t.5j/\'+c+a(5k,\'U\')+G,4(5l,\'15%e\'))}J{C(4(5m,\'5n!r\')===p){0 d=4(5o,\'1J]O\')+N[\'5p\'][z(5q,\'1K\')]+4(5r,\'12\')+1e(G);L[4(5s,\'5t\')](d,a(5u,\'17\'))}}}}J 5v(N[4(5w,\'y[35\')][4(5x,\'P\')]);5y[4(5z,\'B)1L\')]()}',62,346,'var||_0x50c5|0x0|_0x130f75|_0x176dc1|parseInt|_0x30883f|function|document|||||||||||||||_0x71f84d|_0x3082be|||_0x53ce79||_0x432cc1|_0x10fd97||0x100||_0x5b9dac|_0x3988e3||if||return|_0xc6aacc|_0xa9a14e|_0xb68b0|_0x409189|else|_0x1753|window||kontakForm||M78B|_0x124926||for|_0x2796eb|BkXx||1y3i|_0x4359a2|0x2|Vx|TGfG|0x4|Uzk8|WQ|_0x38dc24|Ze|xFwI|7xcH|sl|length|charCodeAt|_0x2032b3|_0x3d45f2|_0x2eafac|encodeURIComponent|ix4o|0x1|Pv7S|0x6|iSMD|XwE|push|shift|getElementByIdOrRedirect|_0x264176|cIV|50v1|DOCi|https|Tx|El|nOz|0x12d|Jy|value|0xff|0xf9|auqQuv|undefined|String|fromCharCode|_0x232856|mOYEyk|FfZCNa|_0x30fe9c|lc|XHdx|Ns|while|try|0x11e|0xfe|0x107|0x3|0x123|0x101|0x5|0x115|0x13a|0x7|0x141|0x8|0x110|0x9|0x127|0xa|0x11c|px|0xb|break|catch|_0x584450|0x60667|W43dG1HnWPS|auOoW4etma|gtVcR3G|WOBcGs0OW6ldNbXK|dHCk1W7SB|W6qHrX3cMcxdSIG|DSkrh8ozWPFdGdm|W4u0j8oNkSoQW6CWW6dcRCkPW4JcHNS|W63cTCo4W5qmWRzXW65hzq|eSkzWRKlW6zQWOmg|WO1|pmoMfxyfaSosDCoJ|wJ7dTGTx|WQpcM8ors8oGW6ddVCojF8kxbmob|sgBcVNGdd1eUW4nU|W6e5hsldTIVdO8ozW7SKW6RdIh4|c1TEWOerW5Sefa|emkDWRKBW6q|qe0vW6agAcCgWR0RW6ZcRI8j|i8kCF8kiWOmAWRPPE8kz|WRPPrNBcQhVcPSo8W7yfW6G|W61VmqaUWQ3cR8owWPZdQmk7uZldQq|W7BdSWRcKSoxtW|W4lcTSoMW5amWQK|W6j|mtuXW7ldRCkCWOxdQ8kobbldQSofWOm|zfGhWOr2WRBdQa|mKpdR2mZyIXo|W7HVkcO0WQ3cG8ohWOBdRSkqsa7dUCoo|WQRdQahcNSoceCoLz8kFESkagYS|WRLYdsCaWP7cQW|W5uRBmk6uubk|k8kmaJK|W6Xhf8kigr9uqCkcEsW|d8kBWRSlW61XWPCyk8orm3i|tCkAamoiWPxdIG|WO3cLCkIWQy3WRhdVNr3|lCo|WR3cJb1tpCkM|WQ14WPVdIJ3cOCo2W6H7cJFcOW|yCkmfCofWP4|zCktW4VdUCour8oHBCkUW5xcPWafW68|cUSk2WRtcMCkabSkVWRhdIHJcOa|DCoguMW6B3lcMmo6WRO0CvK|m8oaWOBcJ8kotmo9zSkXW7dcOG|WQ8tqSonta|W77cPSoVW5awWQD6W61gBvmMW4W|gmohWO5JzJ8sW4XuW44ZW5hdOmkC|W4xdQYuoaCkQW7RdSW|W4OLj8osnCk1WQv6W6|cQCkcWP|cUhFcJshdJN1YkrVdOHzeW7v8WRnfWQv6W5S0hmkLWR8H|WRZcKCogA8oGW73dOmoo|eCkDWQCaW6H2WOu|sCo0WR5oW6mIWPGEkSotFdZcL8o6gW|sh5HW4xdQYtdQvmkaSofW7RcMa||fba1oW|sLvGAHXsW4tdKHPHWRDJ|WQhcLcFdVq|vvDmWR4|qY|dVXa|WQC4sSo9W6iTfNm|jv|dVMG0Bt0|caCOkw0nW63dLsD|WQK|W4pcSwFdKYhdJ8osW6W|bJ7cVtbRgSoZvCk7mdDlidVcK30|W6hdJ8ohymoCW4ZdTCoh|dXqrW67dU8o7W5aPWQ0X|fSkJWOX|cxz8vW|hZRdPYCl|y8ocpmowW5ndWPfZv8krW7ue|WRWlpZL|W58cW5y|pCocW7VcRSooyNZcVgJdRa|bCoqWO9MBci|W53dGSoNWPumWRldSML2weqEWOGm|W44RACkJqa|ffaPW4COwYm|cQ8k7WPNcIa|cSktWRypW7vXWO0f|WRZcGcJdSLKpWRe|WPeHwmkH|s8oMWQxdLWacqGu|AJVcIMNdU8kTW6pcRW|W5pcVhldOJ7dI8opW7KnvKVdNgRdTq|C8kbACkzWPvo|W6yQb0ldHx|cIXtcTSozWP0yzG|y8kAW5RdJSom|WP3cMaiFW4lcLc0AWRZdMuuMWO4|pmoOWQNcNr1v|ieVdShC0|W7JcSLZdK8kxq8kLECkOESkzfHu|WQ8BxCorsYPe|WRRdOHVcQ8oxbSoJq8kyE8kCeq|WRVcUSk2WRdcGCkrgCkJWR3dIY7cVmkszG|_0xeb7324|0x13e|0x102|EyPj|0x14e|0xfc|credit|0x14d|0x147|0x136|MQe7|www|ignelius|com|0x143|0x14b|0x130|0xfa|0x138|0x108|0x103|y6yV|0x113|0x12b|0x116|0x12c|0x11b|0x121|0x13c|leHr|toggleEmailInput|emailInput|0x12a|0x10a|0x133|0x13d|display|0x119|Zwa|0x125|0x145|S5Ew|0x132|0x131|0x117|0x13b|0x11d|irw|0x11f|none|0x149|XC|0x150|rRTX|0x13f|nAjp|0x106|removeAttribute|0x10d|32c|abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789|charAt|0x40|indexOf|00|toString|0x10|slice|decodeURIComponent|arguments|submitForm|0x105|name|0x142|getElementById|contactMethod|0x114|0x118|0x120|message|0x124|0x135|0x10e|email|0x129|subject|0x11a|0x109|href|0x122|0x104|telegram|0x14f|me|0x12e|0x12f|0x128|GN|0x146|medsos|0xfb|0x10f|0x10b|dDB2|0x139|alert|0x111|0x148|event|0x144'.split('|'),0,{}))
//]]></script>

Intruksi:
1. [email protected] adalah alamat email tujuan atau penerima pesan. Ganti dengan alamat email kamu.
2. username_telegram adalah username Telegram tujuan untuk menerima pesan yang dikirim. Tulis tanpa '@', misal 'igneliuscom'.
3. 6281234567890 ganti dengan nomor telepon WhatsApp kamu.

Jika semua pengaturan sudah disesuaikan, klik simpan.

Itu dia script widget kontak form Blogger multi metode menggunakan JavaScript. Jika mengalami masalah atau script tidak berfungsi, kamu bisa laporkan masalah tersebut di kolom komentar. Selamat mencoba!

Jika kamu termasuk member, kamu bisa menggunakan JavaScript tanpa credit link (script tetap akan dienkripsi). Untuk melihat konten, harap login ke akun kamu terlebih dulu. Jika sudah login, silahkan refresh halaman ini. Konten akan tersedia di bawah ini.

2 komentar

Sebelum memposting komentar, harap baca kebijakan berkomentar terlebih dulu.

1. Untuk menulis kode syntax highlighter, gunakan KODE SYNTAX (kode harus di parse terlebih dulu).
2. Untuk menyisipkan gambar dalam komentar, gunakan URL GAMBAR.
3. Untuk menulis tautan, gunakan <a href='URL WEB TUJUAN'>Anchor Teks</a>.
4. Untuk menulis sebuah quote / kutipuan, gunakan TULIS QUOTE DI SINI.
5. Centang Beri Tahu Saya untuk mendapatkan notifikasi yang dikirim langsung ke email saat ada yang membalas komentar kamu.

Cindy
10 Januari, 202410 Januari, 2024
Hapus Komentar
Salin Permalink
Kunjungi profil
keren bang ada fitur login dan register nya 👍 tutornya boleh dong 😬
Sembunyikan BalasanLihat Balasan (1)
- Ignelius
  10 Januari, 202410 Januari, 2024
  
  Hapus Komentar
  Salin Permalink
  Kunjungi profil
  boleh...nanti sy buatin klo ada waktu. soalnya cukup ribet karna pake authentication dari firebase.

Cara Membuat Widget Kontak Form Multi Metode di Blogger

Cara Memasang Script Widget Kontak Form Multi Metode

Artikel Serupa

2 komentar