"Bootstrap Subscribe Newsletter Form"
Bootstrap 4.1.1 Snippet by xorstack

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="container"> <div class="row"> <div class="col-sm-8"> <div class="content"> <img src="https://multimedia.ibt-mail.com/ibt-B/photos/5e373759-92af-4c48-953e-059c7db110ca.png"/> <div class="input-group"> <form action="https://www.ibt-mail.com/add_subscriber.html" accept-charset="utf-8" method="post"> <!-- Email field (required) --> <input type="text" name="email"/><br/> <!-- List token --> <!-- Get the token at: https://www.ibt-mail.com/campaign_list.html --> <input type="hidden" name="campaign_token" value="Y" /> <!-- Add subscriber to the follow-up sequence with a specified day (optional) --> <input type="hidden" name="start_day" value="0" /> <!-- Subscriber button --> <input type="submit" value="Submit"/> </form> <!--<input type="email" class="form-control" placeholder="Enter your email"> <span class="input-group-btn"> <button class="btn" type="submit">Subscribe Now</button>--> </span> </div> </div> </div> <div class="col-sm-4"> <img src="https://multimedia.ibt-mail.com/ibt-B/photos/6849b256-5e6a-441c-9dca-0fc11e52f0c5.jpg"/> </div> </div> </div> </section>
.newsletter { padding: 80px 0; background: #19beda; } .newsletter .content { max-width: 650px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } .newsletter .content h2 { color: #243c4f; margin-bottom: 40px; } .newsletter .content .form-control { height: 50px; border-color: #ffffff; border-radius:0; } .newsletter .content.form-control:focus { box-shadow: none; border: 2px solid #243c4f; } .newsletter .content .btn { min-height: 50px; border-radius:0; background: #243c4f; color: #fff; font-weight:600; }

Related: See More


Questions / Comments: