How to Create Checkout Form HTML and CSS3.Welcome, everyone! In this article, you will learn how to create a Purchasing Checkout Form Using HTML, CSS3, and a little bit of jQuery. We’ll use Google Fonts for this checkout form, especially Roboto.
A validating credit card is an essential point while receiving payment through an HTML form. So, we’ve considered how to validate a credit card number (in a different format) using JavaScript. There are various organizations in the financial market offer credit cards. But there is no common format in the credit card numbering system, it modifies company to company. We are not convinced that all the formats which we have discussed here are correct because time to time a company can change its numbering format. You can easily change a format by simply changing the general expression which we have used for various cards. Here is a format of some well-known credit cards. Such as Visa, MasterCard, American Express, etc.
Read Also: Create a responsive navbar with icons
How to Create Checkout Form HTML and CSS3
So, let’s begin. First of all, we need to create a file named index.html or whatever you want.
The following is the code to create a responsive checkout form with HTML and CSS3.
HTML CODE
<!DOCTYPE html> <html lang="en"><body translate="no"> <h2>How to Create Checkout Form HTML and CSS3</h2> <h3>Fill this form. We've a secure payment system you no need to worry</h3> <form> <div class="soft-container"> <div class="soft-info"> <h1>Secure Payment</h1> </div> <input type="text" required="required" name="first-name" placeholder="Name on Card" /> <input id="get-input" required="required" type="text" name="number" placeholder="Card Number" /> <input id="co-left" required="required" type="text" name="expiry" placeholder="MM / YY" /> <input id="co-right" required="required" type="text" name="cvc" placeholder="CCV" /> <div class="card-info"></div> <input id="get-input" type="text" name="streetaddress" required="required" autocomplete="on" maxlength="45" placeholder="Compelete Address" /> <input id="input-button" type="submit" value="Pay Now" /> </form> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://softcodeon.com/cm/card.js'></script>
CSS Code:
Read Also: Create Breadcrumb Navigation in HTML
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,700,500);
body {
padding: 60px 0;
background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://softcodeon.com/cm/g.jpg);
background-size: cover;
background-repeat: no-repeat;
color: white;
margin: 0 auto;
width: 500px;
}
.text {
padding: 0 20px 30px 20px;
font-family: "Roboto";
text-transform: uppercase;
font-size: 1em;
color: #fff;
text-align: center;
}
.soft-container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.card-info {
background: linear-gradient(90deg, rgba(94,32,121,1) 0%, rgba(114,58,184,1) 100%);
width: 100%;
display: flex;
}
.soft-info {
background: linear-gradient(90deg, rgba(94,32,121,1) 0%, rgba(114,58,184,1) 100%);
color: #fff;
padding: 1px 0;
text-align: center;
border-radius: 30px 30px 0px 0px;
}
h1 {
font-size: 1.3em;
font-family: "Roboto"
}
input {
margin: 1px 0;
padding-left: 3%;
font-size: 14px;
}
input[type="text"]{
display: block;
height: 40px;
width: 97%;
border: none;
}
input[type="email"]{
display: block;
height: 50px;
width: 97%;
border: none;
}
input[type="submit"]{
display: block;
height: 60px;
width: 100%;
border: none;
background: linear-gradient(90deg, rgba(94,32,121,1) 0%, rgba(114,58,184,1) 100%);
color: #fff;
margin-top: 2px;
curson: pointer;
font-size: 0.9em;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
border-radius: 0px 0px 30px 30px;
}
input[type="submit"]:hover{
background-color: #6FB7E9;
transition: 1.3s ease;
}
#co-left {
width: 46.8%;
float: left;
margin-bottom: 2px;
}
#co-right {
width: 46.8%;
float: right;
}
@media only screen and (max-width: 480px){
body {
width: 100%;
margin: 0 auto;
}
.soft-container {
margin: 0 2%;
}
input {
font-size: 1em;
}
#input-button {
width: 100%;
}
#get-input {
width: 96.5%;
}
h1 {
font-size: 1.2em;
}
input {
margin: 2px 0;
}
input[type="submit"]{
height: 50px;
}
#co-left {
width: 96.5%;
display: block;
float: none;
}
#co-right {
width: 96.5%;
display: block;
float: none;
}
}
</style>Javascript Code:
Read Also: Create a responsive sticky navbar
<script id="rendered-js">
$('form').card({
container: '.card-info',
width: 280,
formSelectors: {
nameInput: 'input[name="first-name"], input[name="last-name"]' } });
</script>The checkout process can be interactive, too. Put together a secure, comprehensive online checkout form that customers will enjoy filling out by using this form.