Cara Membuat Contact Us 100% Responsive di Blogger

Contact us (kontak kami) -- formulir kontak -- merupakan salah satu cara bagaimana pengunjung blog menghubungi penulis/pemilik (admin) blog.

Biasanya, formulir kontak dibuat di halaman statis (static page) blogger.com. Tidak di postingan. Seperti halnya tentang saya (about me), disclaimer, dll.

Coba lihat gambar di atas! Bagus banget, kan? Selain itu, contact us di atas juga sudah responsive. Mengikuti ukuran layar HP para pembaca blog.

Dan jelas, 100% terkirim secara otomatis ke email admin blog 😍

Cara Membuat Contact Us 100% Responsive di Blogger

1. Pertama sekali, tambahkan dulu widget contact form di tata letak (layout) blog.

2. Selanjutnya salin (copy) kode di bawah ini, tempatkan (tempel) di atas kode </head>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
/* Halaman Kontak Style */
.inputpesan {float: none; position: relative; margin-bottom: 45px; margin-right: 10px;}
    #ContactForm1_contact-form-email, #ContactForm1_contact-form-name, #ContactForm1_contact-form-email-message {width: 100%;padding: 15px 0; border: none; color: #777; border-bottom: 1px solid #ddd; display: block;font-size: 15px;}
    #ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{border-bottom: 2px solid #2b43f5; transition:all .3s ease-out}
    #ContactForm1_contact-form-submit{color: #fff !important; background: #2196F3; padding: 15px 25px; border-radius: 4px; border: none; outline: none; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); cursor: pointer; transition: all .4s ease-in-out; text-transform: uppercase; float: left; margin-top: 15px;}
    #ContactForm1_contact-form-submit:hover{background-color:#f5785f}
    #ContactForm1_contact-form-submit:focus{outline:0}
    #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:10px;}
</style>
</b:if>

Sampai di sini tekan save perubahan pada template blog.

3. Lalu salin dan tempel (copas) kode di bawah ini ke halaman contact us yang kosong (mode tulis HTML -- bukan compose)!

Terima kasih sudah berkunjung ke blog <b>https://mainblogseo.blogspot.com/</b>. Jika ada hal yang ingin disampaikan, jangan segan2 meninggalkan pesan via <b>kirim email</b> di bawah ini.<br /><br /><div class="inputpesan">
<form name="contact-form">
     <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
     <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
   <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
   <input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div class="clear">
</div>
<div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
     </div>
  </div>
</form>
</div>

4. Ok sudah selesai! 😁

Pada dasarnya widget contact form akan muncul/terlihat di bagian sidebar blog (atau di mana saja). Dari pada duplikat, baiknya disembunyikan.

1. Template blogger > Edit HTML

2. Copas kode CSS berikut ini, di atas kode ]]></b:skin>

.sidebar #ContactForm1 {display:none}

3. Ok simpan template blog

Sebenarnya cara ini bisa memberatkan loading blog yang sudah berat. Tapi kalau loading blog masih ringan, baiknya dipakai saja.

Jika gagal, coba dengan cara berikut: Cara Membuat Formulir Kontak di Blogger (Blogspot.com).