Contact Form With Floating Label Input And Border Animation

Ditulis oleh: Adhy Suryadi
Ditulis pada: 6/26/2016

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.

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.

DEMO on Blogger

atau

DEMO on JSFiddle

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.

Solusi Jitu Dan Simple Mengatasi Error Contact Form

Selamat mencoba...

Contact Form With Floating Label Input And Border Animation

Ditulis oleh: Adhy Suryadi Ditulis pada: 6/26/2016

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 6/26/2016