Learn how to create a responsive checkout form with CSS.
Responsive Checkout Form
Billing Address
Full Name Email Address City
Payment
Accepted Cards
Name on Card Credit card number Exp Month
Shipping address same as billing
Try it Yourself »
How To Create a Checkout Form
Step 1] Add HTMLUse a element to process the input. You can learn more about this in our PHP tutorial.
Example
Billing Address
Full Name
Address
City
State
Zip
Payment
Accepted Cards
Name on Card
Credit card number
Exp Month
Exp Year
CVV
Shipping address same as billing
Cart
4
Product 1 $15
Product 2 $5
Product 3 $8
Product 4 $2
Total $30
Use CSS Flexbox to create a responsive layout:
Example
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10
*/
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
.col-75 {
-ms-flex: 75%; /* IE10 */
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;
}
span.price {
float: right;
color: grey;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other [and change the direction - make the "cart" column go on top] */
@media [max-width: 800px] {
.row {
flex-direction: column-reverse;
}
.col-25 {
margin-bottom: 20px;
}
}
Try it Yourself »
Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.
Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.
Tip: Go to our CSS Flexbox Tutorial to learn more about the flexible box layout module.
Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.
Get started for free ❯
* no credit card required