Membuat Halaman Kontak Sederhana dan Ringan di Blogger

Semoga Anda semua selalu diberikan kesehatan dalam segala aktifitas. Kali ini Admin ingin membagikan Cara Membuat Halaman Kontak Sederhana dan Ringan di Blogger.

Cara ini tidak memerlukan pihak ketiga contohnya seperti Foxy Form maka dari itu akan responsive.

Fungsi dari formulir kontak sendiri yaitu untuk pengirim pesan dari pengunjung menuju alamat gmail pemilik blog dan bukan melalui kantor pos.

Bagaimana carana? Ok langsung saja simak di bawah ini.

1. Login Blog

2. Tata Letak - Tambahkan Widget Kontak

3. Cari kode di bawah ini kemudian hapus bagian tersebut

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

Cara di atas memang harus dilakukan karena Formulir Kontak memang harus di buat, cara di atas hanya untuk menghilangkan tampilan pada Widget di sidebar atau footer.

4. Masuk ke Laman - Buat Laman Baru - Masuk ke Mode HTML - Pastekan kode di bawah ini ke dalamnya

<div class='rumahmedia-contact-form'>
<div class='form'>
<!-- Custom Contact Form By rumahmediastart -->
<div class='rumahmedia-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 rumahmedia-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit rumahmedia-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 rumahmedia-->
</div></div>
<style>
.rumahmedia-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; }
.rumahmedia-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/AVvXsEg-XMhzCeI0WippZsbtDhyphenhyphenD0QF_hbm2bkfBe86sC26kSK45VnIW-03ilxunC9KfAfN_MNYTfkYRIQpnpVC_4Vghb1LINu_hyA-FvWfHQATkk8BsLiIp8-ntLoZ7BehUyxBH_3Xyam8lCqk/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/AVvXsEh6zZT0wdLALm1YxjstIDCrR1ms-ATo3xaKc4eOAUrxQaw9sqvENB0vEvmmLLZD8V-Wu-8EvtwdvXlQ0saIbVdtCPDhKhOZPLFkd9vVnypmZZuWkWfrgbZCX5jcBYymwgooNJDTctP9Ov0/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; }
.rumahmedia-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.rumahmedia-button-color:hover { background:#f47c20; }
.rumahmedia-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-XMhzCeI0WippZsbtDhyphenhyphenD0QF_hbm2bkfBe86sC26kSK45VnIW-03ilxunC9KfAfN_MNYTfkYRIQpnpVC_4Vghb1LINu_hyA-FvWfHQATkk8BsLiIp8-ntLoZ7BehUyxBH_3Xyam8lCqk/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>

Setelah di simpan pada mode HTML langsung saja di publikasikan tidak usah kembali ke mode Compose karena takut berantakan

5. Publikasikan

Sekian Tutorial ini semoga bermanfaat.