Bootstrap Forms:

Bootstrap Shipping Form with Discount

Forms are an effective method to gather important information from people but can often be boring. No one enjoys spending their time on filling out input fields in a digital form unless it is absolutely necessary for them. This is why you have to try your best to encourage your users to do this task properly. Either by using beautiful designs, animated icons, colourful pages, or any other stylish choice. If your users usually leave the page halfway through the process of completing the form, then it has two meanings. Your designs lack something interesting and special or conversion rates are low. The thing is that each site has a unique design so there won’t be an all-time solution for every website out there. We design requires creativity and innovation to come up with new ideas to always keep your site interesting for your users.

Below we have a code for a Bootstrap responsive form with discount. You have several input boxes in this shipping form to enter the required information and a subscribe button to register that information. This Bootstrap red form features a nice colourful style which is certainly interesting. It catches anyone’s attention and avoids boring the users. Having this Bootstrap buy form in your online store website can be a great new addition to increase your revenue. Scroll down right now to use this discount form for your own site.

Bootstrap Responsive Form

Bootstrap Red Form

Shipping Form

Bootstrap Buy Form

Discount Form

<!-- This script got from frontendfreecode.com -->
<div class="pop-up-head">
    <div class="pop-box">
        <div class="pop-box1">
            <div class="white-box">
                <div class="white-box1">
                    <ul>
                        <li>LOREM IPSUM</li>
                        <li>DOLOR SIT AMET</li>
                        <li>DOLOR SIT AMET</li>
                    </ul>
                </div>
            </div>
            <div class="off-box">
                <div class="off-box1">
                    <h4><span>25%</span><sup>OFF</sup></h4>
                    <p>lorem lipsum dolor sit amet*</p>
                </div>
            </div>
            <div class="close">
                <a href=""><p><img src="http://frontendfreecode.com/img/close.png" alt="" title=""></p></a>
            </div>
            <div class="form-inputgroup">
                <h3>Special Discount for your Subscription</h3>
                <div class="form-gro">
                    <input type="text" name="Name" placeholder="Name">
                </div>
                <div class="form-gro">
                    <input type="text" name="Email" placeholder="Enter your email here">
                </div>
                <div class="form-gro">
                    <input type="text" name="Mobile" placeholder="Mobile">
                </div>
                <div class="form-gro">
                    <a href="#">SUBSCRIBE</a>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body{
    font-family: 'Roboto', sans-serif;
}
.pop-up-head a{
    text-decoration: none;
}
ul{
    list-style: none;
}
.pop-up-head {
    background: rgba(0, 0, 0, 0.57);
    width: 100%;
    padding: 100px 0px;
    position: relative;
 
}
.pop-box {
width: 100%;
    max-width: 600px;
    background: #fe3263;
    border-radius: 8px;
    margin: 0 auto;
    height: 545px;
    border: 8px solid rgba(0, 0, 0, 0.18);
/*    background-image: url(ba.png);*/
}
.pop-box1 {
        padding: 12px 0 0px 0px;
      background: rgba(0, 0, 0, 0.12);

            position: relative;
}
.white-box {
    background: #fff;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    height: 180px;
    position: relative;
    box-shadow: 0px 4px 2px rgba(212, 212, 212, 0.8313725490196079);

}
.white-box1 {
    float: right;
    padding-right: 40px;
    padding-top: 18px;
}
.white-box1  li {
    padding: 10px 0px;
    position: relative;
    font-weight: 600;
    color: #555;
}
.white-box1 li:before {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    background: #6ee81e;
    top: 14px;
    left: -25px;
}
.off-box {
    position: absolute;
    top: -30px;
    left: 11px;
    border: 8px solid rgba(0, 0, 0, 0.18);
    background: #fe3263;
    border-radius: 10px;
}
.off-box1 {
    background: rgba(0, 0, 0, 0.12);
    padding: 45px 30px 16px 30px;
    border-radius: 4px;
}
.off-box1 h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 0px;
}
.off-box1 span {
    font-size: 85px;
}
.off-box1 p {
    font-size: 16px;
    color: #fff;
    line-height: 0px;
    padding-top: 35px;
}
.off-box1 sup {
    position: absolute;
    top: 41px;
    right: 51px;
}
.form-gro{
    padding: 8px;
}
.form-gro input {
    height: 50px;
    padding: 10px;
font-size: 16px;
    width: 100%;
    border-radius: 32px;
    border: 4px solid #e41232;
}
.form-inputgroup {
    margin: 0 auto;
    display: block;
    width: 80%;
        padding-bottom: 26px;
}

