Membuat Contact Form /Contact Us Memakai Widget Blogspot Dan Cara Memasang Di Halaman Statis

Selamat malam sobat blogger kali ini Elsa Viara Blog akan sharing cara membuat contact form memakai widget contact form yang di sediakan oleh flat form blogger .

Namun pada pemasangan nya kali ini sangat berbeda karena sobat akan saya ajak untuk melakukan pengeditan sedikit sehingga menjadi kelihatan lebih enak di lihat dan di gunakan .

Artikel ini saya buat hasil referensi dari blog para master blogger yang terlebih dahulu sudah bergelut di bidang blogging ,ada dua cara pembuatan nya ,saya akan peraktek memakai widget default dan yang telah di edit .

Bagai mana langkah nya ? Kurang lebih sebagai berikut !

Memasang Widget Contact Form Default Blogger

Sobat login ke blogger
Pilih Widget/Tata Letak (Terserah sobat mau memilih widget di bagian manapun )
Kemudian Sobat Save/simpan, jika kurang faham coba lihat gambar berikut

Dan sampai di sini sobat telah selesai membuat selesai Contact Form di blogger memakai widget contact form ,lalu bagai mana cara memasang nya di halaman statis biar enak di lihat ,berikut langkah penerapan pada halaman stais .

Penerapan Contact Form Pada Halaman Statis

Patikan sobat telah memasang widget contact form default dan cara pemasangan nya seperti artikel di atas yang telah sobat baca .
Sobat buat pages/halaman baru dengan memasukan code di bawah pada mode HTML dan ingat jangan di mode Compose .


<center><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></center>

Yang saya kasih tanda merah bisa sobat rubah menjadi bahasa inggris Jika blog sobat membahas artikel berbahasa inggris

Sebelum sobat publikasikan seting terlebih dahulu option yang ada pada postingan halaman statis yang berada di sisi kanan ,lihat gambar .
Agar tampilan contact form default belogger tidak muncul di blog dan hanya tampil di halaman statis saja ,sobat tambahkan kode CSS dibawah ini dalam template sobat dan simpan sebelum ]]></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;
}

Alhamdulillah selesai sampai di sini ,jika sobat ingin mengetahui hasil nya sobat bisa melihat Contact Me Elsa Viara Blog bagaimana tanggapan sobat lebih enak di lihat bukan ,dan untuk mengetahui contact form nya bekerja atau tidak silahkan sobat test sendiri mengirim pesan melalui form tersebut dan cek pada email masuk sobat apakah ada pesan yang sobat kirim ,nah demikian Cara Membuat Contact Form /Contact Us Memakai Widget Blogspot dan cara pemasangan nya ,semoga membantu sobat dan bermanfaat .