15 December 2015

Cara Mudah Memasang Contact Form di Halaman Statis Blog

Cara Mudah Memasang Contact Form di Halaman Statis Blog

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)

ID Blog pada kolom Address Bar
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.
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic