Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blog / Tutorial

Cara Membuat Kontak Form Redirect Gmail di Blogger

Oleh sarjanamalas
Beberapa hari ini saya sibuk mengedit template viomagz untuk website sarjanamalas ini. Ada beberapa fitur yang saya tambahkan kedalamnya. Salah satunya adalah kontak form yang bisa langsung redirect secara otomatis ke Gmail.


Jika kalian mengamati, dalam beberapa hari belakangan ini saya sering sekali mengubah template blogger untuk website sarjanamalas. Memang saat ini saya sendiri baru saja melakukan migrasi dari wordpress ke blogspot. Agak ribet tetapi Alhamdulillah sudah hampir selesai.

Kebetulan sejak beberapa hari yang lalu saya belum bisa menemukan template yang sesuai dengan apa yang saya harapkan. Lalu saya teringat kalau dulu pernah membeli template viomagz buatan mas sugeng. Kebetulan juga saya melihat template ini baru saja diupdate dan memutuskan untuk menggunakannya.

Cara Membuat Kontak Form Redirect Gmail di Blogger

Setelah menginstall viomagz, saya merasa masih ada yang kurang sreg. jadilah saya mencoba untuk sedikit mengotak-atik tampilan dan beberapa fungsi di template viomagz ini. Ada beebrapa hal yang saya ubah dan tambahkan, namun untuk kali ini saya akan memberikan informasi tentang cara membuat formulir kontak yang agak berbeda.

Formulir kontak yang saya tambahkan ini akan langsung meredirect user ke Gmail. Keuntungannya adalah kita bisa sedikit mengantisipasi spam yang masuk ke email preibadi kita. Baiklah,langsung saja kita mulai prakteknya.


Disclaimers : Kode yang saya tuliskan di bawah ini bukanlah bikinan saya melainkan dari www.wendycode.com (thanks)

Formulir Kontak Redirect Ke Email 

Untuk caranya sangatlah mudah karena hanya tinggal melakukan copy-paste script saja serta merubah beberapa variabel.
  1. Silahkan login akun blogger kalian lalu pilih halaman → lalu buat halaman baru
  2. Buat postingan baru dengan mode html. Untuk judul terserah, sebagai contoh saya menggunakan judul Contact Us
  3. selanjutnya copas semua baris kode di bawah ini
  4. Terbitkan
