Bootstrap Email Subscription Form

Bootstrap Email Subscription Form
Code Snippet:Inline Input Button, Subscription Form Using Bootstrap
Author: Immad Hamid
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 943
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X