.form-inputgroup h3 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 3px;
    margin-top: 22px;
}
.form-gro a {
    width: 100%;
    display: block;
    text-align: center;
    padding: 8px 10px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.6px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    border: 4px solid #FEF733;
    background: #FEDA03;
}
.close {
    position: absolute;
    top: 10px;
    border-top: 3px solid #df2c57;
    border-left: 25px solid #df2c57;
    border-bottom: 27px solid #df2c57;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 134px;
    border-bottom-right-radius: 1px;
    right: -1px;
    background-color: #df2c57;
}
.close p {
    line-height: 0;
    margin: 0 5px 0 0PX;
}
.close img {
    width: 24px;
    height: 24px;
    padding-right: 10px;
}
@media screen and (max-width:480px){
.pop-box {
   width: 94%;
}
.form-inputgroup {
    padding-bottom: 8px;
}
.off-box {
    left: 40px;
}
.white-box1 {
    float: none;
    padding-right: 0px;
    padding-top: 0px;
    position: absolute;
    top: 136px;
    left: 29px;
}
.white-box {
    height: 300px;
}
.pop-box {
    height: 636px
}
}
@media screen and (max-width:568px){
.pop-box {
    width: 96%;
}
}
@media screen and (max-width:375px){
.off-box {
    left: 15px;
}
.close img {
    padding-right: 0px;
}
}
@media screen and (max-width:320px){
.off-box {
    left: 4px;
}
.close {
    top: -20px;
    right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body{
    font-family: 'Roboto', sans-serif;
}
.pop-up-head a{
    text-decoration: none;
}
ul{
    list-style: none;
}
.pop-up-head {
    background: rgba(0, 0, 0, 0.57);
    width: 100%;
    padding: 100px 0px;
    position: relative;
 
}
.pop-box {
width: 100%;
    max-width: 600px;
    background: #fe3263;
    border-radius: 8px;
    margin: 0 auto;
    height: 545px;
    border: 8px solid rgba(0, 0, 0, 0.18);
/*    background-image: url(ba.png);*/
}
.pop-box1 {
        padding: 12px 0 0px 0px;
      background: rgba(0, 0, 0, 0.12);

            position: relative;
}
.white-box {
    background: #fff;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    height: 180px;
    position: relative;
    box-shadow: 0px 4px 2px rgba(212, 212, 212, 0.8313725490196079);

}
.white-box1 {
    float: right;
    padding-right: 40px;
    padding-top: 18px;
}
.white-box1  li {
    padding: 10px 0px;
    position: relative;
    font-weight: 600;
    color: #555;
}
.white-box1 li:before {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    background: #6ee81e;
    top: 14px;
    left: -25px;
}
.off-box {
    position: absolute;
    top: -30px;
    left: 11px;
    border: 8px solid rgba(0, 0, 0, 0.18);
    background: #fe3263;
    border-radius: 10px;
}
.off-box1 {
    background: rgba(0, 0, 0, 0.12);
    padding: 45px 30px 16px 30px;
    border-radius: 4px;
}
.off-box1 h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 0px;
}
.off-box1 span {
    font-size: 85px;
}
.off-box1 p {
    font-size: 16px;
    color: #fff;
    line-height: 0px;
    padding-top: 35px;
}
.off-box1 sup {
    position: absolute;
    top: 41px;
    right: 51px;
}
.form-gro{
    padding: 8px;
}
.form-gro input {
    height: 50px;
    padding: 10px;
font-size: 16px;
    width: 100%;
    border-radius: 32px;
    border: 4px solid #e41232;
}
.form-inputgroup {
    margin: 0 auto;
    display: block;
    width: 80%;
        padding-bottom: 26px;
}

.form-inputgroup h3 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 3px;
    margin-top: 22px;
}
.form-gro a {
    width: 100%;
    display: block;
    text-align: center;
    padding: 8px 10px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.6px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    border: 4px solid #FEF733;
    background: #FEDA03;
}
.close {
    position: absolute;
    top: 10px;
    border-top: 3px solid #df2c57;
    border-left: 25px solid #df2c57;
    border-bottom: 27px solid #df2c57;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 134px;
    border-bottom-right-radius: 1px;
    right: -1px;
    background-color: #df2c57;
}
.close p {
    line-height: 0;
    margin: 0 5px 0 0PX;
}
.close img {
    width: 24px;
    height: 24px;
    padding-right: 10px;
}
@media screen and (max-width:480px){
.pop-box {
   width: 94%;
}
.form-inputgroup {
    padding-bottom: 8px;
}
.off-box {
    left: 40px;
}
.white-box1 {
    float: none;
    padding-right: 0px;
    padding-top: 0px;
    position: absolute;
    top: 136px;
    left: 29px;
}
.white-box {
    height: 300px;
}
.pop-box {
    height: 636px
}
}
@media screen and (max-width:568px){
.pop-box {
    width: 96%;
}
}
@media screen and (max-width:375px){
.off-box {
    left: 15px;
}
.close img {
    padding-right: 0px;
}
}
@media screen and (max-width:320px){
.off-box {
    left: 4px;
}
.close {
    top: -20px;
    right: 20px;
}
</style>

</head>
<body>
<div class="pop-up-head">
    <div class="pop-box">
        <div class="pop-box1">
            <div class="white-box">
                <div class="white-box1">
                    <ul>
                        <li>LOREM IPSUM</li>
                        <li>DOLOR SIT AMET</li>
                        <li>DOLOR SIT AMET</li>
                    </ul>
                </div>
            </div>
            <div class="off-box">
                <div class="off-box1">
                    <h4><span>25%</span><sup>OFF</sup></h4>
                    <p>lorem lipsum dolor sit amet*</p>
                </div>
            </div>
            <div class="close">
                <a href=""><p><img src="http://frontendfreecode.com/img/close.png" alt="" title=""></p></a>
            </div>
            <div class="form-inputgroup">
                <h3>Special Discount for your Subscription</h3>
                <div class="form-gro">
                    <input type="text" name="Name" placeholder="Name">
                </div>
                <div class="form-gro">
                    <input type="text" name="Email" placeholder="Enter your email here">
                </div>
                <div class="form-gro">
                    <input type="text" name="Mobile" placeholder="Mobile">
                </div>
                <div class="form-gro">
                    <a href="#">SUBSCRIBE</a>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars