Responsive Modern Dark Contact Form Using Only HTML and CSS

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

This contact form has a slide-in-from-the-top animation.

This form would be created on every page. It pops up via the :target pseudo-class selector.

For a similar themed login and registration form/page then see Dark Login and Registration Form.

<!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;
	}
	html,
	body {
		min-height: 100%;
	}
	body {
		margin: 0;
		padding: 0;
		font-family: sans-serif;
		color: white;
		background-color: black;
		background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
							url(https://picsum.photos/id/3/1920/1080);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	div,
	form {
		background-color: inherit;
	}
	section {
		display: flex;
		height: 100vh;
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	.contact-page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #334;
		visibility: hidden;
		opacity: 0;
		transition: .5s ease .5s;
	}
	.contact-page .form {
		position: absolute;
		left: 50%;
		top: -500px;
		transform: translate(-50%, -50%);
		transition: .5s ease;
		width: 95%;
		max-width: 500px;
		padding: 10px;
		color: white;
	}
	.contact-page:target .form {
		transition: .5s ease .5s;
		top: 50%;
	}
	.contact-page:target {
		visibility: visible;
		opacity: 1;
		transition: .5s ease;
	}
	.contact-page .form .close {
		text-align: right;
	}
	.contact-page .form .close h1 {
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 40px;
		text-align: center;
		border-radius: 50%;
		box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
	}
	.contact-page .form .close a {
		text-decoration: none;
		color: white;
	}
	.contact-page .form input,
	.contact-page .form textarea,
	.contact-page .form button {
		width: 95%;
		padding: 10px;
		margin: 5px 0;
		border: none;
		outline: none;
		letter-spacing: 1px;
		border-radius: 20px;
		background-color: #334;
		color: inherit;
	}
	.contact-page .form input::placeholder,
	.contact-page .form textarea::placeholder {
		color: #667;
	}
	.contact-page .form button:active,
	.contact-page .form textarea,
	.contact-page .form input {
		-webkit-appearance: none; /* fixes bug in Safari on iOS */
		box-shadow: inset -2px -2px 6px rgba(255,255,255,.2), inset 2px 2px 6px rgba(0,0,0,.8);
	}
	.contact-page .form textarea {
		overflow: auto;
		height: 100px;
		resize: none;
		font-family: inherit;
	}
	.contact-page .form button {
		width: 50%;
		margin-top: 8px;
		box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
		letter-spacing: 3px;
		background-color: transparent;
	}
	.contact-page .form .card {
		position: relative;
		width: 100%;
		height: 305px;
	}
	.contact-page .form .wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}
	.contact-page .form .face {
		position: absolute;
		top: 5%;
		width: 100%;
		height: 90%;
		overflow: hidden;
		background-color: transparent;
		padding: 10px;
		box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
		border-radius: 30px;
		background-image: linear-gradient(135deg,#334,#445,#334);
	}
	</style>
</head>
<body>

	<section>
		<h1><a href="#id-contact-form">CONTACT</a></h1>
	</section>

	<div class="contact-page" id="id-contact-form">
		<div class="form">
			<div class="close">
				<h1><a href="#!">&times;</a></h1>
			</div>
			<div class="card">
				<div class="face">
					<form action="/ajax/email" method="post" onsubmit="return false;">
						<div class="wrap">
							<input type="text" name="name" autocomplete="off" placeholder="NAME" required />
							<input type="email" name="email" autocomplete="off" placeholder="EMAIL" required />
							<textarea name="message" placeholder="MESSAGE" required></textarea>
							<button type="submit">SEND</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

Coding Video

https://youtu.be/FP0X8DTyeTw