Dipostingan kali ini kita akan membahas kembali seputar pembuatan Contact form pada laman Blogger. Seperti yang sudah pernah kita bahas sebelumnya Membuat Contact Form With Floating Label Input And Border Animation bahwa Contact Form mempunyai peran penting juga untuk pengunjung Blog agar dapat berkomunikasi dengan admin blog.
Nah di postingan kali ini kita akan membahas pembuatan Contact Form yang lain dari biasanya dan di kreasikan dengan tampilan Contact form dan Google Map. Contact Form sangat berguna bagi Blog Onlineshop sehingga dapat menambah kepercayaan pelanggan karena selain dapat memesan pelanggan dapat juga mengetahui lokasi atau toko onlineshop tersebut.
Langsung saja bagi sobat yang mau mencobanya berikut kita simak Cara Membuat Contact Form Blogger Dilengkapi Google Maps dengan tampilan PopUp.
Langkah Pertama
Silahkan salin kode CSS dibawah ini lalu letakkan di atas kode </head>.
<style type='text/css'>
/*<![CDATA[*/
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.container,.container-fluid{margin-right:auto;margin-left:auto}
.contact_right form,.container,.container-fluid{padding-left:15px;padding-right:15px}
.btn,.contact-form-button.contact-form-button-submit{white-space:nowrap;vertical-align:middle;cursor:pointer}
.contact_right img.icon{position:absolute;top:-2px;left:0;border:0}
.row{margin-right:-15px;margin-left:-15px}
#maps-contact{font-size:14px;position:fixed;top:-10000px;left:-10000px;background:#fff;z-index:9999;opacity:0;height:0;overflow-y:auto;overflow-x:hidden}
#maps-contact .container{padding-bottom:20px}
.maps-contact-map{margin-bottom:15px;height:378px}
.contact-form-button.contact-form-button-submit{background-color:#ff7600;-webkit-border-radius:0;-moz-border-radius:0;color:#fff;float:right!important;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.428571429;text-align:center;background-image:none;border:1px solid transparent;border-radius:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:-15px;text-align:left}
#maps-contact p{margin:0 0 10px;font-weight:lighter;position:relative}
#maps-contact p.address{padding-left:27px}
.col-md-4,.col-md-8{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
.btn,.form-control{padding:6px 12px;font-size:14px;line-height:1.42857143;background-image:none}
.clearfix:after,.clearfix:before,.container:after,.container:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.row:after,.row:before{display:table;content:" "}
,.clearfix:after,.container:after,.form-horizontal .form-group:after,.row:after{clear:both}
.txt_orange{color:#e67e22}
.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}
.form-group{margin-bottom:15px}
.form-control{display:block;width:100%;height:34px;color:#555;background-color:#fff;border:1px solid #ccc;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.pull-right{float:right!important}
.btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;}
.btn-orange{background-color:#ff7600;border-bottom:2px solid #d35400;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff}
.btn-orange.active,.btn-orange:active,.btn-orange:focus,.btn-orange:hover{background-color:#d35400;color:#fff;outline:0}
.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
.form-control::-moz-placeholder{color:#999;opacity:1}
.form-control:-ms-input-placeholder{color:#999}
.form-control::-webkit-input-placeholder{color:#999}
.form-control::-ms-expand{background-color:transparent;border:0}
.contact-line-header{margin-top:100px;margin-bottom:80px}
.head_contact{padding-bottom:50px;margin-bottom:0}
.text-center{text-align:center}
.team_hr_left{margin-right:30px;margin-left:15px}
.team_hr_right {margin-left: 30px;}
.team_hr{border:1px solid #fff;width:39.5%}
.team_hr,.thumb-overlay a{float:left}
.hr_gray{border:1px solid #ccc}
hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
.contact-line-header .head-txt{font-size:22px;margin-top:8px;font-weight:lighter}
.txt_darkgrey{color:#333}
.hide_contact{position:absolute;top:30px;right:35px;color:#333;font-size:40px;width:20px;height:20px;line-height:20px;text-align:center;text-decoration:none}
@media (min-width:768px){.container{width:750px}
}
@media (min-width:992px){.container{width:970px}
.col-md-8{width:66.66666667%;float:left}
.col-md-4{width:33.33333333%;float:left}
}
@media (min-width:1200px){.container{width:1170px}
}
/*]]>*/
</style>Langkah Ke Dua
Silahkan salin kode dibawah ini lalu letakkan di atas kode </body>.
<div id='maps-contact'>
<div class='container'>
<div class='row'>
<div class='contact-line-header head_contact'>
<div class='text-center'>
<div class='head-txt'>CONTACT US</div>
</div>
</div>
<div class='col-md-8'>
<div class='maps-contact-map' id='map'> </div>
<div class='clearfix'/>
</div>
<div class='col-md-4 contact_right'>
<p>Silahkan isi form contact dibawah ini untuk pertanyaan seputar dibalikseo.com, jika tidak ada halangan dengan segera saya pasti akan membalasnya, terima kasih sudah berkunjung</p>
<p class='address'><img alt='icon 1' class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5CIukTRkeS-fuaawbpehoHNtD6avNTXB9lZsY2nKiAllOczkxS2jOP8EH866zr8ISKzGcRaqdIXYN2vofVbvQDAa56AbTYU0YPsulXX9-EP5ex0mAuNulIlkIcPIfuc2c34h8SAHXxS82/s1600/location.png'/> Jl. Manggala 1 Blok K4 No.17 Cipondoh Makmur, Cipondoh, Kota Tangerang, Banten 15148</p>
<p class='address'><img alt='icon 2' class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Us3VUnqyxEdFnbEXNnI4y-nlNK0_hXkdGZTAJ5XXfitSotfXTC6h0kYJd2-acKcvsyVRq2CsXTA9XyiZvUxlyWnTELCupUORZj8LJK5B-BWgFNe2jAPANnbqOgTYwv7_itvD8Mv0JinF/s1600/phone1.png'/> 090-080-0110</p>
<p class='address'><img alt='icon 3' class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiemnOINpX09ypcMXY0-Ob9fjFxuQTq18LBNobkvR7WJXartYVAKGY16EEHmMSgrwUKzPHF9uh-uaRNUPnXriuo4kgwNGb8-onzfdMsZY7IMKM9057XJz1A7G82ySSrUXU85v3xnwjfwTe_/s1600/clock.png'/> Monday - Sunday, 09.00 - 18.00</p>
<form class='form-horizontal' name='contact-form'>
<div class='form-group'>
<input class='form-control' id='ContactForm1_contact-form-name' name='name' placeholder='Your Name...' type='text' value=''/>
</div>
<div class='form-group'>
<input class='form-control' id='ContactForm1_contact-form-email' name='email' placeholder='Your Email...' type='email' value=''/>
</div>
<div class='form-group'>
<textarea class='form-control' id='ContactForm1_contact-form-email-message' name='email-message' placeholder='Write down your message...' style='height: 130px;'/>
</div>
<button class='btn btn-orange pull-right' id='ContactForm1_contact-form-submit' type='button'>SEND</button><br/>
<div style='max-width: 240px; text-align: left; width: 100%;'>
<div id='ContactForm1_contact-form-error-message'>
</div>
<div id='ContactForm1_contact-form-success-message'>
</div>
</div>
</form>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
<a class='hide_contact' href='javascript:void' onclick='hideContact()' title='Close Contact'>&times;</a>
</div>
<script>
//<![CDATA[
function showContact() {
var o = document.getElementById("maps-contact");
o.style.opacity = "1";o.style.top = "0";o.style.left = "0";o.style.bottom = "0";o.style.right = "0";o.style.height = "100%";
};
function hideContact() {
var o = document.getElementById("maps-contact");
o.style.opacity = "0";o.style.top = "-10000px";o.style.left = "-10000px";o.style.height = "0";
};
// load google map
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCTbFF2Os0UkPBdJ7xPZo3m6Z-a8QyklPU&v=3.exp&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
function initialize() {
var myLatlng = new google.maps.LatLng(-6.179499, 106.xxxxxxx);
var mapOptions = {
zoom: 14,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
//]]>
</script>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '25527497397xxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d25527497397xxxxxxxxx','//AlamatURLBlog/','25527497397xxxxxxxxx');_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':'25527497397xxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>Perhatikan kode yang ditandai kuning silahkan sesuaikan untuk kode latitude Map -6.179499, 106.xxxxx silahkan ganti dengan kode lalitude yang diambil dari Google Map seperti dibawah ini.
Langkah Ke Tiga
Silahkan salin kode dibawah ini lalu letakkan bebas dimana saja atau bisa pada laman Contact Form untuk menampilkan Contact Form yang sudah dilengkapi dengan Google Map.
Perhatikan langkah penerapannya, dan SELESAI selamat mencoba semoga bermanfaat.
<a href='javascript:void' onclick='showContact()'>CONTACT</a>Perhatikan langkah penerapannya, dan SELESAI selamat mencoba semoga bermanfaat.
EmoticonEmoticon