Добавляем форму отправки обратного звонка на сайт (по 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 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 } }
/********** Свои стили **********/ /* Прилипшая кнопка бегунка */ .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; }

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)
- Асинхронная загрузка css (21.01.2021)
- Оборачиваем изображения в ссылки с помощью хука add_filter('the_content', ...) в functions.php (14.08.2019)
- Добавляем форму отправки обратного звонка на сайт (по Javascript и с ReCaptcha) (29.07.2019) ← вы тут
