Bootstrap Email Subscription Form

This code snippet helps you to create a stylish email subscription form for your Bootstrap projects. It comes with a responsive layout, making it suitable for various screen sizes. You just need to attach it with the backend. Then users can enter their email addresses, and with a simple click, subscribe to your updates.

How to Create Bootstrap Email Subscription Form

1. First of all, load the Bootstrap CSS by adding the following CDN link into the head tag of your HTML document.

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

2. Now, create the HTML structure for our subscription form. Copy and paste the following HTML structure into your website’s HTML file where you want the subscription form to appear. Add an action attribute to the form element and define the URL where you want to submit form data to the server.

<div id="subscription_area">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="subscribe_now">
          <h4>subscribe</h4>
          <p>Get connected to our insights</p>
          <form class="subscribe_form">
            <div class="input-group">
               <input type="text" class="form-control" name="email" placeholder="Enter your email">
               <span class="input-group-btn">
                    <button class="btn btn-default" type="button">subscribe</button>
               </span>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

3. Add the following CSS styles to your website’s stylesheet or in a <style> tag in your HTML document.

body {
  background-color: #fbfbfb;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.subscribe_now h4 {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #34495e;
  font-weight: 800;
  text-align: center;
}
.subscribe_now p {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  color: #34495e;
  text-align: center;
}

.subscribe_form {
  max-width: 470px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0px 2px 5px 0px rgba(10, 6, 20, 0.24);
}
.subscribe_form:focus {
  outline: none;
}
.subscribe_form .form-control {
  border: none;
}
.subscribe_form .form-control:focus {
  box-shadow: none;
}
.subscribe_form input {
  height: 44px;
}
.subscribe_form button {
  border: none;
  height: 44px;
  background-color: #0ed085;
  color: #fff;
  margin: -1px;
  border-radius: 0;
  width: 135px;
  text-transform: uppercase;
  position: relative;
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
}
.subscribe_form button:hover, .subscribe_form button:focus, .subscribe_form button:active, .subscribe_form button:visited {
  color: #fff;
  background-color: rgba(14, 208, 133, 0.77);
  outline: none;
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
}
.subscribe_form button:hover:before, .subscribe_form button:focus:before, .subscribe_form button:active:before, .subscribe_form button:visited:before {
  background-color: rgba(14, 208, 133, 0.77);
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
}
.subscribe_form button:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 1px;
  background-color: #0ed085;
  width: 100%;
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
}
.subscribe_form .input-group-btn:last-child > .btn, .subscribe_form .input-group-btn:last-child > .btn-group {
  z-index: 2;
  margin-left: 0px;
}

Feel free to customize the form’s appearance and content to match your website’s design and branding. You can modify colors, fonts, and other styles in the CSS code to make it unique to your site.

That’s it! Hopefully, you’ve successfully implemented a Bootstrap Email Subscription Form on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.