Cara Membuat Contact Form Responsive pada Halaman Statis Blogger

==Iklan Dipate Disini===

Lapakinfo.net - Pada kesempatan kali ini saya akan berbagi tutorial tentang Cara Membuat Contact Form Responsive pada Halaman Statis Blogger, kalau pada postingan sebelumnya saya membagikan tutorial tentang Cara Membuat Contact Form Untuk Template Viomagz, kali ini saya akan membagikan tutorial untuk semua jenis template blogger.

Contact Form atau Contact Us sangat berguna sekali karena dengan memasang Contact Form pada halaman statis di blog kalian itu akan memberikan kemudahan pada pengunjung untuk berinteraksi dengan pemilik blog secara private. Formulir resmi ini secara otomatis akan masuk ke email pemilik blog, jika pengunjung mengirimkan email melalui Contact Form tersebut.

Cara Membuat Contact Form Responsive pada Halaman Statis Blogger

Untuk memasangnya pun cukup mudah, kalian bisa ikuti langkahnya di bawah ini.

1. Buka Blog kalian.
2. Pilih Halaman.
3. Buat Halaman Baru dan buatlah judulnya contoh "Contact Form" atau "Contact Us" lalu pindah ke Mode HTML.
4. Salin kode di bawah ini lalu tempelkan pada Mode HTML tersebut.

<div id="contact_wrap"> <h3> Hubungi Kami</h3> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <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> <style type="text/css"> /* Menyembunyikan elemen dalam postingan */ #comments, #blog-pager, .breadcrumbs, .post-footer{display:none} </style>

5.Publish Halaman kalian.
6. Lanjut silahkan kalian pilih Tema.
7. Pilih Edit HTML.
8. Car kode ]]></b:skin> jika sudah ketemu letakan di bawah ini tepat di atas kode tersebut.

/* CSS Contact Form Light Theme by Lapakinfo.net */ #ContactForm1{ display:none; } #contact_wrap { margin: auto; width: 321px; height: 380px; padding: 25px; border-radius: 1em; border-top:1px solid #dbdbdb; border-right:1px solid #b2b2b2; border-left:1px solid #dbdbdb; border-bottom:1px solid #9d9d9d; background-color:#cccccc; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc'); background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); box-shadow: 1px 1px 5px #ccc; } #contact_wrap h3{ color: #e8f3f9; font-family:Georgia; font-size: 20px; font-style:italic; font-weight:bold; margin: 0 -36px 20px -36px; padding: 12px; text-align: center; text-shadow: 2px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #3689b9; position: relative; } #contact_wrap h3:before { content: ' '; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #333 transparent transparent transparent; } #contact_wrap h3:after { content: ' '; position: absolute; bottom: -10px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #333; } #ContactForm1_contact-form-name{ width: 270px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs220Nf-0KMwnNkLO9zM8O6DConsQzI36pWbzg5WxSr0QWbLnMMI-L4lZeykgEFVVUbkAFG2kZB-uPsgRqX8BsmSGasWpW9esJw6KnBcEaZ7ZXzBVnol9HDPY1afUw329oAI6BEWwqbW4/s1600/user.png)no-repeat 10px center; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-email{ width: 270px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGEnCJB_FgBrA99XOgIwRMQIPgbFVOVTqYrE72jZrCxwaQbRx-63jHNU396isLVT8l2pjY8BQLH8Tf1oKjERGMkOi0xuQ2OeitephLwp816bKobLqutRFA-sd4WT82QRmpWu7UE-p1Y2A/s1600/pen.png)no-repeat 10px center; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-email-message{ width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; font-family:Arial, sans-serif; background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP5GnQWb5m666A5VruSwfq49FajWguRCEaTUev6KlL5HKHi4Pm_gbjYb_uyvArJc5qu9hSzOjsFNSOKygK83aZJRcDLXFbOqWDC4xJF7fjTjANbKl8hHEEHVo3hQX7C4TdW1lQjJOOHtw/s1600/msg2.png)no-repeat 10px 10px; color:#777; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #FFF; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#005a8a; border-radius:4px; text-shadow: 1px 0 0 #1f4962; -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; background-color: #3689b9; border:1px solid #194f6d; } #ContactForm1_contact-form-submit:hover { background:#4c9bc9; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 320px; margin-top:35px; }

9. Simpan template kalian dan selesai.

• Demo

Bagaimana sangat mudah sekali bukan untuk tutorial tentang Cara Membuat Contact Form Responsive pada Halaman Statis Blogger, jika kalian memiliki pertanyaan seputar postingan di atas silahkan kalian bertanya melalui kolom komentar di bawah ini atau melalui Contact Us yang ada pada blog ini. Terimakasih atas kunjungannya dan semoga bermanfaat.

==Iklan Dipate Disini===