Cara Membuat Contact Us Keren Di Blog - Contact us atau yang sering disebut hubungi kami biasanya dipakai untuk website atau blog, contact us keren di blog menjadikan situs terlihat keren dan menjadikan blog profesional untuk kalangan internet sendiri.
Cara membuat contact us keren di blog
Cara membuat contact us keren di blog
Pengertian Contact Us dan Fungsinya
Contact Us atau dalam bahasa Indonesia nya kontak kami merupakan sebuah halaman yang berisi form sebagai tempat menyampaikan pesan, kritik, pujian, opini, ide dan gagasan atau menghubungi admin secara langsung atau pribadi. Contact us juga berguna untuk meningkatkan kualitas dan kinerja pada blog atau web.

Contact us juga menjadi salah satu halaman pendukung pada blog yang wajib ada jika anda mau mendaftarkan blog anda pada google adsense. Jika anda tidak melengkapi blog anda dengan halaman ini maka siap-siap anda ditolak dengan isi pesan “ navigasi tidak benar “ karena halaman ini termasuk kedalam navigasi. Makanya kalian sering melihat halaman kontak ini pada menu. Selain itu contact us juga perlu untuk membuat halaman privacy policy, disclaimer dan TOS.

Keuntungan menggunakan Contact Us pada Blog atau Web

Pengunjung bisa bertanya, menyampaikan pesan, kritik, pujian, opini, ide dan gagasan kepada admin secara pribadi dan privasi.
Membuat blog atau web semakin ramai dikunjungi, karena jika anda menjwab dan melayani mereka pasti mereka tidak akan sungkan untuk datang kembali ke blog anda. Karena anda sudah ramah kepada pengunjung.
Bisa disetujui atau di Approved google adsesne, karena merupakan komponen penting pada blog.

Kekurangan menggunakan Contact Us pada Blog atau Web

Ternyata ada juga kekurangan menggunakan kontak seperti ini, yaitu disalah gunakan oleh pengunjung yang iseng dan tidak bertanggung jawab dengan mengirim pesan yang tidak penting atau tidak ada hubungannya dengan blog. tapi hal seperti ini sudah biasa, anda tidak usah memikirkannya, cukup skip atau abaikan pesan tersebut.

Cara Membuat Contact Us Keren di Blog

Ada dua cara membuat halaman kontak, anda bisa membuatnya sendiri dengan script atau kodingan jika anda paham dengan HTML. Cara kedua, anda bisa membuatnya dengan bantuan situs layanan pembuat form kontak. Saya akan memberikan tutorial kedua cara membuat form kontak ini kepda anda.

1. Membuat Form Kontak Kami dengan HTML

Caranya cukup mudah, anda tidak perlu mahir menggunakan html karena sudah ada orang yang membuatkannya untuk anda. Script ini saya dapatkan dari arlina dezgn.

Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.
<form id="kontak-arlina" name="contact-form">
 <input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
 <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" />
 <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '3383454566325919469';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3383454566325919469','//infiniteidn.blogspot.com/','3383454566325919469');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '3383454566325919469', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
b. Kemudian buka dashboard blogger anda. Pilih “Halaman” > “Halaman Baru”.

c. isikan judul halaman dengan “contact us”. Pilih tab “HTML” dan pastekan kodingan tadi. Jangan lupa untuk mengubah :

Ganti semua kode 3383454566325919469 di atas dengan kode ID blog Anda.
Ganti kode //www.elbongultom.com/ di atas dengan url blog Anda.

d. Lalu klik “publikasikan”. Dan sekarang anda bisa lihat halaman kontak anda akan seperti ini.

seperti itulah pembuatan contact us di blog atau website yang bisa menjadikan acuan untuk profesional dan terlihat elegan maupun terbaik.