<body>
     <div id="get-in-touch">
        <div class="container">
          <div class="row">
               <div class="col-lg-12">
                  <div class="contact-form">
                   <form role="form">
                       <div class="form-group">
                          <input type="text" class="form-control fname" placeholder="Name">
                       </div>
                       <div class="form-group">
                          <input type="email" class="form-control aemail" placeholder="Email">
                       </div>
                       <div class="form-group">
                          <input type="text" class="form-control" placeholder="Subject">
                       </div>
                       <div class="form-group">
                        <textarea class="form-control annmes" rows="3" placeholder="Enter Your Message Here"></textarea>
                       </div>
                        <button type="button" class="btn btn-danger btn-lg btn-block annbtn">Contact us</button>
                      </form> 						

                  </div>
				  <p id="thanks">Thanks </p>
               </div>
               
                </div><!-- div col-->
          </div><!--row-->
        </div> <!--container-->
     </div><!--get in touch-->

    </body>
</html>
body{
    overflow:hidden;
}

/* get in touch */
#get-in-touch{
    background-color: black;
    padding-top: 60px;
    padding-bottom: 60px;
	min-height: 1800px;
}
#get-in-touch .contact-form{
    padding-left: 30px;
    padding-right: 30px;
}
.form-control
{
    background-color: #373233;
    border: 3px solid #2E4556;
    color: #FFF;
    padding:21px;
}
.contact-form textarea{
    height: 160px;
}
.contact-form .btn-danger{
    background-color: #2E4556;
    border: #2E4556;
}
.newhover{
	background-color: #CCC;
	border: 3px solid #CCC;
	transition: all 1s ease-in-out;
}
/*-----------------------*/
#thanks{
	margin-top:30px;
	color: #FFF;
	text-align: center;
    
}
$(function(){
	
$(".form-control").hover(function(){
			$(this).toggleClass("newhover");
		});
	
/* -------------------------- Click Function to FadTo/Get/and Set Values --------------------------- */
	$(".annbtn").click(function(){
		$(".contact-form").fadeTo("slow", 0.5);
		
		$("#thanks").text("Thanks" + " " + $(".fname").val()+ " " + "we will contact you on"+ " " + $(".aemail").val());
		$(".annmes").val("I've added this by jQuery");		
	}); //end click
	
}); //end jQuery code

Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js