<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