%div.container
  %div.sent{:ng=>{:class=>"{ 'hidden': !submit }"}}
    %h1 
      Message sent!
      %small …okay, not really.
  %form{:name=>"contactForm",:ng=>{:class=>"{ 'hidden': submit }"}}
    %fieldset
      %legend Contact Us!
      %label{:for=>"email",:ng =>{:class=>"{'required':contactForm.email.$error.required,'invalid':contactForm.email.$error.email,'ok':contactForm.email.$valid}"}}
        %span.no-placeholder
          Email
        %input{:type=>"email",:name=>"email",:id=>"email",:placeholder=>"Email",:required=>true,:ng => {:model => "email"}}
      %label{:for=>"subject",:ng =>{:class=>"{'required':contactForm.subject.$error.required,'ok':contactForm.subject.$valid}"}}
        %span.no-placeholder
          Subject
        %input{:type=>"text",:id=>"subject",:name=>"subject",:placeholder=>"Subject",:required=>true,:ng => {:model => "subject"}}
      %label{:for=>"message",:ng =>{:class=>"{'required':contactForm.message.$error.required,'ok':contactForm.message.$valid}"}}
        %span.no-placeholder
          Message
        %textarea{:placeholder=>"Message",:name=>"message",:required=>true,:ng => {:model => "message"}}
    %div.form-controls
      %button{:type=>"submit",:class=>"btn btn-send",:ng=>{:disabled=>"contactForm.$invalid",:click=>"submit = ! submit"}}
        Send
View Compiled
@import "compass/css3";

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400);

$gray:   #646d76;
$sans:   "Raleway", sans-serif;
$formBG: #ddddde;
$legendBG: #5C8AB8;


body {
  font-family:$sans;
  background:#373737;
  color:#ebebeb;
}
.container {
  width:20em;
  position:relative;
}

form {
  &.hidden {
    position:absolute;
    width:20em;
    top:-100em;
    @include transform(scale(0.25));
    @include transition(transform .5s ease-in, top .5s ease-in .4s);
  }
}
legend {
  background:$legendBG;
  color:white;
  padding:1em 1.25em;
  font-size:1.75em;
  border-radius:0.2em 0.2em 0 0;
  position:relative;
  display:block;
  width:100%;
  &:after {
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-style:solid;
    border-color:$legendBG transparent transparent;
    border-width:0.4em;
    left:2.2em;
    top:100%;
  }
}
fieldset {
  background:$formBG;
  width:100%;
  padding:1.75em 0 0.25em;
}
label {
  display:block;
  color:$gray;
  position:relative;
  margin:0 2em 0.75em;
  @include transition(all .5s);
  input, textarea {
    display:block;
    font-size:1em;
    width:100%;
    margin:0.25em 0;
    padding:0.5em 0.75em;
    border:none;
    background:lighten($gray,55%);
    border-radius:0.2em;
    font-family:$sans;
    @include transition(all .5s);
    &:focus {
      outline:none;
      box-shadow: 0 0 0.5em rgba(black, 0.2);
      @include transition(all .5s);
    }
  }
  textarea {
    min-height:6em;
  }
}

.form-controls {
  padding:0.25em 2em 1.5em;
  background:$formBG;
  border-radius:0 0 0.2em 0.2em;
  .btn {
    color:white;
    padding: 1em 0;
    border-radius:0.25em;
    border:none;
    display:block;
    cursor:pointer;
    font-family:$sans;
  }
  .btn-send {
    background:#60a531;
    width:100%;
    font-size:1.25em;
    @include opacity(1);
    @include transition(all .5s);
    &:hover {
      background:darken(#60a531,5%);
    }
  }
  [disabled] {
    @include opacity(0.5);
    @include transition(all .5s);
    cursor:default;
  }
}
.required, .ok, .invalid, {
  @include transition(all .5s);
  &:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    padding:0.2em;
    position:absolute;
    top: 0.1em;
    right: 0.1em;
    font-size: 1.5em;
    @include transition(all .5s);
  }
}

.required {
  &:before {
    content: "\f069";
    //content:"\f111";
    color:lighten(#ddd,7%);
  }
}

.invalid {
  &:before {
    content: "\f057";
    color:rgba(adjust-hue(#60a531,260),0.5);
  }
}
.ok {
  &:before {
    content: "\f058";
    color:#60a531;
    @include transition(transform .5s linear);
    @include transform(rotate(360deg));
  }
}


.sent {
  @include opacity(1);
  @include transition(all .5s ease-in-out 1s);
  &.hidden {
    @include opacity(0);
    position:absolute;
    z-index:-1;
  }
  h1 {
    font-size:3em;
    text-align:center;
    small {
      font-size:0.5em;
      font-weight:400;
      display:block;
      text-align:right;
      margin-top:0.5em;
    }
  }
}

.no-placeholder {
  display:none;
  .ie-lt9 & {display:block;}
}
View Compiled
// Color Inspriation: http://dribbble.com/shots/1212319-Ampersand-Beta-Sign-Up-Form

External CSS

  1. https://codepen.io/katydecorah/pen/23c0352cf1813420a04865d33f1a7c3f

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js