Senin, 16 Januari 2017

Membuat Form Kontak Pada Blogger

Gambar 1. Panduan lengkap membuat form konta 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
  • etc

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

Pada postingan sebelumnya, Lombok blogger pernah membahas Bagaimana Membuat Formulir online menggunakan google form, silahkan anda lihat postingannya melalui link berikut : Membuat formulir online menggunakan google form.

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

formulir kontak
Gambar 2. Menampilkan formulir kontak pada widget blogger


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 lombok blogger. Email yang dikirim dari kontak formulir akan masuk ke email pada tab Sosial.

Bagi yang masih kurang jelas bagaimana membuat formulir kontak pada blogger, berikut video tutorialnya.


Video Tutorial Cara Membuat Form Kontak Pada Blogger



Jika sobat blogger menyukai apa yang kami tulis di blog ini, jangan lupa untuk like fanpage facebook Lombok blogger, sekian terimakasih.

Newsletter

Berlangganan artikel terbaru dari blog ini langsung via email.

Masih aktif menulis dibeberapa Blog dan website. Menjadi web designer di Sasambo Desain. Hobi travelling, reading, climbing, camping, hiking, swimming, and boxing

7 komentar

Bermanfaat bro, mampir blog ane .

Ok gan, terimakasih sudah mampir di Lombok Blogger

bagusnih gan buat blog jualan ane.

ok Gan, semoga blog jualannya semakin lancar dengan memasang kontak form :D

keren kali gan postingannya... saya klik iklannya sebgai terimakasih...

Itu nanti pesan yang dikirimnya masuk ke mana?

Terimkasih sudah berkunjung ke Lombok Blogger. Budayakan untuk berkomentar yang baik dan sesuai dengan materi postingan, komentar yang terlalu singkat kami anggap Spam dan tidak kami tanggapi
EmoticonEmoticon