Create a simple classic contact form in HTML and CSS by following our code tutorial. A contact form is a must if you want to hear about bug reports, or how much your visitors love your work. or for getting suggestion or questions from your visitors.
Here is the Preview of Contact Form -
Here is the Preview of Contact Form -
Preview
Here is the HTML code for Contact Form
form.html
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link href="https://fonts.googleapis.com/css2?family=Lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body>
<div class="f-container">
<div class="c-form">
<div class="content">
<input type="text" class="y-name" placeholder="Your Name*" required="required" /><br>
<input type="text" class="y-email" placeholder="Your Email*" required="required" /><br>
<textarea class="y-message" placeholder="Your Message*" required="required"></textarea><br>
<button class="submit-btn">Send Message</button>
</div>
</div>
</div>
</body>
</html>
Here is the CSS code for Contact Form to give a good look.
form.css
body {
margin:0;
padding:0;
font-family:'Lato', sans-serif;
}
.f-container {
position:relative;
padding:40px;
background:#E8E5F6;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
}
.c-form {
position:relative;
width:300px;
border:1px solid silver;
padding:10px;
box-shadow:0 0 10px 5px silver;
}
.content {
position:relative;
width:100%;
overflow:hidden;
}
.y-name {
position:relative;
background:none;
border:none;
outline:none;
color:black;
width:100%;
line-height:25px;
padding:5px;
margin-bottom:10px;
border-bottom:2px solid maroon;
font-family:'Lato', sans-serif;
}
.y-email {
background:none;
border:none;
outline:none;
color:black;
width:100%;
line-height:25px;
padding:5px;
margin-bottom:10px;
border-bottom:2px solid maroon;
font-family:'Lato', sans-serif;
}
.y-message {
background:none;
border:none;
outline:none;
color:black;
width:100%;
line-height:25px;
padding:5px;
margin-bottom:10px;
border-bottom:2px solid maroon;
font-family:'Lato', sans-serif;
}
.submit-btn {
border:none;
outline:none;
width:100%;
color:white;
line-height:25px;
background:maroon;
transition-duration:.5s;
border:1px solid maroon;
font-family:'Lato', sans-serif;
}
.submit-btn:hover {
color:#000000;
background:#FFFFFF;
border:1px solid maroon;
}
