<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="newsletter"> <div class="overlay"> <div class="container"> <h2>Contact For Free Site Visit</h2> <p style="text-align: center;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> <form action="#" name="myForm1" method="post"> <div class="input_group"> <input name="name" type="text" placeholder="Your Name" required="name"> <input name="phone" type="text" placeholder="Your Phone" required="Phone"> <button type="submit">Send</button> </div> <!-- End .input_group --> </form> </div> <!-- End .container --> </div> <!-- End .overlay --> </section>

.newsletter { background-attachment: fixed; background-size: cover; margin-top: 100px; height: 310px; position: relative; } .newsletter .overlay { width: 100%; height: 100%; text-align: center; } .newsletter .overlay { width:100%; height:100%; background: rgba(247, 48, 52, 0.89); text-align: center; } .newsletter h2 { font-weight: 700; text-transform: uppercase; } .newsletter h2, .newsletter p { color:#fff; -webkit-user-select:none; } .newsletter p { margin:18px 0 34px 0; } .newsletter form .input_group { width:735px; height:48px; position: relative; margin: 0 0 0 174px; } .newsletter form .input_group input { width:48%; height:100%; background:transparent; border:1px solid #fff; outline: none; padding-left:20px; padding-right: 20px; color:#fff; float:left; } .newsletter form .input_group input[type="email"] { border-left:none; } .newsletter form .input_group button { width:120px; height:100%; text-align: center; color:#FFF; background: #1c252c; position: absolute; right:-89px; border:none; font-weight: 700; text-transform: uppercase; outline: none; box-shadow: none; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .newsletter form .input_group button:hover, .newsletter form .input_group button:focus { background: #1c252c; } .newsletter form .input_group ::-webkit-input-placeholder { color: #fff; } .newsletter form .input_group :-moz-placeholder { /* Firefox 18- */ color: #fff; } .newsletter form .input_group ::-moz-placeholder { /* Firefox 19+ */ color: #fff; } .newsletter form .input_group :-ms-input-placeholder { color: #fff; }