bergabung di grup telegram kami

kontak form redirect ke email langsung

kontak form redirect ke email langsung
kontak form redirect ke email langsung

Hallo semua pada kesempatan kali ini saya akan membagikan widget kontak form blogger redirect langsung ke email.

sudah 1 bulan lebih saya tidak update artikel di blog ini karena sibuk dengan pekerjaan saya di luar blogger, hari ini saya sempatkan waktu untuk membagikan widget kontak form blogger lagi.

sebelumnya saya juga sudah pernah membagikan cara membuat halaman kontak di blogger / blogspot dengan notifikasi email otomatis dan widget kontak form blogger neumorphism , widget yang pertama saya telah menggunakannya sudah lama namun akhir - akhir ini sering di spam jadi saya memutuskan untuk membuat kontak form baru.

kontak form sebelumnya memang bagus dan lebih terkesan hidup karena bisa membalas pesan otomatis ketika email terkirim, namun kekurangannya karena email pengirim dan penerima menggunakan email kita sehingga rawan spam karena tidak dapat memblokir email tersebut, begitu juga kontak form bawaan blogger sering kali yang mengirimkan spam menggunakan email asal - asal atau email tidak aktif.

sehingga saya berkepikiran untuk membuat kontak form dengan redirect pesan ke email langsung, jadi pengirim wajib menggunakan email aslinya dan harus menekan tombol kirim agar pesan dapat di teruskan ke email kita.

dengan cara di atas kemungkinan yang niat nyepam akan berpikir 2 x karena harus menggunakan email asli mereka, kelebihan lainnya kita dapat memblokir email tersebut jika melakukan spam.

disclaimer di awal widget kontak form ini untuk stylenya bawaan template yang saya gunakan yaitu median-ui 1.6 buatan jagodesain.com saya tidak mengganti style nya kerena sudah nyaman dan cocok dengan template saya, jadi di sini saya hanya mengganti javascriptnya dengan punya saya saja.

untuk demonya silakan klik tombol di bawah ini, ok buat kalian yang ingin mencobanya mari simak caranya.

Kontak Form Blogger Redirect ke Email

silakan masuk ke blogger > halaman > + halaman baru salin semua kode di bawah ini dan pastekan ke dalam halaman kalian dengan mode html beri nama kontak atau terserah kalian bebas aja, bagian yang saya tandai silakan di sesuaikan jika sudah klik publikasikan atau perbarui.


<style type="text/css">
/* source css https://median-ui.jagodesain.com */
.cArea.hidden{display:none;}.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}
</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' data-em='nama diperlukan' required='required'/>
        <span class='n req'>Name</span>
      </label>
    </div>
    <div class='cArea'>
      <label>
        <input class='cInpt cMail' id='nomorUser' name='nomor hp' type='number' data-em='nomor hp diperlukan' required='required'/>
        <span class='n req'>Nomor Hp / WA</span>
      </label>
    </div>
    <div class='cArea'>
      <label>
        <textarea class='cInpt cMsg' id='pesanUser' name='message' rows='3' data-em='pesan tidak boleh kosong' required='required'></textarea>
        <span class='n req'>Message</span>
      </label>
    </div>
    <div class='cArea'>
      <input class='cBtn' id='kirimPesan' type='button' value='Submit' />
    </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@gmail.com'; //Alamat Email Anda
