CSS Forms | CSS Tutorial

Forms are one of the most important parts of a website. They allow users to interact with your site — whether it’s signing up, logging in, or submitting queries. However, raw HTML forms often look plain and unappealing.

With CSS, you can completely transform a simple form into something attractive, user-friendly, and responsive.

Basic HTML Form (Without CSS)

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Contact Form</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div>
        <h1>Contact Form</h1>
        <p id="Subheading">Please fill all the text in the fields.</p>
    </div>
    <form action="">
 
        <p class="name">
            Your Name:<br>
            <input type="text" placeholder="Your Full Name">
        </p>
        <p class="email"> Your Email:<br>
            <input type="email" name="email" id="" placeholder="Enter your Email">
        </p>
        <p class="number">
            Your mobile number:<br>
            <input type="text" placeholder="Enter your mobile number">
        </p>
        <p class="message">
            Your message to us:<br>
            <textarea name="message" id="" cols="50" rows="5" placeholder="Enter your query here"></textarea>
        </p>
        <p>Select how you want updates:<br>
            <select name="Select" id="">
                <option value="Choose">--Please choose one option--</option>
                <option value="op1">Message</option>
                <option value="op2">Call</option>
                <option value="op3">Email</option>
            </select>
        </p>
        <input type="submit" value="Submit"> <input type="reset" value="Reset">
    </form>
</body>
 
</html>

Output (Without CSS)

Form without CSS

As you can see, it looks quite raw and not very user-friendly. Let’s improve it using CSS.

Styling the Form with CSS

Now let’s add a separate stylesheet (style.css) and apply styles to make the form modern and professional.

body {
    padding: 0px 300px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-decoration: solid;
    font-weight: 900;
}
 
div {
    padding: 5px 5px;
    background-color: rgb(164, 206, 147);
    width: auto;
    color: white;
    line-height: 10%;
    text-align: center;
    border-radius: 5px;
    border: 1px solid black;
}
 
form {
    background-color: rgb(238, 239, 235);
    border-radius: 5px;
    border: 1px solid black;
    padding: 0px 80px 5px;
    font-size: large;
}
 
input[type="text"],
input[type="email"],
textarea {
    width: 75%;
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
}
 
input[type="submit"] {
    background-color: rgb(164, 206, 147);
    font-size: larger;
    color: white;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    width: 75%;
}
 
input[type="reset"] {
    background-color: red;
    font-size: larger;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    border: none;
}
 
input[type="submit"]:hover {
    background-color: rgb(0, 176, 76);
}
 
input[type="reset"]:hover {
    background-color: rgb(191, 0, 0);
}

This stylesheet covers almost all the rules we’ve seen so far.

Output (With CSS Applied)

Form with CSS

Now the form looks clean, modern, and user-friendly. The hover effects make the buttons more interactive, and the overall design feels professional.

Key Takeaways

Forms in plain HTML look unstyled and are not user-friendly.
CSS lets you control everything — layout, background colors, spacing, borders, and hover states.
You can further enhance this with:

Responsive design using @media queries.
Placeholder styling using ::placeholder.
Better focus indicators with :focus.