<div class="container">
  <button id="open">Contact Me</button>
</div><!-- .container -->

<div class="slidein">
  <span class="close"><i class="fa fa-times"></i></span>
  <form>
    <h2>Contact Form</h2>
    <input type="text" name="name" placeholder="Enter your name" autofocus />
    <input type="email" name="email" placeholder="Enter your email" autofocus />
    <textarea placeholder="Place your comments here..." autofocus></textarea>
    <br>
    <button>Submit</button>
  </form>
</div><!-- .slideout -->

@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";
html,
body {
  font-family: 'Roboto', sans-serif;
  color: #555;
  line-height: 1.8;
  font-weight: 400;
  font-size: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1 {font-size:200%; }
h2 {font-size:140%; }

/* Button */
button {
  border: 0;
  padding: 13px 35px;
  background-color: #29bbf2;
  color:#fff;
  text-transform:uppercase;
  border-radius:50px; 
}
button:hover {
  background-color:#555;
  color: #fff;
  transition: .2s ease-in-out;
}
button:focus {
  outline: none;
}
.container {
  max-width: 500px;
  margin: 70px auto 0 auto;
  text-align:center;
}

/* Contact Form */
form {
  display: block;
  margin-top:50px;
}

form input,
form textarea {
  background: transparent;
  display: block;
  border: 0;
  border-bottom: 1px solid #29bbf2 !important;
  padding: 15px;
  width: 90% !important;
  margin-bottom: 20px;
}

form input:focus,
form textarea:focus {
  outline: none;
}


/* Slidein */
.slidein {
  display: none;
  position: absolute;
  background: #f5f5f5;
  width: 450px;
  height: 100%;
  top: 0;
  right: 0;
  padding: 40px 0 40px 40px;
  z-index: 999;
}

/* Close button */
.close {
  font-size: 130%;
  color:#29bbf2;
}
.close:hover {
  cursor: pointer;
}

/* Overlay */
.overlay {
  display: none;
  background: rgba(0, 0, 0, .7);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

var $overlay = $('<div class="overlay"></div>');

$('body').append($overlay);

$('#open').click(function(event) {
    event.preventDefault();
    $overlay.fadeIn(300);

    $('.slidein').toggle('slide', {
      direction: 'right'
      }, 200);
});

$('.overlay, .close').click(function() {
    $('.slidein').toggle('slide', {
    direction: 'right'
  }, 200);

  $overlay.fadeOut(300);

});