How to create a responsive checkout form with CSS?


A checkout on a web page can be seen on an E-Commerce website. It is a webpage where all the details about the product you are buying is visible. It includes the product details, total amount to be paid, the card details to be entered, the billing address. Also includes a button to proceed the buying process. Let us see how to create a responsive checkout form.

Set a flex

To arrange the fields, use the display property and set it to flex

.Fields {
   display: flex;
   flex-wrap: wrap;
   padding: 20px;
   justify-content: space-around;
}

Place the form container

Here, the cart details are visible. This shows how many products the user is buying with the total calculated amount −

<div class="formContainer">
   <h4>
      Cart <span class="price" style="color:black"><b>2</b></span>
   </h4>
   <p>
      <a style="text-decoration: none;" href="#">Product 1</a>
      <span class="price">$10</span>
   </p>
   <p>
      <a style="text-decoration: none;" href="#">Product 2</a>
      <span class="price">$10</span>
   </p>
   <p>
      Total <span class="price" style="color:black"><b>$20</b></span>
   </p>
</div>

We style the container like this −

.formContainer {
   margin: 10px;
   background-color: #efffc9;
   padding: 5px 20px 15px 20px;
   border: 1px solid rgb(191, 246, 250);
   border-radius: 3px;
}

The Billing Address

On the checkout page, the billing address needs to be added by the user. It includes the name of the user, email, and address −

<div>
   <h3>Billing Address</h3>
   <label for="fname">Full Name</label>
   <input type="text" id="fname" name="firstname" />
   <label for="email"> Email</label>
   <input type="text" id="email" name="email" />
   <label for="adr"> Address</label>
   <input type="text" id="adr" name="address" />
</div>

The Payment Details

Here, we have created fields for the card payment. The name of the card user, credit card bumber, expiry year, and CVV −

<div>
   <h3>Payment</h3>
   <label for="cname">Name on Card</label>
   <input type="text" id="cname" name="cardname" />
   <label for="ccnum">Credit card number</label>
   <input type="text" id="ccnum" name="cardnumber" />
   <div class="Fields">
      <div>
         <label for="expyear">Exp Year</label>
         <input type="text" id="expyear" name="expyear" />
      </div>
      <div>
         <label for="cvv">CVV</label>
         <input type="text" id="cvv" name="cvv" />
      </div>
   </div>
</div>

Checkout button

A button is placed in the end to continue the buying process. The <button> element is used −

<input  type="submit" value="Continue to checkout" class="checkout" />

The button is styled like this. The cursor is set to pointer using the cursor property to make it look like a clickable link −

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

Set the responsiveness

When the web browser is set to less than 800px, the responsiveness works. The flex direction is set to column reverse i.e. flexible items are displayed vertically as a column but in reverse order −

@media (max-width: 800px) {
   .Fields {
      flex-direction: column-reverse;
   }
}

Example

The following is the code to create a responsive checkout form with CSS −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial;
         font-size: 17px;
         padding: 8px;
      }
      * {
         box-sizing: border-box;
      }
      .Fields {
         display: flex;
         flex-wrap: wrap;
         padding: 20px;
         justify-content: space-around;
      }
      .Fields div {
         margin-right: 10px;
      }
      label {
         margin: 15px;
      }
      .formContainer {
         margin: 10px;
         background-color: #efffc9;
         padding: 5px 20px 15px 20px;
         border: 1px solid rgb(191, 246, 250);
         border-radius: 3px;
      }
      input[type="text"] {
         display: inline-block;
         width: 100%;
         margin-bottom: 20px;
         padding: 12px;
         border: 1px solid #ccc;
         border-radius: 3px;
      }
      label {
         margin-left: 20px;
         display: block;
      }
      .icon-formContainer {
         margin-bottom: 20px;
         padding: 7px 0;
         font-size: 24px;
      }
      .checkout {
         background-color: #4caf50;
         color: white;
         padding: 12px;
         margin: 10px 0;
         border: none;
         width: 100%;
         border-radius: 3px;
         cursor: pointer;
         font-size: 17px;
      }
      .checkout:hover {
         background-color: #45a049;
      }
      a {
         color: black;
      }
      span.price {
         float: right;
         color: grey;
      }
      @media (max-width: 800px) {
         .Fields {
            flex-direction: column-reverse;
         }
      }
   </style>
</head>
<body>
      <h1 style="text-align: center;">Responsive Checkout Form</h1>
      <div class="Fields">
         <div>
            <div class="formContainer">
               <form>
                  <div class="Fields">
                     <div>
                        <h3>Billing Address</h3>
                        <label for="fname">Full Name</label>
                        <input type="text" id="fname" name="firstname" />
                        <label for="email"> Email</label>
                        <input type="text" id="email" name="email" />
                        <label for="adr"> Address</label>
                        <input type="text" id="adr" name="address" />
                     </div>
                     <div>
                        <h3>Payment</h3>
                        <label for="cname">Name on Card</label>
                        <input type="text" id="cname" name="cardname" />
                        <label for="ccnum">Credit card number</label>
                        <input type="text" id="ccnum" name="cardnumber" />
                        <div class="Fields">
                           <div>
                              <label for="expyear">Exp Year</label>
                              <input type="text" id="expyear" name="expyear" />
                           </div>
                           <div>
                              <label for="cvv">CVV</label>
                              <input type="text" id="cvv" name="cvv" />
                           </div>
                        </div>
                     </div>
                  </div>
                  <input
                     type="submit"
                     value="Continue to checkout"
                     class="checkout"
                  />
               </form>
            </div>
         </div>
         <div>
            <div class="formContainer">
               <h4>
                  Cart <span class="price" style="color:black"><b>2</b></span>
               </h4>
               <p>
                  <a style="text-decoration: none;" href="#">Product 1</a>
                  <span class="price">$10</span>
               </p>
               <p>
                  <a style="text-decoration: none;" href="#">Product 2</a>
                  <span class="price">$10</span>
               </p>
               <p>
                  Total <span class="price" style="color:black"><b>$20</b></span>
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

Updated on: 08-Dec-2023

622 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements