RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Добавляем форму отправки обратного звонка на сайт (по Javascript и с ReCaptcha)

Добавляем форму отправки обратного звонка на сайт (по 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)     Подпишитесь на RSS комментариев к этой статье.