Payment Form
How do I make an payment form?
What is a payment form? How do you make a payment form? This script and codes were developed by Azizur Rahman on 09 January 2023, Monday.
Payment Form - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Payment Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" rel="stylesheet">
<div class="container"> <div class="heading"> <h2>PAYMENT DETAILS</h2></div> <div class="details"> <form> <div class="left"> <label for="name">CARD HOLDER'S NAME</label><br> <input type="cc-name" id="name" name="cardholder_name" pattern="[A-Za-z\s]+"> </div> <div class="right"> <label for="number">CARD NUMBER</label><br> <input type="cc-number" id="cnumber" name="cardnumber" maxlength="11" pattern="[0-9]{11}"></div> <div class="left"><br> <label for="expiry date">EXPIRES</label><br> <input type="cc-exp-month" id="expmonth" name="expmonth" placeholder="MM" maxlength="2" pattern="[0-9]"> <input type="cc-exp-year" id="expyear" name="expyear" placeholder="YY" maxlength="2" pattern="[0-9]"> </div> <div class="right"><br> <label for="CCV">CCV</label><br> <input type="cc-csc" id="ccv" name="ccv" pattern="[0-9]"> </div><div class="right"><br> <button>SUBMIT</button></div> </form> </div>
</div>
</body>
</html>
Payment Form - Script Codes CSS Codes
.container { width: 600px; height: 340px; margin: 0 auto; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); border-radius: 10px;
}
h2 { font-family: 'Montserrat'; color: white;
}
.heading { background-color: #00838f; padding: 20px 40px; border-radius: 10px 10px 0px 0px;
}
.details { padding: 40px;
}
label { font-family: 'Open Sans'; font-weight: bold; color: #00bcd4; font-size: 0.8rem;
}
.left { float: left; width: 200px;
}
.right { float: right; width: 280px;
}
input[type="cc-name"],
input[type="cc-number"],
input[type="cc-exp-month"],
input[type="cc-exp-year"],
input[type="cc-csc"] { font-family: 'Open Sans'; font-weight: bold; font-size: 1rem; padding: 2px; text-align: center;
}
input[type="cc-name"],
input[type="cc-number"] { width: 100%;
}
input[type="cc-exp-month"],
input[type="cc-exp-year"] { width: 20%;
}
input[type="cc-csc"] { width: 40%;
}
input { border-radius: 4px; border: 1px solid #00838f;
}
input:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
button { float: right; border: 1px solid #00838f; border-radius: 40px; padding: 6px; color: white; cursor: pointer; background: -moz-linear-gradient(#00acc1, #006064); background: linear-gradient(#00acc1, #006064;
}
Developer | Azizur Rahman |
Username | azizurrahman |
Uploaded | January 09, 2023 |
Rating | 3 |
Size | 2,198 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Quote Carousel | 2,173 Kb |
Spinning Buttons | 1,634 Kb |
Fitness Card | 1,845 Kb |
JQuery Mobile Keyboard | 2,719 Kb |
One Page Site | 2,736 Kb |
Temperature Converter | 2,117 Kb |
Login Form | 2,010 Kb |
Simple Transition Buttons | 1,644 Kb |
Working Timer | 2,454 Kb |
Recipe Card | 2,056 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pure CSS read more toggle | Idered | 2,344 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
STIKHOI | Denmch | 7,122 Kb |
Canvas stripes | Adrianparr | 1,948 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!