Animated flat contact us form
<div class="container"> <div class="row"> <div class="col-lg-7"> <h2 class="mt-4">Contact us</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <form action=""> <div class="form-group"> <input type="text" class="form-control"> <span data-placeholder="First Name"></span> </div> <div class="form-group"> <input type="text" class="form-control"> <span data-placeholder="Last Name"></span> </div> <div class="form-group"> <input type="email" class="form-control"> <span data-placeholder="Email Address"></span> </div> <div class="form-group"> <input type="tel" class="form-control"> <span data-placeholder="Mobile Number"></span> </div> <div class="form-group"> <textarea name="" id="" rows="3" class="form-control"></textarea> <span data-placeholder="Message"></span> </div> <div class="mt-4"> <button class="btn btn-primary" type="submit">Submit</button> </div> </form> </div> <div class="col-lg-5 mt-4"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d224345.97161919047!2d77.06889754725145!3d28.527519806455203!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd5b347eb62d%3A0x52c2b7494e204dce!2sNew%20Delhi%2C%20Delhi!5e0!3m2!1sen!2sin!4v1567239590884!5m2!1sen!2sin" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe> </div> </div> </div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); body { font-family: 'Poppins', sans-serif; } .form-group { border-bottom: solid 2px #ccc; position: relative; margin-top: 30px;} .form-group textarea, .form-group textarea:focus, .form-group input, .form-group input:focus { border:none; box-shadow: none; position: relative; background: transparent; z-index: 9; margin-left: -12px;} .form-group span:before { content: attr(data-placeholder); position: absolute; top: 50%; left: 0px; color: #333; transform: translateY(-50%); z-index: 1; transition: 0.5s;} .form-group span:after { content: ''; position: absolute; width: 0%; height: 2px; background-image: linear-gradient(120deg, #2196F3, #3F51B5); transition: .5s;} .focus + span:before { top:-3px; color:#00BCD4;} .focus + span:after { width: 100%; } .btn { border-radius: 0; font-size: 21px; padding: 8px 20px;} </style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $('.form-group input, .form-group textarea').on("focus", function(){ $(this).addClass('focus'); }); $(".form-group input, .form-group textarea").on("blur", function(){ if($(this).val() == "") $(this).removeClass("focus"); }); </script>