Membuat Contact Form di Halaman Static untuk Blogger
Setelah sebelumnya saya menulis cara membuat privacy policy di blogger, tulisan ini akan membahas cara membuat contact form dihalaman static yang ditujukan untuk melengkapi tutorial sebelumnya. Untuk membuat contact form di halaman static anda harus masuk kebagian struktur template, jadi anda harus teliti dalam tutorial ini agar form yang dibuat berfungsi dengan baik. langsung saja ikuti langkah langkahnya.

Menambahkan Kode Contact Form 

  • Pastikan anda sudah berada didalam dashboard blogger
  • masuk ke bagian tema setelah itu klik tombol edit html
  • tambahkan kode dibawah ini tepat dibawah kode </b:widget>
<b:widget id='ContactForm1' locked='true' title='Contact Static Page' type='ContactForm'>
 <b:includable id='main'/>
 <b:includable id='content'/>
</b:widget>
Menambahkan Kode Contact Form
  • setelah itu klik tombol simpan tema untuk menyimpannya.

Membuat Halaman Contact Form

  • masuk ke bagian halaman setelah itu klik tombol Halaman Baru untuk membuat halaman
Membuat Halaman Contact Form
  • ubah mode compose ke mode html (lihat gambar yang diberi kotak merah)
  • setelah itu copy kode dibawah ini dan pastekan kedalam blog
<div style="margin: 0 auto; max-width: 800px; position: relative;">
<div class="form">
<form name="contact-form">
<span class="nametag">* Nama Lengkap :</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == "") {this.value = "";}" onfocus="if (this.value == "") {this.value = "";}" required="" size="30" type="text" value="" />
<span class="nametag">* Alamat Email :</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == "") {this.value = "";}" onfocus="if (this.value == "") {this.value = "";}" required="" size="50" type="email" value="" />
<span class="nametag">* Isi Pesan :</span>
<textarea class="contact-form-email-message" cols="23" id="ContactForm1_contact-form-email-message" rows="4"></textarea>
<div style="margin-top: 20px; text-align: center;">
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" style="border-radius: 0px;" type="button" value="Kirim" /> <input class="contact-form-button contact-form-button-submit" style="border-radius: 0px;" type="reset" value="Reset" /> </div>
<center>
<div style="margin-top: 10px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message" style="color: #a94442;">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message" style="color: #3c763d;">
</div>
</div>
</center>
</form>
</div>
</div>

<style type="text/css"> p{margin:0px;}.alert {border-radius:1px;} span.nametag{text-align: left; display: block;} .contact-form-error-message-with-border{margin-top:20px;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem;background-color:#fcf8e3;border-color:#faf2cc;color:#8a6d3b} .contact-form-success-message-with-border{margin-top:20px;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem;background-color:#dff0d8;border-color:#d0e9c6;color:#3c763d} .contact-form-error-message-with-border img,.contact-form-success-message-with-border img {float:right;margin-top:7px;} .contact-form-error-message-with-border,.contact-form-success-message-with-border{margin-top:20px;} .contact-form-name, .contact-form-email {width: 100%;max-width: 800px!important;margin-bottom: 20px;border: 1px solid #ddd;padding: 10px;} .contact-form-email-message{width: 100%;max-width: 800px!important;margin-bottom: 20px;border: 1px solid #ddd;padding: 10px;} .contact-form-button{-webkit-border-radius:2px;-moz-border-radius:2px;-webkit-transition:all .218s;-moz-transition:all .218s;-o-transition:all .218s;-webkit-user-select:none;-moz-user-select:none;background-color:#f5f5f5;background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-ms-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-o-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:linear-gradient(top,#f5f5f5,#f1f1f1);border:1px solid #dcdcdc;border:1px solid rgba(0,0,0,.1);border-radius:2px;color:#444;cursor:default;display:inline-block;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',EndColorStr='#f1f1f1');font-size:11px;font-weight:bold;height:24px;line-height:24px;margin-left:0;min-width:54px;*min-width:70px;padding:0 8px;text-align:center;transition:all .218s}.contact-form-button:hover,.contact-form-button.hover{-moz-box-shadow:0 1px 1px rgba(0,0,0,.1);-moz-transition:all 0;-o-transition:all 0;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);-webkit-transition:all 0;background-color:#f8f8f8;background-image:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-moz-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-ms-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-o-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:linear-gradient(top,#f8f8f8,#f1f1f1);border:1px solid #c6c6c6;box-shadow:0 1px 1px rgba(0,0,0,.1);color:#222;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#f1f1f1');transition:all 0}.contact-form-button.focus,.contact-form-button.right.focus,.contact-form-button.mid.focus,.contact-form-button.left.focus{border:1px solid #4d90fe;outline:none;z-index:4 !important}.contact-form-button-submit:focus,.contact-form-button-submit.focus{-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.contact-form-button-submit:focus,.contact-form-button-submit.focus{border-color:#404040}.contact-form-button-submit:focus:hover,.contact-form-button-submit.focus:hover{-moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)}.contact-form-button-submit{background-color:#666;background-image:-webkit-gradient(linear,left top,left bottom,from(#777),to(#555));background-image:-webkit-linear-gradient(top,#777,#555);background-image:-moz-linear-gradient(top,#777,#555);background-image:-ms-linear-gradient(top,#777,#555);background-image:-o-linear-gradient(top,#777,#555);background-image:linear-gradient(top,#777,#555);border:1px solid #505050;color:#fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#777777',EndColorStr='#555555')}.contact-form-button-submit:hover{background-color:#555;background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#444));background-image:-webkit-linear-gradient(top,#666,#444);background-image:-moz-linear-gradient(top,#666,#444);background-image:-ms-linear-gradient(top,#666,#444);background-image:-o-linear-gradient(top,#666,#444);background-image:linear-gradient(top,#666,#444);border:1px solid #404040;color:#fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',EndColorStr='#444444')}.contact-form-button-submit:active,.contact-form-button-submit:focus:active,.contact-form-button-submit.focus:active{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}.contact-form-button-submit{background-color:#4d90fe;background-image:-webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));background-image:-webkit-linear-gradient(top,#4d90fe,#4787ed);background-image:-moz-linear-gradient(top,#4d90fe,#4787ed);background-image:-ms-linear-gradient(top,#4d90fe,#4787ed);background-image:-o-linear-gradient(top,#4d90fe,#4787ed);background-image:linear-gradient(top,#4d90fe,#4787ed);border-color:#3079ed;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed')}.contact-form-button-submit:hover{background-color:#357ae8;background-image:-webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));background-image:-webkit-linear-gradient(top,#4d90fe,#357ae8);background-image:-moz-linear-gradient(top,#4d90fe,#357ae8);background-image:-ms-linear-gradient(top,#4d90fe,#357ae8);background-image:-o-linear-gradient(top,#4d90fe,#357ae8);background-image:linear-gradient(top,#4d90fe,#357ae8);border-color:#2f5bb7;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#357ae8')}.contact-form-button.disabled,.contact-form-button.disabled:hover,.contact-form-button.disabled:active{background:none;border:1px solid #f3f3f3;border:1px solid rgba(0,0,0,.05);color:#b8b8b8;cursor:default;pointer-events:none}.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";background-color:#666;border:1px solid #505050;color:#fff;filter:alpha(opacity=50);opacity:.5}.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{background-color:#4d90fe;border-color:#3079ed}</style>
  • jangan lupa untuk memberi judul yaitu contact
  • setelah itu publikasikan halaman.
Demo