Имитация формы Jivosite

Я попытаюсь сделать имитацию популярной формы обратной связи Jivosite, но без функционала чата.
Бывают ситуации когда непосредственно чат не нужен.

Форма обратной связи

Код верстки

<div id="jivosite">
<div id="jivosite-btn"><i class="fa fa-envelope"></i> Отправьте нам сообщение</div>
<div id="jivosite-forma"><?php echo do_shortcode( 'шорткод формы contact 7' ); ?></div>
</div>

CSS Jivosite

#jivosite {
width: 300px;
height: 0px;  
position: fixed;
z-index: 100;  
bottom: 0px;
right: 50px;
background-color: rgba(17,17,17,0.8);
color: #fff;
    transition: height 0.8s ease, width 0.8s ease;
    -webkit-transition: height 0.8s ease 0s, width 0.8s ease 0s;  
}

.jivosite-open {
height: 350px !important;
width: 250px !important;  
}

#jivosite-btn {
height: 38px;
float: left;
width: 100%;
line-height: 38px;
text-align: center;
background-color: rgba(17,17,17,0.8);
cursor: pointer; 
border-radius: 3px 27px 0 0;  
-webkit-box-shadow: 0 12px 25px 8px rgba(0,0,0,.17);
-moz-box-shadow: 0 12px 25px 8px rgba(0,0,0,.17);
box-shadow: 0 12px 25px 8px rgba(0,0,0,.17);
margin-top: -38px;  
}

#jivosite-btn .fa {
margin-right: 15px;
color: rgb(142, 210, 68);
font-size: 14px;
}

#jivosite-forma {
position: relative;
float: left;
background-color: whitesmoke;
box-sizing: border-box;
width: 90%;
margin: 0 5%;
padding: 15px;
text-align: center;
font-size: 16px;
}

#jivosite-forma .wpcf7-form p {
margin: 4px 0;
}

#jivosite-forma .wpcf7-form textarea { resize: none; }

#jivosite-forma .wpcf7-not-valid {
border-color: #F00;
box-shadow: 0 0 6px rgba(255,0,0,0.4);
}

#jivosite-forma .wpcf7-not-valid-tip, #jivosite-forma .wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
display: none !important;
}

Форма Contact Form 7

Ядром форма псевдо Jivosite является плагин Contact Form 7

[textarea* textarea-74 40x8 placeholder "Сообщение"]

[text* your-name class:textbox placeholder "Ваше имя"]

[tel* tel-968 class:textbox placeholder "Телефон"]

[email* email-330 class:textbox placeholder "E-mail"]

<!--[submit class:button send_one "Отправить"]-->

<button class="send-bt"><i class="fa fa-envelope"></i> Отправить</button>

Доработанная форма

<div id="jivosite">
<div class="jivosite-close"><i class="fa fa-times"></i></div>
<div id="jivosite-btn"><i class="fa fa-envelope"></i> Отправьте нам сообщение</div>
<div id="jivosite-forma"><?php echo do_shortcode( 'шорткод формы contact 7' ); ?></div>
</div>

Измененный скрипт

 // Форма обратной связи Jivosite
 
$('#jivosite-btn').click(function() {
    $('#jivosite').addClass('jivosite-open');
	$('.jivosite-close').addClass('jivosite-close-activ');
	
	$('#backfon').show(); 
	$('#backfon').removeClass('fadeOut'); 
	$('#backfon').addClass('animated fadeIn'); 
});
  
$('.jivosite-close').click(function() {
    $('#jivosite').removeClass('jivosite-open');
	$('.jivosite-close').removeClass('jivosite-close-activ');
	
	$('#backfon').removeClass('fadeIn'); 
	$('#backfon').addClass('animated fadeOut'); 
});

Надо еще добавить закрытие формы при нажатии на фон

/* Скрытие всплывающих окон (Общее для всех) */  
  
$('#backfon, .close').click(function() {
  
$('#backfon').addClass('fadeOut');
$('.popup').addClass('fadeOutDown'); 
setTimeout(function () { $('#backfon').hide(); $('.popup').hide();   }, 700);  

$('#jivosite').removeClass('jivosite-open');
$('.jivosite-close').removeClass('jivosite-close-activ');
  
});