Кнопка заказать звонок для сайта

Функциональный скрипт на сайт - "Заказать обратный звонок".

Полноценное демо можно посмотреть на главной странице сайта:
https://web-ptica.ru

Скрипт - форма обратного звонка

Решил оставить комментарии для следующего сайта, чтобы было попроще делать красивый обратный звонок с удобной маской для ввода телефонного номера:

Для получения красивого всплывающего модального окна будем использовать плагин jquery - fancybox. Скачать минимум файлов для работы.

Джаваскрипт код - вставляем между head в шаблоне.

<script type="text/javascript" src="//web-ptica.ru/VRV-files/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="ССЫЛКА НА СКАЧЕННЫЕ ФАЙЛЫ/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="ССЫЛКА НА СКАЧЕННЫЕ ФАЙЛЫ/fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="//web-ptica.ru//wa-data/public/site/themes/web-ptica322/js/jquery.maskedinput.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                    $('.modalbox').fancybox();
                    $('input[name="phone"]').mask('+7 (999) 999-99-99');
        });
</script>

HTML код - вставляем в самый низ шаблона перед /body

    
        <div id="call" class="modalbox-wrap">
            <div class="form-valid">
                <form id="contact" method="post" action="/web-ptica.ru.php">
                    <div class="popup-title">Заказ звонка</div>
                    <input type="text" id="form_name" name="name" placeholder="Имя*" required />
                    <input type="text" id="form_phone" name="phone" placeholder="Телефон*" />
<!--  <input type="text" id="mess" name="mess" placeholder="Комментарий" /> -->
                    <div class="b5-captcha">
                        <div id="recaptcha2" ></div>
                    </div>
                    <input type="submit" class="btn" value="заказать звонок" />
                </form>
            </div>
        </div>

PHP файл с названием "web-ptica.ru.php" кладем его в корень сайта с правами 644. Проставляем адреса страниц, куда будет ссылаться проверка отправлено сообщение или нет, указываем почту, куда будут приходить письма.

    
<?php
function change_input_text_mini ($text=''){   return htmlspecialchars( ( str_replace(chr(0), '', $text) )); } # Минимальная очистка входящего текста - нет mysql_escape_string
$name = isset($_POST['name'])?change_input_text_mini($_POST['name']):'';
$phone = isset($_POST['phone'])?change_input_text_mini($_POST['phone']):'';
$mess = isset($_POST['mess'])?change_input_text_mini($_POST['mess']):'';
$result = 0;
            $to = "info@web-ptica.ru"; //ВАША ПОЧТА
            $subject = "Заявка с сайта!";
            $text =  "\nИмя - $name
            Телефон - $phone
            Комментарий - $mess
            ";
            $header.= "Content-type: text/html; charset=utf-8\r\n";
            $header .= "MIME-Version: 1.0\r\n";
            $sending = mail($to, $subject, $text, $header);
            if($sending) $result = 1;
            //echo $result;
if($result == 1) {
header('Location: Страница с сообщением об успешной доставке'); 
}else{
header('Location: Страница с сообщением о неудачной доставке');
}
?>
CSS код - вставляем в стили своего шаблона.
    
/* Обратный звонок - начало*/
.modalbox-wrap { padding: 45px 55px 40px; width: 470px; }
.popup-title { font-size: 36px; color: #787878; font-weight: 300; text-transform: uppercase; line-height: 38px; padding: 0 0 25px; }
.modalbox-wrap p { font-size: 16px; color: #000; line-height: 24px; float: none; }
.modalbox-wrap ul { padding: 0 0 35px; }
.modalbox-wrap ul li { font-size: 16px; color: #000; line-height: 24px; padding: 0 0 0 17px; position: relative; }
.modalbox-wrap ul li:after { width: 4px; height: 4px; content: ' '; border-radius: 50%; background: #ffa200; position: absolute; left: 0; top: 10px; }
#call input[type="text"] { height: 35px; background: #fff; width: 97%; padding: 0 0 0 3%; font-size: 16px; color: #000; font-family: 'FiraSans'; margin: 0 0 13px; border: 1px solid #dddddd; }
#call input[type="submit"] { width: 330px; cursor: pointer; height: 45px; color: #fff; border-top: 3px solid #89e5f7; box-shadow: 0 2px 2px rgba(0,0,0,0.82); text-align: center; font-size: 24px; text-transform: uppercase;
background: #02bbdd;
background: -moz-linear-gradient(top, #02bbdd 0%, #018bae 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #02bbdd), color-stop(100%, #018bae));
background: -webkit-linear-gradient(top, #02bbdd 0%, #018bae 100%);
background: -o-linear-gradient(top, #02bbdd 0%, #018bae 100%);
background: -ms-linear-gradient(top, #02bbdd 0%, #018bae 100%);
background: linear-gradient(to bottom, #02bbdd 0%, #018bae 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#02bbdd', endColorstr='#018bae',GradientType=0 ); 
border: none;
}
#call input[type="submit"]:hover { /*border-color: #ffac30;*/
background: #ffac30;
background: -moz-linear-gradient(top, #ffac30 0%, #f0ae30 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffac30), color-stop(100%, #f0ae30));
background: -webkit-linear-gradient(top, #ffac30 0%, #f0ae30 100%);
background: -o-linear-gradient(top, #ffac30 0%, #f0ae30 100%);
background: -ms-linear-gradient(top, #ffac30 0%, #f0ae30 100%);
background: linear-gradient(to bottom, #ffac30 0%, #f0ae30 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffac30', endColorstr='#f0ae30',GradientType=0 ); }
.b5-left input[type="text"].error, #call input[type="text"].error { border: 1px solid #f00; }
.b5-captcha{
    margin-bottom: 10px;
}
#call {display:none;}
.zakaz-zvonka{
width: 200px;
height: 30px;
background: #FE1200;
text-align: center;
font: 17px/30px georgia,arial,helvetica,serif;
margin: 15px 0 0 3px;
}
  .zakaz-zvonka:hover{
width: 200px;
background: #F39200;
text-align: center;
font: 17px/30px georgia,arial,helvetica,serif;
}
  .zakaz-zvonka a{
text-decoration: none;
color: white;
height: 100%;
display: block;
}
/* Обратный звонок - конец*/

Последний штрих - вставляем саму кнопку на сайт.

<div class="zakaz-zvonka"><a class="vrvzakaz modalbox" href="#call">Обратный звонок</a></div>

Наслаждаемся корректной работой.