CodePen Embed - Expanding Contact Form

.form-overlay
#form-container.icon.fa.fa-pencil
  %span#form-close.icon.fa.fa-close
  #form-content
    #form-head
      %h1.pre Get in touch
      %p.pre Good choice...
      %h1.post Thanks!
      %p.post I'll be in touch ASAP
    %form
      %input.input.name{:type => "text", :name => "user_name", :placeholder => "Your name please"}
      %input.input.email{:type => "text", :name => "user_email", :placeholder => "A contact email"}
      %select.input.select{:name => "subject"}
        %option{:disabled => ""} What shall we talk about?
        %option{:selected => ""} About a new project
        %option About a job opportunity
        %option Let's do this over a coffee
      %textarea.input.message{:placeholder => "How can I help?"}
      %input.input.submit{:type => "submit", :value => "Send Message"}

View Compiled

$col-accent: #FFF;
$col-primary: #f72f4e;
$col-dark: #140228;
$formElements: 5;

$font-stack: Roboto, sans-serif;
$easer: cubic-bezier(0.4, 0, 0.2, 1);

body {
  font-family: $font-stack;
  width: 100%;
  font-size: 16px;
  margin: 0;
  padding: 0;
  background: #FAFAFA;
}

h1, h2 {
  font-weight: 700;
  color: $col-accent;
  font-weight: 700;
  font-size: 4em;
  margin: 0;
  padding: 0 20px;
}

.form-overlay {
  width: 0%;
  height: 100%;
  top: 0; left:0;
  position: fixed;
  opacity: 0;
  background: #000;

  transition: background 1s, opacity 0.4s, width 0s 0.4s;
}
.show-form-overlay {
  .form-overlay {
    width:100%;
    opacity: 0.7;
    z-index: 999;

    transition: background 1s, opacity 0.4s, width 0s;
  }
  
  &.form-submitted .form-overlay {
    background: #119DA4;
    transition: background 0.6s;
  }
}


#form-container {
  cursor: pointer;
  color: $col-accent;
  z-index: 1000;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 5vh;  
  background-color: $col-primary;
  overflow: hidden;
  border-radius: 50%;
  width: 60px;
  max-width: 60px;
  height: 60px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

  transition: all 0.2s 0.45s,
              height 0.2s $easer 0.25s, 
              max-width 0.2s $easer 0.35s, 
              width 0.2s $easer 0.35s;
  
  &.expand {
    cursor: auto;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.17);
    border-radius: 0;
    width: 70%;
    height: 610px;
    max-width: 610px;
    padding: 0;
    
    transition: all 0.2s, 
                max-width 0.2s $easer 0.1s, 
                height 0.3s ease 0.25s;
  }
}

#form-close{
  cursor: pointer;
}

//Icon toggling
.icon::before {
  cursor: pointer;
  font-size: 30px;
  line-height: 60px;
  display: block;
  transition: all 0.7s $easer;
}
.icon:hover::before{
  animation: wiggle 0.1s linear infinite;
}
.fa-pencil::before{
  display: block;
}
.fa-close::before{
  display: none;
}
.expand.fa-pencil::before {
  display: none;
}
.expand.fa-close::before{
  display: block;
  animation: none;
}

#form-content {
  font-family: $font-stack;
  transform: translateY(150%);
  width: 100%;
  opacity: 0;
  text-align: left;
  transition: transform 0.2s $easer, opacity 0.2s 0.2s;
 
  &.expand {
    transform: translateY(0px);
    opacity: 1;

    transition: transform 0.7s $easer 0.3s, opacity 0s;
  }
  
  form {
    color: $col-accent;
    width: 100%;
    height: 100%;
    padding: 0 20px 20px 20px;
    margin-bottom: 10px;
    box-sizing: border-box;
    text-align: left;
  }
}

#form-head {
  font-size: 100%;
  padding: 0;
  margin: 0 20px;
  color: $col-accent;
  text-align: center;
  transition: all 0.8s 0.6s;
  
  h1, p {
    padding: 0;
    margin: 0;
  }
  .pre {
    display: block;
  }
  .post {
    display: none;
  }
}

.form-submitted#form-head {
  transform: translateY(250%);
  .pre {
    display: none;
  }
  .post {
    display: block;
  }
} 