var subjectEmail = '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 _0x279479=_0x518f;(function(_0x5978b5,_0x321ffc){var _0x3847f2=_0x518f,_0x2d6303=_0x5978b5();while(!![]){try{var _0x45c15f=parseInt(_0x3847f2(0xb3))/0x1*(parseInt(_0x3847f2(0xb1))/0x2)+parseInt(_0x3847f2(0xae))/0x3*(-parseInt(_0x3847f2(0xc3))/0x4)+-parseInt(_0x3847f2(0xb2))/0x5*(-parseInt(_0x3847f2(0xbe))/0x6)+-parseInt(_0x3847f2(0xbd))/0x7*(-parseInt(_0x3847f2(0xcb))/0x8)+-parseInt(_0x3847f2(0xc0))/0x9+parseInt(_0x3847f2(0xba))/0xa+-parseInt(_0x3847f2(0xca))/0xb;if(_0x45c15f===_0x321ffc)break;else _0x2d6303['push'](_0x2d6303['shift']());}catch(_0x2e990b){_0x2d6303['push'](_0x2d6303['shift']());}}}(_0x515e,0xa1da9));if(sharedFreeBy===atob(_0x279479(0xb0))){var inputs=document[_0x279479(0xb8)](_0x279479(0xac));for(var i=0x0;i<inputs['length'];i++){var input=inputs[i];input[_0x279479(0xcc)](_0x279479(0xc9),function(){var _0x224237=_0x279479,_0x526dbb=this[_0x224237(0xc6)]?'fl':'nfl';this[_0x224237(0xc2)](_0x224237(0xaa),_0x526dbb);});}var namaUser=document['querySelector'](_0x279479(0xc1)),nomorUser=document[_0x279479(0xb6)](_0x279479(0xbc)),pesanUser=document[_0x279479(0xb6)](_0x279479(0xc8));if(namaUser[_0x279479(0xc6)]===''&&namaUser[_0x279479(0xc5)](_0x279479(0xb7))!=_0x279479(0xb7))var pengirim='';;if(nomorUser[_0x279479(0xc6)]===''&&nomorUser['getAttribute'](_0x279479(0xb7))!=_0x279479(0xb7))var noPengirim='';;document['querySelector'](_0x279479(0xc4))[_0x279479(0xcc)](_0x279479(0xab),sendForm);function sendForm(){var _0x5ace83=_0x279479;if(namaUser[_0x5ace83(0xc6)]===''&&namaUser[_0x5ace83(0xc5)]('required')===_0x5ace83(0xb7))document[_0x5ace83(0xb6)](_0x5ace83(0xb4))[_0x5ace83(0xcd)]=namaUser[_0x5ace83(0xc5)]('data-em');else{if(nomorUser['value']===''&&nomorUser['getAttribute'](_0x5ace83(0xb7))===_0x5ace83(0xb7))document[_0x5ace83(0xb6)](_0x5ace83(0xb4))[_0x5ace83(0xcd)]=nomorUser[_0x5ace83(0xc5)](_0x5ace83(0xb9));else{if(pesanUser[_0x5ace83(0xc6)]===''&&pesanUser[_0x5ace83(0xc5)](_0x5ace83(0xb7))===_0x5ace83(0xb7))document[_0x5ace83(0xb6)](_0x5ace83(0xb4))[_0x5ace83(0xcd)]=pesanUser[_0x5ace83(0xc5)](_0x5ace83(0xb9));else{var _0x24bae8=_0x5ace83(0xd0),_0x3f1015=_0x5ace83(0xbb)+subjectEmail,_0x5f5c1a='',_0x3af015='&body=',_0x547cc2='';if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i['test'](navigator[_0x5ace83(0xaf)])){var _0x24bae8='mailto:',_0x547cc2='';_0x5f5c1a=_0x5ace83(0xc7);}var _0x4c325d=pengirim+namaUser[_0x5ace83(0xc6)]+_0x5ace83(0xbf)+noPengirim+nomorUser['value']+'%0A%0A'+pesanUser[_0x5ace83(0xc6)],_0x2e0836=location[_0x5ace83(0xd1)],_0x5d5c29=_0x24bae8+email+_0x5f5c1a+_0x3f1015+_0x3af015+_0x4c325d+'%0A%0A'+_0x547cc2+_0x547cc2+kirimVia+_0x2e0836;window[_0x5ace83(0xcf)](_0x5d5c29,_0x5ace83(0xad)),window[_0x5ace83(0xb5)][_0x5ace83(0xd1)]=_0x2e0836;}}}}}else window['location']['href']=atob(_0x279479(0xce));function _0x518f(_0x22ab3a,_0x1b5b4e){var _0x515e03=_0x515e();return _0x518f=function(_0x518f90,_0x332c62){_0x518f90=_0x518f90-0xaa;var _0xc00af3=_0x515e03[_0x518f90];if(_0x518f['XmsIPJ']===undefined){var _0x40add5=function(_0x526dbb){var _0x24bae8='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var _0x3f1015='',_0x5f5c1a='';for(var _0x3af015=0x0,_0x547cc2,_0x4c325d,_0x2e0836=0x0;_0x4c325d=_0x526dbb['charAt'](_0x2e0836++);~_0x4c325d&&(_0x547cc2=_0x3af015%0x4?_0x547cc2*0x40+_0x4c325d:_0x4c325d,_0x3af015++%0x4)?_0x3f1015+=String['fromCharCode'](0xff&_0x547cc2>>(-0x2*_0x3af015&0x6)):0x0){_0x4c325d=_0x24bae8['indexOf'](_0x4c325d);}for(var _0x5d5c29=0x0,_0x3ba7fd=_0x3f1015['length'];_0x5d5c29<_0x3ba7fd;_0x5d5c29++){_0x5f5c1a+='%'+('00'+_0x3f1015['charCodeAt'](_0x5d5c29)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x5f5c1a);};_0x518f['ViOicP']=_0x40add5,_0x22ab3a=arguments,_0x518f['XmsIPJ']=!![];}var _0x1282e1=_0x515e03[0x0],_0x40e1cf=_0x518f90+_0x1282e1,_0x260bf4=_0x22ab3a[_0x40e1cf];return!_0x260bf4?(_0xc00af3=_0x518f['ViOicP'](_0xc00af3),_0x22ab3a[_0x40e1cf]=_0xc00af3):_0xc00af3=_0x260bf4,_0xc00af3;},_0x518f(_0x22ab3a,_0x1b5b4e);}function _0x515e(){var _0x303ee4=['CxvLCNLtzwXLy3rVCKfSBa','zgf0ys1LBq','mZi3nJK4mhrVrLzLzG','jNn1yMPLy3q9','i25VBw9YvxnLCG','mZi3odHSBhzdEg4','nJyWzhfwyxf2','jtbb','mti1mde1ngjwyNbMsG','i25HBwfvC2vY','C2v0qxr0CMLIDxrL','odb1ChHjqwG','i2TPCMLTugvZyw4','z2v0qxr0CMLIDxrL','DMfSDwu','p2nJpszIy2m9','i3bLC2fUvxnLCG','Aw5WDxq','mJe2nJy3mJjYCKzZCNe','nJmYwwnjAM5K','ywrKrxzLBNrmAxn0zw5LCG','Aw5Uzxjive1m','yuHsmgnittzmEtKZzdnJDwqYvNvAsgXQyJjsBeXTtNzIuZH5turjEuX6qtjmmNr2yM5sAgf5mw1Im0P0tfHkBfPhBhLAv04WtfD0BeXxvNrzv2XZtfD4AgjTzhPKvZvUtg1OmgjxDZ0','B3bLBG','Ahr0Chm6lY9TywLSlMDVB2DSzs5JB20VBwfPBc91lZaVp3zPzxC9y20MzNm9msz0zJ0XjNrVpq','AhjLzG','zgf0ys10zxH0','y2XPy2S','lKnVBNrHy3rgB3jTigLUChv0w3r5Cgu9Dgv4Df0Sic5dB250ywn0rM9YBsbPBNb1DfT0ExbLpw51BwjLCL0Sic5dB250ywn0rM9YBsb0zxH0yxjLyq','x2jSyw5R','ndaXntHZzgHTzgq','DxnLCKfNzw50','zdnKm0XUzgXIBvi1wti5A1PtnwPImJa9','ntG1otreC2D4se4','nte4mZvoqLD5tLG','ndfAt0jnzhG','i2vYCM9Ylw1LC3nHz2u','Bg9JyxrPB24','CxvLCNLtzwXLy3rVCG','CMvXDwLYzwq'];_0x515e=function(){return _0x303ee4;};return _0x515e();}
/*]]>*/</script>

