Baru-baru ini awal tahun 2017 Google mengupdated semua produknya dan meredesign besar-besaran teruntuk teknologinya, hal tersebut dilakukan oleh Google semata-mata untuk kenyamanan pengguna internet dalam mengunjungi dan menggunakan produk-produk google. Tidak hanya sampai disitu saja bahkan untuk para pendaftar baru publisher Google Adsense pun berhasil dibuat bingung harap-harap cemas karena banyak dari pendaftar GA yang awalnya sangat senang iklan berhasil tampil di Blog atau website mereka namun beberapa jam bahkan ada yang sampai 1 minggu sudah tampil iklan tersebut tiba-tiba menghilang seperti yang dialami oleh anggota group publisher indonesia Kuliner Mas Ade.
Diblognya sudah tampil iklan satu minggu dan sudah ada penghasilannya namun entah kenapa tiba-tiba iklan blank namun setelah saya lihat kembali blognya sekarang sepertinya sudah tampil lagi iklannya.
Balik lagi ke Postingan kali ini saya akan membahas Membuat Contact Form With Floating Label Input And Border Animation, dimana kita akan membuat sedikit perbedaan pada tampilan Contact Form ada tambahan animasi label input dan border animasinya, gambarannya seperti penampakan dibawah ini yang saya ambil dari screen shoot structured data testing tool google.
Sangat menarik kan sobat ?
Dipostingan ini selain menambahkan animasi border ditambahkan juga floating label saat input, pokoknya keren deh, untuk sobat yang ingin mencobanya silahkan simak berikut ini
Contact Form Untuk Blogger
Silahkan sobat salin dan simpan kode-kode dibawah ini di halaman statis untuk contact formnya
Perhatikan kode yang ditandai silahkan ganti 9206728842819135413 dengan id blog sobat punya untuk url dibalikseo.com silahkan ganti juga dengan url blognya dan untuk kode jquery jika sudah terpasang di blog silahkan di hapus saja.
Contact Form Untuk Website
Itu tadi diatas untuk pemasangan Contact Form untuk Blogger, sekarang dibawah ini untuk pemasangan di Website, silahkan salin kode dibawah ini
Perhatikan baik-baik penerapan kodenya, untuk kode yang ditandai jika sudah terpasang sebelumnya silahkan sobat hapus saja. Baiklah ini saja sobat yang bisa dibagikan selamat mencoba.
<style scoped="scoped">
.post-outer {
background: #fff
}
.post-footer {
display: none
}
#contactForm .floating-label-form-group {
font-size: 14px;
position: relative;
margin-bottom: 0;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus {
position: relative;
}
#contactForm .floating-label-form-group:before {
display: block;
position: absolute;
right: 50%;
bottom: -1px;
width: 0;
height: 2px;
background-color: #0400bf;
content: "";
transition: width 0.4s ease-in-out;
}
#contactForm .floating-label-form-group:after {
display: block;
position: absolute;
left: 50%;
bottom: -1px;
width: 0;
height: 2px;
background-color: #0400bf;
content: "";
transition: width 0.4s ease-in-out;
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before,
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after {
width: 50%;
}
#contactForm .floating-label-form-group input,
#contactForm .floating-label-form-group textarea {
z-index: 1;
position: relative;
padding-right: 0;
padding-left: 0;
border: none;
border-radius: 0;
font-size: 18px;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: lighter;
background: none;
box-shadow: none !important;
resize: none;
}
#contactForm .floating-label-form-group label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: 12px;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: lighter;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top 0.3s ease, opacity 0.3s ease;
-moz-transition: top 0.3s ease, opacity 0.3s ease;
-ms-transition: top 0.3s ease, opacity 0.3s ease;
transition: top 0.3s ease, opacity 0.3s ease;
}
#contactForm .floating-label-form-group::not(:first-child) {
padding-left: 14px;
border-left: 1px solid #eeeeee;
}
#contactForm .floating-label-form-group-with-value label {
top: 0;
opacity: 1;
}
#contactForm .floating-label-form-group-with-focus label {
color: #0400bf;
}
#contactForm {
border-top: 1px solid #ddd;
}
#contactForm textarea.form-control {
height: auto;
}
#contactForm .form-control {
display: block;
width: 100%;
color: #555;
}
#contactForm input:focus,
#contactForm input:active,
#contactForm textarea:focus,
#contactForm textarea:active {
outline: none;
}
#contactForm .btn,
#contactForm .contact-form-button-submit {
font-family: "Helvetica", "Arial", sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: 800;
letter-spacing: 1px;
border-radius: 0;
padding: 0 25px;
height: 51px;
line-height: 51px;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
margin: 20px 0 0;
background-image: none;
}
#contactForm .contact-form-button {
height: 51px;
line-height: 51px;
}
#contactForm .btn-default:hover,
#contactForm .btn-default:focus,
#contactForm .contact-form-button-submit:hover,
#contactForm .contact-form-button-submit:focus {
background-color: #0400bf;
border: 1px solid #0400bf;
color: white;
}
.contact-form-error-message-with-border,
.contact-form-success-message-with-border {
background: #fff;
border: 1px solid #ddd;
bottom: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
color: #666;
font-size: 16px;
font-weight: normal;
line-height: 30px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
margin: 20px 0 0;
}
.contact-form-cross {
height: 11px;
margin: 0 5px;
vertical-align: 0!important;
width: 11px;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-goog-ms-box-shadow: none!important;
box-shadow: none!important;
}
</style>
<form name="contact-form" id="contactForm">
<div class="floating-label-form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="ContactForm1_contact-form-name" name="name" value="" />
</div>
<div class="floating-label-form-group">
<label>Email Address</label>
<input type="text" class="form-control" placeholder="Email Address" id="ContactForm1_contact-form-email" name="email" value="" />
</div>
<div class="floating-label-form-group">
<label>Message</label>
<textarea rows="5" class="form-control" name="email-message" placeholder="Message" id="ContactForm1_contact-form-email-message"></textarea>
</div>
<input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" value="Kirim" />
<div class="clear"></div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(function() {
$("body").on("input propertychange", ".floating-label-form-group", function(e) {
$(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
}).on("focus", ".floating-label-form-group", function() {
$(this).addClass("floating-label-form-group-with-focus");
}).on("blur", ".floating-label-form-group", function() {
$(this).removeClass("floating-label-form-group-with-focus");
});
});
</script>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<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'] = '9206728842819135413';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d9206728842819135413','//dibalikseo.com/','9206728842819135413');
_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': '9206728842819135413', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>Perhatikan kode yang ditandai silahkan ganti 9206728842819135413 dengan id blog sobat punya untuk url dibalikseo.com silahkan ganti juga dengan url blognya dan untuk kode jquery jika sudah terpasang di blog silahkan di hapus saja.
Contact Form Untuk Website
Itu tadi diatas untuk pemasangan Contact Form untuk Blogger, sekarang dibawah ini untuk pemasangan di Website, silahkan salin kode dibawah ini
<style scoped="scoped">
#contactForm .floating-label-form-group {
font-size: 14px;
position: relative;
margin-bottom: 0;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus {
position: relative;
}
#contactForm .floating-label-form-group:before {
display: block;
position: absolute;
right: 50%;
bottom: -1px;
width: 0;
height: 2px;
background-color: #0400bf;
content: "";
transition: width 0.4s ease-in-out;
}
#contactForm .floating-label-form-group:after {
display: block;
position: absolute;
left: 50%;
bottom: -1px;
width: 0;
height: 2px;
background-color: #0400bf;
content: "";
transition: width 0.4s ease-in-out;
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before,#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after {
width: 50%;
}
#contactForm .floating-label-form-group input,
#contactForm .floating-label-form-group textarea {
z-index: 1;
position: relative;
padding-right: 0;
padding-left: 0;
border: none;
border-radius: 0;
font-size: 18px;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: lighter;
background: none;
box-shadow: none !important;
resize: none;
}
#contactForm .floating-label-form-group label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: 12px;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: lighter;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top 0.3s ease, opacity 0.3s ease;
-moz-transition: top 0.3s ease, opacity 0.3s ease;
-ms-transition: top 0.3s ease, opacity 0.3s ease;
transition: top 0.3s ease, opacity 0.3s ease;
}
#contactForm .floating-label-form-group::not(:first-child) {
padding-left: 14px;
border-left: 1px solid #eeeeee;
}
#contactForm .floating-label-form-group-with-value label {
top: 0;
opacity: 1;
}
#contactForm .floating-label-form-group-with-focus label {
color: #0400bf;
}
#contactForm {
border-top: 1px solid #ddd;
}
#contactForm textarea.form-control {
height: auto;
}
#contactForm .form-control {
display: block;
width: 100%;
color: #555;
}
#contactForm input:focus,
#contactForm input:active,
#contactForm textarea:focus,
#contactForm textarea:active {
outline: none;
}
#contactForm .btn {
font-family: "Helvetica", "Arial", sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: 800;
letter-spacing: 1px;
border-radius: 0;
padding: 15px 25px;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
margin: 20px 0 0;
}
#contactForm .btn-default:hover,
#contactForm .btn-default:focus {
background-color: #0400bf;
border: 1px solid #0400bf;
color: white;
}
</style>
<form action="#" method="POST" name="sentMessage" id="contactForm">
<div class="floating-label-form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" name="name" required="required">
</div>
<div class="floating-label-form-group">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" name="_replyto" required="required">
</div>
<div class="floating-label-form-group">
<label>Subject</label>
<input type="text" class="form-control" placeholder="Subject" id="subject" name="_subject" required="required">
</div>
<div class="floating-label-form-group">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required="required"></textarea>
</div>
<button type="submit" class="btn btn-default">Send</button>
</form>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(function() {
$("body").on("input propertychange", ".floating-label-form-group", function(e) {
$(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
}).on("focus", ".floating-label-form-group", function() {
$(this).addClass("floating-label-form-group-with-focus");
}).on("blur", ".floating-label-form-group", function() {
$(this).removeClass("floating-label-form-group-with-focus");
});
});
</script>Perhatikan baik-baik penerapan kodenya, untuk kode yang ditandai jika sudah terpasang sebelumnya silahkan sobat hapus saja. Baiklah ini saja sobat yang bisa dibagikan selamat mencoba.
EmoticonEmoticon