Cacher is the code snippet organizer for pro developers

//Добавляем на сайте в плагин

//Если выбран вариант 2 для вывода оповещения об отправке
<div class="popup-alert" id="popup-1">
<div class="popup-alert__wrapper">
<div class="popup-alert__content">
<div class="popup-alert__title">
Спасибо
</div>
<div class="popup-alert__text">
Сообщение отправлено. Перезвоним в ближайшее время.
</div>
</div>
</div>
</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>

// Отключает 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;
});

<?php echo do_shortcode('[contact-form-7 id="" title="" html_class="use-floating-validation-tip"]'); ?>

//Вариант 1. Оповещение во всплывающем окне
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( event.detail.contactFormId == "165" ) {
        $.fancybox.open('<div class="popup" id="popup-1"><div class="popup-wrapper"><div class="popup-content"><div class="popup-text"><span>Спасибо!</span><br><br>Ваш заказ принят в обработку.<br>С вами свяжутся в ближайшее время!</div></div></div></div>');
        
        setTimeout(function () {
        $.fancybox.close();
      }, 3500);
      
    }
}, false );

//Вариант 2. Оповещение во всплывающем окне
document.addEventListener( 'wpcf7mailsent', function( event ) {
  if ( '15' == event.detail.contactFormId ) {
      
    $.fancybox.open({
      src  : '#popup-1',
      type : 'inline',
      opts : {
        afterShow : function( instance, current ) {
          console.info( 'done!' );
        }
      }
    });
     
    setTimeout(function () {
            $.fancybox.close();
          }, 3500);

  }
}, false );

/* 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 */

/* contact form */

.consent
	padding-top: 15px
	display: block
	font-size: 16px
	line-height: 1.2

/* end pop-up contact form */

/* pop-up alert */

.popup-alert
	display: none
	&__wrapper
		max-width: 400px
	&__content
		text-align: center
	&__title
		font-size: 36px
		font-family: $default-title
		margin-bottom: 15px
	&__text
		font-size: 20px
		line-height: 1.3

/* end pop-up alert */