Contact Form Using HTML and CSS (Cascading Style Sheets)

This article shows how to create a modern contact form like this:

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>Home</title>
	<style>
		*, *::before, *::after {
			box-sizing: border-box;
		}
		body {
			font-family: sans-serif;
			font-size: 16px;
			background-color: #fff;
		}
		h1 {
			font-variant: small-caps;
		}
		.contact-page {
			visibility: hidden;
			opacity: 0;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			transition: .5s;
			background-color: #fff;
		}
		.contact-page section {
			text-align: right;
			padding: 10px;
		}
			.contact-page section a {
				border: none;
				text-decoration: none;
				outline: none;
				color: #e05e02;
			}
		.contact-page:target {
			visibility: visible;
			opacity: 1;
		}
		.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);
			width:90%;
			border-radius: 20px;
			overflow: hidden;
			transition: .5s ease-in .5s;
		}
		.contact-page:target .contact-form {
			right: 50%;
		}
		.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: #e05e02;
			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>
	<h1>Home Page</h1>
	<p><a href="#contact-id">click here for the contact form</a></p>
	<div class="contact-page" id="contact-id">
		<section><a href="#!">[ close ]</a></section>
		<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

https://youtu.be/yzQ7ps8rA4I