articles » current » css » contact-form-dark-mode

CSS: Dark Mode Contact Form

Create a responsive dark mode 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


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE