Memodifikasi Widget Contact Form untuk Halaman Statis Blogger
Memodifikasi Widget Contact Form untuk Halaman Statis Blogger

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:

Memodifikasi Widget Contact Form untuk Halaman Statis Blogger

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://2.bp.blogspot.com/-z62fM06q00U/WjnhY-itDYI/AAAAAAAABxM/a59n5PbZ1xAXTzE6mcYShZ-NA5C7zcS_ACLcBGAs/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://2.bp.blogspot.com/-z62fM06q00U/WjnhY-itDYI/AAAAAAAABxM/a59n5PbZ1xAXTzE6mcYShZ-NA5C7zcS_ACLcBGAs/s16/check.png" /></a></div>
&nbsp;&nbsp; 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.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 8 Februari 2018 18.54

PM saya lewat Facebook ya...

Balas
joni sakti Kode Jarwo
joni sakti
# 8 Februari 2018 12.43

punya ku pesannya kok gag masuk ya ?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 25 Januari 2018 11.26

Itu sudah bawaan dari Blogger, jadi nda bisa diubah.

Balas
Surya Fitrianto Kode Jarwo
Surya Fitrianto
# 25 Januari 2018 10.28

Gan, contact blogger saya masuknya gi gmail sosial, caranya biar masuk ke utama gimana?

Balas