How to create a responsive checkout form with CSS?
The checkout forms are used for billing statements on the webpage. It contains the name, address, items on the cart, and billing method. The checkout forms are used on most commercial websites. We can design the checkout forms with HTML and CSS.
Creating a checkout form
To create a checkout form, we need to add HTML elements like <input> to create an input field for username, address, card number, etc. We will add <select> tag to add options of the expiry year. A button to submit the form and some links for the product.
It should be styled with CSS. First of all, use the display: flex property to create a layout for the page. There are three columns containing address, billing method, and cart items. These three containers are aligned horizontally for a large screen with flex: 30% .
The elements are customized with properties like padding, margin, background-color, font-size, border, etc.
For the small screens, we have changed the layout of the checkout by aligning them vertically one after another. For that, we have used @media rule and defined the max-width of the screen. Also, we have changed the order of columns using the CSS flex order property.
Example: Creating a responsive checkout form with CSS
In this example, we have used CSS flexbox to create a responsive checkout form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
padding: 16px;
}
input[type="text"], select {
display: inline-block;
width: 90%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
margin-left: 20px;
display: block;
}
.formfield {
flex: 25%;
max-width: 25%;
margin: 5px;
background-color: #2efccd;
padding: 5px 20px 15px 20px;
border: 1px solid rgb(191, 246, 250);
border-radius: 3px;
}
.pay {
background-color: #00cc00;
padding: 8px;
font-size: 15px;
width: 70%;
}
.pay:hover {
background-color: #cccccc;
}
p {
background-color: white;
padding : 16px;
}
@media screen and (max-width: 700px) {
.formfield {
flex: 100%;
max-width: 100%;
}
.container {
flex-direction: column;
}
.container :nth-child(1) {order:1;}
.container :nth-child(2) {order:3;}
.container :nth-child(3) {order:2;}
}
</style>
</head>
<body>
<div class= "container">
<div class="formfield">
<form>
<h2> Billing Form </h2>
<label for="fname">Full Name</label>
<input type="text" id="fname" name="fname">
<label for="email"> Email</label>
<input type="text" id="email" name="email">
<label for="add"> Address</label>
<input type="text" id="add" name="address">
</form>
</div>
<div class="formfield">
<form>
<h3>Payment</h3>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname">
<label for="ccnum">Card number</label>
<input type="text" id="ccnum" name="cardnumber">
<div class="payment">
<div>
<label for="expyear">Exp Year</label>
<select name="Year" id="Year">
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</div>
<div>
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="cvv">
</div>
</div>
<input type="submit" value="Continue to pay" class="pay">
</form>
</div>
<div class="formfield">
<h4> Cart Items </h4>
<p>
<a style="text-decoration: none;" href="#">Product 1</a><span class="price">Rs 500</span>
</p>
<p>
<a style="text-decoration: none;" href="#">Product 2</a><span class="price"> Rs 200</span>
</p>
<p>
Total <span class="price" style="color:black"> Rs 250</span>
</p>
</div>
</div>
</body>
</html>
Output
Here is the output of the above example.
For large screen
For small screen
Example: Creating a Responsive checkout
In this example, we have additionally added icons to the the payment using Font Awesome icon library.
Conclusion
In this tutorial, we have learned to create a responsive checkout with CSS. It has been creating with CSS flexbox. We have explained it with examples.
