In today’s digital era, building an effective subscription form is crucial for any website looking to expand its reach and engage with its audience. Bootstrap, with its robust framework and easy-to-use components, offers a seamless solution for creating subscription forms that are both visually appealing and functional.
In this article, we’ll walk you through the step-by-step process of crafting a Bootstrap “Subscribe Now” form for your website.
Step 1: Newsletter Subscription Form With HTML
This HTML code represents a user-friendly newsletter subscription form structure. It begins with a container, row, and column layout structure, ensuring responsiveness across devices. Inside, a compelling headline invites users to subscribe, complemented by a succinct description. The email input field, housed within an input group, facilitates easy subscription, while the submission button encourages action.
<div class="newsletter"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="content"> <h2>SUBSCRIBE NOW</h2> <h6 class="content-tuned">Subscribe to our newsletter and stay tuned with future updates</h6> <div class="input-group"> <input type="email" class="form-control" placeholder="Enter email to subscribe"> <span class="input-group-btn"> <button class="btn" type="submit">Subscribe Now</button> </div> <div class="text-center"> <a class="unsubscribe-link" href="#">Would you like to unsubscribe?</a> </div> </div> </div> </div> </div> </div>
Step 2: Styling for Newsletter Subscription Section
This CSS code defines the styling for a newsletter subscription section, featuring a centered content layout with background padding, emphasizing readability and user interaction. It utilizes a cohesive color scheme, sleek input field design, and hover effects for enhanced user engagement.
.newsletter {
padding: 80px 0;
background: #CCBD99;
}
.newsletter .content {
max-width: 650px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
}
.content-tuned{
font-size: 0.8rem;
margin-bottom: 34px !important;
color: #fff;
}
h2 {
color: #fff;
margin-bottom: 6px;
}
.form-control {
height: 50px;
border-color: #ffffff;
border-radius: 2px 0px 0px 2px;
}
.form-control:focus {
box-shadow: none !important;
border: 2px solid #243c4f;
border-color: none;
}
.btn {
min-height: 50px;
border-radius:0;
background: black;
color: #fff;
font-weight:300;
}
.btn:hover {
background: #888758;
color: #fff
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25) !important;
}
.unsubscribe-link{
text-decoration: none !important;
font-size: 13px;
color: #fff;
}
.unsubscribe-link:hover{
text-decoration: none !important;
color: #fff;
}Step 3 : CDNs
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js
Bootstrap Responsive Subscribe Now Form Dem0
By following these steps, you can create a professional-looking Bootstrap “Subscribe Now” form for your website, allowing you to effortlessly capture leads and grow your audience. With Bootstrap’s intuitive framework and extensive documentation, building and customizing subscription forms has never been easier.
