Cara membuat Contact Form pada Blogspot

Contact Form sangat penting dipasang pada blog maupun website. Karena dengan adanya Contact Form ini maka kita sebagai pemilik blog atau website bisa dengan mudah dihubungi oleh pengunjung jika ada hal-hal yang ingin disampaikan berupa masukan, pertanyaan, permintaan, komplain dan lainnya.

Blogspot memiliki widget Contact Form. Kita bisa dengan mudah mengaktifkannya yaitu melalui pengaturan Layout dengan menambah widget (add a widget) seperti biasanya. Tapi masalahnya adalah Contact Form tersebut akan tampil disemua halaman blog kita. Jadi terlihat sangat tidak menarik.

Dalam artikel ini kita akan memasang Contact Form tersebut terpisah hanya di satu halaman saja.

Ikuti langkah-langkah berikut ini tentang cara membuat Contact Form pada Blogger:

Login ke Blogspot anda, pada halaman Admin pada menu sebelah kiri klik "Layout"

Klik "Add a Gadget"

Dari menu yang tampil klik "More Gadgets" kemudian klik lambang + (plus) untuk menambah widget Contact Form pada blog anda.

Klik "Save" tidak perlu mengubah titelnya karena kita akan menghapus ini nantinya.

Kembali di halaman Admin pada menu sebelah kiri klik "Theme" kemudian "Edit HTML"

Cari tag seperti berikut ini, klik tanda panah untuk melihat kode didalamya.

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' visible='true'>...</b:widget>

Hapus semua kode diantara tag <b:includable id='main'> dan </b:includable>

Setelah dihapus akan terlihat seperti berikut:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' visible='true'>
<b:includable id='main'>
</b:includable>
</b:widget>

Sekarang geser ke bagian atas kode HTML template anda, cari kode berikut dan klik tanda panah untuk melihat kode didalamnya.

<b:skin>...</b:skin>

Berikut adalah kode CSS untuk Contact Form yang kita buat, anda bisa mengubah untuk menyesuaikannya dengan template blogspot anda.

#contact-form{margin-bottom:20px;}
.contact-form-name,.contact-form-email,.contact-form-email-message {max-width:240px;margin:12px 0;padding-left:10px;}
.contact-form-email-message{padding:10px;max-width:100%;}
.contact-form-button-submit{margin-bottom:12px;cursor:pointer;border:1px soild #000;font-weight:bold;color:#fff;background:#3F3F3F;}
.contact-form-button-submit:hover{background:#000;}

Salin kode CSS diatas dan tambahkan dibagian akhir sebelum tag ]]></b:skin>

Simpan Template blogspot anda.


Kembali lagi di halaman Admin pada menu sebelah kiri klik "Pages" kemudian "New Page"

Blogger tidak mengijinkan kita mengubah permalinks pada halaman blogspot, jadi jika anda ingin membuat Contact Form dengan link berakhir dengan "contact.html" ikuti tips berikut:

Salin (copy) teks berikut tanpa tanda kutip "Contact" kemudian nanti setelah meng-klik "New Page" sesegera mungkin langsung paste-kan teks yang sudah anda copy tersebut pada bagian titel.

Setelah anda membuat halaman baru dengan titel Contact, salin kode HTML Contact form berikut ke dalam dokumen anda:

<form name="contact-form">
 <p>Your Name</p>
 <p><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text"></p>
 <p>Your Email (required)</p>
 <p><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text"></p>
 <p>Your Message (required)</p>
 <p><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="6"></textarea></p>
 <p><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send Message" type="button"></p>
 <div style="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>
</div>

Anda bisa menambahkan kata-kata anda sendiri pada bagian atas kode HTML, seperti yang anda lihat dalam contoh dibawah:

Sebelum halaman Contact Form di-Publish, masuk ke pengaturan halaman dan blok form komentar agar pengunjung tidak bisa meninggalkan komentar pada Contact Form anda.

Untuk menghilangkan footer untuk halaman Contack Form anda, tambahkan kode CSS berikut pada bagian bawah kode HTML Contack Form.

<style type="text/css">.post-footer {display: none;}</style>

Berikut adalah contoh langsung Contact Form pada blog ini.

http://internet-teknologi-informasi.blogspot.com/p/contact.html

Demikianlah cara membuat Contact Form pada Blogspot atau Blogger mudah-mudahan ber-manfaat.