После отправки формы появляется сообщение благодарности. В некоторых случаях удобнее показать его во всплывающем окне.
Например, в моем случае, на подопытном сайте блоки страницы прокручиваются специальным скриптом. И после отправки заявки, сообщение благодарности оказывается в самом низу страницы, его просто не видно и не понятно, ушло ли сообщение.
Ход действий следующий:
- Открываем Управление формами >> Ваша форма >> Свойства >> PHP скрипты >> Самый последний блок "Строка $thankYouMessage содержит HTML код ..." >> туда и добавляем этот код:
$thankYouMessage = '</div><div class="modal-message"><div class="momo">
<script type="text/javascript">
function timer(){
var obj=document.getElementById("timer_inp");
obj.innerHTML--;
if(obj.innerHTML==0){history.go(-1);setTimeout(function(){},1000);}
else{setTimeout(timer,1000);}
}
setTimeout(timer,1000);
</script><div class="momo2">
<img src="/images/logo2.png" alt="" style="padding-left: 250px;">
'.$thankYouMessage.'
<p style="text-align: center;">Через <span id="timer_inp">7</span> секунд вы будите перенаправлены обратно..</p></div></div>'; - Добавляем стили оформления в файл .css
.momo2{
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #fff;
border-radius: 10px;
height: 400px;
left: 50%;
margin-left: -300px;
margin-top: -200px;
position: fixed;
top: 50%;
width: 600px;
z-index: 15;
}
.momo{
background-color: rgba(0, 0, 0, 0.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
.closed{
border: 2px solid #fff;
border-radius: 14px;
cursor: pointer;
float: right;
margin-right: 5px;
margin-top: 3px;
padding: 3px 7px;
}
.modal-message { }
.momo2 p{
padding-left: 10px;
padding-top: 10px;
} - После отправки формы появляется модальное окно с ссобщением благодарности, в котором будет таймер на 7 секунд. По истечению времени браузер сделает шаг назад. Пользователю покажется, что страница обновилась :)
