<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>
$('.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");
});