Membuat form contact us pada page

Kenapa sih perlu mebuat page Contact Us ?

Dengan adanya page ini, dengan form di dalamnya adalah form yang dapat digunakan oleh para pengunjung untuk mengirimkan pesan melalui email ke pemilik blog (penulis) maka akan terjadi interaksi dua arah antara penulis dan pembaca.

Bayangkan jika sebagai penulis, lalu ternyata saat menulis artikel terdapat beberapa kesalahan, yang biasanya disadari oleh pembaca. maka dengan adanya form ini pembaca bisa membantun penulis dengan memberitahukan penulis melalui email. Jadi intinya form ini perlu ada, supaya penulis juga merasa bahwa tidak hanya sekedar membaca yang ketika terjadi error tidak tahu harus mencari kemana solusinya.

Kenapa harus dengan cara ribet, kenapa tidak menggunakan layanan yang di sediakan pihak ketiga (web lain) ?

sederhananya begini, jika sudah ada di sediakan oleh blogger sendiri, kenapa harus menggunakan layanan lain yang blm terjamin keamanannya, belum lagi kita juga diharuskan mengiklankan produknya pihak ketiga tersebut.

Nah berangkat dari masalah tersebut, maka penulis mencoba membuat catatan ini, catatan bagaimana sih caranya untuk membuat form yang bisa digunakan untuk mengirim pesan ke pihak penulis blog tanpa harus menggunakan layanan pihak ketiga.

Ok, Cekibrot ..

Click gambar untuk memperbesar gambar

seperti pada gambar:

1. masuk ke menu layout pada blogger

2. klik pada add widget (terserah mau di tambahkan pada widget posisi mana saja)

Tenang saja, karena widget ini akan kita hidden, jadi buat saja terlebih dahulu.

3. ketika sudah muncul window daftar widget, pilih contact form

Click gambar untuk memperbesar gambar

4. ketika muncul window seperti gambar di atas, klik save saja.
Ok, seperti yang saya sebutkan pada no 2, kita akan hidden contact form ini.
begini caranya :

Click gambar untuk memperbesar gambar

5. Masuk ke menu theme pada blogger, lalu pilih Edit HTML.

6. Setelah muncul halaman edit HTML , carilah dulu id dari contact form, seperti gambar di bawah ini.

Click gambar untuk memperbesar gambar

NOTE : Pada kasus saya, contactform saya ber id "ContactForm2"
7. Catat id nya, lalu cari lagi kode "b:skin" (tanpa tanda kutip) pada halaman Edit HTML.

8. Cari b:skin yang ada di ujung yang seperti ini "</b:skin>".
9. Jika sudah copy code berikut : "div#ContactForm2 {display: none !important;}" tanpa tanda petik
10. Pastekan tepat seperti gambar berikut

Click gambar untuk memperbesar gambar

NOTE : ContactForm2 di samakan dengan id yang di dapat pada langkah no 6-7.
NOTE : Sampai tahap ini, seharusnya widget contact form tidak muncul pada widget yang sudah di pilih tadi.

11. Ok, sekarang kita lanjut untuk membuat Page. Masuk pada menu Pages pada blogger.

Click gambar untuk memperbesar gambar

12. Lalu klik New page

13. Setelah masuk ke halaman page baru.

14. Buat Judul Pages sesuai keinginan

15. Lalu Klik pada opsi HTML.

Click gambar untuk memperbesar gambar

16. Selanjutnya, silahkan copy code berikut :

<div dir="ltr" style="text-align: left;" trbidi="on">

<div class="widget ContactForm" id="custom_ContactForm2">

<div class="contact-form-widget">

Jika ingin komentar terhadap artikel yang penulis telah tulis di blog, silahkan tinggalkan di kolom komentar.<br />

<br />

Jika ingin merequest terhadap (penulis) untuk menuliskan artikel terkait sesuatu yang belum ditulis oleh penulis, silahkan kirimkan email melalui form di bawah ini.<br />

<br />

Jika ingin mengirimkan kritikan dan saran juga silahkan kirimkan email ke (penulis) melalui form dibawah ini.<br />

<br />

<div class="form">

<form name="contact-form">

Name :<br />

<input class="contact-form-name" id="ContactForm2_contact-form-name" name="name" size="30" type="text" value="" />

<br />

<br />

Email

<span style="font-weight: bolder;">* </span>:<br />

(penting, supaya penulis bisa membalas email anda)<br />

<input class="contact-form-email" id="ContactForm2_contact-form-email" name="email" size="30" type="text" value="" />

<br />

<br />

Message

<span style="font-weight: bolder;">*</span>:<br />

<textarea class="contact-form-email-message" cols="25" id="ContactForm2_contact-form-email-message" name="email-message" rows="5"></textarea>

<br />

<input class="contact-form-button contact-form-button-submit" id="ContactForm2_contact-form-submit" type="button" value="Send" />

<br />

<div style="max-width: 222px; text-align: center; width: 100%;">

<div class="contact-form-error-message" id="ContactForm2_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm2_contact-form-success-message">

</div>

</div>

</form>

</div>

</div>

<div class="clear">

</div>

<br />

<div class="clear">

</div>

</div>

<br /></div>

NOTE : dari semua id yang ada di code sebelumnya, harus di sesuaikan dengan id yang di dapat pada no 6-7.

NOTE : misalnya id yang di dapat dari no 6-7 adalah ContactForm1, maka ubahlah id yg ada di code sebelumnya menjadi ContactForm1.

NOTE : jika id di code yang baru saja panjang (tidak hanya ContactForm2), maka yang perlu dirubah hanya pada bagian ContactForm2 nya saja.

Example : ContactForm2_contact-form-success-message dirubah menjadi ContactForm1_contact-form-success-message.

17. Selanjutnya, pastekan kode tadi ke halaman Page tadi.

Click gambar untuk memperbesar gambar

18. save page.
19. buka page yang sudah dibuat tadi.
20. seharusnya hasilnya sudah mirip dengan punya saya (Penulis)

Selesai.

Jika ada kritikan atau Saran, silahkan tinggalkan komentar.

Thx.