content logo

Bootstrap Footers:

Bootstrap Footer with Contact Form and Newsletter Subscription

A lot of websites have newsletter which you can subscribe to. Starting an email newsletter will let you turn people visiting your website into all time subscribers. When you interest them with your email newsletter, then you will basically have a permanent member in your website who will try to stay in touch and will visit your site occasionally. So, in simpler words, if you don’t have a newsletter, then you are losing a lot of subscribers and potential customers each day.

You might wonder, what if I just do the same thing in my social media page. It does have an effect and will definitely help but think of it this way: you don’t own the social media platform but you own the website. The second problem is where to include the call to action to ask users to join your newsletter. Well, we have the perfect solution for you.

The code in this post, features a professional Bootstrap footer newsletter subscription template. It has a dark background and a black and orange theme. This contact-us footer includes the contact information plus the newsletter section. You can have other social networks in footers as well. It also features a button which lights up in hover mode. All in all, this Bootstrap footer can be such a great addition to your website.

#

Bootstrap Footer

#

Contact Us Footer

#

Bootstrap Footer Form

#

Social Network in Footer

#

Footer Newsletter Subscription

<!-- This script got from frontendfreecode.com -->
<section id="footer" class="footer">
    <div class="footerBg"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                <div class="contact-form btm-brdr">
                    <div class="form-Box">
                        <input type="text" placeholder="Name" class="b_effect" />
                    </div>
                    <div class="form-Box">
                        <input type="text" placeholder="Email" class="b_effect" />
                    </div>
                    <div class="form-Box">
                        <textarea placeholder="Message" class="b_effect"></textarea>
                    </div>
                    <div class="form-Box">
                        <input type="submit" value="Submit" class="fill-btn" />
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                <div class="contact-address btm-brdr">
                    <h4 class="fTitle"> Contact <span>Us</span> </h4>
                    <ul>
                        <li> <i class="fa fa-phone" aria-hidden="true"></i> <span>1800 999 87 21</span> </li>
                        <li> <i class="fa fa-map-marker" aria-hidden="true"></i> <span>121 Abc St, Delhi VIC 5000, India</span> </li>
                        <li>
                            <i class="fa fa-envelope-o" aria-hidden="true"></i><span>info@logo.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                <div class="subscribe btm-brdr">
                    <h4 class="fTitle"> Subscribe <span>Newsletter</span> </h4>
                    <form>
                        <input type="text" placeholder="Example@example.com" />                                
                        <button type="button" class="fill-btn">Subscribe</button>
                    </form>
                </div>
                <div class="social-icons">
                    <h4 class="fTitle"> Social <span>News</span> </h4>
                    <ul>
                        <li>
                            <a href="'#" target="_blank"> <i class="fa fa-facebook" aria-hidden="true"></i> </a>
                        </li>
                        <li> <a href="'#" target="_blank"> <i class="fa fa-twitter" aria-hidden="true"></i> </a></li>
                        <li><a href="'#" target="_blank"> <i class="fa fa-youtube-play" aria-hidden="true"></i> </a></li>
                        <li><a href="'#" target="_blank"> <i class="fa fa-instagram" aria-hidden="true"></i> </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="copyright" class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h6> © 2017 This theme is powered by <a href="#" target="_blank">logo.</a> </h6>
            </div>
        </div>
    </div>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