.input {
  background: rgba(0,0,0,0.2);
  display: block;
  height: 50px;
  width: 100%;
  margin: 10px 0;
  padding: 0 10px;
  border-width: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  box-shadow: none;
  transform: translateX(0);
}
::-webkit-input-placeholder {/* Safari, Chrome and Opera */
  color: rgba(255,255,255,0.8);
  font-size: 90%;
}/* Firefox 18- */:-moz-placeholder {
  color: rgba(255,255,255,0.8);
  font-size: 90%;
}/* Firefox 19+ */::-moz-placeholder {
  color: rgba(255,255,255,0.8);
  font-size: 90%;
}/* IE 10+ */:-ms-input-placeholder {
  color: rgba(255,255,255,0.8);
  font-size: 90%;
}/* Edge */::-ms-input-placeholder {
  color: rgba(255,255,255,0.8);
  font-size: 90%;
}/* Default */:placeholder-shown {
  color: rgba(255,255,255,0.8);
  font-size: 90%;
}

input, select, textarea{
    color: $col-accent;
}

.input.message {
  resize: none;
  height: 150px;
  padding: 10px;
}

.input.submit{
  background-color: $col-accent;
  color: $col-primary;
  font-size: 120%;
  height: 80px;
  box-shadow: 0 5px rgba(0,0,0,0.5);
  transition: all 0.1s, transform 0s 0.6s;

  &:active{
    margin-top: 15px;
    box-shadow: 0 0 rgba(0,0,0,0.5);
  }
}

.input.form-error{
  animation: error 0.8s ease;
  background: rgba(0,0,0,0.7);
}


select option {
  background: $col-primary;
  color: $col-accent;
  border: none;
  box-shadow: none;
  outline: none;
}
select option:disabled {
  font-style: italic;
  color: rgba(255,255,255,0.9);
  font-size: 90%;
}

//Handle input submit and return transitions last.
.input{
  transition: transform 0s 1s;
}
.form-submitted .input{
  transform: translateX(150%);
  opacity: 0;
  transition: all 0.5s, transform 0.4s $easer 0s;
  
  @for $i from 1 to ($formElements + 1) {
    &:nth-child(#{$i}) {
      transition-delay: #{$i / 10}s;
    }
  }
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #FFF inset;
}

@media (max-width: 600px) {
  #form-container.expand {
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: initial;
    overflow-x: hidden;
    bottom: 0;
  }  
  h1 {
    font-size: 300%;
  }
  .icon:hover::before{
    animation: none;
  }
  .form-overlay {
    display: none;
    transition: none;
  }
}

@keyframes error {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-6px);}
    20%, 40%, 60%, 80% {transform: translateX(6px);}
}

@keyframes wiggle {
    0%, 100% {transform: rotate(-15deg);}
    50% {transform: rotate(15deg);}
}

View Compiled

var formContainer = $('#form-container');

bindFormClick();
//Opening the form
function bindFormClick(){
  $(formContainer).on('click', function(e) {
    e.preventDefault();
    toggleForm();
    //Ensure container doesn't togleForm when open
    $(this).off();
  });
}

//Closing the form
$('#form-close, .form-overlay').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
  toggleForm();
  bindFormClick();
});

function toggleForm(){
  $(formContainer).toggleClass('expand');
  $(formContainer).children().toggleClass('expand');
  $('body').toggleClass('show-form-overlay');
  $('.form-submitted').removeClass('form-submitted');
}

//Form validation
$('form').submit(function() {
  var form = $(this);
  form.find('.form-error').removeClass('form-error');
  var formError = false;
  
  form.find('.input').each(function() {
    if ($(this).val() == '') {
      $(this).addClass('form-error');
      $(this).select();
      formError = true;
      return false;
    }
    else if ($(this).hasClass('email') && !isValidEmail($(this).val())) {
      $(this).addClass('form-error');
      $(this).select();
      formError = true;
      return false;
    }
  });
  
  if (!formError) {
    $('body').addClass('form-submitted');
    $('#form-head').addClass('form-submitted'); 
    setTimeout(function(){
      $(form).trigger("reset");
    }, 1000);
  }
  return false;
});

function isValidEmail(email) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(email);
};

social("twitter/joeharry__", "codepen/woodwork",
"disco");

This Pen is owned by Joe Harry on CodePen.

See more by @woodwoerk on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript