Skip to content Skip to sidebar Skip to footer
Home / Blogging / Cara Pasang Widget Contact Us Responsive Untuk Blogger
Cara Pasang Widget Contact Us Responsive Untuk Blogger

Cara Pasang Widget Contact Us Responsive Untuk Blogger

By Dewa Plokis

Memasang Form (Formulir) Contact us di blog sebenarnya merupakan kewajiban bagi setiap blogger. Terkecuali jika yang punya blog tidak ingin diganggu dengan email yang masuk melalui formulir kontak. Tapi apakah ada yang seperti itu?. Kemungkinan hanya blogger yang baru saja yang tidak memiliki formulir kontak email di blognya. Alasannya sederhana, belum paham atau memang tidak mengerti bagaimana cara membuat, memasang dan apa fungsinya. Padahal contact us ini sangat berpengaruh besar untuk mengembangkan web.

Widget formulir kontak berguna untuk memberikan kemudahan akses kepada pembaca untuk melakukan interaksi secara private / pribadi kepada pemilik web. Biasanya, widget ini digunakan jika pengunjung tidak ingin melakukan percakapan melalui kotak komentar, maka memilih alternatif dengan cara menuliskan pesan pada contact us.

cara pasang contact Usblogger responsive
Formulir kontak resmi blogger ini, akan secara langsung masuk kedalam email Anda jika seseorang mengirimkan email melalui halaman atau sidebar contact (tergantung cara pemasangan / penempatan code)

Contact Us Keren Responsive Untuk Blogger

Berikut ini akan saya bagikan 2 jenis pemasangan widget contact blogspot, yaitu melaui sidebar dan juga pada halaman statis. Silakan Anda pilih sesuai dengan selera Anda

1. Cara Membuat Formulir Contact Us di Sidebar Blog

Cara paling mudah untuk menambahkan contact form adalah melalui penambahan widget Contact Form HTML di layout template blogspot. dan cara ini juga banyak diterapkan oleh blogger karena simple dan mudah pemasangannya.

Silakan masuk ke akun blogger Anda
1. Pilih Layout 
2. Klik Add a Gadget
3. Pilih Contact Form
cara membuat formulir kontak sidebar
Contact us sidebar

