Cara Mudah Memasang Formulir Kontak di Halaman Statis

Sahabat Ngonline, situs yang baik adalah situs yang memiliki kelengkapan data. Bahkan data ini merupakan rekomendasi dari google sendiri. Hal ini terlihat saat seseorang ingin menjadi seorang publisher google adsense, data daripada pemilik situs harus lengkap. Diantara hal yang menjadi data daripada sebuah situs adalah pada halaman situs itu sendiri.

Biasanya situs yang baik akan memberikan halaman identitas seperti About Us, Contact Us, Disclaimer, Privacy Plicy, Sitemap, dan lain sebagainya. Selain sebagai identitas, halaman itu memiliki nilai penting yaitu sebagai wujud pertanggungjawaban daripada pemilik situs tersebut. Artinya, saat seorang pengunjung ingin mengenal tentang pemilik atau tentang situs itu sendiri, dia bisa menuju ke 'About Us'. Demikian juga saat ingin mengetahui peraturan dan ketentuan situs, dia juga bisa mengetahuinya lewat privacy policy dan disclaimer. Bahkan saat ingin bertanya atau mengajukan sesuatu baik saran atau kritik, dia bisa mengajukannya lewat 'contact us'.

Khusus untuk 'Contact Us', halaman ini penting sekali untuk keberlangsungan situs sahabat Ngonline06. Interaksi antara pemilik situs dengan pengunjung bisa berlangsung lewat halaman ini. Berikut adalah manfaat halaman contact us:

1. Menjadi forum tanya jawab
2. Menjadi forum dalam menyampaikan saran dan kritik
3. Menjadi media untuk memberitahu sesuatu yang berkaitan dengan artikel.
4. Dan lain sebagainya.

Setelah sahabat mengetahui manfaat di atas, maka jangan tunda lagi untuk segera memasang halaman contact us tersebut. Salah satu cara untuk membuat halaman 'Contact Us' adalah dengan memasang Formulir Kontak.

Secara default, blogspot sudah melengkapi blog dengan 'Formulir Kontak' yang berupa widget. Oleh karenanya, sahabat jika ingin menjalin interaksi dengan pengunjung blog, bisa cukup memasangnya lewat widget Formulir Kontak.

Namun demikian, ketika blogspot memakainya di dalam widget, tentu menjadi hal yang sulit saat sahabat ingin memasangnya di halaman statis. Maka untuk mensiasati itu, Ngonline06 akan berbagi tips tentang cara memasang formulir kontak di halaman statis tersebut. Untuk bisa memasangnya, silahkan sahabat Ngonline06 memperhatikan langkah-langkah sebagai berikut. Ngonline06 akan menawarkan 2 cara. Yang Pertama Cara Standar dan yang kedua Cara Simpel [Mudah].

A. Cara [Standar] Memasang Formulir Kontak di Halaman Statis

#Langkah Pertama: Memasang Widget Formulir Kontak (Contact Form)

1. Silahkan sahabat menuju dashboard blog sahabat.
2. Pilih menu Tata Letak > Tambah Gadget.
3. Pilih 'Gadget Lainnya' > Formulir Kontak. Untuk memperjelas, silahkan lihat gambar di bawah ini. 

#Langkah Kedua: Memasang Kode CSS

Setelah sahabat Ngonline06 selesai dengan langkah pertama, silahkan melanjutkan langkah-langkah berikut ini:

1. Pilih menu Template > Edit HTML.
2. Silahkan cari kode </head>. Letakkan kode berikut di atas kode </head>. Simpan.

<style type='text/css'>
#ContactForm1{display:none}
</style>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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:95%;height:170px;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>
</b:if>

#Langkah Ketiga: Membuat Halaman Kontak

Jika dua langkah di atas sudah dilakukan, maka sekarang sahabat tinggal membuat halaman statis 'Contact Us', dengan langkah-langkah sebagai berikut:
Silahkan sahabat memilih menu 'laman'
Buat 'laman baru' dan letakkan kode berikut di halaman statis sahabat yang hendak dibuat formulir kontak (Contact Us). (Kode ini dipasang di HTML, bukan Compose)

<div dir="ltr" style="text-align: left;" >
Silahkan isi form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan.
<br />
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div class="clear">
</div>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Selesai, sekarang sahabat Ngonline06 sudah memiliki halaman Contact Us dengan formulir kontak yang apik.

B. Cara Simpel dan Mudah Memasang Formulir Kontak di Halaman Statis

Memang diakui, tidak semua orang bisa melakukan langkah-langkah di atas yang bisa dibilang jlimet dan rumit. Maka, berikut Ngonline06 akan memberikan tips simpel dan mudah dalam memasang formulir kontak di halaman statis dengan cukup 1 langkah saja. Cara simpel ini juga sekaligus menjadi solusi saat formulir kontak sahabat mengalami eror. Cara pemasangan ini dengan memakai jasa pihak ketiga. Kelebihan cara ini, sahabat tidak perlu pake daftar atau login ke pihak ketiga tersebut. Untuk cara simpel dan mudah memasang formulir kontak di halaman statis, sahabat cukup memasang kode berikut ini di halaman statis sahabat:

 <form id="contact_form" action="https://formspree.io/your@email.com" method="POST">
  <label for="name">Your name:</label><br />
  <input id="name" class="input" name="name" type="text" value="" size="30" /><br />
  <label for="email">Your email:</label><br />
  <input id="email" class="input" name="email" type="text" value="" size="30" /><br />
  <label for="message">Your message:</label><br />
  <textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
 <input id="submit_button" type="submit" value="Send email" />
</form> 

KETERANGAN: Silahkan sesuaikan huruf yang berwarna merah (your@email.com) di atas dengan alamat email sahabat. Agar tidak diredirect ke laman formspree setelah mengirim pesan, tambahkan kode di bawah ini setelah kode formspree di atas:

<input type="hidden" name="_next" value="URL HALAMAN THANKS" />

Keterangan: URL Halaman Thanks maksudnya adalah halaman yang berisi teks telah terkirim. Sahabat juga bisa mengisi dengan alamat contact us jika langsung diredirect ke halaman semula.

Demikian cara memasang formulir kontak di halaman statis baik yang standar ataupun yang simpel. Semoga bermanfaat untuk para sahabat semua.