Create Responsive Checkout Form Using HTML And CSS

Address Information

Payment




Its features:

  • You can attach more information lines as needed.

  • You can change the model color via CSS if you want.

  • It is completly responsive checkout form.

  • To move the button to the right or left of the page, use "float: left" or "float: right"

    instead of "justify-content: center" and "align-items: center".

Try to create like yourself by following the codes below :

Step 1) Add to head : <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ font-awesome/4.7.0/css/font-awesome.min.css">
Step 2) Add to html : <h2>Create Responsive Checkout Form Using HTML And CSS</h2> <div class="fifteen"> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Address Information</h3> <label for="fname"><i class="fa fa-user"></i> Full Name</label> <input type="text" id="fname" name="firstname" placeholder="Abdul Awal"> <label for="email"><i class="fa fa-envelope"></i> Email</label> <input type="text" id="email" name="email" placeholder="someone@example.com"> <label for="adr"><i class="fa fa-address-card-o"></i> Address</label> <input type="text" id="adr" name="address" placeholder="12/A Demra Babulara"> <label for="city"><i class="fa fa-institution"></i> City</label> <input type="text" id="city" name="city" placeholder="Budapest"> <div class="row"> <div class="col-50"> <label for="state">State</label> <input type="text" id="state" name="state" placeholder="LG"> </div> <div class="col-50"> <label for="zip">Zip</label> <input type="text" id="zip" name="zip" placeholder="66211"> </div> </div> </div> <div class="col-50"> <h3>Payment</h3> <label for="fname">Accepted Cards</label> <div class="icon-container"> <i class="fa fa-cc-visa" style="color:navy;"></i> <i class="fa fa-cc-amex" style="color:blue;"></i> <i class="fa fa-cc-mastercard" style="color:red;"></i> <i class="fa fa-cc-discover" style="color:orange;"></i> </div> <label for="cname">Name on Card</label> <input type="text" id="cname" name="cardname" placeholder="Abdul Awal"> <label for="ccnum">Credit card number</label> <input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444"> <label for="expmonth">Exp Month</label> <input type="text" id="expmonth" name="expmonth" placeholder="December"> <div class="row"> <div class="col-50"> <label for="expyear">Exp Year</label> <input type="text" id="expyear" name="expyear" placeholder="2020"> </div> <div class="col-50"> <label for="cvv">CVV</label> <input type="text" id="cvv" name="cvv" placeholder="288"> </div> </div> </div> </div> <label> <input type="checkbox" checked="checked" name="sameadr"> Shipping address same as information </label> <input type="submit" value=" to checkout" class="btn"> </form> </div> </div> </div> </div>
Step 3) Add to css : .fifteen{ width:100%; height:auto; font-family: Arial; font-size: 17px; padding: 8px; display:flex; justify-content:center; align-items:center; } * { box-sizing: border-box; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -16px; } .col-50 { -ms-flex: 50%; flex: 50%; } .col-50, .col-75 { padding: 0 16px; } .container { background-color:#aaa; padding: 5px 20px 15px 20px; border: 10px solid gray; border-radius: 10px; } input[type=text] { width: 100%; margin-bottom: 20px; padding: 12px; border: 1px solid #aaa; border-radius: 3px; background-image: linear-gradient(#bbb,#ddd,#bbb); } label { margin-bottom: 10px; display: block; } .icon-container { margin-bottom: 20px; padding: 7px 0; font-size: 24px; } .btn { background-color:black; color: white; padding: 12px; margin: 10px 0; border: none; width: 100%; border-radius: 3px; cursor: pointer; font-size: 17px; } .btn:hover { background-color: #45a049; }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.