Referral Form

index.pug

div.container.positions
   h2 Job Openings
   ul
      li.pos-card#pos_1
         div.content
            div.title.new UI/UX Designer
            div.dept Design
            div.date June 4
            div.refer Refer
         ul.desc
            -
               list = ["6+ years’ experience designing desktop and mobile apps.",
               "Deep appreciation for simple solutions to complex problems.",
               "An amazing portfolio demonstrating successful delivery of innovative design solutions."
               ]
            each item in list
              li= item
      li.pos-card#pos_2
         div.content
            div.title Sales Manager
            div.dept Sales
            div.date April 21
            div.refer Refer
         ul.desc 
            -
               list = ["Determines annual unit and gross-profit plans by implementing marketing strategies; analyzing trends and results.",
               "Implements national sales programs by developing field sales action plans.",
               "Establishes and adjusts selling prices by monitoring costs, competition, and supply and demand."
               ]
            each item in list
              li= item
      li.pos-card#pos_3
         div.content
            div.title Business Analyst
            div.dept Research 
            div.date March 15
            div.refer Refer
         ul.desc
            -
               list = ["Technical tasks (include coding, web pages, stored procedures, all database related work, technical design & specifications, loading data).",
               "Developing and documenting reports or data extracts starting from an end user request.",
               "Developing and documenting specifications for software, websites and e-commerce development or modifications."
               ]
            each item in list
               li= item
div.return Return to listings   
div.container.refer-card

  div.modal.confirmed
       span.close-modal
       h2 Thank you!
       p <span id="refer_name" class="focus"></span> has been submitted for the <span id="refer_pos" class="focus"></span> position.
       
  div.sign-up.card
    div.card__header 
      h1 Employee Referral
      div.description For more information, please consult the <a href="#">employee handbook</a>.
    div.card__content
       form(method='post').referral
          div.field.line
             input(maxlength="240" type="text" name="name" value="" required).req#name
             label(for="name" class="placeholder") Full Name
          div.field.line
             input(maxlength="240" type="email" name="email" value="" required).req#email
             label(for="email" class="placeholder") Email
          div.field.line.inline
             input(maxlength="240" type="text" name="position" value="" required).req#position
             label(for="position" class="placeholder") Position
          div.field.inline.right
             span.dropdown-wrapper
                select(name="department")#choice.empty
                   option(value="" selected="selected") Department
                   option(value="1") Development
                   option(value="2") Sales
                   option(value="3") QA
                   option(value="4") Design
                   option(value="5") HR
                   option(value="6") Research  
          div
            input(type="submit" value="Submit" disabled)#btn 
          a(href="#").reset Reset 

referral-form.markdown

Referral Form

Showing how a user can refer someone for a job, and feedback upon form submit.

A Pen by Kelly H on CodePen.

License.

script.js

$('.btn').click(function(){
   $('.dropdown-menu').toggle();
});

$('#choice').change(function () {
    if($(this).val() == "") {
       $(this).addClass("empty");
       
     }
    else {
       $(this).removeClass("empty")}
      
});

    $('form > div input, form > div select').change(function() {
        var empty = false;
      
       $('.req').each(function(){
          if ($(this).val()==""){
          $(this).removeClass('ui-full')
       }
       else {
          $(this).addClass('ui-full');
       }
       });
       
         if ($('#choice').val()==""){
                  empty = true;
               }
        $('form > div input').each(function() {
            if ($(this).val() == '' ){
                empty = true;
             
            }
         
        });
      
      
        if (empty) {
            $('#btn').attr('disabled', 'disabled'); 
        } 
        else {
           
            $('#btn').removeAttr('disabled'); 
        }
     
    });

$('.referral').submit(function(e) {
   if (this.checkValidity()){
      e.preventDefault();
       $("html, body").animate({ scrollTop: 0 }, 600);
   
      $('#refer_name').html($('#name').val());
        $('#refer_pos').html($('#position').val());
        $('.modal').slideDown().addClass('show').removeClass('shrink');
      e.preventDefault();
   }
   else {}
});

$('.close-modal').click(function(){
   $('.modal').removeClass('show').addClass('shrink').slideUp();
})

$('.reset').click(function(){
   $('.modal').removeClass('show').addClass('shrink').slideUp();
  $('.req').val("").removeClass('ui-full');
  $('#choice').val("").addClass('empty');
     $('#btn').attr('disabled', 'disabled'); 
});

$('select').focus(function(){
   $('.dropdown-wrapper').addClass('outline');
});

$('select').on('focusout',function(){
   $('.dropdown-wrapper').removeClass('outline');
});

$('.pos-card').click(function(){
   $('.desc').removeClass('reveal');
  $(this).find('.desc').toggleClass('reveal');

});

$('.refer').click(function(e){
   e.stopPropagation();
 //  $('.positions').animate({ height: 'toggle', opacity: 'toggle' }, 'medium');
   $('.positions').addClass('fadeOut');
   $('.refer-card').addClass('fade');
   $('.return').fadeIn('fast');
});

