Memasang Contact Form Blogger pada Halaman Statis

Blogger telah menambahkan widget terbaru untuk memudahkan para penggunanya dalam menambahkan formulir kontak di blog mereka. Formulir kontak tersebut akan terhubung dengan akun e-mail pengelola blog tersebut. Ketika seorang pengunjung mengirimkan pesan melalui formulir kontak, secara otomatis akan terkirim ke e-mail pengelola blog tersebut. Widget ini bisa dibilang cukup simpel dan sangat bermanfaat.

Namun, salah satu kelemahan widget formulir kontak adalah hanya dapat ditempatkan pada elemen gadget template saja. Sehingga jika desain template Anda cukup simpel, bisa dibilang widget formulir kontak ini cukup "memakan tempat" blog Anda.

Dari keadaan itulah, saya akan membagikan tutorial bagaimana cara menempatkan widget Formulir Kontak Blogger di halaman statis. Sehingga, selain tidak memakan tempat, juga akan memudahkan Anda dalam membuat halaman Kontak Kami.

Menempatkan Formulir Kontak Blogger di halaman statis

1. Pertama, tambahkan formulir kontak pada sidebar ( Layout > Add a Gadget >More Gadgets > Contact Form )
2. Kemudian, tambahkan kode berikut diatas kode ]]></b:skin> untuk menyembunyikan widget Formulir Kontak

.widget.ContactForm {
 display: none;
 }

3. Setelah widget Formulir kontak telah hilang, buatlah sebuah halaman baru, kemudian ubah mode tulis menjadi HTML, kemudian paste kode berikut ini :

<style>
/*---- Compatible contact Form by MBT -----*/
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}
     
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS4htn1bU9Kk2C89lshzsElA1AWv7icqzNeOcNoDbdhGMPMIQoHpAY-oLBSprRJ3h1TJcX55DO5xS942mICcTfDwCvGWp9lDVvyeAOoR26wJHmtMdZFcl-8WngEvp30hHcHYGvCBhd92s/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
   
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSP_WC8tehLYfBxCQ9nqDSsoMMgRt1pMupTphgRmPLNBB4Npj_8uFcS6Illz26dOAxfcThGGk_i7OsckGLtabofqlvXOgrtcRWh8llhhmEEceCfgnf3BFTeX1EBKR6hKZp2YvtqQex14/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}

.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: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 350px!important;
height: 150px;
border-radius:4px;
}
.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}

.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*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);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}
.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
      <!--[if IE 9]>
    <style>
   
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS4htn1bU9Kk2C89lshzsElA1AWv7icqzNeOcNoDbdhGMPMIQoHpAY-oLBSprRJ3h1TJcX55DO5xS942mICcTfDwCvGWp9lDVvyeAOoR26wJHmtMdZFcl-8WngEvp30hHcHYGvCBhd92s/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSP_WC8tehLYfBxCQ9nqDSsoMMgRt1pMupTphgRmPLNBB4Npj_8uFcS6Illz26dOAxfcThGGk_i7OsckGLtabofqlvXOgrtcRWh8llhhmEEceCfgnf3BFTeX1EBKR6hKZp2YvtqQex14/s320/email.png) no-repeat 7px 6px;
}
    </style>
<br />
<div class="form">
<!-- Custom Contact Form By MBT Starts -->
<form name="contact-form">
<!-- Name Field -->
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" />
<br />
<!-- Email ID Field -->
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}" onfocus="if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Email ID" />
<br />
<!-- Message Field -->
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-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;;}" value="Leave Your Message.."></textarea>
<br />
<!-- Clear Button -->
<input class="contact-form-button contact-form-button-submit MBT-button-color" type="reset" value="Clear" />
<!-- Send Button -->
<input class="contact-form-button contact-form-button-submit MBT-button-color" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<!-- Validation -->
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<!-- Custom Contact Form By MBT Ends -->
</div>

4. Gunakan pratinjau untuk melihat hasilnya, jika berhasil dan tidak bermasalah silahkan di publikasikan.

5. Gambar diatas adalah contoh jika Formulir Kontak telah berhasil dibuat pada halaman statis.

CSS diatas mungkin akan berjalan dengan baik pada beberapa browser. Setidaknya dapat memberikan sentuhan yang lebih menarik untuk widget Formulir Kontak bawaan dari Blogger.

Akhir kata, selamat mencoba dan semoga bermanfaat ^_^