Cara Membuat Formulir Kontak di Blogger
Formulir Kontak merupakan formulir yang digunakan pada sebuah blog agar pengunjung bisa berkomunikasi secara pribadi kepada pemilik blog. Formulir ini memiliki banyak kegunaan tergantung kebutuhan blog masing-masing. Misalnya blog kalian menjual tema blog seperti Mas Sugeng atau Mbak Igniel, maka untuk membelinya kalian harus menggunakan formulir kontak ini.
Formulir Kontak bahkan bisa mengembangkan blog kalian agar lebih baik lagi karena kritik dan saran dari pengunjung yang dikirimkan kepada kalian. Formulir Kontak sekarang juga termasuk hal yang harus ada pada blog kalian jika ingin mendaftar adsense.
Hari ini kita akan membahas Cara Membuat Formulir Kontak di Blogger dengan tampilan yang responsive.Jadi, kalian tidak perlu khawatir jika pengunjung kalian ingin menggunakan formulir kontak ini di Mobile Device. Mari kita langsung ajah.
1. Tambahkan widget Formulir Kontak pada sidebar blog kalian. Jika sudah ada, kalian bisa lewati langkah ini.
2. Setelah itu tambahkan kode ini tepat diatas </head>. Hal ini dilakukan untuk menyembunyikan widget Formulir Kontak pada sidebar blog karena kita akan memasang Formulir Kontaknya pada Halaman Blog nantinya.
<style type='text/css'>#ContactForm1,#ContactForm1 br{display:none}</style>3. Buat Halaman Baru dan masukkan kode dibawah. Pastikan dalam mode HTML.
<form name="contact-form"><div class='formcolumn1'><input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /></div><div class='formcolumn2'><input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /></div><div class='formcolumn3'><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea></div><div class='formcolumn4'><input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /></div><div style="max-width: 100%; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><style scoped="" type="text/css">#ContactForm1,#comments{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}.formcolumn4{position:relative}.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQsE6FkGS9f-0zR_ikcL2tfD_nurC5SEBafTini5Mi7WeTPiECLVIoWB4xNVcwKETn42k4XxZyn6M_ueaoQscnQ9EP_qKqd6lfHJfqNRZ3c-xYVToWTThgQRxlh9fN2cdZMvjdua_9rCxs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}form{color:#888}.formcolumn1,.formcolumn2{float:left;width:50%}.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}.formcolumn2{padding:0 0 0 10px}@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}</style>4. Setelah itu kalian tinggal tekan publish dan selesai. Seperti inilah dia tampilannya.
Begitulah dia Cara Membuat Formulir Kontak di Blogger. Jika ada masalah atau yang ingin ditanyakan silakan berkomentar saja di bawah.