Cara Membuat Contact Form Us Di Blog

Cara Membuat Halaman Contact Form Di Blog

untuk pengguna blogger sekarang blogger telah menyediakan widget yang berisi form contact , sayangnya widged ini hanya bisa di tempelkan dari layout yang ada , jadi kamu tidak bisa menampilkan widget ini pada halaman khusus.

Apabila kamu ingin meletakkan widget tersebut kehalaman seperti halaman contact us, anda harus memodifikasinya sedikit pada scriptnya.

Membuat halaman contact di blogger


karena secara default contact form ini hanya bisa dipasang di widget kita perlu melakukan beberapa trick agar contact form tersebut bisa digunakan di sebuah halaman, untuk itu ikuti langkah langkah dibawah ini dengan bijak.

Menambahkan Widget


1. pertama anda harus menambahkan widget contact form kedalam halaman yang kita buat , caranya buka halaman Layout > Add gadged > Contact form

seperti contoh gambar dibawah ini :

Modifikasi widget

setelah berhasil menambahkan widget selanjutnya kita buka menu template dan pilih edit html dan cari widget yang bernama Contact Form. setelah menemukannya hapus kode dibawah ini



setelah mengambil kode yang saya tandai di atas , sekarang saatnya membuat sebuah halaman contatc form

Membuat Halaman Contact

Buka menu Page/Halaman lalu buat Laman Baru. pilih mode HTML dan copy kode dibawah iini dan pastekan di Laman yang mau anda buat tadi.

<div class="widget ContactForm" id="ContactForm1"> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <i class="fa fa-user"></i> Name: <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> <br /> <i class="fa fa-envelope-o"></i> E-mail:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <br /> <i class="fa fa-pencil-square-o"></i> Message: <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br /> <input class="contact-form-button contact-form-button-submit fa-user" id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <br /> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> <br /></form>

Setelah itu, coba publish halaman contact form yang sudah kamu buat. Apa yang muncul di halaman tersebut? Mungkin tampilannya akan berbeda dengan halaman contact form saya, karena pada halaman milik saya ada modifikasi css sehingga bisa jadi tampak lebih cantik dari halaman milik Anda :D.