Cara Membuat Contact Us (Kontak) Keren di Blog

Cara Membuat Contact Us di Blog – Halaman kontak biasa dikenal dengan sebutan Contact Us atau Kontak Kami merupakan halaman wajib yang harus dipasang pada blog atau website. Adanya halaman kontak bertujuan untuk lebih dekat dengan pengunjung atau visitor agar lebih mudah untuk berkomunikasi.

Halaman Contact Us biasanya dipasang pada halaman statis blog, dengan menampilkan form pesan atau hanya menampilkan info kontak saja seperti email, FB, WA, atau dengan kontak yang lainnya.

Pada tutorial kali ini saya akan berbagi cara membuat halaman contact us dengan form yang sangat keren dan membuatnya cukup mudah walaupun untuk pemula sekalipun. Selain kontak biasanya blog memuat halaman privacy policy dan halaman disclaimer yang merupakan halaman wajib untuk mendaftar adsense.

Contact Form Blogger

Cara Membuat Contact Us di Halaman Statis Blogger

1. Memasang widget formulir di sidebar, caranya login akun Blogger >> pilih Tata Letak >> Tambahkan Gadget >> Gadget lainnya >> Formulir Kontak seperti gambar berikut:
2. Setelah pasang wideget kontak, selanjutnya masuk menu Tema >> Edit HTML. Letakkan kode berikut tepat diatas kode </head>.

   <style type='text/css'>
   #ContactForm1{display:none}
   </style>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <style type='text/css'>
   /* Contact form */
   #ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:50px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;}
   #ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fff;outline:0}
   #ContactForm1_contact-form-email-message{width:95%;height:170px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;}
   #ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:10px;margin:0;cursor:pointer;background-color:#6e9ee6;border:1px solid #6e9ee6;border-radius:3px;}
   #ContactForm1_contact-form-submit:hover{background-color:#3c3c3c}
   #ContactForm1_contact-form-submit:active{position:relative;top:2px;}
   #ContactForm1_contact-form-submit:focus{outline:0}
   #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}
   @media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}}
   @media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{margin:0 15px}}
   </style>
   </b:if>

3. Jika sudah memasang kode diatas, selanjutnya buka menu Halaman >> Halaman Baru >> Beri judul halaman statis dengan Contact Us, Kontak atau Kontak Kami.
4. Kemudian Masukkan kode berikut pada mode HTML.

   <div dir="ltr" style="text-align: justify;" >
   Silahkan isi pesan melalui form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan. Terima kasih
   <br />
   <form name="contact-form">
   <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" 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="Message" rows="5"></textarea><br />
   <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /><br />
   <div class="clear">
   </div>
   <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>

PERHATIAN:

Jika kontak form tidak berfungsi, maka langkah selanjutnya adalah masuk menu Tema >> Edit HTML kemudian memasang kode berikut ini tepat diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2759014865-widgets.js"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != &quot;undefined&quot; &amp;&amp; BLOG_attachCsiOnload != null) { window[&quot;blogger_templates_experiment_id&quot;] = &quot;templatesV1&quot;;window[&quot;blogger_blog_id&quot;] = &quot;<data:blog.blogId/>&quot;;BLOG_attachCsiOnload(&quot;&quot;); }_WidgetManager._Init(&quot;//www.blogger.com/rearrange?blogIDx3d<data:blog.blogId/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:blog.blogId/>&quot;);
_WidgetManager._RegisterWidget(&quot;_ContactFormView&quot;, new _WidgetInfo(&quot;ContactForm1&quot;, &quot;footer1&quot;, null, document.getElementById(&quot;ContactForm1&quot;), {&quot;contactFormMessageSendingMsg&quot;: &quot;Sending...&quot;, &quot;contactFormMessageSentMsg&quot;: &quot;Your message has been sent.&quot;, &quot;contactFormMessageNotSentMsg&quot;: &quot;Message could not be sent. Please try again later.&quot;, &quot;contactFormInvalidEmailMsg&quot;: &quot;A valid email address is required.&quot;, &quot;contactFormEmptyMessageMsg&quot;: &quot;Message field cannot be empty.&quot;, &quot;title&quot;: &quot;Contact Form&quot;, &quot;blogId&quot;: &quot;<data:blog.blogId/>&quot;, &quot;contactFormNameMsg&quot;: &quot;Name&quot;, &quot;contactFormEmailMsg&quot;: &quot;Email&quot;, &quot;contactFormMessageMsg&quot;: &quot;Message&quot;, &quot;contactFormSendMsg&quot;: &quot;Send&quot;, &quot;submitUrl&quot;: &quot;https://www.blogger.com/contact-form.do&quot;}, &quot;displayModeFull&quot;));
</script>

Demikian cara membuat halaman kontak pada statis blogger, jika masih kesulitan jangan segan untuk bertanya melalui kontak komentar yang sudah tersedia. Salam Blogger Jepara.

Sumber: Bungfangki.com