DEV Community

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

Posted on

Responsive Contact Form Using Pure HTML & CSS.|

Here Is The Complete Responsive Login Form Using Pure HTML & CSS.|

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 Form</title>
</head>
<body>
    <div class="container">
        <form action="" autocomplete="off">
            <h1>Contact Us</h1>
            <div class="inp">
                <div class="name">
                    <input type="text" name="name" id="name" placeholder="Name" required>
                </div>
                <div class="email">
                    <input type="email" name="email" id="email" placeholder="E-mail" required>
                </div>
                <div class="phone">
                    <input type="number" name="phone" id="phone" placeholder="Phone No." required>
                </div>
                <div class="message">
                    <textarea name="message" id="message" cols="30" rows="10" placeholder="Type Here Your Message..." required></textarea>
                </div>
                <div class="submit">
                    <button type="Submit">Submit</button>
                </div>
            </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: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}
body{
    height: 100vh;
    width: 100%;
    background: turquoise;
    display: grid;
    place-items: center;
}
.container{
    position: relative;
    height: 450px;
    width: 350px;
    background: rgb(0, 0, 0);
    border-radius: 3px;
    box-shadow: 1px 1px 4px #444, -1px -1px 4px #444;
}
form h1{
    color: white;
    text-align: center;
    margin: 5px;
}
.inp{
    margin: 10px 25px;
}
input{
    color: white;
    height: 40px;
    width: 280px;
    outline: none;
    border: 1px solid white;
    margin: 10px 0;
    box-shadow: 1px 1px 1px rgb(224, 221, 221);
    padding: 15px;
    font-size: 20px;
    background: #000;
}
textarea{
    height: 140px;
    width: 280px;
    color: white;
    outline: none;
    border: 1px solid white;
    background: #000;
    margin: 10px 0;
    box-shadow: 1px 1px 1px rgb(224, 221, 221);
    padding: 10px 10px;
    font-size: 20px;
}
.submit button{
    height: 40px;
    width: 100px;
    background: #0489EE;
    color: white;
    font-size: 20px;
    font-weight: 650;
    cursor: pointer;
    border: none;
    outline: none;
    box-shadow: 0 1px 2px #777;

}
::placeholder{
    color: white;
}
Enter fullscreen mode Exit fullscreen mode

Find Me On:



Facebook
Youtube
Github

Discussion (0)