Cara Membuat Contact Form di Blogger

Cara Membuat Contact Form di Blogger

pasang contact form pada halaman statis blogger

Harianto.tk-Pernah melihat sebuah contact form ? ya biasanya contact form merupakan sebuah layanan untuk website jual-beli profesional kan ?

tapi jangan salah blogger juga bisa membuat contact form loh ! tidak percaya ? silahkan kunjungi link blog carnival saya
http://www.harianto.tk/p/carnival.html 

Tertera jelas di bawah situ terdapat contact form bukan ? nah sebenarnya blogger sendiri sudah mempunya widget contact form namun hanya dapat di pasang di side bar dan kebanyakan orang tidak menyukai itu mereka  lebih memilih menempatkan contact form pada halaman statis atau halaman posting(termasuk saya hehe) jadi artikel kali ini akan membahas
 bagaimana Cara Membuat Contact Form di Blogger

urutan tata cara yang harus dilakukan

1. add gadget contact form
2. buat halaman statis/halaman posting untuk contact form
3. modifikasi widget contact form di html

cukup sederhana bukan ? langsung saja prakteknya
Sebelum memulai alangkah baiknya save template anda agar tidak terjadi hal yang tidak di inginkan ! !

langkah ke-1 Tambahkan widget/gadget contact form ke blog anda

untuk sementara biarkan saja seperti itu
 Langkah ke-2 masukan code html berikut di halaman statis untuk contact form anda

• Untuk menambahkannya, masuk ke Laman - Laman baru - Laman kosong. Tambahkan kode dibawah ini pada mode HTML bukan Compose

<form name="contact-form"> <p></p> Nama <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <p></p> Alamat Email <span style="color: red; font-weight: bolder;">*</span> <p></p> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <p></p> Isi Pesan <span style="color: red; font-weight: bolder;">*</span> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <p></p> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <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 type="text/css"> /* Menyembunyikan elemen dalam postingan */ #comments, #blog-pager, .breadcrumbs, .post-footer{display:none} </style>

• selanjutnya pada menu pilihan(pojok kanan paling bawah) pilih tekan "Enter" untuk baris baru

• Klik Publikasikan

Langkah ke-3 menyembunyikan widget contact form di sidebar dan menambahkan css kedalam kode
]]></b:skin>
template-edit html(gunakan ctrl+f untuk mempermudah)-]]></b:skin>
paste kan kode dibawah ini tepat di atas kode ]]></b:skin>

  /* CSS Contact Form */ #ContactForm1{ display:none; } #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ width: 300px; height:auto; margin: 5px auto; padding: 10px; background: #f2f2f2; border: 1px solid #ccc; color:#777; } #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{ background: #fffff7; } #ContactForm1_contact-form-email-message{ width: 450px; height: 175px; margin: 5px auto; padding: 10px; background: #f2f2f2; border: 1px solid #ccc; color:#777; font-family:Arial, sans-serif; } #ContactForm1_contact-form-submit { width: 101px; height: 35px; float: left; color: #FFF; padding: 0; margin: 10px 0 3px 0 0; cursor: pointer; background: #5E768D; border: 1px solid #556f8c; border-radius:3px; } #ContactForm1_contact-form-submit:hover { background:#435c74; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 450px; margin-top:35px; }

Klik save selesai
semoga artikel ini bermanfaat -
bantu saya menjadi penulis yang lebih baik dengan share artikel ini kepada teman-teman anda
terima kasih- Harianto.tk

Facebook

Twitter

Google+

Pinterest

Posted by : HARIANTO

1 Comment

Selasa, 26 Mei 2015