Sesuai dengan permintaan salah satu teman saya, kali ini saya ingin membagikan hasil modifikasi untuk widget contact form yang dipasang di halaman statis. Kurang lebih hasil modifikasinya seperti ini:
Sama persis seperti halaman order template di blog saya...
Sebenarnya itu widget contact form bawaan dari blogger, tapi saya pasang di halaman statis dan dimodif bentuknya sehingga berpenampilan lebih menarik. Bagi anda yang mau memasangnya juga, silakan ikuti panduan berikut ini.
Pemasangan Contact Form di Halaman Statis
Pertama, silakan anda buka di Tata Letak, tambahkan widget Contact Form. Anda dapat memasangnya dimanapun itu, terserah saja. Tetapi bila sudah ada widget Contact Formnya sebelum anda pasang, maka lewati saja langkah ini.
Setelah itu, buat halaman baru di blog anda, beri judul yang sesuai.
Lalu, masukkan kode berikut ini pada halaman tadi, dengan mode HTML (bukan Compose):
<style type="text/css">
/* Contact form */
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:auto;margin:5px auto 15px;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}
#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0}
#ContactForm1_contact-form-email-message{width:100%;height:250px;margin:5px auto;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;font-family:Arial,sans-serif;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}
#ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#f4836a;box-shadow:0 4px 0 0 #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0 1px 0 #de5135}
#ContactForm1_contact-form-submit:hover{background-color:#f5785f}
#ContactForm1_contact-form-submit:active{position:relative;top:2px;box-shadow:0 2px 0 0 #c75b45}
#ContactForm1_contact-form-submit:focus{outline:0}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}
@media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}
}
@media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{margin:0 15px}
}
</style>
Silahkan isi form di bawah ini untuk mengorder template.
<div dir="ltr" style="text-align: left;">
Nama<span style="color: red;">*</span>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="" size="30" type="text" value="" />
Alamat Email<span style="color: red;">*</span>
<input id="ContactForm1_contact-form-email" name="email" placeholder="" size="30" type="text" value="" />
Format Pesan<span style="color: red;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="" rows="5">Nama template, harga, link gambar bukti transfer, serta pesan singkat.</textarea>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAoJ_QBWS-irzvIyAq_gagU4IVzOapPNLIsyecVoRrdfYFesw_EEKYmV7KMQZwDLVucoUrHrMnJ03v7j4PdObxTFW3h4lwHowF3ksmavrVMjozm302K-onrvbYOdS3nDJ0cA0lMbQcUHg/s16/check.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="352" data-original-width="352" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAoJ_QBWS-irzvIyAq_gagU4IVzOapPNLIsyecVoRrdfYFesw_EEKYmV7KMQZwDLVucoUrHrMnJ03v7j4PdObxTFW3h4lwHowF3ksmavrVMjozm302K-onrvbYOdS3nDJ0cA0lMbQcUHg/s16/check.png" /></a></div>
Dengan ini saya setuju dengan syarat dan ketentuan.
<div style="margin: 0 auto; max-width: 200px; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div class="clear">
</div>
</form>
</div>
Ganti tulisan yang saya mark kuning dengan kata-kata anda.
Publikasikan halaman dan cek hasilnya. Cobalah anda kirim pesan melalui widget itu, bila berhasil maka selamat. Tetapi bagi yang tidak berhasil, silakan cek di artikel ini; Mengatasi Widget Contact Form Rusak.