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>