Simple Checkout Form Template

Provide a seamless and trustworthy payment experience with this simple and well-structured checkout form.

This template organizes a standard one-page checkout into logical sections using fieldset elements, making the process clear and easy for customers to follow.

Screenshot of a checkout form with sections for Shipping, Billing, and Payment.

Get Source Code → Preview →

About this Checkout Form

A checkout form is one of the most important parts of an e-commerce website. This template provides a foundational layout that follows common conventions and best practices. The form is divided into three main sections using the fieldset and legend tags:

Shipping Information: To collect the customer's delivery address.
Payment Details: For credit card information. This section uses specific autocomplete attributes to help browsers and password managers fill fields correctly and securely.
Billing Address: Often required for payment verification. This section includes a "Same as Shipping" checkbox to save the user from re-entering their information.

This template uses a responsive two-column layout to make efficient use of space on desktops, while stacking to a single column for a superior mobile experience.

Features

Logical Sections: Uses fieldsets to create a clear, easy-to-follow checkout flow.
Secure & Helpful Attributes: Implements autocomplete attributes like cc-name and cc-number for security and convenience.
"Same as Shipping" Logic: Includes a checkbox and the necessary JavaScript to copy the shipping address to the billing section, saving the user time.
Responsive Layout: Looks great on both desktop and mobile devices.

Dependencies

Uses pure HTML and CSS, with a necessary, self-contained JavaScript block for the "Same as Shipping" functionality.

Code

Here's the full code for the simple checkout form template:

<div class="checkout-container">
    <form class="checkout-form" id="checkoutForm" action="#" method="post">
        
        <fieldset>
            <legend>Shipping Information</legend>
            <div class="form-group"><label for="shipping-name">Full Name</label><input type="text" id="shipping-name" name="shipping_name" autocomplete="name" required></div>
            <div class="form-group"><label for="shipping-address">Address</label><input type="text" id="shipping-address" name="shipping_address" autocomplete="street-address" required></div>
            <div class="form-row">
                <div class="form-group"><label for="shipping-city">City</label><input type="text" id="shipping-city" name="shipping_city" autocomplete="address-level2" required></div>
                <div class="form-group"><label for="shipping-zip">Zip Code</label><input type="text" id="shipping-zip" name="shipping_zip" autocomplete="postal-code" required></div>
            </div>
        </fieldset>

<fieldset>
            <legend>Payment Details</legend>
            <div class="form-group"><label for="card-name">Name on Card</label><input type="text" id="card-name" name="card_name" autocomplete="cc-name" required></div>
            <div class="form-group"><label for="card-number">Card Number</label><input type="text" id="card-number" name="card_number" autocomplete="cc-number" required></div>
            <div class="form-row">
                <div class="form-group"><label for="card-expiry">Expiry Date (MM/YY)</label><input type="text" id="card-expiry" name="card_expiry" autocomplete="cc-exp" placeholder="MM/YY" required></div>
                <div class="form-group"><label for="card-cvc">CVC</label><input type="text" id="card-cvc" name="card_cvc" autocomplete="cc-csc" required></div>
            </div>
        </fieldset>

<fieldset>
            <legend>Billing Address</legend>
            <div class="billing-checkbox">
                <input type="checkbox" id="same-as-shipping" name="same_as_shipping" checked>
                <label for="same-as-shipping">Same as shipping address</label>
            </div>
            
            <div id="billing-address-fieldset" style="display: none;">
                <div class="form-group"><label for="billing-name">Full Name</label><input type="text" id="billing-name" name="billing_name" autocomplete="name"></div>
                <div class="form-group"><label for="billing-address">Address</label><input type="text" id="billing-address" name="billing_address" autocomplete="street-address"></div>
                <div class="form-row">
                    <div class="form-group"><label for="billing-city">City</label><input type="text" id="billing-city" name="billing_city" autocomplete="address-level2"></div>
                    <div class="form-group"><label for="billing-zip">Zip Code</label><input type="text" id="billing-zip" name="billing_zip" autocomplete="postal-code"></div>
                </div>
            </div>
        </fieldset>

<button type="submit" class="submit-btn">Place Order</button>
    </form>
</div>

if (sameAsShippingCheckbox && billingAddressFields) {
    // This function will toggle the visibility of the billing address section
    const toggleBillingAddress = () => {
        if (sameAsShippingCheckbox.checked) {
            billingAddressFields.style.display = 'none';
        } else {
            billingAddressFields.style.display = 'block';
        }
    };
    
    // Listen for changes on the checkbox
    sameAsShippingCheckbox.addEventListener('change', toggleBillingAddress);

// Run the function on initial page load
    toggleBillingAddress();
}
</script>

View Output