Cara Membuat Contact Us Dengan Script HTML Pada Halaman Blogger
Agustus 25, 2020
Contact us juga menjadi salah satu halaman pendukung pada blog yang wajib ada jika anda mau mendaftarkan blog anda pada google adsense. Jika anda tidak melengkapi blog anda dengan halaman ini maka siap-siap anda ditolak dengan isi pesan “ navigasi tidak benar “ karena halaman ini termasuk kedalam navigasi. Makanya kalian sering melihat halaman kontak ini pada menu. Selain itu contact us juga perlu untuk membuat halaman privacy policy, disclaimer dan TOS.
Cara membuat layanan Contact Us sebenarnya ada banyak macam. Bisa dibuat sendiri jika menguasai script HTML, atau juga menggunakan layanan gratis di internet ataupun menggunakan widget gratis dari blogspot. Tetapi kali ini saya membuat tutorial cara membuat contact us dengan script HTML berikut caranya.
Cara Membuat Contact Us Via Email Dengan HTML Pada Halaman Blogger
1. Buka halaman blogger.
2. Buat Halaman baru dan pilih HTML copy dan paste kode dibawah ini.
<form id="kontak-seo" name="contact-form" style="
padding-right: 25px;
"><br>
<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" size="30" placeholder="Email *" type="text" value=""><br>
<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="Send Message"> <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}
form{color:#666}
#kontak-seo{margin:auto;max-width:300px}
#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}
#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}
#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;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;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:100%;}}
.contact_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.8);z-index:99999}
.contact_message{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:30%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.contact_message:before{content:"f164";font-family:FontAwesome;font-weight:500;font-size:30px;display:block;margin-bottom:10px}
@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}
</style><br>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script><br>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '58891862532827193632';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID58891862532827193632','//blogtes6.blogspot.com/','58891862532827193632');
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'><div class='contact_message'><b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div></div><br/>", "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": "58891862532827193632", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
//]]>
</script>
<div class="clear"></div>3. Publikasikan dan selesai.
Cari code yang sudah saya tandai berwarna merah ganti dengan ID Blog dan Alamat blog kalian masing-masing.
Cukup mudah bukan? Itulah tutorial dari saya cara membuat Contact US di halaman blogger. Jika artikel ini bermanfaat jangan lupa share ke teman-teman kalian. Selamat mencoba, jika terdapat eror atau ada yang tidak berfungsi dengan baik bisa langsung di tanyakan.
