Floating Label Input And Border Animation Contact Form With Pure Css

Masih ingat dengan contact form dengan floating label input dan border animation yang sebelumnya aku bagikan? Yup... kali ini aku akan share hal yang serupa adalah menciptakan contact form dengan floating label input dan border animation namun kali ini hanya memakai CSS saja. Berbeda dengan contact form sebelumnya yang memakai tunjangan jquery, dengan hanya CSS maka contact form ini lebih ringan dan kondusif bila dipakai untuk blog dengan Accelerated Mobile Page.

Contact form ini aku ambil dari sini yang lalu aku modifikasi sedikit tampilannya dan border animasinya biar sesuai dengan topik ini sehingga menyerupai pada gambar di bawah ini.


Contact form ini dapat dipakai di blog apa saja baik di Blogger, Wordpress, ataupun lainnya dengan bantuan Fromspree sehingga kondusif untuk blog dengan Accelerated Mobile Page.

Demo on Blogger with AMP

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 instruksi 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 memakai halaman Thanks sendiri untuk mengalihkan redirect ke halaman Thanks Formspree, silahkan simak postingan ini.

Selesai, selamat mencoba....


Sumber https://www.kompiajaib.com/

Share this post