Payment Form Sample using HTML and CSS

This is a sample of the Payment Information Form created by using HTML5 and CSS.

To see the demo of this contact us page click here:

Complete HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Form</title>

</head>
<body>
    <div class="container">
        <form action="nothing.php" method="get">
            <h1 class="main_heading" > Payment Form</h1>
            <hr>
            <h2>User Information</h2>
            <p>
                <label for="name">Name:*</label>
                <input type="text" name="myName" placeholder="Write your name" id="name" required>
            </p>
            <p>
                <fieldset>
                    <legend>Gender</legend>
                    Male<input type="radio" name="myGender" id="gender" required> Female<input type="radio" name="myGender" id="gender" required>
                </fieldset>
            </p>
            <p>
                Address: <br>
                <textarea name="myAddress" id="address" placeholder="Enter your address" cols="190" rows="10"></textarea>
            </p>
            <p>
                <label for="email">Email*: </label>
                <input type="email" name="myEmail" id="email" required placeholder="example@gmail.com">
            </p>
            <p>
                <label for="pincode">Pin Code*: </label>
                <input type="number" name="myPincode" id="pincode" required placeholder="123456">
            </p>
            <h2>Payment Information</h2>
            <p>
                Card Type:*  
                <select name="card_type" id="cardtype" required>
                    <option value="">---Select Card Type---</option>
                    <option value="visa">Visa</option>
                    <option value="mastercard">Master Card</option>
                    <option value="rupay">Rupay</option>
                </select>
                
            </p>
            <p>
                <label for="cardnumber">Card Number:* </label>
                <input type="number" name="cardNumber" id="cardnumber" required placeholder="1111-2222-3333-4444">
            </p>
            <p>
                <label for="exp_date">Expiration Date:*</label>
                <input type="date" name="exp-date" id="exp_date" required>
            </p>
            <p>
                <label for="cvv">CVV*</label>
                <input type="password" name="cvv" id="cvv" required placeholder="123">
            </p>
            <p>
                <input type="submit" value="Pay Now">
                <input type="reset" value="Reset Now">
            </p>



        </form>
    </div>
    
</body>
</html

Complete CSS code:

*{
    box-sizing: border-box;
}
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 15px 30px;
    font-size: 17px;
    padding: 10px;
}
.container{
    background-color: #f2f2f2;
    padding: 5px 10px;
    border: 2px solid rgb(149, 196, 235);
    border-radius: 10px;
}
input[type="text"], 
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin: 7px;

}
fieldset{
    background-color: #fff;
    border: 2px solid #ccc;
    width: 100%;
    border-radius: 5px;

}

h1{
    text-align: center;
}
input[type="submit"]{
    background-color: rgb(52, 189, 189);
    color: white;
    font-weight: bold;
    font-size: medium;
    padding: 9px 20px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    width: 49%;
    /* float: left; */
}
input[type="submit"]:hover{
    border:1px solid rgb(142, 152, 245);
    background-color: rgb(56, 189, 241);
}
input[type="reset"]{
    background-color: rgb(52, 189, 189);
    color: white;
    font-weight: bold;
    font-size: medium;
    padding: 9px 20px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    width: 49%;
    float: right;
}
input[type="reset"]:hover{
    border:1px solid rgb(142, 152, 245);
    background-color: rgb(56, 189, 241);
}

Thanks!

Payment Form Sample using HTML and CSS

Payment Form Sample using HTML and CSS

Post a Comment

Contact form