Всплывающее окно с формой при переходе по utm метке

UTM-метки помогают получить подробную информацию о каждом источнике трафика. Например, определить, какие участки рекламной кампании приносят наименьшее количество прибыли. Это поможет оперативно реагировать на изменения на сайте и перераспределять рекламный бюджет.

Для реализация форма будем использовать Contact form7 — это самый просто способ создания формы вот примет шаблона формы 

<div id="modal_form">
      <span id="modal_close">X</span> 
<div class="utmmodal">
<h3><b>Получите подарок!</b></h3>
<p>Введите ваш Email и получите бесплатную консультацию + промокод на скидку 10%</p>
[email* email-824 "Email"]
[submit "забрать"]
<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: none;" role="alert"></div>
</div>

</div>
<div id="overlay"></div>

Далее работаем с функцией темы. Наличие метки это обычный get параметр 

add_action('wp_footer','UtmPop_hook'); // подключаем в футере 
 
function UtmPop_hook()
{
// проверяем есть ли метка informator или forma
if (($_GET['utm_campaign']=="informator" ) || ($_GET['utm_campaign']=="forma" )) {
	

echo do_shortcode( '[contact-form-7 id="1472" title="Utm окно"]');// Вставляем шорткод формы Contact form 
// вставляем скрипт чтобы не подключать 
	?>
<script>
/*modal pop up*/
jQuery(document).ready(function() {
	
		jQuery('#overlay').fadeIn(400, 
		 	function(){ 
				jQuery('#modal_form') 
					.css('display', 'block')
					.animate({opacity: 1, top: '50%'}, 200); 
		});
	
	function CloseUtmPopUp(){
		jQuery('#modal_form')
			.animate({opacity: 0, top: '45%'}, 200,  
				function(){
					jQuery(this).css('display', 'none'); 
					jQuery('#overlay').fadeOut(400); 
				}
			);
	}
	jQuery('#modal_close, #overlay').click( function(){ 
		CloseUtmPopUp();
	});
});
document.addEventListener( 'wpcf7mailsent', function( event ) {
 if(event.detail.contactFormId=="1472"){ 
 	jQuery('#modal_form')
			.animate({opacity: 0, top: '45%'}, 200,  
				function(){
					jQuery(this).css('display', 'none'); 
					jQuery('#overlay').fadeOut(400); 
				}
			);
 }
}, false );
/*modal pop up end*/
</script>
	
	<?php

}
}

Добавляем стили для нашего окна 

	#modal_form {
	width: 300px; 
	height: 300px; /* Рaзмеры дoлжны быть фиксирoвaны */
	border-radius: 5px;
	border: 3px #000 solid;
	background: #fff;
	position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
	top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
	left: 50%; /* пoлoвинa экрaнa слевa */
	margin-top: -150px;
	margin-left: -150px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */
	display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
	opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
	z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
	padding: 20px 10px;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке) */
#modal_form #modal_close {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	display: block;
}
/* Пoдлoжкa */
#overlay {
	z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
	position:fixed; /* всегдa перекрывaет весь сaйт */
	background-color:#000; /* чернaя */
	opacity:0.8; /* нo немнoгo прoзрaчнa */
	-moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
	filter:alpha(opacity=80);
	width:100%; 
	height:100%; /* рaзмерoм вo весь экрaн */
	top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
	left:0;
	cursor:pointer;
	display:none; /* в oбычнoм сoстoянии её нет) */
}
.utmmodal {
    text-align: center;
}
.utmmodal input {
    margin: 5px auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.utmmodal .wpcf7-submit {
    background: #710505!important;
    width: 100%;
}

В конце при переходе на сайт по этой метки пользователь увидит окно с формой