kontak form redirect ke email langsung

membuat halaman kontak redirect langsung ke email

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.