Contact Form Blogger di Halaman Statis

Cara mudah memasang Formulir Kontak atau Contact Form pada static page atau halaman statis blogger.

Sebelumnya, saya telah menerbitkan artikel cara memasang Formulir Kontak di Blogger, baca artikel Cara Memasang Formulir Kontak atau Contact Form di Blogger. Formulir kontak blogger ini bisa disesuaikan dengan mudah melalui CSS. Jadi Anda dapat mengganti gaya atau tampilannya sesuai dengan gaya template. Contohnya seperti pada blog ini.

Selain itu Anda juga dapat menambahkan formulir ini ke dalam halaman statis blog sehingga formulir kontak ini tampil pada sebuah halaman khusus bukan pada sidebar. Terdengar keren bukan?

Mula-mula tambahkan Formulir Kontak Untuk Blog Anda. Jika Anda belum tahu caranaya, silahkan baca artikel Cara Memasang Formulir Kontak atau Contact Form di Blogger. Anda harus memiliki gadget ini pada sidebar atau element lainnya (misalnya di footer) sebelum menambahkan widget formulir kontak ini ke halaman statis blog.

Selanjutnya Anda harus sembunyikan widget Formulir Kontak ini dari Sidebar, sehingga nanti widget ini hanya akan tersedia pada halaman kontak situs Anda saja.

Sisipkan CSS berikut ini di atas tag ]]> </ b: skin>

#ContactForm1{
display: none ! important;
}

Simpan template Anda.

Nah, setelah Anda menambahkan widget Formulir Kontak pada sidebar lalu setelah itu menyembunyikannya dari sidebar dan kini saatnya membuat sebuah halaman statis. Halaman statis inilah tempat Anda meletakkan Formulir Kontak.

Buatlah sebuah halaman statis. Anda tentu sudah bisa, kan? Jika belum, Buka dashboard blogger Anda, pilih Laman > Laman baru > Laman kosong lalu beri judul "Contact" atau "Kontak". Klik tab html (di samping tab compose) pada editir post laman lalu copy dan paste-kan kode di bawah ini di dalamnya.

<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' />
<p></p>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Pratinjau untuk melihat hasil, atau klik Publikasikan untuk menerbitkan halaman. Selesai. Silahkan baca artikel CSS untuk Contact Form Blogger untuk menambahkan gaya Formulir Kontak atau Contact Form blog Anda.

Selamat belajar.