Cara Mudah Memasang Contact Form di Halaman Statis Blog
15 December 2015
Halo sobat Blogger semua, Kali ini Blog Dunia Blanter akan membagikan tutorial Cara Mudah Memasang Contact Form di Halaman Statis Blog. Sebenarnya sudah banyak Tutorial cara membuat Contact Form pada halaman statis, tapi tutorial yang akan saya bagikan kali ini lebih mudah.
Hanya dengan 1 langkah kontak form pada halaman statis akan terpasang dan siap digunakan pada blog sobat. Widget kontak form sangatlah penting pada sebuah blog atau website, karena kontak form ini akan sangat dibutuhkan oleh pengunjung yang ingin bertanya atau kontak langsung dengan pemilik blog.
Berikut Tutorial Memasang Contact Form di Halaman Statis (atau Laman Blog)
1. Buka Blogger > Laman > Laman Baru > Isi Judul Terlebih dahulu sebelum mengisi kolom laman agar link pada laman bisa sesuai dengan keinginan. Contoh : /p/contact.html maka sobat harus langsung mengisi "Contact" pada judul laman baru tersebut.
Setelah mengisi judul, pada atas kiri ada 2 Pilihan yaitu Compose dan HTML > Pilih "HTML" lalu masukan kode dibawah ini.
<form name="contact-form">
Nama<br /><input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value=""/><br/><br/>Email Address <span class="wajib">*</span><br/><input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value=""/><br/><br/>Pesan <span class="wajib">*</span><br/>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br/>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim"/><br/>
<div class="formb"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div>
</div></form><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8866800899420715293';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8866800899420715293','//idblanter.com/','8866800899420715293');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '8866800899420715293', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<style type="text/css">
#ContactForm1{display:none}a.showcontent{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color: rgba(81,203,238,1);box-shadow: 0 0 5px rgba(81,203,238,0.7)!important;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {font-family:Open Sans Condensed, sans-serif;float:left;border-radius:3px;
background:#07ACEC;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;
padding:5px 10px!important;font-weight:700;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover {background:#444;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}.formb{max-width:22px;text-align:center;width:100%}.wajib{color:red;font-weight:bold}
</style>
Lihat Markup biru pada kode-kode diatas.
8866800899420715293 ganti dengan ID Blog sobat. (lihat gambar dibawah ini)
8866800899420715293 ganti dengan ID Blog sobat. (lihat gambar dibawah ini)
 |
| Mengambil ID Blog pada address bar browser |
//idblanter.com/ ganti dengan domain blog sobat.
Jika sudah, kembali ke mode "Compose"
Simpan Template, Lihat hasilnya dan Test.
Widget Contact Form Lainnya : Membuat Show Hide Contact Form di Blog
Semoga Tutorial ini Bermanfaat bagi sobat. Selamat Mencoba.
Simpan Template, Lihat hasilnya dan Test.
Widget Contact Form Lainnya : Membuat Show Hide Contact Form di Blog
Semoga Tutorial ini Bermanfaat bagi sobat. Selamat Mencoba.