Contact Form With Floating Label Input And Border Animation

Contact Form With Floating Label Input And Border Animation

Bola Hero Gawai

Contact Form With Floating Label Input And Border Animation

Contact Form With Floating Label Input And Border Animation
Akhir-akhir ini Google melakukan re-design besar-besaran pada hampir semua websitenya menjadi lebih flat, simple, dan elegan. Dan salah satu yang menarik perhatian saya yaitu pada form yang digunakan pada beberapa tool Google.

Pada tool-tool tersebut menggunakan form dengan efek animasi border yang cukup menarik. Melihat hal tersebut kemudian saya teringat, ini cukup menarik juga jika dibuatkan untuk contact form blog.

Salah satu tool yang menggunakan form dengan animasi border ini yaitu structured data testing tool yang seperti pada animasi gif di bawah ini.

Contact Form With Floating Label Input And Border Animation

Cukup menarik, bukan?

Nah selain animasi border, kemudian saya juga menambahkan floating label pada input dengan jquery yang saya ambil dari blog Github saya agar contact form menjadi lebih menarik.

Untuk demonya silahkan coba pada contact form demo pada link di bawah ini.


atau


Jika Anda ingin mencobanya silahkan copy kode-kode di bawah ini.

1. Untuk Blogger
Silahkan simpan kode di bawah ini di halaman satis untuk contact form


<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'] = '260108885892807697';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d260108885892807697','//kompiland.blogspot.com/','260108885892807697');
_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': '260108885892807697', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Untuk kode jquery yang saya marking di atas silahkan hapus jika di blog Anda sudah menggunakan jquery library.

Ganti kode 260108885892807697 dengan ID blog Anda.

Ganti kode //kompiland.blogspot.com/ dengan URL blog Anda.

2. Untuk Website


<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>

Untuk kode jquery yang saya marking di atas silahkan hapus jika di blog Anda sudah menggunakan jquery library.

Untuk website selain Blogger, agar mudah menggunakan contact form yang dihubungkan dengan Gmail silahkan coba postingan ini.


Selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

5 Comments Add Comment

Banyak bener kodenya kang, apa ngk ngeberatin blog?

Balas

Kodenya hanya berpengaruh pada halaman contact saja, tidak ke seluruhan halaman blog.

Balas

Kalau untuk sub heading, heading, minor heading dengan efek begitu gimana kang?

Balas

Sepertinya untuk h1, h2, h3, dll tidak perlu label, namun bisa saja menggunakan animasi border ketika di-hover. Tinggal buat position:relative pada h1, h2, dll kemudian gunakan pseudeo :before dan :after seperti di atas.

Balas

Ikut nyimak aje dulu

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×