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.

This form is created on every page and 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 {
			visibility: hidden;
			opacity: 0;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			transition: .5s;
			background-color: #fff;
		}
		.contact section {
			text-align: right;
			padding: 10px;
		}
			.contact section a {
				border: none;
				text-decoration: none;
				outline: none;
				color: #e05e02;
			}
		.contact: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: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" id="contact-id">
		<section><a href="#!">[ close ]</a></section>
		<form action="#" class="contact-form" method="POST">
			<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

The above code has animation added that is not in the video.

https://youtu.be/yzQ7ps8rA4I