floating contact form

by Alexandru Gatea

HTML

<link rel="stylesheet" href="https://file.myfontastic.com/dU9Avtt6A828TiS9KUP3va/icons.css">
<div id="mailBox" class="out">
  <div class="close"><i class="dr-icon-close"></i></div>
  <form class="">
    <input type="text" class="form-item" placeholder="Name">
    <input type="email" class="form-item" placeholder="E-mail">
  </form>
</div>

SCSS

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

//variables
$iniWH: 50px;
$bigW: 300px;
$bigH: 200px;

body {
  background: #212121;
}

#mailBox {
  width: $iniWH;
  height: $iniWH;
  border-radius: $iniWH;
  background: #fff;
  position: fixed;
  left: 100%;
  top: 80%;
  transform: translate(-80%, -50%);
  transition: all 0.25s ease-in-out;
	animation: closeBox 1s ease;
	form {
		display:none;
		opacity:0;
	}
	&:before {
		content:"\e033";
		font-family: 'digitalrepublic';
		width:$iniWH - 10;
		height:$iniWH - 10;
		border-radius:50%;
		text-align:center;
		font-size: 20px;
		background:#0277BD;
		display:block;
		color:#fff;
		line-height:$iniWH - 10; 
		position:absolute; 
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		transition: all 0.3s ease;
	}
	&.out {
		opacity:0;
		transform: translate(200%, -50%);
	}
  &.open {
    width: $bigW;
    height: $bigH; 
    left: 50%;
    top: 50%;
    border-radius: 5px;
    transform: translate(-50%, -50%);
		animation: openBox 1s ease;
    overflow: hidden;
		form {
			opacity:1;
		}
    .close {
			animation: showClose 1.5s ease;
			opacity:1;
    }
			&:before {
				display:none;
			}
  }
  .close {
    opacity: 0;
  }
}

.close {
  position: absolute;
  padding: 5px;
  color: #000;
  top: 0;
  right: 0;
  cursor: pointer;
}

form {
	padding:20px;
	input {
		width:100%;
		height:30px;
		margin-bottom:15px;
	}
}

@keyframes openBox {
	0%{width:$iniWH;height:$iniWH;top:80%;left:100%;transform: translate(-80%, -50%);border-radius:$iniWH;}
	50%{width:$iniWH;height:$iniWH;top:50%;left:50%;transform: translate(-50%, -50%);border-radius:$iniWH;}
	75%{width:$bigW;height:$iniWH;top:50%;left:50%;transform: translate(-50%, -50%);border-radius:$iniWH;}
	100%{width:$bigW;height:$bigH;top:50%;left:50%;transform: translate(-50%, -50%);border-radius:5px;}
}

@keyframes closeBox {
	0%{width:$bigW;height:$bigH;top:50%;left:50%;transform: translate(-50%,...

JavaScript

jQuery(document).ready(function() {
  setTimeout(function() {
    $('#mailBox').removeClass('out');
  }, 2000);

  $('#mailBox').on('click', function() {
    $(this).addClass('open');
    setTimeout(function() {
      $('form').show();
    }, 1500);
  });

  $('.close').on('click', function() {
    $('form').hide();
    setTimeout(function() {
      $('#mailBox').removeClass('open');
    }, 30);
		$('form').hide();
  });

});