/*  Footer css */
.element-btn .element-fill-btn {
    background-color: #ff6600;
    border: 0;
    color: #fff;
    padding: 13px 5px;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    width: 252px;
    margin: 0 auto;
    border-radius: 25px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    box-shadow: 0px 10px 50px -10px rgba(255, 10, 120, 1);   
}
.fill-btn {
    background-color: #ff6600;
    border: 0;
    color: #fff;
    padding: 13px 5px;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    width: 252px;
    margin: 0 auto;
    border-radius: 25px;
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;   
}
.fill-btn:hover,
.element-btn .element-fill-btn:hover {
    background-color: #201f1f;
    box-shadow: 0px 10px 50px -10px rgb(32, 31, 31);
}
.footer {
    position: relative;
    background-color: #201f1f;
    padding:50px 0px;
}
.footerBg {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.13;
    background: no-repeat top center;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.form-Box input[type="text"],
.form-Box input[type="email"],
.form-Box input[type="passowrd"],
.form-Box textarea {
    width: 100%;
    height: 50px;
    border: 1px solid #737373;
    border-radius: 25px;
    background-color: transparent;
    padding: 5px 25px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #737373;
    font-style: italic;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
}
.form-Box textarea {
    height: 113px;
    padding: 15px 25px;
    resize: none;
}
.form-Box .b_effect:focus,
.subscribe form input:focus {
    border-color: #ff6600;
}

.form-Box .fill-btn {
    position: static;
    transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    -moz-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    width: 184px;
}
.form-Box .fill-btn:hover,
.subscribe form .fill-btn:hover {
    background-color: #ffe402;
    color: #201f1f;
    box-shadow: 0px 10px 50px -10px rgb(255, 228, 2);
}
.fTitle {
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 20px;
}
.fTitle span {
    color: #ff6600;
}
.contact-address ul li,
.contact-address ul li a {
    color: #737373;
    font-size: 16px;
    font-style: italic;
    margin-bottom: 15px;
    line-height: 32px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.contact-address {
    padding: 0 15%;
}
.contact-address ul li i {
    margin-right: 15px;
    display: inline-block;
    float: left;
    line-height: 32px;
}
.contact-address ul li span {
    display: table;
}
.contact-address ul li a:hover {
    color: #ff6600;
}
.subscribe form {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 60px;
}
.subscribe form input {
    width: 100%;
    height: 50px;
    border: 1px solid #737373;
    border-radius: 25px;
    background-color: transparent;
    padding: 5px 215px 5px 25px;
    font-size: 14px;
    color: #737373;
    font-style: italic;
}
.subscribe form .fill-btn {
    bottom: auto;
    top: 0;
    right: 0;
    left: auto;
    transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    -moz-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    width: 209px;
}
.social-icons ul li {
    display: inline-block;
    float: left;
    color: #fff;
    text-align: center;
    line-height: 43px;
    position: relative;
    width: 43px;
    height: 43px;
    margin-right: 28px;
}
.social-icons ul li a {
    color: #fff;
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 16px;
}
.social-icons ul li:before {
    content: "";
    width: 43px;
    height: 43px;
    display: inline-block;
    position: absolute;
    border: 1px solid #ff6600;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.social-icons ul li:last-child {
    margin: 0;
}
.social-icons ul li:hover:before {
    background: #ff6600;
}
/* Copyright css */
.copyright {
    padding: 51.5px 0;
    text-align: center;
}
.copyright h6 {
    font-size: 14px;
    font-style: italic;
    color: #737373;
}
.copyright h6 a {
    color: #ff6600;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.copyright h6 a:hover {
    color: #201f1f;
}
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
/*  Footer css */
.element-btn .element-fill-btn {
    background-color: #ff6600;
    border: 0;
    color: #fff;
    padding: 13px 5px;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    width: 252px;
    margin: 0 auto;
    border-radius: 25px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    box-shadow: 0px 10px 50px -10px rgba(255, 10, 120, 1);   
}
.fill-btn {
    background-color: #ff6600;
    border: 0;
    color: #fff;
    padding: 13px 5px;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    width: 252px;
    margin: 0 auto;
    border-radius: 25px;
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;   
}
.fill-btn:hover,
.element-btn .element-fill-btn:hover {
    background-color: #201f1f;
    box-shadow: 0px 10px 50px -10px rgb(32, 31, 31);
}
.footer {
    position: relative;
    background-color: #201f1f;
    padding:50px 0px;
}
.footerBg {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.13;
    background: no-repeat top center;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.form-Box input[type="text"],
.form-Box input[type="email"],
.form-Box input[type="passowrd"],
.form-Box textarea {
    width: 100%;
    height: 50px;
    border: 1px solid #737373;
    border-radius: 25px;
    background-color: transparent;
    padding: 5px 25px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #737373;
    font-style: italic;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
}
.form-Box textarea {
    height: 113px;
    padding: 15px 25px;
    resize: none;
}
.form-Box .b_effect:focus,
.subscribe form input:focus {
    border-color: #ff6600;
}

.form-Box .fill-btn {
    position: static;
    transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    -moz-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    width: 184px;
}
.form-Box .fill-btn:hover,
.subscribe form .fill-btn:hover {
    background-color: #ffe402;
    color: #201f1f;
    box-shadow: 0px 10px 50px -10px rgb(255, 228, 2);
}
.fTitle {
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 20px;
}
.fTitle span {
    color: #ff6600;
}
.contact-address ul li,
.contact-address ul li a {
    color: #737373;
    font-size: 16px;
    font-style: italic;
    margin-bottom: 15px;
    line-height: 32px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.contact-address {
    padding: 0 15%;
}
.contact-address ul li i {
    margin-right: 15px;
    display: inline-block;
    float: left;
    line-height: 32px;
}
.contact-address ul li span {
    display: table;
}
.contact-address ul li a:hover {
    color: #ff6600;
}
.subscribe form {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 60px;
}
.subscribe form input {
    width: 100%;
    height: 50px;
    border: 1px solid #737373;
    border-radius: 25px;
    background-color: transparent;
    padding: 5px 215px 5px 25px;
    font-size: 14px;
    color: #737373;
    font-style: italic;
}
.subscribe form .fill-btn {
    bottom: auto;
    top: 0;
    right: 0;
    left: auto;
    transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    -moz-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    width: 209px;
}
.social-icons ul li {
    display: inline-block;
    float: left;
    color: #fff;
    text-align: center;
    line-height: 43px;
    position: relative;
    width: 43px;
    height: 43px;
    margin-right: 28px;
}
.social-icons ul li a {
    color: #fff;
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 16px;
}
.social-icons ul li:before {
    content: "";
    width: 43px;
    height: 43px;
    display: inline-block;
    position: absolute;
    border: 1px solid #ff6600;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.social-icons ul li:last-child {
    margin: 0;
}
.social-icons ul li:hover:before {
    background: #ff6600;
}
/* Copyright css */
.copyright {
    padding: 51.5px 0;
    text-align: center;
}
.copyright h6 {
    font-size: 14px;
    font-style: italic;
    color: #737373;
}
.copyright h6 a {
    color: #ff6600;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.copyright h6 a:hover {
    color: #201f1f;
}
</style>

</head>
<body>
<section id="footer" class="footer">
    <div class="footerBg"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                <div class="contact-form btm-brdr">
                    <div class="form-Box">
                        <input type="text" placeholder="Name" class="b_effect" />
                    </div>
                    <div class="form-Box">
                        <input type="text" placeholder="Email" class="b_effect" />
                    </div>
                    <div class="form-Box">
                        <textarea placeholder="Message" class="b_effect"></textarea>
                    </div>
                    <div class="form-Box">
                        <input type="submit" value="Submit" class="fill-btn" />
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                <div class="contact-address btm-brdr">
                    <h4 class="fTitle"> Contact <span>Us</span> </h4>
                    <ul>
                        <li> <i class="fa fa-phone" aria-hidden="true"></i> <span>1800 999 87 21</span> </li>
                        <li> <i class="fa fa-map-marker" aria-hidden="true"></i> <span>121 Abc St, Delhi VIC 5000, India</span> </li>
                        <li>
                            <i class="fa fa-envelope-o" aria-hidden="true"></i><span>info@logo.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                <div class="subscribe btm-brdr">
                    <h4 class="fTitle"> Subscribe <span>Newsletter</span> </h4>
                    <form>
                        <input type="text" placeholder="Example@example.com" />                                
                        <button type="button" class="fill-btn">Subscribe</button>
                    </form>
                </div>
                <div class="social-icons">
                    <h4 class="fTitle"> Social <span>News</span> </h4>
                    <ul>
                        <li>
                            <a href="'#" target="_blank"> <i class="fa fa-facebook" aria-hidden="true"></i> </a>
                        </li>
                        <li> <a href="'#" target="_blank"> <i class="fa fa-twitter" aria-hidden="true"></i> </a></li>
                        <li><a href="'#" target="_blank"> <i class="fa fa-youtube-play" aria-hidden="true"></i> </a></li>
                        <li><a href="'#" target="_blank"> <i class="fa fa-instagram" aria-hidden="true"></i> </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="copyright" class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h6> © 2017 This theme is powered by <a href="#" target="_blank">logo.</a> </h6>
            </div>
        </div>
    </div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview