Membuat Widget Contact Form di Halaman Blogger yang Responsif, Pada artikel kali ini, saya akan membahas cara membuat widget halaman contact form di Blogger. Widget ini penting karena memudahkan pengunjung untuk berkomunikasi dengan Anda, sekaligus menjaga profesionalitas blog atau website Anda. Sebelumnya, saya sudah membahas cara membuat widget halaman sitemap di Blogger, dan kali ini kita akan membahas halaman contact form di blogger.
Tahukah kamu bahwa halaman contact form merupakan salah satu fitur yang wajib ada di Blogger atau website Anda? Hal ini karena dengan menambahkan widget ini, pengunjung dapat dengan mudah menghubungi Anda, sehingga meningkatkan interaksi dan koneksi dengan pembaca atau pelanggan potensial.
Manfaat Widget Contact Form di Blogger atau Website
1. Memudahkan Pengunjung untuk Berkomunikasi
Memiliki halaman kontak di blog Anda mempermudah pengunjung dalam mengirim pesan tanpa perlu membuka aplikasi email atau mengingat alamat email Anda. Pengunjung hanya perlu mengisi form yang tersedia dan pesan mereka langsung sampai di inbox email Anda. Ini meningkatkan pengalaman pengguna (user experience) dan membuat komunikasi lebih efisien, tanpa kendala teknis.
2. Mengurangi Spam di Website
Salah satu masalah yang sering dihadapi oleh pemilik blog adalah menerima banyak email spam. Jika Anda menampilkan alamat email secara langsung di halaman website, bot spam dapat dengan mudah mendeteksinya dan mengirimkan pesan yang tidak diinginkan. Dengan menggunakan form kontak, alamat email Anda tersembunyi dari pengunjung, sehingga mencegah pengiriman spam secara langsung ke email Anda.
3. Kustomisasi Pesan
Formulir kontak memungkinkan Anda mengatur apa saja informasi yang ingin Anda dapatkan dari pengunjung. Anda bisa menambahkan kolom untuk nama, email, nomor telepon, hingga kategori pesan yang dikirim. Ini memudahkan Anda untuk mengelola pesan yang masuk dengan lebih baik, seperti membedakan pesan yang bersifat pertanyaan umum, permintaan kerja sama, atau keluhan.
4. Meningkatkan Profesionalitas Website
Form kontak adalah elemen penting untuk menunjukkan bahwa situs Anda dikelola secara profesional. Dengan adanya form ini, pengunjung tahu bahwa situs Anda terbuka terhadap komunikasi, siap menerima pertanyaan, saran, atau kritik. Selain itu, tampilan yang bersih dan rapi dari formulir kontak juga memberi kesan positif tentang kualitas situs Anda.
5. Meningkatkan Peluang Konversi
Bagi blog atau website yang digunakan untuk keperluan bisnis, form kontak sangat penting dalam mempermudah proses komunikasi dengan calon pelanggan. Dengan adanya form kontak, calon pelanggan yang tertarik dengan produk atau layanan Anda dapat dengan mudah menghubungi Anda. Semakin mudah proses komunikasi, semakin besar pula peluang konversi yang bisa dihasilkan dari pengunjung yang tertarik menjadi pelanggan.
6. Pengumpulan Data yang Berguna
Selain memudahkan komunikasi, contact form juga dapat digunakan untuk mengumpulkan data penting dari pengunjung. Informasi seperti nama, email, nomor telepon, dan jenis pertanyaan yang mereka ajukan dapat dianalisis untuk memahami kebutuhan dan preferensi pengunjung. Data ini sangat berguna untuk pengembangan layanan, riset pasar, atau keperluan pemasaran yang lebih terarah.
7. Mempermudah Pelacakan dan Tindak Lanjut
Dengan form kontak yang terintegrasi dengan sistem manajemen hubungan pelanggan (CRM) atau alat pemasaran email otomatis, Anda dapat dengan mudah melacak pesan yang masuk dan memastikan tindak lanjut yang tepat waktu. Anda bisa mengatur otomatisasi balasan pesan atau menghubungi kembali pelanggan potensial tanpa risiko kehilangan informasi.
Cara Membuat Widget Contact Form di Blogger
Setelah mengetahui manfaatnya, berikut adalah langkah-langkah untuk membuat halaman **contact form di Blogger** yang responsif dan mudah digunakan:
1. Buat Halaman Baru di Blogger
Buka dashboard Blogger Anda.
Klik *Pages* atau *Halaman*.
Buat halaman baru dengan judul misalnya “Contact Us” atau “Hubungi Kami”.
2. Ubah Mode Penulisan ke HTML
Setelah halaman baru terbuka, ubah mode penulisan dari Compose (Penulisan Teks) menjadi *HTML*. Ini akan mempermudah Anda menambahkan kode form kontak.
3. Salin dan Tempelkan Kode HTML Berikut ke Halaman Tersebut
<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" data-em="nama diperlukan" id="namaUser" name="name" required="required" type="text" />
<span class="n req"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Nama</span></span></span>
</label>
</div>
<div class="cArea"><label><input class="cInpt cMail" data-em="nomor hp diperlukan" id="nomorUser" name="nomor hp" required="required" type="number" /><span class="n req"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Nomor Hp / WA</span></span></span></label></div><div class="cArea"><label><textarea class="cInpt cMsg" data-em="pesan tidak boleh kosong" id="pesanUser" name="message" required="required" rows="3">Pesan</textarea></label></div><div class="cArea"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><input class="cBtn" id="kirimPesan" type="button" value="Kirim" /></span></span></span></span></span></span></span></span></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 = 'carangeblog@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>
4. Publikasikan Halaman
Setelah menempelkan kode HTML di atas, klik tombol *Publish* atau *Publikasikan*. Halaman contact form Anda kini siap digunakan.
5. Pengaturan Email Penerima
Pastikan untuk mengubah alamat email tujuan di bagian kode JavaScript yang sudah di tandai agar pesan yang dikirim oleh pengunjung langsung masuk ke email yang Anda inginkan .
Dengan mengikuti langkah-langkah di atas, Anda bisa membuat widget halaman contact form yang responsif di Blogger. Form ini memberikan berbagai manfaat seperti mempermudah komunikasi, mencegah spam, meningkatkan profesionalitas, dan meningkatkan peluang konversi. Dengan form kontak yang terpasang di website Anda, interaksi dengan pengunjung akan lebih mudah dan terorganisir, membantu Anda menjaga hubungan baik dengan pembaca dan pelanggan potensial.
Manfaatkan widget ini sebaik mungkin untuk memaksimalkan potensi situs Anda!
Comments
Post a Comment