Заготовка pop-up формы для contact-form-7
/* contact-form-7 */
.ajax-loader
display: none!important
.wpcf7-response-output
display: none!important
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea
width: 100%!important
border: 1px solid #ccc
background: #FFF
margin: 0 0 5px
padding: 3px 10px
.wpcf7-form input[type="text"]:hover,
.wpcf7-form input[type="email"]:hover,
.wpcf7-form input[type="tel"]:hover,
.wpcf7-form input[type="url"]:hover,
.wpcf7-form textarea:hover
transition: border-color 0.3s ease-in-out
border: 1px solid #aaa
.wpcf7-form textarea
height: 100px
max-width: 100%
resize: none
.wpcf7-form input[type="submit"]
cursor: pointer
width: 100%
border: none
background: #4CAF50
color: #FFF
margin: 0 0 5px
padding: 15px
font-size: 1.8rem
.wpcf7-form input[type="submit"]:hover
background: #43A047
transition: background-color 0.3s ease-in-out
.wpcf7-form input[type="submit"]:active
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5)
.wpcf7-form input:focus,
.wpcf7-form textarea:focus
outline: 0
border: 1px solid #aaa
div.wpcf7-validation-errors
display: none!important
span.wpcf7-not-valid-tip
display: none
input[aria-invalid="true"], select[aria-invalid="true"]
border-color: red
background-color: rgba(153,0,0,0.3)
/* end contact-form-7 */
/* pop-up contact form */
.success-form
display: none
flex-direction: column
justify-content: center
position: absolute
top: 0
left: 0
background-color: #fff
width: 100%
height: 100%
text-align: center
align-items: center
text-transform: uppercase
color: #000
font-size: 16px
z-index: 9
&__title
margin-bottom: 15px
font-size: 34px
&.visible
display: flex
.consent
padding-top: 15px
display: block
font-size: 16px
line-height: 1.2
/* end pop-up contact form */
// Отключает p и br
define('WPCF7_AUTOP', false );
//Если нужно убрать все родные обертки CF7
add_filter('wpcf7_form_elements', function($content) {
$content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content);
return $content;
});
<a data-fancybox="" data-src="#hidden-content" href="javascript:;">Подробнее</a>
<div style="display: none;" id="hidden-content">
<?php echo do_shortcode('[contact-form-7 id="" title="" html_class="use-floating-validation-tip"]'); ?>
</div>
//Оповещение в том же всплывающем окне
document.addEventListener('wpcf7mailsent', function (event) {
if (event.detail.contactFormId == "14") {
$(".success-form").addClass("visible"),
setTimeout(function () {
$(".success-form").removeClass("visible");
$.fancybox.close();
}, 3500);
}
}, false);
//Добавляем на сайте в плагин
<div class="success-form">
<h2 class="success-form__title">Сообщение отправлено</h2>
<p class="success-form__subtitle">Мы свяжемся с вами в ближайшее время.</p>
</div>
<div class="form-popup">
<h2 class="form-popup__title">Заполните форму</h2>
<div class="form-popup__subtitle">Перезвоним в течении 15 минут</div>
<fieldset>
[text your-name placeholder "Ваше имя"]
</fieldset>
<fieldset>
[email* your-email placeholder "Ваш e-mail"]
</fieldset>
<fieldset>
[submit "Отправить"]
<span class="consent">Нажимая на кнопку "Отправить" вы даете <a href="/consent" target="_blank">согласие на обработку</a>
своих персональных данных.</span>
</fieldset>
</div>