Contact form 7 всплывающая форма обратной связи

Contact form 7 всплывающая форма обратной связи

Contact form 7 является лучшим решением для организации обратной связи для сайта, но у данной формы нет возможности сделать всплывающее окно по клику. В данной статье мы попытаемся рассмотреть простой вариант реализации.

Мы не будем использовать никакие плагины, а просто внесем дополнения в код.

Внесение файлов CSS:

.fond {
 position:absolute;
 padding-top:45px;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-color:#f8b334;
}
.mgcoverbox {
 display:inline-block;
 color:#ffffff;
 padding:10px;
 margin:10px;
 cursor:pointer;
 font-weight:300;
}
.mgcoverbox_fenetre {
 z-index:9999;
 position:fixed;
 margin-left:50%;
 top:100px;
 text-align:center;
 display:none;
 padding:4px;
 background-color:#fff;
 color:#97BF0D;
 font-style:normal;
 font-size:15px;
 font-weight:400;
 font-family:'Arial';
}
.mgcoverbox_fninter {
 text-align:center;
 overflow:auto;
 padding:10px;
 background-color:#ffffff;
 color:#666666;
 font-weight:400;
 font-size:17px;
 border-top:1px solid #e7e7e7;
 margin-top:10px
}
.mgcoverbox_frmr {
color: #C6C6C6;
cursor: pointer;
font-weight: 400;
font-size: 14px;
position: absolute;
right: 0px;
top: 0px;
background: #333;
text-align: center;
width: 30px;
}
.mgcoverbox_frmr:hover {
color: #fff;
background: #000;
}
#myfond_gris {
 display: none;
 background-color:#000;
 opacity:0.8;
 width:100%;
 height:100%;
 z-index:9998;
 position:fixed;
 top:0;
 bottom:0;
 right:0;
 left:0;
}
.mgcoverbox_fenetre input[type="text"], input[type="tel"] {margin-bottom: 10px;}
.mgcoverbox_fenetre input[type="text"]:focus, input[type="tel"]:focus { box-shadow: 0px 0px 3px 0px #c0c0c0;}
.mgcoverbox_fenetre p {margin: 0px;}

JS код

Вставляем в файл с js кодом, либо подключаем, размещая в блоке <script>.

jQuery(document).ready(function(){

jQuery(".mgcoverbox").click(function()
{
 jQuery('#myfond_gris').fadeIn(300);
 var iddiv = jQuery(this).attr("iddiv");
 jQuery('#'+iddiv).fadeIn(300);
 jQuery('#myfond_gris').attr('opendiv',iddiv);
 return false;
});

jQuery('#myfond_gris, .mgcoverbox_frmr').click(function()
{
 var iddiv = jQuery("#myfond_gris").attr('opendiv');
 jQuery('#myfond_gris').fadeOut(300);
 jQuery('#'+iddiv).fadeOut(300);
});

document.addEventListener( 'wpcf7mailsent', function( event ) {

   var iddiv = jQuery("#myfond_gris").attr('opendiv');
 jQuery('#myfond_gris').delay(1900).fadeOut(300);
 jQuery('#'+iddiv).delay(1900).fadeOut(300);  

}, false );
});

HTML код

Данный код вставляется в любое место страницы между тегами <body>.

Мы рекомендуем вставлять перед закрывающимся тегом </body>.

Не забываем поменять шорткод на шорткод заранее созданной формы.

<div id="myfond_gris" opendiv=""></div>
<div id="box_open" class="mgcoverbox_fenetre" style="left: -171px; width: 350px;">
<div class="mgcoverbox_fninter">
<div align="center">
<? echo do_shortcode('[contact-form-7 id="266" title="Контактная форма 1"]'); ?>
<div class="mgcoverbox_frmr"><i class="fa fa-times" aria-hidden="true"></i></div>
</div>
</div>
</div>

Добавляем саму кнопку для вызова всплывающего окна

Код размещаем в том месте, где нужна кнопка для открытия окна.

<div style="background-color:#00a096;" iddiv="box_open" class="mgcoverbox">
Открыть окно
</div>