Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 13, 2021 02:32 pm GMT

Responsive Contact Form Using Pure HTML and CSS.

Here Is The Full Source Code Of This Form:



<!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>


*{    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;}

Find Me On:


Original Link:

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To