Tutorial 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 mediator yang menghubungkan antara visitor dengan pengelola situs, Contact form (formulir kontak) biasanya dipakai 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 bandel ke e-mail pengelola situs.

Platform blogger bekerjsama 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 menciptakan 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 lalu tekan tombol publish
4. Jangan lupa untuk menciptakan judul pada laman contact form anda.

Tutorial lebih gampang diterapkan oleh siapa saja alasannya yakni sebelumnya script contact form blogger ini sudah diadaptasi dan dirancang biar gampang dipasang pada laman static blogger.

Spesifikasi widget contact form

• 100% Responsive dan mobile friendly
• Tampilan simple dan elegan + gampang 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 arahan yang ditandai dengan abjad tebal berwarna merah dengan ID situs blogger dan URLsitus masing-masing.
• Ganti juga text notifikasi message yang ditandai dengan warna biru jikalau diperlukan.
• Tempatkan semua arahan css, html dan java script contact form dalam satu laman menyerupai yang telah dijalaskan pada langkah di atas
• Lihat referensi "tampilan" contact form pada link ini [Demo Contact Form]

Catatan: Kode ID Blogger anda sanggup dilihat pada kafe atas browser menyerupai referensi berikut ini;

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

Selesai, aku harap tutorial ini sanggup membatu dalam menciptakan laman "contact us" pada situs blooger anda. follow by email situs ini untuk mendapat pemberitahuan setiap artikel terbaru kami.