Learn how to create a responsive checkout form using pure CSS. This easy guide helps you design a clean and mobile-friendly checkout page in just two minutes.
Table of Contents
The checkout page is the page related to payment and shipping/billing details on an eCommerce store. The checkout page allows customers to enter payment details and complete their orders.
The checkout page is an important part of the online shopping experience, as it is the final step in the process of completing a purchase. The checkout page needs to be easy to use and secure, as customers will typically enter sensitive personal and financial information on this page. Some common features of a checkout page include:
- A summary of the items in the customer's shopping cart
- A form for the customer to enter their shipping and billing information
- A form for the customer to enter their payment information
- An option for the customer to select a shipping method
- An option for the customer to enter any promotional codes or coupons
- A button for the customer to confirm their purchase and complete the transaction
It is important for the checkout page to be designed in a way that is clear and easy for the customer to understand so that they can complete their purchase smoothly and efficiently.
In this article, we'll walk you through creating a checkout form page that looks just like those on an eCommerce store, including card icons and content layout.
Let's start making an amazing responsive checkout form page Using HTML and CSS step by step.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our checkout form. Below is a breakdown of its structure:
1. <head> Section
- The
<head>section includes: - Title (
<title>Responsive Checkout Form</title>) – Sets the webpage title. - Meta tag (
<meta name="viewport">) – Makes the page responsive on mobile devices. - Font Awesome Icons (
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">) – Adds icons for credit card types, email, and address. - External CSS (
<link rel="stylesheet" href="styles.css">) – Links an external stylesheet for styling.
2. <body> Section
The <body> contains the main form and shopping cart.
Heading
<h2>Checkout Form</h2>- Displays a title for the checkout form.
3. Main Layout
<div class="row">- Flexbox layout: The form is divided into two columns:
- col-75 (75% width) → Contains the Billing and Payment form.
- col-25 (25% width) → Displays the shopping cart summary.
4. Billing Address Section
<h3>Billing Address</h3>
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="fname" name="firstname" placeholder="Faraz">- Users enter their full name, email, address, and city.
- Uses Font Awesome icons for better UI.
- The State and Zip Code fields are arranged in a row.
5. Payment Information Section
<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>- Shows accepted credit card logos.
- Users enter cardholder name, card number, expiration month/year, and CVV.
6. Shipping Checkbox
<label>
<input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing
</label>- A checkbox to confirm if the shipping address is the same as the billing address.
7. Submit Button
<input type="submit" value="Continue to checkout" class="btn">- Clicking this button submits the form.
8. Shopping Cart Summary
<div class="container">
<h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i> <b>4</b></span></h4>
<p><a href="#">Item 1</a> <span class="price">$105</span></p>
<p><a href="#">Item 2</a> <span class="price">$95</span></p>
<p><a href="#">Item 3</a> <span class="price">$100</span></p>
<p><a href="#">Item 4</a> <span class="price">$50</span></p>
<hr>
<p>Total <span class="price" style="color:black"><b>$350</b></span></p>
</div>- Displays items in the cart, their prices, and the total amount.
- Uses
<hr>to separate cart items from the total.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create a checkout page. Below is an explanation of each section:
1. Basic Styles
body {
font-family: Arial;
font-size: 17px;
padding: 8px;
}- Sets the font family to Arial.
- Defines a base font size of 17px.
- Adds 8px padding around the body.
2. Box Sizing
Edit
* {
box-sizing: border-box;
}- Ensures that padding and border are included in the total width/height of elements, preventing layout issues.
3. Layout with Flexbox
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -16px;
}- .row acts as a flex container.
- Uses flex-wrap: wrap; to ensure columns wrap when necessary.
- Negative margins (margin: 0 -16px;) help counteract padding in child elements.
4. Column Widths
.col-25 {
-ms-flex: 25%;
flex: 25%;
}
.col-50 {
-ms-flex: 50%;
flex: 50%;
}
.col-75 {
-ms-flex: 75%;
flex: 75%;
}
.col-25, .col-50, .col-75 {
padding: 0 16px;
}- Defines flexible columns:
- .col-25: Takes 25% width.
- .col-50: Takes 50% width.
- .col-75: Takes 75% width.
- Adds 16px horizontal padding to space out content.
5. Container Styling
.container {
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
}- Sets a light grey background for the form.
- Adds padding inside the container.
- Creates a 1px light grey border.
- Rounds the corners slightly with border-radius: 3px;.
6. Input Fields
input[type=text] {
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}- Text inputs span the full width.
- Adds padding for better readability.
- Provides a grey border and slight rounding.
7. Labels
label {
margin-bottom: 10px;
display: block;
}- Labels are displayed as block elements, ensuring they appear on a new line.
- Adds spacing below labels.
8. Icon Container
.icon-container {
margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
}- Provides spacing for payment icons.
- Sets a large font size for better visibility.
9. Checkout Button
.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;
}- Creates a green button with white text.
- Button spans full width.
- Changes color (#45a049) when hovered.
10. Links
a {
color: #2196F3;
}- Changes all links (
<a>) to blue.
11. Divider (Horizontal Rule)
hr {
border: 1px solid lightgrey;
}- Light grey line to separate sections.
12. Pricing Display
span.price {
float: right;
color: grey;
}- Ensures price is right-aligned.
- Uses a grey font color.
13. Responsive Design
@media (max-width: 800px) {
.row {
flex-direction: column-reverse;
}
.col-25 {
margin-bottom: 20px;
}
}- If the screen width is 800px or smaller:
- The .row stacks elements vertically (column-reverse).
- Adds extra margin to .col-25.
This will give our checkout form page an upgraded presentation. Create a CSS file with the name styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
font-family: Arial;
font-size: 17px;
padding: 8px;
}
* {
box-sizing: border-box;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%;
flex: 25%;
}
.col-50 {
-ms-flex: 50%;
flex: 50%;
}
.col-75 {
-ms-flex: 75%;
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;
}
a {
color: #2196F3;
}
hr {
border: 1px solid lightgrey;
}
span.price {
float: right;
color: grey;
}
@media (max-width: 800px) {
.row {
flex-direction: column-reverse;
}
.col-25 {
margin-bottom: 20px;
}
} Final Output:
Conclusion:
In conclusion, creating a simple and responsive checkout form using only CSS can be done quickly and easily with the right knowledge and skills. By following the steps outlined in this tutorial, web developers can create a highly customized and user-friendly checkout experience for their E-commerce websites. Using pure CSS for checkout forms has many benefits, including a fast-loading and lightweight form, no need for additional scripts or plugins, and the ability to create a consistent checkout experience across all devices. With these benefits in mind, web developers can confidently create a checkout form that will provide a smooth user experience for their customers.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
