Halo sahabat Blogger semua, Kali ini Blog akan membagikan tutorial Cara Praktis Memasang Contact Form di Halaman Statis Blog. Sebenarnya sudah banyak Tutorial cara menciptakan Contact Form pada halaman statis, tapi tutorial yang akan aku bagikan kali ini lebih mudah.
Hanya dengan 1 langkah kontak form pada halaman statis akan terpasang dan siap dipakai pada blog sobat. Widget kontak form sangatlah penting pada sebuah blog atau website, alasannya yaitu kontak form ini akan sangat diharapkan oleh pengunjung yang ingin bertanya atau kontak eksklusif 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 semoga link pada laman dapat sesuai dengan keinginan. Contoh : /p/contact.html maka sahabat harus eksklusif mengisi "Contact" pada judul laman gres tersebut.
Setelah mengisi judul, pada atas kiri ada 2 Pilihan yaitu Compose dan HTML > Pilih "HTML" kemudian masukan arahan 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)
Sumber https://www.idblanter.com
8866800899420715293 ganti dengan ID Blog sobat. (lihat gambar dibawah ini)
 |
| Mengambil ID Blog pada address kafetaria browser |
//idblanter.com/ ganti dengan domain blog sobat.
Jika sudah, kembali ke mode "Compose"
Simpan Template, Lihat balasannya dan Test.
Widget Contact Form Lainnya : Membuat Show Hide Contact Form di Blog
Semoga Tutorial ini Bermanfaat bagi sobat. Selamat Mencoba.
Simpan Template, Lihat balasannya dan Test.
Widget Contact Form Lainnya : Membuat Show Hide Contact Form di Blog
Semoga Tutorial ini Bermanfaat bagi sobat. Selamat Mencoba.
