Cara Membuat Contact Form di Blog hanya 3 Menit

SEBENARNYA yang namanya membuat dan memasang halaman kontak, contact form, atau form kontak di halaman statis blog sudah banyak dibahas oleh blogger-blogger lain, salah satunya adalah melalui situs http://www.123contactform.com/contact-form-for-blogger.html.

Cara Membuat Contact Form di Halaman Statis Blog hanya 3 Menit

Di website tersebut Anda harus melakukan pendaftaran atau Sign Up for Free (gratis pakai) terlebih dahulu untuk membuat halaman kontak di blog.

Bagi yang sudah terbiasa melakukan pendaftaran seperti ini, bisa dikatakan sudah menjadi hal biasa dan sangat mudah untuk dilakukan. Namun, bagaimana jika hal itu terjadi bagi blogger "pemula"? Pasti ribet, iya kan?

Untuk mengakali hal ini, setidaknya hanya ada satu cara yang bisa Anda lakukan untuk membuat contact form di halaman statis blog. Ikuti panduan dibawah ini langkah demi langkah agar berhasil.

Cara Membuat Contact Form di Blog hanya 3 Menit


  1. Buka blogger > pilih menu Static Page (Laman Statis) > New Static Page (Laman Baru)
  2. Setelah halaman static page muncul, masukkan judulnya terlebih dahulu dan ini wajib dilakukan
  3. Masukkan kode dibawah ini dibagian HTML (bukan compose)

<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'] = '8022617659375683714';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x8022617659375683714','//tipsseokiller.blogspot.co.id/','8022617659375683714');
_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': '8022617659375683714', '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>

PERHATIAN!

Jika Anda teliti di kode-kode HTML diatas, terdapat angka yang berwarna merah pada angka 8022617659375683714 dan dibagian alamat URL blog http://tipsseokiller.blogspot.co.id/.

Pastikan bahwa Anda mengubah kedua kode ini dengan kode milik Anda sendiri. Angka 8022617659375683714 ini sendiri bisa Anda lihat di kolom Address Bar di peramban browser Anda. Yakni, tepat dibagian ...blogger.g?blogID=8022617659375683714#editor.

Simpan halaman statis tersebut, selesai.

Cara Membuat Contact Form di Halaman Statis Blog hanya 3 Menit

KESIMPULAN

Ada sisi keuntungan yang Anda peroleh apabila membuat halaman kontak saya di blog, diantaranya adalah:


  1. Pembaca bisa mengirim pesan sehingga terjadilah silaturahmi antara pemilik blog dan pengunjung blog
  2. Komentar berupa saran dan kritik bisa dikirimkan langsung oleh pembaca blog melalui kotak komentar pesan yang telah disediakan
  3. Efisien dan sangat mudah ketika akan mengirim pesan
  4. Bisa dikatakan, sebuah blog yang menyediakan CONTACT US adalah blog profesional. Apalagi jika blog tersebut akan didaftarkan ke Google AdSense, maka syarat wajib agar diterima AdSense adalah membuat terlebih dahulu halaman kontak ini


Catatan Penting Lainnya:

Email yang dikirimkan oleh pengunjung dan pembaca blog akan masuk ke email Anda.

Di email google email nantinya, Anda akan melihat 3 buah kotak masuk yang diantaranya adalah Kotak Masuk, Sosial dan Spam. Lihat dibagian Sosial. Good luck!

0 Response to "Cara Membuat Contact Form di Blog hanya 3 Menit"

Post a Comment

Berkomentarlah dengan baik dan benar, komentar spam tidak akan dipublikasikan. Harap baca semua atau keseluruhan artikel. Gunakan anonymous jika tidak punya akun google untuk berkomentar. Centang OK pada NOTIFY ME agar komentar balasan masuk ke email Anda.