Cacher is the code snippet organizer for pro developers

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