Widget Contact Form Responsive

Widget Contact Form Responsive - Contact Form atau formulir kontak 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, selain itu contact form juga berfungsi sebagai penyaring spam atau malware yang 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 dan responsive.

Di kasus lain, jika kamu menghaspus bundle widget blogger, maka widget contact form biasanya tidak berfungsi, jadi untuk mengatasi hal tersebut kamu memerlukan widget contact form ini.

Cara Membuat Contact Form Blogger Di Halaman Statis

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 secara beruntun, 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)

Kode CSS, HTML dan JavaScript Contact Form
[code type="CSS"]<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;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;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>[/code]
[code type="HTML"]<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="Message" 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>[/code]
[code type="JavaScript"]<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
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','//gigi-pages.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>[/code]
Instruksi

Pada bagian kode javascript di atas dibutuhkan beberapa tindakan untuk menyesuaikan widget dengan data blog masing-masing.

• Ganti 4 kode "id" (6093713042691745392) dengan "id" situs blog masing-masing.
• Ganti url situs (gigi-pages.blogspot.com) dengan url blog anda.
• 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/

Blogger Setting (Email)

Setelah widget contact form di buat, tambahkan alamat email penerima pesan ke pengaturan blogger, blogger setting > email, kemudian pada tab email posts to masukkan alamat email anda dan simpan pengaturan.

Blogger setting (email)

Kemudian verifikasi kepemilikan email, periksa kotak masuk anda kemudian verifikasi, selesai, saya harap tutorial ini dapat membatu dalam membuat widget contact form di laman static blooger. Jangan sungkan untuk memfollow situs ini untuk mendapatkan kiriman pemberitahuan setiap artikel terbaru kami.