Стили всплывающего окна
.popup{ position:fixed;top:0;left:0;right:0;bottom:0;display:none;width:100%;height:100%;z-index:999;background:rgba(0,0,0,0.5);}
.popup .wrapper{ width:320px;margin:100px auto 0;position:relative;background:#fff;padding:15px;border-radius:3px;}
.popup .wrapper .close{ position:absolute;top:-27px;right:-27px;border:none;cursor:pointer;width:20px;height:20px;line-height:20px;z-index:999;background:url(/css/img/close.png) 50% 50% no-repeat;background-size:contain;transition:0.4s;}
.popup .wrapper .close:hover{ transform:rotate(90deg);transition:0.4s;}
.popup .wrapper .content{ padding:75px 10px;}
.popup .wrapper .content select,
.popup .wrapper .content input{ margin:0 auto 10px;width:250px;}
.popup .wrapper .content select{ width:280px;}
.popup .wrapper .header{ padding:25px 10px;position:absolute;top:0;left:0;right:0;background:#F4F4F4;border-radius:3px 3px 0 0;}
.popup .wrapper .footer{ padding:10px;position:absolute;bottom:0;left:0;right:0;background:#F4F4F4;border-radius:0 0 3px 3px;}
Архитектура всплывающего окна и формы внутри нее
<div class="popup" id="callback">
<div class="wrapper">
<form action="/callback_mail.php" method="POST">
<a class="close" href="javascript:ShowHide('callback');"></a>
<div class="header">
<strong>Заказ обратного звонка</strong>
</div>
<div class="content">
<div>
<p>Если у вас остались вопросы, звоните по номеру <strong>+7 (812) 123-12-12</strong> или закажите обратный звонок, и мы перезвоним вам сами</p>
</div>
<br>
<input type="text" name="name" placeholder="Ваше имя" required>
<input type="text" name="phone" placeholder="Телефон" required>
<select name="time">
<option value="--" selected disabled>Время звонка</option>
<option value="9:00-10:00">9:00-10:00</option>
<option value="10:00-11:00">10:00-11:00</option>
<option value="11:00-12:00">11:00-12:00</option>
<option value="12:00-13:00">12:00-13:00</option>
<option value="13:00-14:00">13:00-14:00</option>
<option value="14:00-15:00">14:00-15:00</option>
<option value="15:00-16:00">15:00-16:00</option>
<option value="16:00-17:00">16:00-17:00</option>
<option value="17:00-18:00">17:00-18:00</option>
<option value="18:00-19:00">18:00-19:00</option>
<option value="19:00-20:00">19:00-20:00</option>
<option value="20:00-21:00">20:00-21:00</option>
</select>
</div>
<div class="footer">
<input type="submit" value="отправить">
</div>
</form>
</div>
</div>
Это уже известный скрипт показа / скрытия блока
function ShowHide(id){
var nameBlock=document.getElementById(id);
var styleBlock=getComputedStyle(nameBlock).display;
nameBlock.style.display=styleBlock==='none'?'block':'none';
}
Файл callback_mail.php, это обработчик формы, для удобства он отправляет еще информацию о странице, с которой была отправлена заявка на звонок. Обработчик возвращает результат с параметром $_GET['er'] либо ок, либо er, где ok - значит что форма отправлена успешно и er - говорит об обратном
$to="mail@kakorin.com";
$name=strip_tags($_POST["name"]);
$phone=strip_tags($_POST["phone"]);
$time=strip_tags($_POST["time"]);
$header="From: \"3AKA3 C CAUTA\" <mail@kakorin.com> \r\n";
$header.='Content-type: text/html; charset="utf-8"';
$subject="Заявка с сайта";
$content="
<!DOCTYPE html>
<html>
<body>
Имя: ".$name."
<br>
Телефон: ".$phone."
<br>
Время звонка: ".$time."
<br>
Cо страницы ".$_SERVER[HTTP_REFERER]."
</body>
</html>
";
if($name!=null and $phone!=null){
mail($to,$subject,$content,$header);
header("location:".$_SERVER['HTTP_REFERER']."?er=ok");
}else{
header("location:".$_SERVER['HTTP_REFERER']."?er=er");
}
Пример: пример