Newsletter template for websites

      No Comments on Newsletter template for websites

Newsletter template for websites – free code for a newsletter form, in easy CSS. This form is completely responsive. It uses Bootstrap framework.

Note: Include Bootstrap CDN while using this code snippet or simple copy paste this in head part of your website.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Newsletter template

Newsletter template

Markup:

  <section class="bg-img text-center">
        <div class="container">
          <h2>
            <strong>Subscribe</strong>
          </h2>
          <h6 class="font-alt">Get weekly top new jobs delivered to your inbox</h6>
          <br><br>
          <form class="form-subscribe" action="#">
            <div class="input-group">
              <input type="text" class="form-control input-lg" placeholder="Your eamil address">
              <span class="input-group-btn">
                <button class="btn btn-success btn-lg" type="submit" >Subscribe</button>
              </span>
            </div>
          </form>
        </div>
      </section>
 

CSS:

section
{
  padding:4%;
  background:#7e8890;
}
h2,h6
{
  color:#e6e6e6;
}
.form-subscribe
{
  max-width:600px;
  margin:0 auto
}
.form-subscribe .form-control
{
  background-color:hsla(0,0%,100%,.8);
  padding-left:24px;
  padding-right:24px;
  letter-spacing:1px;
  border:none;
  border-top-left-radius:36px;
  border-bottom-left-radius:36px
}
.form-subscribe .form-control.focus,.form-subscribe .form-control:focus
{
  z-index:2;
  background-color:hsla(0,0%,100%,.8)
}
.form-subscribe .btn
{
  border-top-right-radius:36px;
  border-bottom-right-radius:36px;
  background:#7ec855;
  border-color:#7ec855;
  height:46.5px;
}

Demo:

See the Pen Newsletter demo by scanfcode (@scanfcode) on CodePen.

Summary
Newsletter template
Article Name
Newsletter template
Description
Newsletter template for websites - free code for a newsletter form, in easy CSS. This form is completely responsive. It uses Bootstrap framework.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *