Widget Contact Form Responsive

Widget Contact Form Responsive - Contact Form atau Contact Us merupakan satu dari beberapa widget penting yang harus ada di setiap laman website termasuk situs blogger, widget contact form merupakan perantara yang menghubungkan antara visitor dengan pengelola situs, Contact form (formulir kontak) biasanya digunakan untuk mengirim pesan berupa kritik, saran, pemesanan pemasangan iklan dan lain-lain. selain itu contact form juga berfungsi sebagai penyaring spam atau malware yang kemungkinan dikirim oleh visitor nakal ke e-mail pengelola situs.

Platform blogger sebenarnya sudah menyediakan widget contact form untuk situs-situs blog, namun tampilan contact form yang disediakan masih sangat sederhana "default" pengelola situs harus menyesuikan style contact form nya sendiri dengan sedikit penambahan css untuk membuat tampilan contact form menjadi lebih elegant.

Widget Contact Form Responsive

Cara Membuat Laman Contact Form Blogger

1. Login ke Blogger dan buat satu laman "page" baru
2. Pada sudut kiri atas page editor klik mode html bukan compose
3. Copy & Paste-kan script contact form blogger di bawah ini kemudian tekan tombol publish
4. Jangan lupa untuk membuat judul pada laman contact form anda.

Tutorial lebih mudah diterapkan oleh siapa saja karena sebelumnya script contact form blogger ini sudah disesuaikan dan dirancang agar mudah dipasang pada laman static blogger.

Spesifikasi widget contact form

• 100% Responsive dan mobile friendly
• Tampilan simple dan elegan + mudah diterapkan
• Ready notifikasi pengiriman pesan (sucses message, failed message dan please input message)

Script contact form (kombinasi css, html dan java script)

<style scoped="" type="text/css">
#stlb{margin:auto;max-width:100%;}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:100%;height:auto;margin:5px 0;padding:15px 0;background:#fff;color:#444;border:1px solid rgb(213, 216, 220);}
#ContactForm1_contact-form-email-message{width:100%;height:200px;margin:5px 0;padding:15px 0;background:#fff;color:#444;border:1px solid rgb(213, 216, 220);}
#ContactForm1_contact-form-submit{float:right;background:#404040;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#00BE98;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:0px;background:#404040;color:#fff;font-size:13px;font-weight:600;border-radius:3px}
</style>

<form id="stlb" 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="" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<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>
<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'] = '6093713042691745392';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6093713042691745392','//somadlistrick.blogspot.com','6093713042691745392');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent successfully. Thank you for contacting us</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '6093713042691745392', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Instruksi

• Silahkan ganti kode yang ditandai dengan huruf tebal berwarna merah dengan ID situs blogger dan URLsitus masing-masing.
• Ganti juga text notifikasi message yang ditandai dengan warna biru jika diperlukan.
• Tempatkan semua kode css, html dan java script contact form dalam satu laman seperti yang telah dijalaskan pada langkah di atas
• Lihat contoh "tampilan" contact form pada link ini [Demo Contact Form]

Catatan: Kode ID Blogger anda dapat dilihat pada bar atas browser seperti contoh berikut ini;

https://draft.blogger.com/blogger.g?blogID=6093713042691745392#editor/

Selesai, saya harap tutorial ini dapat membatu dalam membuat laman "contact us" pada situs blooger anda. follow by email situs ini untuk mendapatkan pemberitahuan setiap artikel terbaru kami.