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>
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;
}
Top comments (1)
Nice work! If you want to refine this a bit you could remove the
divs and wrap yourinputs in thelabel.Becomes:
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.