Я попытаюсь сделать имитацию популярной формы обратной связи 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'); });[site-socialshare]