4. Setelah memilih, Klik save 5. Silakan lihat hasilnyaSupaya tampilan formnya keren, silakan tambahkan kode berikut ini sebelum </head> atau   &lt;!--</head>--&gt;&lt;/head&gt; 
<style type='text/css'>.contact-form-widget{}
.contact-form-success-message,.contact-form-error-message{background:#f9edbe;border:0 solid #f0c36d;font-size:14px;text-align:center;max-width:500px;border-radius:3px}
.contact-form-success-message-with-border,.contact-form-error-message-with-border{background:#f9edbe;border:1px solid #f0c36d;font-size:14px;text-align:center;max-width:600px;border-radius:3px;box-sizing:border-box;padding:5px 10px}
.contact-form-cross{height:11px;margin:0 5px;vertical-align:-8.5%;width:11px}
.contact-form-email,.contact-form-name{color:nherit;height:40px;margin-top:5px;max-width:300px;width:100%;padding:0 15px;border-radius:3px;border:1px solid #cacaca;box-sizing:border-box}
.contact-form-email-message{color:inherit;margin-top:5px;vertical-align:top;max-width:600px;width:100%;border-radius:3px;border:1px solid #cacaca;padding:15px}
.contact-form-email:hover,.contact-form-name:hover,.contact-form-email-message:hover{outline:none;border:1px solid $(body.link.color)}
.contact-form-email:focus,.contact-form-name:focus,.contact-form-email-message:focus{outline:none;border:1px solid $(body.link.color)}
.contact-form-name,.contact-form-email,.contact-form-email-message{background:#f8f8f8}
.contact-form-button{display:block;font-size:14px;line-height:24px;padding:5px 20px;margin:30px 0;text-align:center;border:none;background:$(body.link.color);color:#fff;border-radius:3px;font-weight:bold}
.contact-form-button:hover,.contact-form-button.hover{cursor:pointer;outline:none;opacity:.85}
.contact-form-button.focus,.contact-form-button.right.focus,.contact-form-button.mid.focus,.contact-form-button.left.focus{outline:none}
.contact-form-button-submit:focus,.contact-form-button-submit.focus{outline:none;opacity:.85}
</style>
Sekarang Anda sudah bisa melihat hasilnya. Jika widget contact form belum muncul, coba reload halaman blogger Anda.


2. Cara Membuat Contact Us di Halaman Statis Blogger

Sekarang kita ke tutorial selanjutnya tentang pemasangan Page Contact Us Blog atau Formulir kontak pada halaman statis.

Pemasangan ini lebih banyak digunakan oleh blogger. Menempatkan widget Contact Us pada halaman statis seprtinya memiliki daya tarik tersendiri jika dibandingkan dengan formulir kontak sebelumnya pada halaman sidebar. Kemungkinan karena menempatkannya pada page khusus membuatnya lebih elegan dan berkelas ❤.


2.1. HTML & CSS
Sebelum memasukkan kode, tulis terlebih dahulu pada judul post pagenya sesuai dengan keinginan Anda. Misalnya "Contact Us", "Hubungi Saya", "Hubungi Kami", "Contact" dll. Ini untuk menghindari kesalahan permalink atau link halaman yang akan dibuat yang biasanya memunculkan angka seletah nama judulnya.

Silakan login ke blogger ➜ Pilih Pages ➜ New Page

Cara Pasang Widget Contact Us Responsive Untuk Blogger
Page Contact Us Blog

Selanjutnya Klik HTML (bukan compose), lalu copy dan paste kode contact us dibawah ini kedalamnya
Silakan isi form di bawah ini untuk menghubungi admin dewaplokis. Selama ada kesempatan,Pesan Anda akan saya balas. Terima Kasih<br /><br /><form id="kontak-dewaplokis" name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><br /><br /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /><br /><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea><br /><br /><input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><br /><br /><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><style scoped="" type="text/css">#comments,.post_meta,#blog-pager{display:none}
#main-wrapper{width:100%;padding:0}
form{color:#666}
#sidebar-wrapper{display:none}
#kontak-dewaplokis{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:0 auto;padding:10px;background:#dedede;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:96.8%;max-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#dedede;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:#34495e;margin:auto;max-width:140px;vertical-align:middle;cursor:pointer;padding:15px;font-size:15px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
img.contact-form-cross{line-height:40px;margin-left:5px}
.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:94.5%}}
</style><br /><br /><script type="text/javascript">//<![CDATA[if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');//]]></script><br /><br /><script data-src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
Ubah Silakan isi form di bawah ini untuk menghubungi admin dewaplokis. Selama ada kesempatan, Pesan Anda akan saya balas. Terima Kasih sesuai dengan keinginan Anda.
Silakan klik Update dan lihat hasilnya.


2. 2 Script
Silakan masuk ke blogger Account Anda. Masuk ke Theme  ➥ Edit HTML. Pastekan kode script berikut sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<script> if (typeof(BLOG_attachCsiOnload) != &#39;undefined&#39; &amp;&amp; BLOG_attachCsiOnload != null) { window[&#39;blogger_templates_experiment_id&#39;] = &quot;templatesV1&quot;;window[&#39;blogger_blog_id&#39;] = &#39;<data:blog.blogId/>&#39;;BLOG_attachCsiOnload(&#39;&#39;); }_WidgetManager._Init(&#39;//www.blogger.com/rearrange?blogIDx3d<data:blog.blogId/>&#39;,&#39;<data:blog.homepageUrl/>&#39;,&#39;<data:blog.blogId/>&#39;); _WidgetManager._RegisterWidget(&#39;_ContactFormView&#39;, new _WidgetInfo(&#39;ContactForm1&#39;, &#39;footer1&#39;, null, document.getElementById(&#39;ContactForm1&#39;), {&#39;contactFormMessageSendingMsg&#39;: &#39;Sending...&#39;, &#39;contactFormMessageSentMsg&#39;: &#39;Your message has been sent.&#39;, &#39;contactFormMessageNotSentMsg&#39;: &#39;Message could not be sent. Please try again later.&#39;, &#39;contactFormInvalidEmailMsg&#39;: &#39;A valid email address is required.&#39;, &#39;contactFormEmptyMessageMsg&#39;: &#39;Message field cannot be empty.&#39;, &#39;title&#39;: &#39;Contact Form&#39;, &#39;blogId&#39;: &#39;<data:blog.blogId/>&#39;, &#39;contactFormNameMsg&#39;: &#39;Name&#39;, &#39;contactFormEmailMsg&#39;: &#39;Email&#39;, &#39;contactFormMessageMsg&#39;: &#39;Message&#39;, &#39;contactFormSendMsg&#39;: &#39;Send&#39;, &#39;submitUrl&#39;: &#39;https://www.blogger.com/contact-form.do&#39;}, &#39;displayModeFull&#39;)); </script>

Script ini otomatis membaca blog Id serta URL home page. Jadi tidak perlu lagi melakukan set pada blogID dan URL untuk halaman Contact Us yang Anda buat.

Terakhir, tambahkan kode ini sebelum ]]></b:skin> atau </style>
.contact-form-widget {
 display: none}

Untuk Hasilnya, kurang lebih seperti ini.

formulir kontak blog
Contact Us versi dekstop

contact us blogspot
Contact Us Versi mobile


Cara Pasang Contact Form / Us di Blog Keren Responsive & Seo Friendly

Jika pada tutorial diatas cara membuat scriptnya terpisah antara theme dan page, lantas bagaimana  jika Anda mau melakukan pemasangan script ini langsung di halaman statis contact?. Maka silakan cari kode dibawah ini
<script type="text/javascript">//<![CDATA[if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');//]]></script><br /><br /><script data-src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

Setelah ketemu, letakkan script berikut ini dibawahnya
<script>
    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7412750930181655774';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d7412750930181655774','https://www.dewaplokis.com/','7412750930181655774');
    _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': '7412750930181655774', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    </script>

Maka jadinya akan seperti ini setelah digabungkan
Silakan isi form di bawah ini untuk menghubungi admin dewaplokis. Selama ada kesempatan,Pesan Anda akan saya balas. Terima Kasih<br /><br /><form id="kontak-dewaplokis" name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><br /><br /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /><br /><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <br /><br /><input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> <br /><br /><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><style scoped="" type="text/css">#comments,.post_meta,#blog-pager{display:none}
#main-wrapper{width:100%;padding:0}
form{color:#666}
#sidebar-wrapper{display:none}
#kontak-dewaplokis{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:0 auto;padding:10px;background:#dedede;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:96.8%;max-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#dedede;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:#34495e;margin:auto;max-width:140px;vertical-align:middle;cursor:pointer;padding:15px;font-size:15px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
img.contact-form-cross{line-height:40px;margin-left:5px}
.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:94.5%}}
</style><br /><br />
<script type="text/javascript">
//<![CDATA[if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]></script>
<script data-src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
 <script>
    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7412750930181655774';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d7412750930181655774','https://www.dewaplokis.com/','7412750930181655774');
    _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': '7412750930181655774', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    </script>
Ubah BlogId 7412750930181655774 dan  https://www.dewaplokis.com/ sesuai dengan milik Anda
Bagi Anda yang tidak mengerti tentang blogID blogger. penampakannya adalah seperti dibawah ini

cara pasang contact us blogger
BlogId Blogger
Lihat pada halaman posting atau page posting Anda. blogID posisinya berada diatas atau sebagai link address blogger.

Silakan klik Update jika semua sudah selesai dan lihat hasilnya. Anda bisa melakukan test dengan mengirim pesan ke alamat email blogger Anda.

Demikian tutorial kali ini tentang Cara Membuat Lalu Memasang Widget Contact Us Responsive Untuk Blogger. Jika ada pertanyaan, silakan ajukan di kotak komentar.

Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed