Cara Membuat Contact Form Di Blogger

Tanpa basa-basi langsung saja lihat dibawah ini:

Masuk ke dashboard blogger
1. Klik Laman
2. Klik Laman baru
3. Pilih mode HTMl (jangan Compose), lalu paste script Dibawah ini

<div class="contact-form">
<div class="form">
<!-- Custom Contact Form start -->
<div class="contact-title">
Contact Form</div>
<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" />
<!-- 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" />
<!-- 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>
<!-- Clear Button -->
<input class="contact-form-button contact-form-button-submit button-color" type="reset" value="Hapus" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input class="contact-form-button contact-form-button-submit button-color" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<!-- Validation -->
<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>
<!-- End Custom Contact Form -->
</div>
</div>
<style>
.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; }
.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/AVvXsEhNVUKIEfb1cznq6NkQ-OKGZMmgWIldnziScvAGk2ZXWAzPHlTlQ5Knug2xhwMBr3wbHt4-euj1Gf7w9pZKTX-0E2ZvzvXTtEbt4VXTgfoGzrkXb-XKFLhwGjEli2VUALGdT89c2scK00k/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/AVvXsEhZG-SSitqsrp0wacdCFrbIEc6TCSK3LJgO-RwCJa1B16b74e2S0wLEzK5BBA_EuEab_hwecPtGWA-01L4NQGSzY_IxjH0x1gdxQUBrHgHWY3F5QKwra7vZqj5RJKbVsZMwJvwnUgwE_9I/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; }
.button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.button-color:hover { background:#f47c20; }
.button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNVUKIEfb1cznq6NkQ-OKGZMmgWIldnziScvAGk2ZXWAzPHlTlQ5Knug2xhwMBr3wbHt4-euj1Gf7w9pZKTX-0E2ZvzvXTtEbt4VXTgfoGzrkXb-XKFLhwGjEli2VUALGdT89c2scK00k/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

4. Sekarang ke Tata Letak
5. klik Tambahkan gadget
6. Klik Gadget Lainnya
7. Pilih Formulir kontak/Contact Form, lalu simpan
8. Sekarang ke Template Edit HTML
9. Cari kode contactform
10. lalu Replace semua kode dengan kode yang di bawah dan simpan

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' version='1' visible='true'>
    <b:includable id='main'>
</b:includable>

</b:widget>

Selamat Mencoba