Cara Membuat Contact Form di Blog dengan Mudah

Contact Form Bloge Keren - Kontak atau biasa disebut Contact form merupakan salah satu informasi terkait keberadaan admin sebuah blog atau situs. Kontak ini dibuat dengan berbagai tujuan. Diantaranya adalah ingin membentuk sebuah kelompok forum diskusi, misalkan saja Forum Blogger Indonesia.

Forum disukusi ini nantinya akan dapat digunakan bagi setiap blogger untuk bisa berpartisipasi dalam setiap update artikel tertentu. Wujud partisipasinya secara personal (secara langsung) akan masuk pada email admin blog tersebut.

Misalkan saja sobat ingin melakukan konsultasi masalah blogger kepada kami, bisa saja langsung menghubungi contct kami. Silakan masukkan nama, alamat email, dan masukkan pesan sobat di situ. Setelahnya bisa langsung mengisi cheklist i'm not a robot dan send message.

Dengan begitu, suasana kedekatan antara admin dengan pembaca menjadi lebih harmonis, hehe. Tidak usah berlama-lama, silakan tengok saja model keren lain dari contact form berikut ini:

DEMO

Ingin tahu cara pembuatannya? Silakan lakukan langkah-langkah di bawah ini:

1. Masuk akun blogger > pilih tata letak (layout)

2. Tambahkan gadget > Gadget lainnya > Formulir Kontak (contact Form) > save

3. Pilih template > mode HTML

4. Cari kode di bawah ini:

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

5. Perhatikan format kode widget kontak yang berhasil dibuat tadi seperti di bawah ini:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
Hapus bagian ini
</b:includable>
</b:widget>
</b:section>

6. Save template
7. Silakan buka laman > buat laman baru > pilih HTML jangan Compose
8. Copy paste kode di bawah ini pada bagian HTML halaman baru tersebut

<div class='seocips-contact-form'>
<div class='form'>
<!-- Custom Contact Form By Seocips start -->
<div class='seocips-contact-title'>
Contact Form
</div>
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; 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>
<!-- End Custom Contact Form By seocips -->
</div></div>
<style>
.seocips-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }
.seocips-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiefhNz_PCt30TF3ccceWo7mu0SaoVM_O07oVPJ2z-Nz3AnTmPCJPWCbhb9okzvG9xZa3QPLBnGlqm_ke6vCp4wAPkUbtlcQpmChqrj9HYcERXRRSAidNYI7HRGYmQxP_yh4LterLIIZKs/s320/name.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
.contact-form-email { background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8kOWcVTFxlCFrqfCO6N41S43lQQh7tXWaWS3RUym-RO9JQL4vWqHekVL7tgypOBaX5KCg8zIoqKO4YKmFPJcvtnMTSxG91TvrR3gqGGCYj1ApejEeiOf3-CV2EVkm-KzENINx2BnepVE/s320/email.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
.contact-form-button:hover { text-decoration:none; }
.contact-form-button:active { position:relative; top:1px; }
.seocips-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.seocips-button-color:hover { background:#f47c20; }
.seocips-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiefhNz_PCt30TF3ccceWo7mu0SaoVM_O07oVPJ2z-Nz3AnTmPCJPWCbhb9okzvG9xZa3QPLBnGlqm_ke6vCp4wAPkUbtlcQpmChqrj9HYcERXRRSAidNYI7HRGYmQxP_yh4LterLIIZKs/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

9. Publikasikan
10. Selesai > cek kontak yang telah dibuat > buka email

Note: jangan melakukan copas kode pada langkah ke-8 dalam keadaan mode Compose laman baru tadi. Jika dicopas dalam mode compose, maka hasilnya kemungkinan akan berantakan.

Demikian bahasan tentang Cara Membuat Contact Form di Blog dengan Mudah. Semoga bermanfaat, salam blogger.
(http://www.forumblogindo.com).*