Membuat Form Kontak Blogger

Panduan lengkap membuat form kontak pada blogger

Ada dua cara yang bisa digunakan untuk membuat form kontak pada blogger, yakni dengan menggunakan jasa layanan pihak ketiga atau dengan menggunakan fitur bawaan dari blogger.

Layanan pihak ke-3 yang bisa anda gunakan diantaranya :

FOXYFORM
123 Contact Form
FormSpring
Kontactr
PagePow
My Contact Form
Email Me Form
dll

Tapi pada kesempatan ini, Birru.Net akan membahas bagaimana membuat form kontak pada blogger menggunakan fitur bawaan dari blogger.

Membuat form kontak diperlukan ketika anda membuat halaman statis seperti “contact us” atau “hubungi kami” yang didalam halaman statis tersebut anda ingin menampilkan formulir kontak agar pengunjung bisa lebih mudah menghubungi anda via email langsung dari blogger. Atau anda yang memiliki blog jualan, dan ingin menampilkan form kontak pada postingan jualanan anda.

Anda juga bisa menampilkan form kontak langsung pada widget blog anda, dengan langsung menambahkan widget “formulir kontak”, maka formulir kontak akan langsung tampil pada bar sisi Blog. Jika nantinya pengunjung mengisi formulir tersebut, blogger akan langsung mengirimkan email ke email yang anda gunakan untuk login ke blogger.com

Cara Membuat Form Kontak pada Blogger

Untuk menampilkan formulir kontak pada halaman statis blogger, atau pada halaman postingan, Langkah pertama anda harus menambahkan widget “formulir kontak” terlebih dahulu seperti pada gambar.2 diatas.

Setelah anda berhasil mendambahkan widget Formulir kontak pada bar sisi, langkah selanjutnya adalah menyembunyikan widget formulir kontak tersebut.

Cara menyembunyikan formulir kontak dari bar sisi adalah dengan menambahkan kode css berikut pada css template blog Anda.

Kode.1 css :

#ContactForm1,#ContactForm1 br{display:none;visibility:hidden}

Bagi anda yang belum terbiasa bongkar pasang kode css pada template, silahkan ikuti langkah berikut. Login ke Blogger Anda, Masuk ke menu TEMPLATE + EDIT HTML

Selanjutnya klik pada kode template, tekan tombol Ctrl+f pada keyboard dan temukan kode berikut

]]></b:skin>

Setelah kode tersebut anda temukan, tepat diatasnya, pasang Kode.1 css untuk menyembunyikan formulir kontak dari bar sisi blog anda.

Kenapa disembunyikan?

Karna kita ingin menampilkan formulir kontak pada halaman statis dan postingan, maka jika kita biarkan terlihat di bar sisi blog, maka akan terdapat double formulir kontak dalam satu halaman.

Kita akan menampilkan formulir kontak pada halaman statis dan postingan, kenapa harus menambahkan widget terlebih dahulu, lantas setelahnya disembunyikan?

Jika kita hanya menambahkan kode formulir kontak saja, tanpa menambahkan widget pada bar sisi,

maka formulir kontak pada halaman statis atau pada postingan tidak akan bekerja, sehingga pesan yang dimasukkan pengunjung tidak akan terkirim.

Langkah kedua, pasang kode formulir kontak dibawah berikut ini pada halaman statis atau postingan. Misalkan anda ingin memasang formulir kontak pada halaman “kontak” blog anda.

Silahkan buat halaman baru, beri nama halaman “hubungi kami” atau “contact”, aktifkan mode pengeditan HTML, kemudian pasang kode formulir kontak dibawah ini.

Kode.2 Formulir Kontak :

<form name=”contact-form”>
Name
<input id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” />

Email Address <span style=”color: #f56954; font-size: x-small; font-weight: bold;”>important</span>
<input id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” />

Content <span style=”color: #f56954; font-size: x-small; font-weight: bold;”>important</span>
<textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” rows=”5″></textarea>
<input id=”ContactForm1_contact-form-submit” type=”button” value=”Send” />
<br />
<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>
<style scoped=”” type=”text/css”>
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;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:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
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>

Demo bisa anda lihat pada halaman kontak Birru.Net Email yang dikirim dari kontak formulir akan masuk ke email pada tab Sosial.

Jika sobat blogger menyukai apa yang kami tulis di blog ini, jangan lupa untuk like fanpage facebook Birru.Net, sekian terima kasih.

Cara Membuat Form Kontak pada Blogger

Berita Terkait

Tinggalkan Balasan Batalkan balasan