Floating Label Input And Border Animation Contact Form With Pure CSS

Apakah kalian masih ingat dengan contact form dengan floating label input dan border animation yang sebelumnya saya bagikan?. Oke kalau begitu jika kalian masih ingat, karena 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. Hanya dengan menggunakan CSS maka contact form ini lebih ringan dan aman jika digunakan untuk blog dengan Accelerated Mobile Page.

Contact form ini bisa digunakan di blog apa saja baik di Blogger, Wordpress, maupun lainnya dengan bantuan Fromspree sehingga aman untuk blog dengan Accelerated Mobile Page. Contact form ini pembuatannya juga sangat mudah, kalian hanya perlu meletakkan kode-kode pada bagian tertentu. Contact form ini saya ambil dari sini yang kemudian saya modifikasi sedikit tampilannya dan saya tambahin border animasinya agar sesuai dengan topik ini sehingga datap terlihat cantik.

Cara Membuat Floating Label Input And Border Animation Contact Form

Jika Anda ingin mencobanya kalian bisa mengituki langkah-langkahnya di bawah ini. Tapi sebelum membuatnya alangkah baiknya kita sediakan dulu kopi sama rokok, supaya kita semangat dalam ngeblog. Oke langsung saja kita buat langkah demi langkah contact form animation.

1. Silahkan simpan CSS di bawah ini tapat diatas ]]></b:skin> atau </style>

#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 kalian ganti your@email.co dengan alamat email kalian. Cara diatas dapat kalian modifikasi sendiri sesuka kalian, atau bisa juga kalian menyesuaikannya gengan gambar. Selesai, selamat mencoba....