/* Добавляется класс для появления формы */
$(".form").click(function() {
$(".form").addClass("active")
});
/* Добавляется id */
$('.close-btn').click(function() {
$('.form').removeClass('active');
$('.form').attr('id', 'close');
});
.form.active {
padding: 24px;
background: #6c4a27;
border: 6px solid #cb9a4b;
box-shadow: 0px 30px 20px -20px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 320px;
height: 450px;
-webkit-animation: openForm 1.4s;
-webkit-animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
animation: openForm 1.4s;
animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
}
.form h1 {
opacity: 0;
}
.active h1 {
opacity: 1;
}
.form.active * {
top: 0;
opacity: 1;
}
.form.active::after,
.form.active::before {
opacity: 0;
}
input,
textarea {
top: 0;
display: block;
width: 100%;
border: none;
padding: 10px;
background: #fefefe;
margin: 12px 0 0 0;
border: 2px solid #bbb;
}
input {
top: 0;
}
input:nth-child(1) {
transition: all 0.5s 1s ease;
}
input:nth-child(2) {
transition: all 0.7s 1s ease;
}
textarea {
top: 0;
opacity: 1;
max-height: 100px;
transition: all 0.9s 1s ease;
}
h1 {
top: 0;
opacity: 1;
text-align: center;
font-size: 24px;
text-transform: uppercase;
color: #cb9a4b;
margin-bottom: 32px;
transition: all 0.3s 1s ease;
}
.form {
width: 64px;
height: 64px;
background: #6c4a27;
border: 6px solid #cb9a4b;
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.3);
cursor: pointer;
overflow: hidden;
position: fixed;
right: 10px;
bottom: 0;
z-index: 9;
}
.form .btn-xl {
display: block;
margin: 30px auto;
}
.form::before,
.form::after {
content: '';
display: inline-block;
position: absolute;
width: 0px;
height: 0px;
opacity: 1;
left: 10px;
z-index: 100;
transition: all 0.1s linear;
-webkit-transform: scale(0.9999, 0.9999);
transform: scale(0.9999, 0.9999);
}
.form::before {
top: 15px;
transform: perspective(1000) rotateX(0deg);
transform-origin: 50% 0;
border-top: 11px solid #fff;
border-right: 16px solid transparent;
border-bottom: 11px solid transparent;
border-left: 16px solid transparent;
}
.form::after {
top: 17px;
border-top: 11px solid transparent;
border-right: 16px solid #fff;
border-bottom: 11px solid #fff;
border-left: 16px solid #fff;
}
.form:hover::before {
transform: perspective(1000) rotateX(180deg);
transform-origin: 50% 0;
}
@-moz-keyframes openForm {
0% {
width: 64px;
height: 64px;
}
50% {
width: 320px;
height: 64px;
}
100% {
width: 320px;
height: 450px;
}
}
@-webkit-keyframes openForm {
0% {
width: 64px;
height: 64px;
}
50% {
width: 320px;
height: 64px;
}
100% {
width: 320px;
height: 450px;
}
}
@-o-keyframes openForm {
0% {
width: 64px;
height: 64px;
}
50% {
width: 320px;
height: 64px;
}
100% {
width: 320px;
height: 450px;
}
}
@keyframes openForm {
0% {
width: 64px;
height: 64px;
}
50% {
width: 320px;
height: 64px;
}
100% {
width: 320px;
height: 450px;
}
}
@media (max-width: 1000px) {
.form {
display: none;
}
.hide-own {
display: block !important;
}
#etc {
display: block !important;
}
#del {
display: none !important;
}
}
.form .form-control {
background: none !important;
border: none !important;
height: 70px !important;
}
.date {
line-height: 18px !important;
}
.form h1 {
margin-bottom: 10px;
}
.form .btn {
margin: 10px auto;
padding: 10px 45.2px;
}
.close-btn {
position: absolute;
right: 10px;
top: 10px !important;
font-size: 20px;
width: 20px;
height: 20px;
z-index: 10;
}
.form#close {
-webkit-animation: closeForm 1.4s;
-webkit-animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
animation: closeForm 1.4s;
animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
}
@-moz-keyframes closeForm {
0% {
width: 320px;
height: 450px;
}
50% {
width: 320px;
height: 64px;
}
100% {
width: 64px;
height: 64px;
}
}
@-webkit-keyframes closeForm {
0% {
width: 320px;
height: 450px;
}
50% {
width: 320px;
height: 64px;
}
100% {
width: 64px;
height: 64px;
}
}
@-o-keyframes closeForm {
0% {
width: 320px;
height: 450px;
}
50% {
width: 320px;
height: 64px;
}
100% {
width: 64px;
height: 64px;
}
}
@keyframes closeForm {
0% {
width: 320px;
height: 450px;
}
50% {
width: 320px;
height: 64px;
}
100% {
width: 64px;
height: 64px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Форма -->
<div class="form">
<i class="fa fa-times close-btn" aria-hidden="true"></i>
<h1>Форма записи</h1>
<form action="mail/little_me.php" method="post" id="contactForm">
<div class="form-control">
<input type="text" placeholder="Ф.И.О." required data-validation-required-message="Пожалуйста, заполните это поле!" name="name_little" id="name_little" />
<p class="help-block text-danger"></p>
</div>
<div class="form-control">
<input type="tel" placeholder="Номер телефона" required data-validation-required-message="Пожалуйста, введите свой номер!" name="phone_little" id="phone_little" />
<p class="help-block text-danger"></p>
</div>
<div class="form-control">
<input type="text" placeholder="Курс" required data-validation-required-message="Выберите курс!" name="curs_little" id="curs_little" />
<p class="help-block text-danger"></p>
</div>
<div class="form-control">
<input type="email" class="date" required data-validation-required-message="Пожалуйста, напишите почту!" name="email_little" id="email_little" placeholder="Почта">
</div>
<div class="success"></div>
<button type="submit" class="btn-down btn btn-xl" style="margin-bottom: 50px;">
<span class="btn-paint"></span>
<span class="btn-paint"></span>
<span class="btn-paint"></span>
<span class="btn-paint"></span>
<span class="btn-label">Отправить</span>
</button>
</form>
</div>
UPD: Добавил CSS, дабы была более понятна ситуация. Надо развернуть на полный экран.