Обратный звонок в всплывающем окне №2

Стили всплывающего окна

.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");
}

Пример: пример

Обратный звонок в всплывающем окне №2

Другие статьи