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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

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.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more