Membuat Form Kontak Blogger

2 min read

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 :

Baca Juga
  • 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.

Baca Juga

Google AdSense adalah platfrom layanan periklanan web terbesar yang ada saat ini. Adsense bisa dibilang sebagai solusi pertama yang terpikirkan ketika akan menampilkan iklan...
MusaBA
48 sec read

Tips Mendapatkan Penghasilan Hingga Ratusan Ribu Perhari Bisa Anda…

Untuk Tips Mendapatkan Penghasilan banyak perharinya anda mesti melalukan berbagai cara, mulai dari usaha bisnis, kerja, bisnis online, invest dll. Tetapi kebanyakan orang ingin...
MusaBA
4 min read

Mengenal Software Desain Grafis

   seiring dengan perkembangan zaman, kini software-software grafis pun mengalami kemajuan yang sangat pesat. Misalnya saja CorelDRAW telah mencapai versi 19,  Photoshop dan InDesign...
MusaBA
9 min read

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!