Cara Membuat Form Kontak di Halaman Statis Blogger

Baca Juga

FORM Kontak adalah formulir yang memudahkan pengunjung menghubungi admin sebuah blog/website. Berikut ini Cara Membuat Form Kontak di Halaman Statis Blogger.

Dengan membuat form kontak di halaman statis blog, kita memudahkan pembaca atau pihak berkepentingan menghubungi kita dengan mudah.

Contohnya halaman kontak blog ini.

Contact form for Blogger ini terdiri dari:

• Kolom Nama 
• Kolom Email
• Kolom Pesan
• Tombol Kirim (Submit)

Berikut ini screen shot-nya.

Bagus kan formulir kontaknya? Yuk, kita bikin sekarang. Begini caranya.

Cara Membuat Form Kontak di Halaman Statis Blogger

Berikut ini Cara Membuat Form Kontak di Halaman Statis Blogger. Login ke Blogger. 

Langkah 1: Tambahkan Widget Kontak di Sidebar

Di Dashboard Blogger, klik Layout (Tata Letak)

1. Di sebelah kanan Anda, klik Add a Gadget (Tambahkan Gadget)

2. Cari dan pilih/klik Contact Form (Form Kontak). Judul Widget kosongkan!

3. Save! Simpan.

Langkah 2: Tambahkan Kode CSS di Template

Klik Theme (Tema) > klik tand panah di Customize > pilih Edit HTML. 

Copas kode berikut ini di atas kode ]]></b:skin> 

/* Contact Form */

.contact-form-widget {width: 500px;max-width: 100%;margin: 0 auto;padding: 10px;background: #F8F8F8;color: #000;border: 1px solid #C1C1C1;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);border-radius: 10px;}
.contact-form-name, .contact-form-email, .contact-form-email-message {width: 100%;max-width: 100%;margin-bottom: 10px;}
.contact-form-button-submit {border-color: #C1C1C1;background: #E3E3E3;color: #585858;width: 20%;max-width: 20%;margin-bottom: 10px;}
.contact-form-button-submit:hover{background: #4C8EF9;color: #ffffff;border: 1px solid #FAFAFA;}

Save! Simpan Template!

Langkah 3: Hapus Kode Widget

Masih di template, cari (Ctrl+F) kode widget "ContactForm" dan hapus kode yang berwarna merah.

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Save! Simpan Template dan kembali ke Dashboard Blogger.

Langkah 5: Membuat Halaman Kontak

Kini saatnya membuat form kontak di halaman statis Blogger.

1. Klik Pages (Halaman)

2. Klik New Page (Halaman Baru)

3. Isi judul halaman dengan Kontak atau Contact

4. Klik Mode HTML (klik icon pena di kiri Anda)

5. Copas atau simpan kode ini di kolom konten:

<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Name<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-mail *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Message *</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
<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>
</form>
</div>
</div>
</div>

6. Klik Publish (Publikasikan)

Kini form kontak di halaman statis sudah jadi. Pesan yang masuk akan terkirim ke email Anda sebagau admin blog.

Anda bisa tes dengan mengirim pesan buat Anda sendiri.

Demikian Cara Membuat Form Kontak di Halaman Statis Blogger. Good Luck & Happy Blogging!