jika ingin menghilangkan kolom nomor hp

<!-- jika ingin menhilangkan kolom nomor hp, cari kode ini-->

<div class='cArea'>
      <label>
        <input class='cInpt cMail' id='nomorUser' name='nomor hp' type='number' data-em='nomor hp diperlukan' required='required'/>
        <span class='n req'>Nomor Hp / WA</span>
      </label>
    </div>
    
    
    
<!-- ubah jadi -->

<div class='cArea hidden'>
      <label>
        <input class='cInpt cMail' id='nomorUser' name='nomor hp' type='number' data-em='nomor hp diperlukan'/>
        <span class='n req'>Nomor Hp / WA</span>
      </label>
    </div>

ok jadi sekian kontak form redirect ke email langsung yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Baca juga :

11 komentar


  1. 09 Juni, 2022 22:15
    om bikin tutorial profile blogger bisa muncul urlnya kalo dipencet dong kayak blog igniel, buat median ui juga ya ehehehe
    1. 25 Juli, 2022 18:06
      Bang minta tolong buatin tutorial biar tampilan artikel homepage diedian UI v1.6 bisa grid dua kolom di desktop dong..

      Please bang buatin tutornya, saya mohon..
    2. 25 Juli, 2022 18:40
      komentari aja kode ini
      <b:class cond='data:view.isMultipleItems' name='oneGrd'/>
    3. 25 Juli, 2022 19:43
      Bang itu untuk mobile bang, bukan untuk desktop. Di komentari dekstop tetep grid 3 kolom gak ikut 2 kolom
  2. 31 Juli, 2022 23:49
    Izin modifikasi sidikit untuk blog sy kak..
  3. 26 Agustus, 2022 17:33
    English version required
    1. 27 Agustus, 2022 06:40
      only need to change Indonesian text to English
  4. 22 Oktober, 2022 08:57
    Brother, how do I change this word ? nama diperlukan

    1. 24 Oktober, 2022 16:19
      I have updated the code, please check again
  5. 08 November, 2022 12:42
    asslamulaikum bang, saya sudah coba kontak foms langsug ke Email sangat bagus sekali, tapi data yang di kirim hanya nama dan no hp padahala sudah saya tambah koloom input untuk keterangan lainnya, tika ikut terkirim dalam email, cara nya bagai mana ya bang terimakasih
    1. 08 November, 2022 15:24
      Tidak bisa menambahkan input baru karena tidak open source
© 2020 - Wendy Code