Cara Membuat Halaman Contact Form di Blog

Cara Membuat Halaman Contact Form di Blog

Halaman kontak atau contact form sangatlah penting bagi pemilik blog atau website. Dengan adanya halaman contact form, tentunya memudahkan pengunjung untuk menghubungi pemilik blog atau website. Selain itu, dari beberapa sumber yang saya baca, contact form merupakan salah satu persyaratan agar blog kita bisa diterima Google AdSense.

Bagaimana cara membuat halaman kontak atau contact form di blog? Berikut adalah membuat halaman kontak di blog.

Cara Membuat Halaman Contact Form di Blog

  • Pertama buka Dashboard Blogger. Kemudian cari menu Halaman dan klik Halaman baru.
Cara Membuat Halaman Contact Form di Blog
  • Kemudian Anda copy script dibawah.
<style scoped="scoped" type="text/css"> .contact-form-box{width:50%;margin:20px auto;padding:0;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 100%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none} #ContactForm1_contact-form-email-message{width: 100%;height: 100px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;} #ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;box-shadow: 0px 4px 0px 0px #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0px 1px 0px #de5135;} #ContactForm1_contact-form-submit:hover {background-color:#f5785f;} #ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c75b45;} #ContactForm1_contact-form-submit:focus{outline:none} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;text-align:left} @media screen and (max-width: 768px){ .contact-form-box{width:100%;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;} } @media screen and (max-width: 480px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;} } </style> <div class="contact-form-box"> <div style="text-align: justify;"> Silakan isi form di bawah ini untuk menghubungi saya. Jika tidak ada halangan dan kesibukan lainnya, saya akan langsung merespon pesan yang Anda kirimkan. </div> <form 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="Kirim" /> <br /> <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> </div> <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'] = '2607517406934919609';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2607517406934919609','//www.aguskusuma.com/','2607517406934919609'); _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': '2607517406934919609', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>

  • Ganti tulisan yang berwarna merah dengan ID blog Anda dan ganti tulisan yang berwarna biru dengan url atau alamat blog Anda. Sedangkan untuk tulisan yang berwarna kuning bisa Anda ganti sesuka hati Anda.
  • Untuk yang belum mengetahui bagaimana cara melihat ID blog Anda tinggal buka blogger.com dan lihat screenshot dibawah. Yang saya beri garis merah adalah ID blog saya dan tentunya ID blog Anda berbeda dengan punya saya.
Cara Membuat Halaman Contact Form di Blog
  • Setelah Anda mengcopy script diatas kemudian Anda kembali ke Halaman baru yang kita buat tadi, klik menu HTML dan paste script diatas. Kemudian Anda klik publikasikan.
Cara Membuat Halaman Contact Form di Blog
  • Selesai!

Subscribe to receive free email updates:

10 Responses to "Cara Membuat Halaman Contact Form di Blog"