Anto Tunggal

Ilmu Komputer dan Desain Grafis

April 12, 2017

Cara Membuat Halaman Contact Form di Blog dengan Mudah

Cara Membuat Halaman Contact di Blog - Halaman Contact Form atau sering disebut juga dengan Contact Me adalah sebuah halaman khusus yang berfungsi untuk mengirimkan sebuah pesan untuk pemilik blog. Ini sangat penting, karena jika seorang pengunjung blog ingin mengajak bekerja sama dan dia ingin kontak Anda tapi di blog tidak ada halaman kontak, maka ini akan merugikan diri sendiri.

Menu contact ini memiliki peran yang sangat penting dalam sebuah blog, seperti yang saya katakan di atas bahwasannya seseorang lebih cenderung memilih melakukan contact kepada pemilik blog menggunakan halaman blog yang tersedia. Jarang seseorang melakukan kontak penting melalui kolom komentar.
Cara Membuat Contact Form di Blog

Untuk itu, sebaiknya tempatkan halaman contact pada blog Anda. Karena dengan ini seseorang yang ingin menghubungi Anda akan lebih mudah karena adanya menu halaman contact form.

Pada pengaturan default, blogger tidak menyediakan halaman contact. Blogger hanya menyediakan menu form contact untuk diletakkan di sidebar saja. Jadi setiap pemilik blog harus secara manual membuat menu halaman contact ini.

Namun jangan khawatir, pada kesempatan kali ini saya akan memberikan caranya.

Cara Membuat Menu Formulir Kontak di Blogspot

Untuk membuatnya sangat mudah. Tidak perlu menggunakan website penyedia layanan contact form untuk membuat contact us di blogspot ini. Pada kesempatan kali ini, yang akan digunakan adalah kode dari kompiajaib.com.

Berikut adalah caranya:

1. Pasang Widget Contact Form (Formulir Kontak) terlebih dahulu di Tata Letak Blogger. Caranya masuk ke Dashboard Blogger > Tata Letak > Tambahkan Gadget > Gadget Lainnya > Formulir Kontak. Lihat gambar.

Cara Membuat Halaman Contact Us

2. Selanjutnya adalah memasang kode CSS ke template. Caranya masuk ke Dashboard Blogger > Tema (Template) > Edit HTML. Letakkan kode CSS di bawah ini tepat di atas 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>

3. Jika sudah, saatnya memasang halaman Contact di halaman Statis. Caranya masuk ke Dashboard Blogger > Laman > Laman Baru > pilih HTML. Kemudian hapus semua code yang ada lalu copy dan paste kode ini  pada laman baru tersebut. Kemudian simpan.
<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 deh, semoga artikel cara membuat contact us, contact me, contact form, atau halaman kontak di blog ini bisa bermanfaat untuk Anda semua.
Terima kasiih.

Rekomendasi Untuk Anda × +
0 Komentar untuk "Cara Membuat Halaman Contact Form di Blog dengan Mudah"

Silahkan berkomentar

Contact Form

Name

Email *

Message *

Back To Top