Checkout form template html css


Learn how to create a responsive checkout form with CSS.


Responsive Checkout Form

Billing Address

Full Name Email Address City

Payment

Accepted Cards

Name on Card Credit card number Exp Month

Shipping address same as billing

Try it Yourself »


How To Create a Checkout Form

Step 1) Add HTML

Use a

element to process the input. You can learn more about this in our PHP tutorial.

Example


 

   

     

       


         

           

Billing Address


           
           
           
           
           
           
           
           

           


             

               
               
             

             

               
               
             

           

         

         


           

Payment


           
           

             
             
             
             
           

           
           
           
           
           
           

           


             

               
               
             

             

               
               
             

           

         

       


       
       
     
   

 

 


   

     

Cart
       
         
          4
       

     


     

Product 1 $15


     

Product 2 $5


     

Product 3 $8


     

Product 4 $2


     

     

Total $30


   

 



Step 2) Add CSS:

Use CSS Flexbox to create a responsive layout:

Example

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;
  border: 1px solid lightgrey;
  border-radius: 3px;
}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #04AA6D;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

span.price {
  float: right;
  color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}

Try it Yourself »

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.

Tip: Go to our CSS Flexbox Tutorial to learn more about the flexible box layout module.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Get started for free ❯

* no credit card required