Edit in JSFiddle

<div class="form-holder">
    <h1>Contact Us</h1>
    <h2>Please feel free to ask us any questions</h2>
    
    <label for="name">Name</label><br/>
    <input type="text" name="name"><br/>
    <label for="email">Email</label><br/>
    <input type="text" name="email"><br/>
    <label for="message">Your message</label><br/>
    <textarea name="message" rows="6"></textarea>
    
    <button id="submit">
    submit
    </button>
    
</div>

<hr class="line">
<img id="inbox" src="http://rachaelfulcher.com/storage/Daily UI/028-inbox.svg" />
<div class="thanks">
  <h1>Thanks!</h1>
  <h2>We'll be in touch very soon</h2>
</div>
/* Lato font */
@import url(https://fonts.googleapis.com/css?family=Lato:300);

body {
  background-color: #a2bbd6;
  font-family: 'Lato', serif;
  color: #3773a6;
  font-size: 14px;
}
h1 {
 font-size: 2em;
 letter-spacing: 2px;
 margin-top: 0;
 text-transform: uppercase;
}
h2 {
 letter-spacing: 1px;
 color: #a2bbd6;
 font-size: 1em;
 margin-bottom: 2em;
}
input, textarea, button {
  background-color: #ecf1f7;
  color: #3773a6;
  font-family: "Lato";
  border: 0;
  font-size: 1em;
  padding: 5px;
  margin-bottom: 1.5em;
  margin-top: 5px;
  width: 100%;
  resize: none;
}
label {
  text-transform: uppercase;
}
button {
  background-color: #bde5bd;
  color: #fff;
  text-transform: uppercase;
  padding: 1em;
  margin-top: 1.5em;
  margin-bottom: 0;
}

.thanks {
  position: absolute;
  top: 280px;
  opacity: 0;
  left: 0;
  right: 0;
}
.thanks h1,
.thanks h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 0;
}
.form-holder {
  padding: 50px;
  background-color: white;
  width: 300px;
  height: 450px;
  margin: 50px auto;
  position: relative;
  z-index: 500;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

hr.line {
  border: 3px solid #fff;
  position: absolute;
  top: 315px;
  width: 120px;
  left: 0;
  right: 0;
}

.form-holder.clicked {
  transition: all 0.7s ease-out;
  -webkit-transform: scale(0.3) rotateX(90deg) rotateZ(180deg);
  -ms-transform: scale(0.3) rotateX(90deg) rotateZ(180deg);
  transform: scale(0.3) rotateX(90deg) rotateZ(180deg);
}

hr.line.clicked {
  transition: all 1s ease-out;
  transition-delay: 0.8s;
  top: 442px;
}
.thanks.clicked {
  transition: all 1s ease-out;
  transition-delay: 1s;
  top: 330px;
  opacity: 1;
}

#inbox {
  position: absolute;
  margin: 0 auto;
  top: 450px;
  left: 0;
  right: 0;
  width: 168px;
}
$("#submit").click(function(){
	$(".form-holder").addClass("clicked");
  $("hr.line").addClass("clicked");
  $(".thanks").addClass("clicked");
})