DEV Community

Cover image for Responsive Contact Form Using Pure HTML and CSS.
Technical Vandar
Technical Vandar

Posted on

5 2

Responsive Contact Form Using Pure HTML and CSS.

Here Is The Full Source Code Of This Form:

SOURCE CODE:

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="style.css">
    <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>Contact US Form</title>
</head>
<body>
    <div class="container">
        <form action="" autocomplete="off">
            <h1>Contact US</h1>
            <div class="name">
                <label for="name">Name:   <span>*</span></label><br>
                <input type="text" name="name" id="name" placeholder="Name" required>
            </div>
            <div class="email">
                <label for="email">E-mail: <span>*</span></label><br>
                <input type="email" name="email" id="email" placeholder="E-mail" required>
            </div>
            <div class="website">
                <label for="website">Phone: <span>*</span></label><br>
                <input type="number" name="number" id="number" placeholder="Contact No." required>
            </div>
            <div class="message">
                <label for="message">Message</label><br>
                <textarea name="message" id="message" cols="35" rows="5" placeholder="Describe Your Message Here...."></textarea>
            </div>
            <div class="button">
                <button>Send Message</button>
            </div>
            <div class="required">
                <h5>NOTE: All * are Required</h5>
            </div>
        </form>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS CODE:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: sans-serif;
    user-select: none;
}
body{
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    background-color: #333645;
}
.container{
    height: 75vh;
    width: 25vw;
    background-color: rgb(82, 209, 226);
    justify-content: center;
    align-items: center;
    display: flex;
    box-shadow: 0 5px 20px #7f868f;
    border-radius: 8px;
}
form{
    height: 75vh;
    width: 30vw;
    display: grid;
    place-content: center;
    place-items: center;
}
form h1{
    margin-top: -15px;
    text-align: center;
}
input{
    outline: none;
    border: none;
    margin: 10px 0;
    height: 30px;
    font-size: 18px;
    padding: 15px;
    width: 22.5vw;
    box-shadow: 0 2px 5px #b6bebb;
}
form{

}
label{
    font-size: 20px;
}

textarea{
    padding: 15px;
    border: none;
    outline: none;
    font-size: 18px;
    width: 22.5vw;
    box-shadow: 0 2px 5px #abbdb5;
}
.button{
    text-align: center;

}
button{
    font-size: 22px;
    font-weight: 650;
    cursor: pointer;
    border: none;
    outline: none;
    margin-top: 20px;
    box-shadow: 0 2px 4px #718494;
    padding: 10px;
    color: white;
    background: #000;
}
span{
    color: red;
}
h5{
    margin-top: 20px;
    color: #d900ff;
}

Enter fullscreen mode Exit fullscreen mode

Find Me On:

Facebook
Youtube
Github

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (1)

Collapse
 
tedk13 profile image
Ted

Nice work! If you want to refine this a bit you could remove the divs and wrap your inputs in the label.

<div class="email">
    <label for="email">E-mail: <span>*</span></label><br>
    <input type="email" name="email" id="email" placeholder="E-mail" required>
</div>
Enter fullscreen mode Exit fullscreen mode

Becomes:

<label class="email">
    E-mail: <span>*</span>
    <input type="email" name="email" id="email" placeholder="E-mail" required>
</label>
Enter fullscreen mode Exit fullscreen mode

Notice if you wrap you input in a label you don't need the for="". What you did is correct just thought I'd share a little knowledge.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay