Contact Form

contact-form.markdown

Contact Form

A postal-y colored contact form with a progress bar for the send button + a confirmation page. Created with the help of jquery.

A Pen by Valentin on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css?family=Audiowide%7CRoboto+Condensed" rel="stylesheet">

<div class="mailbg">
	<label class="l1" for="mailinput">Your Email:</label>
	<input class="mailinput" aria-label="Your Email" autocomplete="on" type="email" placeholder="">
	<label class="l2" for="messtxt">Your Message:</label>
	<textarea class="messtxt" aria-label="Your Message" placeholder=""></textarea>
	<button class="sendmess" aria-label="Send message">Send<div class="bar"></div></button>
	<div class="success">Message sent successfully.<br><br>Thanks!</div>
	<button class="closemess" aria-label="Close Form">Close</div></button>
</div>

script.js

$(".sendmess").click(function() {
	$(".bar").css("animationName", "send");
	SendMess();
})

function SendMess() {
	setTimeout(function() {
		$(".l1").css("display", "none");
		$(".l2").css("display", "none");
		$(".mailinput").css("display", "none");
		$(".messtxt").css("display", "none");
		$(".sendmess").css("display", "none");

		$(".success").css("display", "inline");
		$(".closemess").css("display", "inline");
	}, 1500);
}

$(".closemess").click(function() {
	$(".bar").css("animationName", "none");
	$(".l1").css("display", "inline");
	$(".l2").css("display", "inline");
	$(".mailinput").css("display", "inline");
	$(".messtxt").css("display", "inline");
	$(".sendmess").css("display", "inline");

	$(".success").css("display", "none");
	$(".closemess").css("display", "none");
	
	$(".mailinput").val("");
	$(".messtxt").val("");
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

body {
	background: #246;
}

button {
	padding: 0;
	border: 0;
	background: none;
}

.mailbg {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 80vw;
	max-width: 400px;
	height: 500px;
	background: #fcda2f;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.mailbg:before {
	content: "";
	position: absolute;
	right: 50%;
	top: 99%;
	width: 0;
	height: 0;
	border-top: 50px solid #fcda2f;
	border-right: 30px solid transparent;
	border-left: 5px solid transparent;
	-webkit-transform: translate(0%, -0%);
	-ms-transform: translate(0%, -0%);
	transform: translate(0%, -0%);
	transform: rotate(0deg);
}

label {
	font-size: 1.2em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
}

.l1 {
	position: absolute;
	top: 20px;
	left: 5%;
}

.l2 {
	position: absolute;
	top: 120px;
	left: 5%;
}

.mailinput {
	position: absolute;
	top: 50px;
	box-sizing: border-box;
	border: none;
	padding: 5px;
	left: 50%;
	width: 90%;
	height: 50px;
	resize: none;
	font-size: 1.2em;
	font-family: 'Roboto Condensed', sans-serif;
	-webkit-transform: translate(-50%, -0%);
	-ms-transform: translate(-50%, -0%);
	transform: translate(-50%, -0%);
}

.mailinput:focus {
	outline: none;
}

.messtxt {
	position: absolute;
	top: 150px;
	box-sizing: border-box;
	border: none;
	padding: 5px;
	left: 50%;
	width: 90%;
	height: 250px;
	resize: none;
	font-size: 1.2em;
	font-family: 'Roboto Condensed', sans-serif;
	-webkit-transform: translate(-50%, -0%);
	-ms-transform: translate(-50%, -0%);
	transform: translate(-50%, -0%);
}

.messtxt:focus {
	outline: none;
}

.sendmess {
	position: absolute;
	top: 420px;
	left: 50%;
	-webkit-transform: translate(-50%, -0%);
	-ms-transform: translate(-50%, -0%);
	transform: translate(-50%, -0%);
	width: 90%;
	height: 50px;
	text-align: center;
	font-size: 1.2em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	color: #fcda2f;
	background: #000;
	line-height: 40px;
	cursor: pointer;
}

.sendmess:focus {
	outline: none;
}

.bar {
	position: absolute;
	width: auto;
	background: #fcda2f;
	top: 0%;
	left: 0;
	right: 100%;
	height: 100%;
	content: "";
	animation: sent 1.5s forwards;
	animation-delay: 0.2s;
}

@keyframes send {
	0% {
		right: 100%;
	}
	100% {
		right: 0%;
	}
}

.success {
	position: absolute;
	top: 120px;
	width: 80%;
	left: 50%;
	-webkit-transform: translate(-50%, -0%);
	-ms-transform: translate(-50%, -0%);
	transform: translate(-50%, -0%);
	text-align: center;
	font-size: 2em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	display: none;
}

.closemess {
	position: absolute;
	top: 330px;
	left: 50%;
	-webkit-transform: translate(-50%, -0%);
	-ms-transform: translate(-50%, -0%);
	transform: translate(-50%, -0%);
	width: 60%;
	height: 50px;
	text-align: center;
	font-size: 1.2em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	color: #fcda2f;
	background: #000;
	line-height: 40px;
	cursor: pointer;
	display: none;
}

.closemess:focus {
	outline: none;
}