Cara Membuat Contact Form Sederhana Pada Halaman Blog

Cara Membuat Contact Form Sederhana Pada Halaman Blog - Contact Form seringkali disebut juga sebagai halaman "Contact Me" atau "Kontak Saya", adalah bagian terpenting dari blog/website yang berfungsi sebagai media korenspondensi formal dan personal. Meskipun sudah ada banyak media lain, namun halaman kontak menjadi pilihan karena menjaga privacy bagi kedua belah pihak, yaitu pemilik blog/website dan visitor/customer. Form ini juga berfungsi menghindari spam yang dikirim melalui email.

Oleh karena itu, untuk menghindari resiko tersebut digunakanlah contact form. Saya sendiri telah merasakan banyak manfaat dari penggunaan Contact Form ini, hampir setiap hari ada visitor yang menggunakan Contact Form untuk menanyakan beberapa hal, bertanya tentang tips-tricks blogger, memasang iklan, meminta jasa membuat blog, SEO dan lain-lain. Baru setelah ada korespondensi lebih lanjut, saya menggunakan media email/chat secara langsung.

Untuk blog, bisa di buat dihalaman beranda, juga bisa laman statis, apa itu laman statis, laman statis itu ya laman blog. disini, admin memberikan tutorial membuat halaman contact us atau contact form bukan melalui generator generator. tapi melalui kode html.

Perbedaannya terletak dari segi penampilan, kalo dari generator generator KELBEG seperti foxiform, 123contactform, dll, tampilannya lebih jelek dan ada watermarknya, dan saat dikirimkan memuat lama sekali, dan mereka pun sambil beriklan disitu.

Oleh karena itu ikuti tutorial lengkapnya 

Cara Membuat Contact Form Sederhana di Halaman Blog

#Langkah Pertama
Login ke beranda blogger, masuk kebagian tata letak dan buat atau tambah gadget.

#Langkah Kedua

Pergi ke beranda blog lagi, buka template, dan klik edit HTML cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>

<style type='text/css'>

#ContactForm1{display:none}

</style>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<style type='text/css'>

/* Contact form */

#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:auto;margin:5px auto 15px;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}

#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0}

#ContactForm1_contact-form-email-message{width:95%;height:170px;margin:5px auto;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;font-family:Arial,sans-serif;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}

#ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#f4836a;box-shadow:0 4px 0 0 #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0 1px 0 #de5135}

#ContactForm1_contact-form-submit:hover{background-color:#f5785f}

#ContactForm1_contact-form-submit:active{position:relative;top:2px;box-shadow:0 2px 0 0 #c75b45}

#ContactForm1_contact-form-submit:focus{outline:0}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}

@media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}

}

@media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{margin:0 15px}

}

</style>

</b:if>

#Langkah Ketiga
Kembali ke dashboard blogger, klik laman dan klik lagi laman baru. Masuk ke mode HTML "bukan compose", dan masukan Kode HTML ini

<div dir="ltr" style="text-align: left;" >
Silahkan isi form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan.
<br />
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div class="clear">
</div>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Selesai, Jangan lupa buat judul pada laman tersebut sebelum mempublish laman tersebut, sekian tutorial cara membuat contact form sederhana pada halaman blog atau yang disebut kontak kami / kontak saya, jangan lupa buka www.bangtutorial.xyz untuk update seputar blogging, phising, dan trick trick lainya, terimakasih sudah berkunjung :)