Cara Membuat Halaman Formulir Kontak di Blogger

Cara Membuat Halaman Formulir Kontak di Blogger

Cara Membuat Formulir Kontak (Contact Form) di Halaman  Statis Blogger.

Cara Membuat Halaman Statis Formulir Kontak ini melengkapi sekaligus update tips cara membuat form kontak sebelumnya.

Yang ini model lain lagi. Desain formulir kontak di halaman statis ini dari blog Kang Ismet. seperti di bawah ini:

Cara Membuat Halaman Formulir Kontak di Blogger

Cara Membuat Halaman Formulir Kontak di Blogger

Cara membuat halaman statis form kontak di blogegr sebagai berikut.

1. Klik Layout > Add a Gadget di sidebar
2. Klik More Gadgets > klik/pilih Contact Form


pilih Contact Form

3. Save!
4. Geser Widget Contact Form ke posisi paling bawah.

Tahap berikutnya Membuat Halaman Formulir Kontak di Blogger

1. Klik Template > Edit HTML
2. Cari kode ]]></b:skin>
3. Copas kode berikut ini di atas kode tadi:

.widget.ContactForm,.widget #ContactForm1{display: none !important;}
4. Save!

Langkah selanjutnya adalah membuat halaman khusus form kontak:

1. Klik Page > New Page
2. Segera isi judul halaman dengan Kontak
3. Klik mode HTML
4. Copas kode berikut ini:

<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">
#comments, #blog-pager, .breadcrumbs, .post-footer{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;
}
</style>

5. Di menu pilihan (option) sebelah kanan, pastikan setting halaman form kontaknya seperti ini.

Cara Membuat Halaman Formulir Kontak di Blogger


6. Klik Publish!

Beres. 
Silakan uji coba.

Demikian Cara Membuat Halaman Formulir Kontak di Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Labels: Desain Blog

Related Posts

8 Komentar untuk "Cara Membuat Halaman Formulir Kontak di Blogger"

gak usah dipakai kalo gak work, cari yang lain :)

saya sudah coba dan alhamdulillah sukses terus langkah selanjutnya itu bagaimana caranya mengisi menu navigasinya dengan informasi kita...???

mau nanya nih master, cara mengisi menu navigasi about, sitemap dll saat di klik itu berisi informasi kita, bagaimana caranya....???
terimakasih

Bikin halaman (page) dengan nama About, Sitemap, Disclaimer, dll. Cek: http://www.contohblog.com/2015/08/cara-membuat-menu-about-sitemap-blogger.html

Terima kasih...
Bagu sekali dipasang di blog saya...
Sangat bermanfaat...

cara membeli domains gimana bos

Ada di bagian paling bawah halaman ini: http://www.contohblog.com/p/galeri-template.html

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *