<div class="container">
	<div class="contact-form">
		<div class="horline"></div>
		<div class="vertline"></div>
		<div class="form-background"></div>
		<img class="cross" src="http://www.testomic.com/public/codepen-assets/img/cross.svg"></img>
		<form id="contact" method="POST" accept-charset="UTF-8">
			<div class="name text-input">
				<label>Name</label>
				<div class="error-mark">*</div>
				<input type="text" maxlength="50" name="name"></input>
			</div>
			<div class="email text-input">
				<label>Email</label>
				<div class="error-mark">*</div>
				<input type="email" maxlength="50" name="email"></input>
			</div>
			<div class="message text-input">
				<label>Message</label>
				<div class="error-mark">*</div>
				<textarea type="text" name="msg"></textarea>
			</div>
			<input type="submit" class="submit" value="">
				<div class="result">
					<div class="result-message">Sent</div>
					<img class="submit-icon" src="http://www.testomic.com/public/codepen-assets/img/icon_letter_mail.svg"></img>
				</div>
			</input>
		</form>
	</div>
</div>

<footer>
	<img class="contact-icon" src="http://www.testomic.com/public/codepen-assets/img/icon_letter_mail.svg"></img>
</footer>


<div id="link">
	<a class="img-url" href="https://www.nonatomic.co.uk" target="_blank">
		<img id="small-logo" src="http://testomic.com/public/codepen-assets/logo-small.svg" alt="Nonatomic logo small">
		</a>
	<a class="url" href="https://www.nonatomic.co.uk" target="_blank">Visit Nonatomic Games</a>
</div>
@font-face {
	font-family: 'montserratthin';
	src: url('http://www.testomic.com/public/codepen-assets/fonts/montserrat-thin-webfont.woff2') format('woff2'),
		 url('http://www.testomic.com/public/codepen-assets/fonts/fonts/montserrat-thin-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'montserratlight';
	src: url('http://www.testomic.com/public/codepen-assets/fonts/montserrat-light-webfont.woff2') format('woff2'),
		 url('http://www.testomic.com/public/codepen-assets/fonts/montserrat-light-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'montserratregular';
	src: url('http://www.testomic.com/public/codepen-assets/fonts/montserrat-regular-webfont.woff2') format('woff2'),
		 url('http://www.testomic.com/public/codepen-assets/fonts/montserrat-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

$shark:	#22252C;
$chardonnay: #ffc98b;
$newYorkPink: #da7887;
$mulberry: #c54d74;

body{
	margin:0;
}

.container{
	position:absolute;
	width:100%;
	height:100%;
	
	background-image:url(http://www.testomic.com/public/codepen-assets/img/scene.jpg);
	overflow:hidden;
	background-size:cover;
}

.contact-form {
	z-index:999;
	position:absolute;
	bottom:0px;
	width:100%;
	height:100%;
	opacity:0.92;
	overflow:hidden;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.form-background{
	width:100%;
	height:100%;
	background:$shark;
	-webkit-clip-path: polygon(88% calc(100% - 210px - 6%), 100% calc(100% - 190px), 100% 100%, 0 100%, 0 calc(100% - 210px));
	clip-path: polygon(83% 52%, 100% 69%, 100% 100%, 0 100%, 0 66%);
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

form {
	position:absolute;
	width:100%;
	height:100%;
	left:calc(50% - calc(56% + 150px) / 2);
	bottom:100px;
}

.cross {
	position:absolute;
	display:inline-block;
	z-index:99999;
	width:15px;
	height:15px;
	left:calc(88% - 15px);
	bottom:calc(210px + 6% - 25px);
	cursor:pointer;
	transition: all 0.5s;

}

.cross:hover {
	transform:rotate(90deg);
}

.text-input{
	position:absolute;
	height:22px;
	width:28%;
}

.name {
	bottom:40px;
}

.email {
	bottom:0%;
}

.message {
	left:calc(28% + 25px);
	bottom:0%;
	height:44px + 19px;
	type: "text";
	multiline: true;
	
	label {
		vertical-align: top;
	}
	
}


label {
  position: absolute;
  font-size: 12px;
	font-family: 'montserratlight';
  color: #e2e2e2;
  transition: all 0.5s;
	width:100%;
	height:100%;
	bottom:-6px;
	padding-left:10px;
	padding-right:10px;
}

input, textarea {
  position: absolute;
  background: transparent;
	font-family: 'montserratlight';
  width: 100%;
	height: 100%;
  font-size: 12px;
	border-radius:5px;
	border-width:2px;
	border-color:$mulberry;
	border-style: solid;
	padding-left:10px;
	margin-right:20px;
	color:white;
}

textarea {
	padding-top:6px;
	height:calc(100% - 5px);
	resize:none;
}

.active {
  opacity:0;
}

.submit {
	position: absolute;
	border-radius: 5px;
	color: white;
	background-color: $mulberry;
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
	width:100px;
	height:72px;
	bottom:-8px;
	left:calc(56% + 50px);
	cursor:pointer;
	overflow:hidden;
	transition: all 0.5s;
}


input:focus, 
textarea:focus{
	outline: none;
	border-color:white;
}

.error-mark {
	position: absolute;
  font-size: 32px;
	font-family: 'montserratlight';
  color: red;
	width:100%;
	height:100%;
	bottom:-2px;
	right:-7px;
	text-align:right;
	opacity:0;
}

.submit-icon {
	pointer-events: none;
	position:absolute;
	width:44px;
	bottom:20px;
	left:calc(50% - 22px);
}

.result-message {
	position:absolute;
	pointer-events: none;
	width:100%;
	text-align:center;
	left:-100px;
	bottom:26px;
	font-size: 14px;
	font-color: white;
	font-family: 'montserratlight';
	color: white;
}

.result {
	pointer-events: none;
	position:absolute;
	width:100px;
	height:72px;
	z-index:9999;
	bottom:-8px;
	left:calc(56% + 50px);
	overflow:hidden;
}

.horline{
	position:absolute;
	z-index:9999;
	background-color: $mulberry;
	bottom:125px;
	left:calc(56% + 25px);
	height:1px;
	width:13%;
}

.vertline{
	position:absolute;
	z-index:9999;
	background-color: $mulberry;
	bottom:calc(126px - 125px);
	left:calc(56% + 250px);
	height:125px;
	width:1px;
}


/**
* Footer
*/
footer {
	position:fixed;
	z-index:9999;
	width:100%;
	height:50px;
	background-color:$shark;
	bottom:0;
}

.contact-icon {
	cursor:pointer;
	position:relative;
	width:30px;
	bottom:-15px;
	left:calc(100% - 40px);
}



/**	
* Nonatomic Branding
*/
#link{
	font-family: 'Roboto', sans-serif;
	position: fixed;
	bottom: 15px;
	width: 250px;
	left:0;
	text-align: center;
	z-index:9999;
}

.img-url{
	text-decoration: none;
}

.url{
	opacity: 0.5;
	text-decoration: none;
}

a:link {
	color: white;
}

a:visited{
	color: white;
}

a:hover{
	color: $mulberry;
}

a:active{
	color: white;
}

#small-logo{
	width: 30px;
	transform: translate(-10px, 12px);
	opacity:1;
}
View Compiled 
/**
* Switch out the php url for your own. Very simplified example PHP found at the bottom of this script
*/
var phpURL = "YOUR PHP URL GOES HERE";

$(".contact-icon").on("click", toggleContactForm);
$(".cross").on("click", closeForm);

//Show/Hide
function toggleContactForm(){
	var form = $(".contact-form");
	var bottom = $(form).css("bottom");
	
	if(bottom == "0px"){
		$(form).css("bottom", "-400px");
	}
	else{
		$(form).css("bottom", "0px");
	}
}

function closeForm(){
		$(".contact-form").css("bottom", "-400px");
}

//Resize
$(window).on('resize', onResize);
onResize();

function onResize(){
	var buttonPos = $(".submit")[0].getBoundingClientRect();					
	console.log("POS:", buttonPos);
	
	var width = ($(window).width() - buttonPos.right) - 26;
	
	$(".horline").css("left", buttonPos.right);
	$(".horline").css("width", width);

	$(".vertline").css("left", buttonPos.right + width);
}
	

//Focus
$("input[type=text]").focus(onFocus);
$("input[type=email]").focus(onFocus);
$("textarea").focus(onFocus);

$("input[type=text]").focusout(onFocusOut);
$("input[type=email]").focusout(onFocusOut);
$("textarea").focusout(onFocusOut);

function onFocus(){
		$(this).parent().find("label").addClass("active");
}

function onFocusOut(){
	if($(this).val() === "")
		$(this).parent().find("label").removeClass("active");
}

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

function validateForm(){

		var email = $("input[type=email]").val();
		var validEmail = validateEmail(email);
		var validName = $("input[type=text]").val() ? true : false;
		var validMsg = $("textarea").val() ? true : false;
				
		var nameError = $("input[type=text]").parent().find(".error-mark");
		var emailError = $("input[type=email]").parent().find(".error-mark");
		var msgError = $("textarea").parent().find(".error-mark");
		
		TweenLite.to(nameError, 0.5, {opacity: validName ? 0 : 1});
		TweenLite.to(emailError, 0.5, {opacity: validEmail ? 0 : 1});
		TweenLite.to(msgError, 0.5, {opacity: validMsg ? 0 : 1});
	
	return (validEmail && validName && validMsg);
}

function sentAnimation(message, color) {
		
		flashButton(color);
		var sentElement = $(".result-message");
		$(sentElement).text(message);
		var sentTween = new TimelineLite();
		sentTween.fromTo(sentElement, 0.6, {x:0},{ x:100});
		sentTween.to(sentElement, 0.6, {x:200, delay:1});
		
		var envelopeElement = $(".submit-icon");
		var envelopeTween = new TimelineLite();
		envelopeTween.fromTo(envelopeElement, 0.6, {x:0}, {x:100});
		envelopeTween.fromTo(envelopeElement, 0.6, {x:-100}, {x:0, delay:1});
	
}

function flashButton(color){
	var originalColor = $(".submit").css("background-color");
	
	setTimeout(function(){
		$(".submit").css("background-color", color);
	},300);
	
	setTimeout(function(){
		$(".submit").css("background-color", originalColor);
	},1000);
	
} 

function clearForm(){
	$("input[type=email]").val("");
	$("input[type=text]").val("");
	$("textarea").val("");
	
	$("input[type=text]").focusout();
	$("input[type=email]").focusout();
	$("textarea").focusout();
}

$(function() {
  $('#contact').submit(function(event) {
    event.preventDefault();
		
		if(validateForm()){
			sentAnimation("Sent", "green");
			
			//post form
			var formEl = $(this);
			console.log(formEl.serialize());
			var submitButton = $('input[type=submit]', formEl);

			$.ajax({
				type: 'POST',
				url: phpURL,
				accept: {
					javascript: 'application/javascript'
				},
				data: formEl.serialize(),
				beforeSend: function() {
					submitButton.prop('disabled', 'disabled');
				}
			}).done(function(data) {
				submitButton.prop('disabled', false);
			});
			
			clearForm();
			
		}
		else{
			sentAnimation("Error", "red");
		}
  });
});


/** Drop this PHP script on the server
 
 <?php
	$email_to = "[YOUR EMAIL GOES HERE]";
	$email_subject = "[YOUR SUBJECT GOES HERE]";
	$name = $_POST['name'];
	$email_from = $_POST['email'];
	$msg = $_POST['msg'];
	$email_msg = "
		Form Details

		Name:$name
		Email:$email_from
		Message:

		$msg
	";
	$headers = 'From: '.$email_from."\r\n".
 	'Reply-To: '.$email_from."\r\n" .
 	'X-Mailer: PHP/' . phpversion();
 	
	 @mail($email_to, $email_subject, $email_msg, $headers);
?>

**/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js