Cara membuat contact us keren bin simple

AzhaPedia | Assalamualaikum wr.wb
Cara Membuat Contact Us Keren. Pengertian contact us di blog.Contact us merupakan sebuah laman / halaman yang berisi form kontak dari pengunjung ke kita untuk menyampaikan kritik, dan saran mereka.

Cara membuat contact us keren.

1. Membuat form concact us via HTML
Cara ini cukup mudah dilakukan. Tidak perlu mengedit2 semua. Kode HTML ini dapat dari Arlina Dzgn
Silahkan copy kode dibawah nie.

1. 
   
2. Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.
4. <form id="kontak-arlina" name="contact-form">
6. <input id="ContactForm1_contact-form-name"name="name" placeholder="Name *" size="30"type="text" value="" />
8. <input id="ContactForm1_contact-form-email"name="email" size="30" placeholder="Email *"type="text" value="" />
10. <textarea cols="25"id="ContactForm1_contact-form-email-message"name="email-message" placeholder="Message *"rows="5"></textarea>
11. <input id="ContactForm1_contact-form-submit"type="button" value="Send Message" />  
12. <div style="max-width: 100%; text-align: center; width: 100%;">
13. <div id="ContactForm1_contact-form-error-message">
14. </div>
15. <div id="ContactForm1_contact-form-success-message">
16. </div>
17. </div>
18. </form>
19. <style scoped="" type="text/css">
20. #comments,.post_meta,#blog-pager{display:none}
21. form{color:#666}
22. form.payforpal{margin:auto;text-align:center}
23. #kontak-arlina{margin:auto;max-width:640px}
24. #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}
25. #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}
26. #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)}
27. #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}
28. #ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
29. #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
30. .contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
31. .contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
32. img.contact-form-cross{line-height:40px;margin-left:5px}
33. .post-body input{width:initial}
34. @media only screen and (max-width:640px){
35. #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
36. </style>
37. <script type="text/javascript">
38. //
39. if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
40. //]]>
41. </script>
42. <scriptsrc="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"type="text/javascript"></script>
43. <script type="text/javascript">
44. //
45. if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '3263220808940184577';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3263220808940184577','//infiniteidn.blogspot.com/','3263220808940184577');
46. _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': '3263220808940184577', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
47. //]]>
48. </script>

1. Ganti //infiniteidn.blogspot.com/  di atas. Terus diganti dengan web blog kamu
2. Ganti semua kode 3263220808940184577 dengan ID blog Kamu. Bagaimana cara melihat ID blog kamu
3.  Buat page / halaman baru trus Judul kamu kasih Contact Us. isi pilih HTML trus copy kodenya.

Tinggal tekan publish sajaa. Baca juga Cara Melihat ID Blog Kita.

Berbagi :