Добавляем форму отправки обратного звонка на сайт (по Javascript и с ReCaptcha)
Выведем на сайте в углу плашку, по которой появляется форма отправки заявки на обратный звонок. html:
<div id="callBackFormSlide" class="hide__" style="display:none">
<div class="cb-inner">
<div class="cb-header">
<div class="cb-close"><i></i></div>
<h4 class="cb-title" id="cbfLabel">Заказать звонок</h4>
</div>
<div class="cb-content">
<div class="baloon">
<span class="bln-text">Оставьте Ваши контактные данные, и мы свяжемся с Вами в самое ближайшее время</span>
</div>
<form id="fixed_form" class="main-form2" onsubmit="
ga('send', 'event', 'form', 'fixed', 'fixed');
ym(XXXXXXXX, 'reachGoal', 'form_fixed');return true;" method="post">
<div class="form-group row">
<label for="example-text-input2" class="col-2 col-form-label">Имя</label>
<div class="col-10">
<input class="form-control" name="name" type="text" placeholder="Имя" id="example-text-input2" required>
</div>
</div>
<div class="form-group row">
<label for="example-tel-input2" class="col-2 col-form-label">Номер телефона</label>
<div class="col-10">
<input class="form-control" name="phone" type="tel" placeholder="+7(909) 999 99 99" id="example-tel-input2" required>
</div>
</div>
<input type="text" id="first_door" value="" name="first_door">
<input type="hidden" name="form_application" value="Бегунок" />
<span class="cheker"><input type="checkbox" name="agree2" value="1" id="agree2" > <span style="font-size: 11px;">Я согласен с <a href="https://frommetal.ru/wp-content/uploads/2019/06/Pravovaya-informacziya.pdf" target="_blank">Пользовательским соглашением</a></span></span>
<div class="g-recaptcha" data-sitekey="ваш секретный ключ публичный"></div>
<!--<div id="recaptcha2"></div>-->
<div class="right-sub"><input type="submit" id="sbmt-cb" disabled value="Отправить" /></div>
</form>
</div>
</div>
</div>
<div class="slide-call-back mobile-hide">
<div class="label-block">
<i class="cb-icon"></i>
<span class="cb-block__txt">Заказать звонок</span>
</div>
</div>
<link type="text/css" href="https://frommetal.ru/wp-content/themes/vantage/css/bootstrap.min.css" rel="stylesheet">
<script src="https://www.google.com/recaptcha/api.js" async="true"></script>
<script src="https://frommetal.ru/wp-content/themes/vantage/js/jquery.maskedinput.min.js" type="text/javascript"></script>
javascript:
$(document).bind( "mouseup touchend", function(e){
//$(document).mouseup(function (e){ // событие клика по веб-документу
var divbegunok = $(".slide-call-back");
var div = $("#callBackFormSlide"); // тут указываем ID элемента
if (!div.is(e.target) // если клик был не по нашему блоку
&& div.has(e.target).length === 0) { // и не по его дочерним элементам
div.hide(); // скрываем его
divbegunok.show();
}
if (divbegunok.is(e.target) // если клик был не по нашему блоку
|| divbegunok.has(e.target).length != 0) { // и не по его дочерним элементам
divbegunok.hide(); // скрываем его
div.show();
}
});
/* Форма - Бегунок (по #fixed_form) */
$('#fixed_form').submit(function (e) {
$('#fixed_form input[type=submit]').prop('disabled', true);
var $form = $(this);
var data = $form.serialize();
var captchResponse = $('#g-recaptcha-response').val();
$form.css('filter', 'grayscale(100%)');
if ($('#first_door').val() !== '') {
alert("Вероятно, вы бот");
}else{
$.ajax({type: "POST", url: "send_begunok.php", data: data, success: function (data) {
$form.css('filter', 'grayscale(0%)');
if(captchResponse.length) {
$form.html("<p class='message_txt'>Спасибо! Ваше обращение будет рассмотрено в ближайшее время.<p>");
$('#callBackFormSlide .baloon').hide();
} else {
alert(data);
}
}
});
return false;
}
});
php (send_begunok.php):
<?php
if((isset($_POST['name'])&&$_POST['name']!="")&&(isset($_POST['phone'])&&$_POST['phone']!="")){ //Проверка отправилось ли наше поля name и не пустые ли они
$response = $_POST["g-recaptcha-response"];
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = [
'secret' => 'ваш секретный ключ серверный',
'response' => $_POST["g-recaptcha-response"]
];
$options = [
'http' => [
'method' => 'POST',
'content' => http_build_query($data)
]
];
$context = stream_context_create($options);
$verify = file_get_contents($url, false, $context);
$captcha_success=json_decode($verify);
if ($captcha_success->success==false) {
echo "Вы робот?";
} else if ($captcha_success->success==true) {
// сохраняем данные, отправляем письма, делаем другую работу. Пользователь не робот
$to = 'здесь через запятую емейлы, куда отправлять вам сообщение'; //Почта получателя, через запятую можно указать сколько угодно адресов
$subject = 'Заказать звонок (бегунок)'; //Загаловок сообщения
$message = '
<html>
<head>
<title>'.$subject.'</title>
</head>
<body>
<p>Имя: '.$_POST['name'].'</p>
<p>Телефон: '.$_POST['phone'].'</p>
</body>
</html>'; //Текст нашего сообщения можно использовать HTML теги
$headers = "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма
$headers .= "From: frommetal.ru <manager@frommetal.ru>\r\n"; //Наименование и почта отправителя
mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail
}
}
css:
/********** Свои стили **********/
/* Прилипшая кнопка бегунка */
.slide-call-back {
background-color: #2b4f91;
transition: right .4s ease-in-out,transform .4s ease-in-out;
right: 0;
left: auto;
top: auto;
bottom: 7.24971231%;
transform: rotate(90deg);
transform-origin: right top;
border-radius: 0 0 25px 25px;
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0, rgba(255,255,255,0.15) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0, rgba(255,255,255,0.15) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0, rgba(255,255,255,0.15) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0, rgba(255,255,255,0.15) 100%);
background-image: linear-gradient(top, rgba(255,255,255,0) 0, rgba(255,255,255,0.15) 100%);
margin: 0;
padding: 0;
border-radius: 0 0 25px 25px;
transform-origin: right top;
border: 0 none;
width: auto;
height: auto;
text-indent: 0;
position: fixed;
color: #fff;
font-size: 14px;
font-weight: 500;
cursor: pointer;
height: 36px;
z-index: 9999999;
max-width: 500px;
line-height: 36px;
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
transition: max-width .35s ease-in-out;
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.slide-call-back:before {
right: -20px;
left: auto;
bottom: 2px;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2244%22%20height%3D%2236%22%20viewBox%3D%220%200%2044%2036%22%3E%3Cdefs%3E%3ClinearGradient%20x1%3D%2250%25%22%20y1%3D%22100%25%22%20x2%3D%2250%25%22%20y2%3D%220%25%22%20id%3D%22a%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%20offset%3D%220%25%22%2F%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.15%22%20offset%3D%22100%25%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20d%3D%22M28.89%2025.465l9.232-15.208C41.562%204.592%2049.722%200%2056.35%200h3v28h-32c.593-.788%201.11-1.637%201.54-2.535zm-14.54%208.502V34h45v-6h-32c-2.736%203.643-7.093%206-12%206-.336%200-.67-.01-1-.033z%22%20id%3D%22b%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M14.89%2025.465l9.232-15.208C27.562%204.592%2035.722%200%2042.35%200h3v28h-32c.593-.788%201.11-1.637%201.54-2.535zM.35%2033.967V34h45v-6h-32c-2.736%203.643-7.093%206-12%206-.336%200-.67-.01-1-.033z%22%20fill%3D%22%232b4f91%22%2F%3E%3Cg%20transform%3D%22translate(-14)%22%3E%3Cuse%20fill%3D%22url(%23a)%22%20xlink%3Ahref%3D%22%23b%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23b%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
color: #2b4f91;
content: '';
height: 40px;
width: 42px;
position: absolute;
z-index: 0;
background-repeat: no-repeat;
}
.slide-call-back:after {
left: -16px;
right: auto;
bottom: 2px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2244%22%20height%3D%2236%22%20viewBox%3D%220%200%2044%2036%22%3E%3Ctitle%3Eright%3C%2Ftitle%3E%3Cdefs%3E%3ClinearGradient%20x1%3D%2250%25%22%20y1%3D%22100%25%22%20x2%3D%2250%25%22%20y2%3D%220%25%22%20id%3D%22a%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%20offset%3D%220%25%22%2F%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.15%22%20offset%3D%22100%25%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20d%3D%22M28.89%2025.465l9.232-15.208C41.562%204.592%2049.722%200%2056.35%200h3v28h-32c.593-.788%201.11-1.637%201.54-2.535zm-14.54%208.502V34h45v-6h-32c-2.736%203.643-7.093%206-12%206-.336%200-.67-.01-1-.033z%22%20id%3D%22b%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M31.11%2025.465L21.88%2010.257C18.438%204.592%2010.278%200%203.65%200h-3v28h32c-.593-.788-1.11-1.637-1.54-2.535zm14.54%208.502V34h-45v-6h32c2.736%203.643%207.093%206%2012%206%20.336%200%20.67-.01%201-.033z%22%20fill%3D%22%232b4f91%22%2F%3E%3Cg%20transform%3D%22matrix(-1%200%200%201%2060%200)%22%3E%3Cuse%20fill%3D%22url(%23a)%22%20xlink%3Ahref%3D%22%23b%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23b%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
color: #2b4f91;
content: '';
height: 40px;
width: 42px;
position: absolute;
z-index: 0;
background-repeat: no-repeat;
}
.slide-call-back .label-block {
padding-left: 20px;
padding-right: 30px;
float: left;
transform: rotate(180deg);
position: relative;
z-index: 10;
height: 36px;
max-width: 310px;
font-weight: 500;
transition: max-width .35s ease-in-out,opacity .3s ease-in-out 0s;
display: block;
font-size: 12px;
line-height: 1.5em;
color: #3D3D3D;
box-sizing: border-box;
left: auto;
right: auto;
top: auto;
bottom: auto;
}
.slide-call-back .label-block .cb-block__txt {
font-size: 15px;
font-weight: 400;
letter-spacing: 0;
margin-left: 0;
padding: 0 10px;
margin-right: 10px;
transform: none;
transform-origin: center center;
color: #ffffff;
display: block;
white-space: nowrap;
opacity: 1;
height: 36px;
line-height: 36px;
float: left;
max-width: 250px;
transition: max-width .35s ease-in-out,opacity .3s ease-in-out 0s;
cursor: pointer;
-webkit-text-size-adjust: none;
min-height: 0;
max-height: none;
background: none;
text-transform: none;
overflow: visible;
text-align: left;
width: auto;
text-shadow: none;
text-indent: 0;
box-shadow: none;
outline: none;
text-decoration: none;
position: static;
left: auto;
right: auto;
top: auto;
bottom: auto;
}
.slide-call-back .label-block .cb-icon {
transform: rotate(90deg);
right: 0;
left: auto;
top: -11px;
background: #ffffff;
border: 2px solid #399ce3;
color: #399ce3;
height: 36px;
border-radius: 100%;
font-size: 12px;
box-sizing: border-box;
width: 36px;
text-align: center;
line-height: 36px;
position: absolute;
}
.slide-call-back .label-block .cb-icon:before {
content: "";
background: url('путь к иконке письма/icon_mail.png') no-repeat;
background-size: contain;
left: 6px;
display: block;
position: relative;
top: 9px;
width: 19px;
height: 14px;
speak: none;
line-height: 1em;
vertical-align: baseline;
font-weight: 400;
font-style: normal;
font-size: 18px;
text-shadow: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Всплывающая форма бегунка */
.hide {
display: none;
}
#first_door {
display: none;
}
#callBackFormSlide {
left: auto;
right: 2%;
top: auto;
bottom: 2%;
margin: 0;
padding: 0;
border: 0 none;
width: auto;
height: auto;
text-indent: 0;
font-size: 12px;
font-weight: normal;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: fixed !important;
z-index: 999999 !important;
opacity: 1;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24),0 5px 35px 0 rgba(0,0,0,0.3);
border-radius: 5px;
}
#callBackFormSlide .cb-inner {
padding: 0;
margin: 0;
background-color: #fff;
color: #3d3d3d;
position: absolute;
height: auto;
width: 320px;
min-width: 310px;
min-height: 440px;
top: 0;
left: 0;
position: relative;
border-radius: 5px;
}
#callBackFormSlide .cb-header {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
text-align: center;
position: relative;
background-color: #2B4F91;
color: #ffffff;
font-size: 13px;
font-weight: 600;
height: 40px;
letter-spacing: 0;
padding: 0 15px;
}
#callBackFormSlide h4 {
font-size: 15px;
font-weight: 400;
line-height: 40px;
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
vertical-align: top;
text-align: center;
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
padding: 0 20px;
color: #ffffff;
background: url('путь к иконке письма которая рядом с заголовком на форме/imail.png') no-repeat left center;
margin: 0 auto;
}
#callBackFormSlide .cb-close{
height: 26px;
position: absolute;
right: -38px;
padding-top: 2px;
text-align: right;
top: 8px;
width: 33px;
opacity: 0;
-webkit-transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-ms-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
transition: opacity .5s ease-out;
}
#callBackFormSlide .cb-close i {
display: block;
color: #FFFFFF;
font-size: 18px;
height: 21px;
vertical-align: top;
line-height: 16px;
text-align: center;
width: 21px;
cursor: pointer;
font-family: Verdana;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #000000;
border: 2px solid #FFFFFF;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.07) inset;
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.07) inset;
box-shadow: 0 0 0 1px rgba(0,0,0,0.07) inset;
position: relative;
}
#callBackFormSlide .cb-close i:before {
line-height: 0;
display: block;
position: absolute;
width: 100%;
top: 7px;
font-size: 14px;
content: "×";
font-family: verdana;
}
#callBackFormSlide:hover .cb-close {
opacity: 0.7;
}
#callBackFormSlide .cb-content {
padding: 14px;
position: relative;
}
#callBackFormSlide .baloon {
background-color: #e3f1fb;
margin-bottom: 13px;
position: relative;
font-size: 13px;
padding: 7px 10px;
text-align: left;
clear: both;
line-height: 18px;
vertical-align: top;
margin-bottom: 18px;
word-wrap: break-word;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
min-height: 18px;
}
#callBackFormSlide .baloon:before {
width: 0;
height: 0;
border-style: solid;
border-width: 6.5px 8px 6.5px 0;
border-color: transparent #e3f1fb transparent transparent;
content:"";
display: block;
position: absolute;
left: -8px;
top: 9px;
}
#callBackFormSlide .main-form2 {
padding: 0 0 15px;
width: 100%;
}
#callBackFormSlide .main-form2 .form-group {
margin: 0 auto 15px;
}
#callBackFormSlide .cheker {
display: block;
margin-bottom: 5px;
}
#callBackFormSlide input[type=submit] {
background: #399ce3;
color: #ffffff;
font-size: 11px;
font-weight: bold;
height: auto;
line-height: 16px;
padding: 8px 19px 6px;
text-transform: uppercase;
border-color: #399ce3;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 3px;
border: 0;
outline: 0;
display: inline-block;
}
#callBackFormSlide input[type=submit]:disabled {
background: #e7e7e7;
color: #cccccc;
}
#recaptcha3 {
margin-left: -5px;
}
#callBackFormSlide .right-sub{
text-align: right;
}
.g-recaptcha {
margin-bottom: 10px;
}
Источник: loco.ru
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
Другие статьи по этой теме:
- 0 Composer – пакетный менеджер PHP. Что и как? (22.07.2014)
- 0 MySQL и PHP: Вычисление возраста (количество лет) по дате рождения (20.06.2017)
- 0 WordPress: Как скрыть показ записей определенных рубрик на главной странице (23.05.2014)
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 WordPress: Добавить ещё одну область виджетов (widget area) в шаблон главной страницы (08.02.2014)
- 0 Как изменить часовой пояс на сервере (16.11.2013)
- 0 WordPress: Выводим виджет новостей в теле страницы (вставка виджетов в страницу) (16.11.2013)
- 0 PHP: Как удалить файлы по маске? (07.11.2013)
- 0 Регулярные выражения в PHP (12.04.2014)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 Защита от спама в phpBB3 без капчи (09.10.2013)
- 0 Php функция implode внутри запроса SELECT к MySQL. (02.09.2013)
- 0 WordPress: Плагин мультиязычности WPML Multilingual CMS (14.06.2013)
- 0 WordPress: Gantry Framework. Тонкий момент с Widgets Override, widget variations. (23.05.2013)
- 0 WordPress: Настройки плагина галереи NextGen Gallery (04.03.2014)
- 0 WordPress: Иконка favicon.ico для области администратора (22.04.2013)
- 0 Как убрать папку www из денвера? (22.03.2013)
- 0 WordPress. Настройка для локальной работы (27.03.2013)
- 0 Устанавливаем и настраиваем WampServer (аналог MAMP в Mac и возможная замена Denwer'у) на Windows (22.03.2013)
- 0 Полезные возможности PhpStorm и настройка горячих клавиш (14.03.2013)
- 0 WordPress: Добавить ссылку "Сохранить фото" для галереи на NextGen с эффектом Lightbox (12.04.2013)
- Оборачиваем изображения в ссылки с помощью хука add_filter('the_content', ...) в functions.php (14.08.2019)
- Добавляем форму отправки обратного звонка на сайт (по Javascript и с ReCaptcha) (29.07.2019) ← вы тут
- Преимущества ИТ–аутсорсинга (25.03.2019)
Комментарии (0)
Подпишитесь на 
RSS комментариев к этой статье.
RSS комментариев к этой статье.
