Cara membuat Formulir Kontak Email di Halaman Webstie Blogger

Website merupakan Sistem Informasi yang menampilkan sebuah halaman informasi secara online, baik itu seperti blog pribadi, visi dan misi, tentang bisnis, penjualan produk, dan menawarkan layanan jasa serta informasi-informasi lainya dengan maksud tujuan si pemiliknya.

Terkadang dalam sebuah website  perlu menampilkan informasi yang dilengkapi dengan kontak pribadi, tujuanya untuk mempermudah pembaca atau customer jika ada pertanyaan apa saja yang terkait dengan keperluanya kepada si pemilik website seperti bisa menghubungi Customer Service yang di sediakan oleh website itu, baik secara personal atau team.

Baca juga :  Cara membuat Dropdown Button di Halaman Blogger

Salah satunya yang simple dalam sebuah website seperti di cantumkan "Formulir Kontak" di halaman websitenya, mungkin ini sangat diperlukan. ini contoh

Cara untuk menampilkan Formulir Kontak di Halaman Website Blogger yang di kirimkan ke email pemilik Website jika ada yang ingin di tanyakan,

(ads1)

Cara tersebut ialah, Copy kan semua Script di bawah ini

<form id="kontak" name="contact-form"> isi pesan di bawah ini <div style="text-align: left;"><br /></div><input id="ContactForm1_contact-form-name" name="name" placeholder="Nama *" size="30" type="text" value="" /><br /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi Pesan *" rows="5"> <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> <style scoped="" type="text/css"> #comments,.post_meta,#blog-pager{display:none} form{color:#666} form.payforpal{margin:auto;text-align:center} #kontak-arlina{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:50px;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:#5359fc;height: 50px;margin:auto;vertical-align:middle;cursor:pointer;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:#5126d4;color:#fff;} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;vertical-align:middle;} .contact-form-error-message-with-border{background:#fc5353;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px} .contact-form-success-message{background:#8a63ff;border:0;box-shadow:none;color:#fff;border-radius:3px} <span img.contact-form-cross{margin:0;}</span> .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%;height:35px;}} </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'] = '5808274668304325048';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d483187944896500857','//www.valnet.id/','483187944896500857'); _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': '483187944896500857', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script> </div>

Kemudin Login ke Akun mu terus pilih "halaman" dan buat halaman baru trus pilih pada bagian tulisan yang di pojok sebelah kiri  "tampilan html" kemudian pastekan semua code script di atas pilih simpan.

(ads2)

Selain itu, bisa juga di tempelkan di Sidebar Widget, dengan cara pilih menu "Tata Letak" trusn klik pada bagian "Tambahkan Gadget dan pilih HTML/Javascript kemudian letakan script tersebut di bagian Conten dan isikan judul Formulir Kontak.

Halaman Formulir Kontak di atas bisa di edit di bagian Script tersebut di sesuaikan dengan keinginan kamu dan lihat hasilnya.