Article Categories

Selected Reading

How to create a responsive checkout form with CSS?

CSS Web Development Front End Technology

A checkout form is essential for e-commerce websites where customers complete their purchases. It displays product details, billing information, payment fields, and order totals in a user-friendly layout. Creating a responsive checkout form ensures it works seamlessly across all devices.

Syntax

.checkout-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

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

Setting Up Flexbox Layout

The main container uses flexbox to arrange form sections side by side on larger screens −

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

Cart Summary Section

The cart section displays purchased items and total amount. This provides order confirmation before payment −

.form-container {
    margin: 10px;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.price {
    float: right;
    color: #666;
    font-weight: bold;
}

Form Input Styling

Input fields are styled for better usability with consistent spacing and visual feedback −

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

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

Checkout Button

The submit button is styled to be prominent and interactive with hover effects −

.checkout-btn {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    border: none;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s;
}

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

Responsive Media Query

For screens smaller than 800px, the layout switches to a single column −

@media (max-width: 800px) {
    .fields-container {
        flex-direction: column;
    }
    
    .form-container {
        margin: 10px 0;
    }
}

Complete Example

Here's a complete responsive checkout form implementation −

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
    }
    
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .fields-container {
        display: flex;
        gap: 20px;
        justify-content: space-between;
    }
    
    .form-section {
        flex: 2;
    }
    
    .cart-section {
        flex: 1;
    }
    
    .form-container {
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    h2 {
        color: #333;
        margin-bottom: 20px;
        border-bottom: 2px solid #4CAF50;
        padding-bottom: 10px;
    }
    
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #555;
    }
    
    input[type="text"], input[type="email"] {
        width: 100%;
        padding: 12px;
        margin-bottom: 20px;
        border: 2px solid #ddd;
        border-radius: 6px;
        font-size: 16px;
        transition: border-color 0.3s;
    }
    
    input[type="text"]:focus, input[type="email"]:focus {
        outline: none;
        border-color: #4CAF50;
    }
    
    .payment-row {
        display: flex;
        gap: 15px;
    }
    
    .payment-row div {
        flex: 1;
    }
    
    .checkout-btn {
        background-color: #4CAF50;
        color: white;
        padding: 15px;
        border: none;
        width: 100%;
        border-radius: 6px;
        cursor: pointer;
        font-size: 18px;
        font-weight: bold;
        transition: background-color 0.3s;
    }
    
    .checkout-btn:hover {
        background-color: #45a049;
    }
    
    .cart-item {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    
    .cart-total {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        font-size: 18px;
        font-weight: bold;
        border-top: 2px solid #4CAF50;
        margin-top: 10px;
    }
    
    @media (max-width: 800px) {
        .fields-container {
            flex-direction: column;
        }
        
        .payment-row {
            flex-direction: column;
        }
        
        .form-container {
            padding: 20px;
        }
    }
</style>
</head>
<body>
    <div class="container">
        <h1 style="text-align: center; margin-bottom: 30px; color: #333;">Checkout</h1>
        
        <div class="fields-container">
            <div class="form-section">
                <div class="form-container">
                    <h2>Billing Address</h2>
                    <label for="fname">Full Name</label>
                    <input type="text" id="fname" name="firstname" placeholder="John Doe">
                    
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" placeholder="john@example.com">
                    
                    <label for="address">Address</label>
                    <input type="text" id="address" name="address" placeholder="123 Main Street">
                </div>
                
                <div class="form-container">
                    <h2>Payment Information</h2>
                    <label for="cardname">Name on Card</label>
                    <input type="text" id="cardname" name="cardname" placeholder="John Doe">
                    
                    <label for="cardnumber">Card Number</label>
                    <input type="text" id="cardnumber" name="cardnumber" placeholder="1111-2222-3333-4444">
                    
                    <div class="payment-row">
                        <div>
                            <label for="expiry">Exp Month/Year</label>
                            <input type="text" id="expiry" name="expiry" placeholder="MM/YY">
                        </div>
                        <div>
                            <label for="cvv">CVV</label>
                            <input type="text" id="cvv" name="cvv" placeholder="123">
                        </div>
                    </div>
                    
                    <button type="submit" class="checkout-btn">Complete Purchase</button>
                </div>
            </div>
            
            <div class="cart-section">
                <div class="form-container">
                    <h2>Order Summary</h2>
                    
                    <div class="cart-item">
                        <span>Wireless Headphones</span>
                        <span>$99.99</span>
                    </div>
                    
                    <div class="cart-item">
                        <span>Phone Case</span>
                        <span>$19.99</span>
                    </div>
                    
                    <div class="cart-item">
                        <span>Shipping</span>
                        <span>$5.99</span>
                    </div>
                    
                    <div class="cart-total">
                        <span>Total:</span>
                        <span>$125.97</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

A professional checkout form appears with a billing section on the left, payment form below it, and an order summary on the right. On mobile devices (below 800px), the layout stacks vertically. The form includes styled input fields, hover effects on the checkout button, and a clean, modern appearance with proper spacing and shadows.

Conclusion

This responsive checkout form uses flexbox for layout, CSS media queries for mobile optimization, and modern styling for a professional appearance. The form adapts seamlessly to different screen sizes while maintaining usability and visual appeal.

AmitDiwan

Updated on: 2026-03-15T14:35:53+05:30

955 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next