Cara simpel membuat contact us keren di blog

Tips seputar ngeblog membuat contact form (contact us) dengan mudah

Giat Mengajar - Halo sobat blogger pada kesempatan kali ini saya akan kembali membuat tutorial mengenai tips blogging. Hal yang akan saya bahas ialah membuat contact us atau dalam bahasa indonesia hubungi kami pada blog kita.

Sebelum memulai cara membuatnya, perlu anda ketahui apa itu contact us blog. Contac us yaitu sarana atau alat sebagai media komunikasi antara pengunjung dengan pengelola blog. Misalkan anda ingin bertanya atau request sesuatu pada saya, anda bisa menanyakanya melalui menu contact us.

Maka berarti hal ini merupakan kewajiban untuk suatu blog atau website memilikinya agar dapat menjalin komunikasi yang baik dengan pengunjung. Anda sudah membuatnya? jika belum ikuti langkah - langkah berikut.

Contact us ini sebenarnya saya peroleh dari blognya mbak arlina yaitu arlinadzgn.com dikarenakan saya belum bisa membuatnya sendiri.


Langkah membuat contac us pada blog blogger

1. Masuk ke blogger
2. klik halaman dan buat halaman baru
3. Beri judul contact us, ubah metode menulis dari compose ke html.
4. Tempelkan kode di bawah ini

<div dir="ltr" style="text-align: left;" trbidi="on">
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<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>
</div>
</form>
<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7hV_YNQTYyqU5Bw1gS31ZJHylqWS1KhU-qEfI8Ht3hKLKeDM81yBoTVjSVdaSBl2emSHVy8pxCNJTKlakWWy-CxXSqDB0Y-rRS3xxLQMwUujy5KjYUGoVI99Kb554bRU3zs-Oe4Cb9IF6/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>
<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'] = '677369144795890581';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//giatmengajar.blogspot.com/','677369144795890581');
_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': '677369144795890581', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script></div>

jika sudah, ubah 677369144795890581 dan giatmengajar.blogspot.com  dengan ID dan alamat blog anda, untuk mengetahui ID blognya cukup buka dashboard blogger pada blog yang akan di buatkan contact us. Pada url atau link bar atas akan terlihat id blog sobat. Lihat gambar berikut

Setelah selesai mengganti kode ID dan URL blog dengan milik anda. Klik publikasikan. Selamat kini blog anda telah memiliki contact us.

Untuk menerapkan contac us pada blog seperti pada bagian footer atau di atas header anda harus mengedit kode html template. Terimakasih.

Baca juga : Cara membuat sitemap blog keren

Mohon maaf jika penjelasannya masih membingungkan. Bila terdapat kekurangan jika bersedia membantu melengkapinya. Untuk request atau bertanya sesuatu sampaikan pada kolom komentar atau menu contact us. 

Share this post