$('.return').click(function(){
   $('.refer-card').removeClass('fade');
     $(this).hide();
   $('.positions').delay('200').removeClass('fadeOut');
   $('.desc').removeClass('reveal');
});

$('#pos_1 .refer').click(function(){
   $('#position').val('UI/UX Designer').addClass('ui-full');
   $('#choice').val(4).removeClass('empty');
});

$('#pos_2 .refer').click(function(){
   $('#position').val('Sales Manager').addClass('ui-full');
   $('#choice').val(2).removeClass('empty');
});

$('#pos_3 .refer').click(function(){
   $('#position').val('Business Analyst').addClass('ui-full');
   $('#choice').val(6).removeClass('empty');
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import 'compass';
$color-white: #fff;

html {
   display: flex;
}

body {
//background: #2C3B4F;
@include background-image(linear-gradient(left bottom, #557b8e 0%,#c7e5ce 100%));
width: 100%;
   
  // margin: auto;

	-webkit-text-size-adjust: 100%;
    font-family: 'Lato', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h2 {
   color: #fff;
}

input {
    -webkit-appearance: none;
}

*, *:after, *:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

html,body{min-height:100%;}

.card {
  border-radius: 5px;
  background-color: $color-white;
  display: flex;
  flex-wrap: wrap;
 
  &__header {
    flex-basis: 100%;
    margin: 80px 20px 40px;
    .description {
      color: #777;
      font-size: .8rem;
      text-align: center;
    }
  }
   &__content {
      flex-basis: 100%;
      padding: 50px;
      position: relative;
   } 
   
}

h1, h2, h3 {
  font-weight: normal;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-align: center;
  
}

.req {
    border: 0 none;
     font-size: 1rem;
    line-height: 2.5rem;
    outline: none;
    transition: all .1s linear;
    width: 100%;
   position: relative;
   &:focus {
      outline: 0;
      background: rgba(255,255,255,1);
    }
}

.field {
   &.line {
      border-bottom: 1px solid #eee;
   }
   margin-bottom: 40px;
   position: relative;
 }

.placeholder {
   cursor: text;
    position: absolute;
    top: 10px;
    color: #909090;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease-in-out;
}

input {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  background: rgba(255,255,255,0.97);
  color: #212121;
  outline: 0;
  appearance: none;
  transition: all 0.2s ease-in-out;
    &.ui-full + label,
    &:focus + label {
      color: #3FB8AF;
      font-size: 12px;
      transform: translate3d(0, -25px, 0);
    }
  
}



  label {
    position: absolute;
    color: #909090;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease-in-out;
  }
 

#choice option {
   color: black; 
}
.empty { color: gray; }

#choice {
   font-family: 'Lato';
   border-radius: 5px;
   cursor: pointer;
   padding: 10px;
   padding-right: 50px;
   margin-top: 5px;
   font-size: .9rem;
}

.dropdown-wrapper {
   border: 1px solid #eee;
   border-radius: 5px;
   padding: 10px 5px;
   position: relative;
   &:after {
      font-family: 'FontAwesome';
      content: "\f107";
      color: #3FB8AF;
      position: absolute;
      right: 10px;
      top: 12px;
   }
   &.outline {
      border: 1px solid rgba(#3FB8AF, .5);
      box-shadow: 0 0 10px rgba(#3FB8AF, .2);
   }
}

select {
   appearance: none;
   background: none;
   border: 0 none;
   font-size: .8em;
   outline: 0;
}

.right {
   float: right;
}

.inline {
   display: inline-block;
}

#btn {
   background-color: #fff;
   border: 1px solid #3FB8AF;
   color: #3FB8AF;
   font-weight: bold;
   border-radius: 5px;
   font-size: 1rem;
   margin-top: 20px;
   padding: 20px;
   width: 100%;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   &:hover {
      background-color: #3FB8AF;
      color: #fff;
   }
   &:active {
      background-color: darken(#3FB8AF, 5%);
   }
 &[disabled] {
     background-color: #fff !important;
    color: #3FB8AF !important;
   opacity: .3;
   cursor: not-allowed;
}
}

a {
   color: #3FB8AF;
   &:hover {
      color: darken(#3FB8AF, 5%);
   }
}

.ui-full:invalid + label{
   color: red;
}

.modal {
   background-color: $color-white;
   border-radius: 5px;
   display: none;
   padding: 30px 50px 30px 90px;
   margin-bottom: 30px;
   position: relative;
   &.show {
      animation: grow 1s 1;
       animation-fill-mode: forwards;
   }
   &.shrink {
      animation: shrink 1.5s 1;
       animation-fill-mode: forwards;

   }
   &:before {
       color: #3FB8AF;
      content:  "\f00c";
      font-family: 'FontAwesome';
      font-size: 40px;
      position: absolute;
      left: 25px;
      top: 50%;
      margin-top: -25px;
   }
   h2 {
      color: #3FB8AF;
     font-size: 1.2rem;
      margin-bottom: 20px;
   }
   p {
      font-size: .9rem;
      line-height: 1.5rem;
   }
   
}

@keyframes grow {
 0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  70% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1.1) scaleY(1.1) ;
  }
     100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }

}

@keyframes shrink {
0% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
 
    100%{
    opacity:0;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }

}


@keyframes fade {
0% {
    opacity:0;
 
      transform: translateY(10px);
  }
 
    100%{
    opacity:1;
 
    transform: translateY(0);
    }

}

@keyframes fadeOut {
0%{
      opacity:1;
      transform: translateY(0);
   }
100% {
    opacity:0;
      transform: translateY(10px);
  }
    

}

.focus {
   font-weight: bold;
}

#refer_pos {display: inline-block;}

.close-modal {
   cursor: pointer;
   float: right;
   position: relative;
   &:before {
      color: #aaa;
   content: "\f00d";
    position: absolute;
      right: -40px;
      top: -20px;
      padding: 10px;
    font-family: 'FontAwesome';
      transition: all 0.2s ease-in-out;
     }
   &:hover:before {
      color: darken(#aaa, 10%);
   }
}

.reset {
   color: #777;
   cursor: pointer;
   font-size: .8rem;
   margin: 0 auto;
   margin-top: 30px;
   padding: 10px 20px;
   text-align: center;
   display: table;
   transition: all 0.2 ease-in-out;
   &:hover {
      color: darken(#777, 10%);
   }
}

.refer-card {

   margin: 0 auto;
   margin-bottom: 100px;
   max-width: 475px;
   display: none;
   transition: all 0.6s ease-in-out;
   &.fade {
      display: block;
      animation: drop .3s 1;
      animation-fill-mode: forwards;
   }
}
@keyframes drop {
0% {
    transform:  translateY(-70px) ;
  }
 
   100%{
    transform: translateY(0px) ;
  }

}


li {
   list-style: none;
}

.positions {
   display: table;
   margin: 100px auto;

   width: 475px;  
   transition: all 0.3s ease-in-out;
   animation: fade .3s 1;
       animation-fill-mode: forwards;
   &.fadeOut {
      display: none;
      animation: fadeOut .4s 1;
      animation-fill-mode: forwards;
   }
 
    ul {
      background-color: #fff;
      border-radius: 5px;

      position: relative;
   }
   .pos-card {
      border-bottom: 1px solid #eee;
      cursor: pointer;
      padding: 25px;
      flex-basis: 100%;
      margin: auto;
      transition: all 0.4s ease-in-out;
      &:hover {
         box-shadow: 0 0 20px rgba(0,0,0,0.2);
         .date {
            right: 100px;
         }
         .refer {
            right: 0;
            opacity: 1;
            z-index: 9;
         }
      }
      &:last-child {
         border-bottom: 0 none;
      }
   }
   .content {
      position: relative;
   }
   .title {
      margin-bottom: 5px;
      &.new:after {
         content:"New";
         padding: 4px 6px;
         font-size: .6rem;
         margin-left: 10px;
         text-transform: uppercase;
         letter-spacing: 2px;
         color: #fff;
         background-color: #3FB8AF;
         border-radius: 3px;
      }
   }
   .dept {
      color: #777;
      font-size: .8rem;
      }
   .date, .refer {
      font-size: .8rem;
      position: absolute;
      right: 0;
      top: 0;
      display: table;
      bottom: 0;
      margin: auto;
      color: #777;
      transition: all 0.3s ease-in-out;
   }
   .refer {
      opacity: 0;
      padding: 15px 20px;
      border-radius: 3px;
      border: 1px solid #ddd;
      transition: all 0.2s ease-in-out;
      &:hover {
         background-color: #f8f8f8;
         box-shadow: 0 0 10px rgba(0,0,0,0.2);
      }
   }
   .desc {
      display: none;
      color: #555;
      font-size: .9rem;
      transition: all 0.2s ease-in-out;

      
      &.reveal {
         display: block;

     
         animation: fade .5s 1;
         animation-fill-mode: forwards; 
         padding-top: 30px;
         visibility: visible;
      }
      li {
         list-style: circle;
         margin-bottom: 15px;
         line-height: 1.5rem;
         margin-left: 20px;
         &:last-child {
            margin-bottom: 0;
         }
      }
   }
}

h2 {
   margin-bottom: 30px;
}

.return {
   display: none;
   width: 475px;
   margin: 0 auto;
   margin-bottom: 30px;
   margin-top: 50px;
   color: #fff;
   cursor: pointer;
   font-size: .9rem;
   transition: all 0.2s ease-in-out;
   position: relative;
   padding: 15px;
   opacity: 1;
   &:hover {
         opacity: .7;
   
   }
   &:before {
      content: "\f104";
      font-family: 'FontAwesome';
      color: #fff;
      position: absolute;
      left: 0;
      font-weight: bold;
      font-size: 1rem;
      opacity: 1;
      transition: all 0.2s ease-in-out;
   }
   &:hover:before {
     opacity: .7;
   }
  
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />