Floating Label Input And Border Animation Contact Form With Pure CSS

Ditulis oleh: Adhy Suryadi

Ditulis pada: 9/27/2016

Masih ingat dengan contact form dengan floating label input dan border animation yang sebelumnya saya bagikan? Yup... kali ini saya akan share hal yang serupa yaitu membuat contact form dengan floating label input dan border animation namun kali ini hanya menggunakan CSS saja. Berbeda dengan contact form sebelumnya yang menggunakan bantuan jquery, dengan hanya CSS maka contact form ini lebih ringan dan aman jika digunakan untuk blog dengan Accelerated Mobile Page.

Contact form ini saya ambil dari sini yang kemudian saya modifikasi sedikit tampilannya dan border animasinya agar sesuai dengan topik ini sehingga seperti pada gambar di bawah ini.


Contact form ini bisa digunakan di blog apa saja baik di Blogger, Wordpress, ataupun lainnya dengan bantuan Fromspree sehingga aman untuk blog dengan Accelerated Mobile Page.


Jika Anda ingin mencobanya, silahkan ikuti langkahnya di bawah ini.

1. Silahkan simpan CSS di bawah ini

#contactForm input:focus ~ label,

#contactForm textarea:focus ~ label,

#contactForm input:valid ~ label,

#contactForm textarea:valid ~ label {

  font-size: 0.75em;

  color: #8e44ad;

  top: -2.25rem;

  -webkit-transition: all 0.125s ease;

  transition: all 0.125s ease;

}



#contactForm .styled-input {

  float: left;

  width: 33.3333%;

  margin: 2rem 0 1rem;

  padding: 0 10px 0 0;

  position: relative;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



#contactForm .styled-input-in {

  position: relative;

}



#contactForm {

  margin-right: -10px

}



#contactForm .styled-input label {

  color: #999;

  padding: 1rem;

  position: absolute;

  top: 0;

  left: 0;

  -webkit-transition: all 0.25s ease;

  transition: all 0.25s ease;

  pointer-events: none;

  line-height: 1;

}



#contactForm .styled-input.wide {

  width: 100%;

}



#contactForm input,

#contactForm textarea {

  padding: 1rem 1rem;

  border: 1px solid #ddd;

  width: 100%;

  font-size: 1rem;

  background: #fafafa;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box

}



#contactForm input ~ .span1,

#contactForm textarea ~ .span1 {

  display: block;

  width: 0;

  height: 3px;

  background: #8e44ad;

  position: absolute;

  left: 50%;

  -webkit-transition: width 0.4s ease-in-out;

  transition: width 0.4s ease-in-out;

}



#contactForm input ~ .span2,

#contactForm textarea ~ .span2 {

  display: block;

  width: 0;

  height: 3px;

  background: #8e44ad;

  position: absolute;

  right: 50%;

  -webkit-transition: width 0.4s ease-in-out;

  transition: width 0.4s ease-in-out;

}



#contactForm input ~ span {

  bottom: 0;

}



#contactForm textarea ~ span {

  bottom: 5px;

}



#contactForm input:focus,

#contactForm textarea:focus {

  outline: 0;

}



#contactForm input:focus ~ .span1,

#contactForm textarea:focus ~ .span1,

#contactForm input:focus ~ .span2,

#contactForm textarea:focus ~ .span2 {

  width: 50%;

}



#contactForm textarea {

  width: 100%;

  min-height: 15em;

}



#contactForm .btn {

  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: #fafafa;

  border: 1px solid #ddd;

  cursor: pointer;

  margin: 20px 0 0;

  background-image: none;

}



#contactForm .btn-default:hover,

#contactForm .btn-default:focus {

  background-color: #8e44ad;

  border: 1px solid #0400bf;

  color: white;

}

2. Untuk menampilkan contact form-nya silahkan gunakan kode HTML di bawah ini.

 <form action="https://formspree.io/your@email.co" method="POST" target="_blank" name="sentMessage" id="contactForm">

    <div class="styled-input">

      <div class="styled-input-in">

      <input type="text" name="name" required="required" />

      <label>Name</label>

      <span class="span1"></span><span class="span2"></span> </div></div>

    <div class="styled-input">

      <div class="styled-input-in">

      <input type="email" name="_replyto" required="required" />

      <label>Email</label>

      <span class="span1"></span><span class="span2"></span> </div></div>

    <div class="styled-input">

      <div class="styled-input-in">

      <input type="text" name="_subject" required="required" />

      <label>Subject</label>

      <span class="span1"></span><span class="span2"></span> </div></div>

    <div class="styled-input wide">

      <div class="styled-input-in">

      <textarea name="message" required="required"></textarea>

      <label>Message</label>

      <span class="span1"></span><span class="span2"></span> </div></div>

    <button type="submit" class="btn btn-default">Send</button>

  </form>

Silahkan ganti your@email.co dengan alamat email Anda. Jika ingin menggunakan halaman Thanks sendiri untuk mengalihkan redirect ke halaman Thanks Formspree, silahkan simak postingan ini.

Selesai, selamat mencoba....