Membuat contact form 100% berhasil

Masih-Di.Blogspot.Com kali ini akan merangkum tentang tata cara membuat contact form 100% berhasil.

Memang widget yang satu ini tidak semudah anda mengaturnya dari layanan WordPress.Com dan oleh karena itu diperlukan trick khusus untuk mengakalinya agar berhasil.

Contact form adalah prasarana perpesanan privat atau privasi antar pemilik situs dan pengunjung agar kerahasiaan data pengunjung tetap terjaga seperti Email dan nama pengunjung yang mengirimi pesan privat.

Dari kebanyakan situs profesional menempatkan contact form di halaman terpisah dan anda bisa melihat sendiri dari kebanyakan situs besar seperti Google dan situs lainya.

Berikut inilah ilustrasi cara pembuatanya :

Anda hanya perlu membuat halaman baru pada dasboard Blogger anda, memberi judul Contact form atau hubungi kami atau yang sesui dengan keinginan anda.
Klik HALAMAN dan pilih HALAMAN BARU, klik dan lihat gambar.

Lalu pada halaman kontent pilih mode html.

Copy dan paste kode HTML dibawah ini pada kolom konten halaman tersebut.

<div dir="ltr" style="text-align: left;" trbidi="on">
<form id="contact_masih-di.blogspot.com" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />

<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak_masih-di.blogspot{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<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'] = '';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\xXXXXXXXXXXXXXXXXX','http://NAMA-WEB-ANDA.com',XXXXXXXXXXXXXXXXXX'');
_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':'XXXXXXXXXXXXXXXXX', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script></div>

Ganti kode yang bertanda XXXXXXXXX dan NAMA-WEB-ANDA dengan nama web anda sendiri dan hasilnya kurang lebih akan seperti Contoh
KLIK DISINI untuk melihatnya.
Untuk mendapatkan kode ID, anda bisa melihat dan meng-copy di web address bagian paling atas di layar device anda.
Lihat ilustrasi dibawah :

Demikianlah informasi yang Masih-Di.Blogspot.Com bisa rangkum dalam artikel kali ini.
Semoga apa yang terkandung pada artikel kali ini bisa bermanfaat bagi kita semua dan jangan lupa untuk menyampaikan kritik dan saran anda di form komentar dibawah atau bisa langsung menghubungi kami melalui Contac Form agar kedepanya Masih-Di.Blogspot.Com dapat menampilkan artikel yang bermutu dan lebih inspiratif lagi.

Salam kami :
Masih-Di.Blogspot.Com

_