PROWAREtech
CSS: Basic Contact Form
This article shows how to create a modern contact form like this:
For a dark themed contact form/page then see Dark Modern Contact Form.
To create the back-end that actually sends the email, see the Node.js and Gmail Contact Form article. To create the same form using JavaScript so that the HTML contact form does not need to be copied to every page see the JavaScript Contact Form article.
This form would be created on every page. It pops up via the :target pseudo-class selector.
This code is compatible with Internet Explorer 11 and newer including Chrome and Firefox. It also is compatible with mobile devices.
Note: the CSS and HTML are including in one file for simplicity's sake. After downloading this file, it is recommended the CSS and HTML be separated into separate files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Contact Form</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 16px;
background-color: darkgray;
color: black;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
font-variant: small-caps;
}
a {
color: inherit;
}
.contact-page {
visibility: hidden;
opacity: 0;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
transition: .5s ease .5s;
background-color: lightgray;
}
.contact-page .close {
text-align: right;
padding: 10px;
}
.contact-page .close a {
border: none;
text-decoration: none;
outline: none;
color: red;
}
.contact-page:target {
visibility: visible;
opacity: 1;
transition: .5s ease;
}
.contact-form {
position: absolute;
max-width: 500px;
right: -500px;
top: 50%;
transform: translate(50%,-50%);
display: flex;
flex-direction: column;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
background-color: white;
width:90%;
border-radius: 20px;
overflow: hidden;
transition: .5s ease;
}
.contact-page:target .contact-form {
right: 50%;
transition: .5s ease .5s;
}
.contact-form-input,
.contact-form button {
font-family: inherit;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 24px;
letter-spacing: 1px;
border: none;
width: 100%;
outline: none;
}
.contact-form button {
background-color: orangered;
padding: 20px;
color: #fff;
}
.contact-form div:nth-child(1),
.contact-form div:nth-child(2) {
position: relative;
}
.contact-form div:nth-child(1)::after,
.contact-form div:nth-child(2)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: rgba(0,0,0,0.15);
}
.contact-form textarea {
overflow: auto;
height: 100px;
text-transform: none;
}
</style>
</head>
<body>
<main>
<h1><b><a href="#contact-id">click here for the contact form</a></b></h1>
</main>
<div class="contact-page" id="contact-id">
<div class="close"><a href="#!">[ close ]</a></div>
<form action="/ajax/email" class="contact-form" method="POST" onsubmit="return false;">
<div>
<input type="text" name="name" placeholder="name" class="contact-form-input" required />
</div>
<div>
<input type="email" name="email" placeholder="email" class="contact-form-input" required />
</div>
<div>
<textarea name="message" class="contact-form-input" placeholder="MESSAGE" required></textarea>
</div>
<div>
<button type="submit">send</button>
</div>
</form>
</div>
</body>
</html>
Coding Video