<style type="text/css">
/* source css https://median-ui.jagodesain.com */
.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 .error-message{color:#d32f2f}.ContactForm input[type=text],.ContactForm input[type=number],.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:#ececec;padding:25px 16px 8px 16px;line-height:1.6em;transition:all .1s ease}.ContactForm input[type=button]{display:inline-flex;align-items:center;padding:12px 30px;outline:0;border:0;border-radius:4px;color:#fffdfc;background:#f89000;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%}.cArea .hidden{display:none}.ContactForm input[type=number]:hover,.ContactForm input[type=text]:hover,.ContactForm textarea:hover{border-color:rgba(0,0,0,.42);background:#ececec}.ContactForm input[type=number]:focus,.ContactForm input[type=text]:focus,.ContactForm textarea:focus{border-color:#f89000;background:#ececec}

/* css darkmode sesuaikan class (.drK) dengan templatemu agar dapat berjalan */
.drK .ContactForm input[type=number],.drK .ContactForm input[type=text],.drK .ContactForm textarea,.drK .cArea input:focus ~ .n,.drK .cArea textarea:focus ~ .n,.drK .cArea input[data-text=fl] ~ .n,.drK .cArea textarea[data-text=fl] ~ .n{background: #252526;}.drK .cArea label .n{color:rgba(255,255,255,.25)}.drK .ContactForm input[type=number],.drK .ContactForm input[type=text],.drK .ContactForm textarea{color:#ececec;}
</style>

<div class='ContactForm s-2' id='ContactForm1'>
  <form name='cForm'>
    <div class='cArea'>
      <label>
        <input class='cInpt cName' id='namaUser' name='name' type='text'/>
        <span class='n req'>Nama</span>
      </label>
    </div>
    <div class='cArea'>
      <label>
        <input class='cInpt cMail' id='nomorUser' name='Nomor hp' type='number'/>
        <span class='n req'>Nomor Hp / WA</span>
      </label>
    </div>
    <div class='cArea'>
      <label>
        <textarea class='cInpt cMsg' id='pesanUser' name='Pesan' rows='3'></textarea>
        <span class='n req'>Pesan</span>
      </label>
    </div>
    <div class='cArea'>
      <input class='cBtn' id='kirimPesan' type='button' value='Kirim' />
    </div>
    <div class='cArea nArea'>
      <p class='cNtf' id='error-message'></p>
    </div>
  </form>
</div>


<script>
/*<![CDATA[*/ 
// javascript by wendycode.com
var sharedFreeBy = 'www.wendycode.com'; // Credit jika di hapus script tidak dapat berfungsi
var email = '[email protected]'; //Alamat Email Anda
var subjectEmail = 'Hallo Saya Ingin Bertanya '; //Subjek Email Namun Hanya Muncul Di SmartPhone Saja

//format pesan opsinal bisa di ubah atau tidak
var pengirim = 'Nama : ';
var noPengirim = 'Nomor Telpon / WA : ';
var kirimVia = 'Email ini dikirim via : ';

var _0x56c4c4=_0x18c5,_0x167513=_0x1a4e;function _0x1a4e(a,b){var c=_0x488e();return(_0x1a4e=function(d,g){var b=c[d-=357];if(void 0===_0x1a4e.GdhWHg){var i=function(g){for(var b,a,h="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=",c="",f="",d=0,i=0;a=g.charAt(i++);~a&&(b=d%4?64*b+a:a,(d++)%4)&&(c+=String.fromCharCode(255&b>>(-2*d&6))))a=h.indexOf(a);for(var e=0,j=c.length;e<j;e++)f+="%"+("00"+c.charCodeAt(e).toString(16)).slice(-2);return decodeURIComponent(f)},h=function(d,g){var a,e,b=[],c=0,h="";for(a=0,d=i(d);a<256;a++)b[a]=a;for(a=0;a<256;a++)c=(c+b[a]+g.charCodeAt(a%g.length))%256,e=b[a],b[a]=b[c],b[c]=e;a=0,c=0;for(var f=0;f<d.length;f++)c=(c+b[a=(a+1)%256])%256,e=b[a],b[a]=b[c],b[c]=e,h+=String.fromCharCode(d.charCodeAt(f)^b[(b[a]+b[c])%256]);return h};_0x1a4e.EhAfxf=h,a=arguments,_0x1a4e.GdhWHg=!0}var e=d+c[0],f=a[e];return f?b=f:(void 0===_0x1a4e.WeteHA&&(_0x1a4e.WeteHA=!0),b=_0x1a4e.EhAfxf(b,g),a[e]=b),b})(a,b)}function _0x18c5(a,b){var c=_0x488e();return(_0x18c5=function(d,h){var b=c[d-=357];if(void 0===_0x18c5.sWtfAl){var g=function(g){for(var b,a,h="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=",c="",f="",d=0,i=0;a=g.charAt(i++);~a&&(b=d%4?64*b+a:a,(d++)%4)&&(c+=String.fromCharCode(255&b>>(-2*d&6))))a=h.indexOf(a);for(var e=0,j=c.length;e<j;e++)f+="%"+("00"+c.charCodeAt(e).toString(16)).slice(-2);return decodeURIComponent(f)};_0x18c5.KvByMF=g,a=arguments,_0x18c5.sWtfAl=!0}var e=d+c[0],f=a[e];return f?b=f:(b=_0x18c5.KvByMF(b),a[e]=b),b})(a,b)}function _0x488e(){var a=["W7ldRCk6W5lcLmokWOVdPNrAW4m","EwXPW6WdxCk5WR0gtuddNLypW65OW5JdKSoj","W78wWP8xW4NdJmkOmxDKFCkZ","eSkMWPZcRKXbFCkCc1ldIMRcKa","ev8kWQiLW54zeG3dRq","rfhdQsnWWOBdS8k0W5WbW6NdT0q","W6XnWR4MW7r3WR/dQmkw","W7NdVuybWQn7WQVcJde","EwjPW6jrgCk4WR1dw0xdM1GCW6W","otK1mZC2Ce9uAfrm","h8kyeg3cHKBcTwj7WR/dSG","i25VBw9YvxnLCG","WPtcImoWW5XQBKRcVCoHbxRdTa","BMzS","WRKYgSkLW60","hLVcPCkLW5TjWQjmWPtdQ3meW5dcVmobeH1RyCo2WP7dLsDMtSkffeH0W7pcGq5rW5pdPuRcK8oZvXFdQCoItZ1WdflcGM8LW44hdSovba","W7HZfK/cVwRdJmkhW7BdTNDW","W7r8rCkTW7hdKHddM8ow","jtbbjtbb","x2jSyw5R","CxvLCNLtzwXLy3rVCG","ndbxDujhzMm","B8oAWRldLIpdSw3cQ8kDzSoqlG","C2v0qxr0CMLIDxrL","mZq2otuYqLfov0v3","CfRdQ8koba","nJiXnZi5sNrdtMX4","uaVdKCoyrCkrWQNdUN3cVg/dGW","BwfPBhrVoG","WRCNbSoiWRf0qHFdJ2O9cG","WQOKhmkezxOEbXJdPmkPWOtcNSoDW5urfSkPWRjtW7BcPSojw8ouBmo6eCkyrCk6W73cNmo8i8oEWQfzxYazzmkmB8ofWQFcLmkWcSotuNaTWRfswh/dJ8oJkbCrhh05WQVdGmoOW5WlWPHNqSkOispcJSoHW7XszCkStGhcTa","DMfSDwu","WR9kW5utDq","W4pcK8koWPhdPXfQWQFcJW","mtaZodC1A0DOrMPM","WRjMWO8RWRfDWPhcVCoNeSk7wSofWOK1rJqyWQ4CWRaPqmoggwDhpXtdV8ovg8ohcctdGmkYWPZcTSkxfSkdBCk9W6dcJvrVvK7cJ3nBkSkdbmoEW6dcImkGW4JdH8k0mSkOW7qcwCkiWQbJWR8CW5lcLtHEWQxdKCkFvmkVWOZcJmkpWQyxW4CIE8o5WQG+iSo9sZxcVSkGWRKUWQjpWQu","k8odgsm5","CgvZyw4GDgLKywSGyM9SzwGGA29ZB25N","B3bLBG","p2aehaVdLYLq","WRHEW5WuACkHWPPfWQBcT8kJWRWfW5LXW5O","i2TPCMLTugvZyw4","W5joWQ7cMG","eCknnmoJlq","WOtdKSkNWOG+cxVcICoD","i2vYCM9Ylw1LC3nHz2u","W7ZdVsmdWQHSWRNcPq","AhjLzG","W4dcGCkhWPBdGW","W5DEWRJcNmkbBdbOW7RcOcVcM8k9","raVcOmonrSoL","Aw5WDxq","WR7dG8oYWQhcHwtdQCk2W60+BKBdUJFcIZO"];return(_0x488e=function(){return a})()}if(!function(d,e){for(var c=_0x18c5,a=_0x1a4e,b=d();;)try{if(parseInt(a(392,"[email protected]"))/1+parseInt(a(367,"%Hmp"))/2+ -parseInt(a(394,"6tV&"))/3+parseInt(a(377,"HU3V"))/4+ -parseInt(c(399))/5+ -parseInt(a(372,"taCt"))/6*(-parseInt(a(375,"mX1!"))/7)+ -parseInt(c(386))/8*(parseInt(c(391))/9)==297205)break;b.push(b.shift())}catch(f){b.push(b.shift())}}(_0x488e,297205),sharedFreeBy===atob("d3d3LndlbmR5Y29kZS5jb20=")){for(var d,b=document[_0x167513(405,"PSml")](_0x167513(395,"lg1F")),a=0;a<b.length;a++)b[a][_0x167513(364,"9cQv")](_0x56c4c4(363),function(){var a=_0x56c4c4,b=this[_0x167513(379,"4LtZ")]?"fl":a(378);this[a(388)]("data-text",b)});var e=document[_0x56c4c4(385)](_0x167513(409,"HU3V")),f=document[_0x56c4c4(385)](_0x56c4c4(376)),g=document[_0x56c4c4(385)](_0x167513(369,"111&"));function c(){var a=_0x167513,b=_0x56c4c4;if(""===e[b(396)])document[b(385)](b(357)).innerHTML=a(373,"[DnI");else if(""===f[a(401,"&!c@")])document[a(368,"X[^a")](b(357)).innerHTML=a(366,"[DnI");else if(""===g[a(397,"PSml")])document[a(361,"zn4w")]("#error-message")[a(382,"0&Ld")]=b(402);else{var d=a(380,"Cgm8"),j="&subject="+subjectEmail,h="",k="&body=",c="";if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i[a(407,"zn4w")](navigator[a(398,"Z]8j")])){var d=b(393),c="";h=a(371,"nGOD")}var l=pengirim+e[a(397,"PSml")]+"%0A"+noPengirim+f[a(408,"hSpL")]+a(362,"[email protected]")+g[a(360,"Z]8j")],i=location[b(359)],m=d+email+h+j+k+l+b(383)+c+c+kirimVia+i;window[b(403)](m,b(384)),window[a(404,"QVvE")].href=i}}document[_0x167513(370,"RrVq")](_0x56c4c4(406)).addEventListener(_0x167513(390,"ZHD!"),c)}else window.location[_0x56c4c4(359)]=atob(_0x167513(400,"nGOD"))
/*]]>*/</script><br />

Ada beberapa hal yang harus kalian yaitu pada baris kode yang sudah saya beri tanda warna kuning. Silahkan ubah var email menjadi email kalian. Untuk sisanya terserah ingin diubah atau tidak.

Untuk demonya silahkan kalian klik tombol dibawah ini :


Sekian tutorial kali ini mengenai bagaimana cara membuat kontak form yang bisa redirect langsung ke email. Semoga bermanfaat!