Как сделать модуль бесплатной консультации на ajax


X

Как сделать модуль бесплатной консультации на ajax

В этой статье речь пойдет о создании вот такого всплывающего блока с заявкой на консультацию по телефону. После ввода телефона и нажатия на кнопку «проконсультировать» на заранее указанный адрес будет отправлено письмо с просьбой перезвонить по данному номеру. Реализовывать блок мы будет с помощью Ajax и PHP.  

 

Блок имеет функцию проверки корректности введенных данных: как по длине введенного номера, так и по введенным символам, если они отличны от цифр. Если данные введены неверно, то пользователь увидит сообщение:

 

Номер телефона, введенный пользователем, заносится в базу данных. Перед добавлением нового номера происходит проверка на наличие такого же номера в базе данных, чтобы предотвратить дублирование данных.

 

HTML-каркас блока выглядит следующим образом:

<div id="box" class="free-consultation-okno" style="display: block;">
    <span style="position: absolute; top:5px; right:10px; color:#fff;">
        <a href="#" style="text-decoration: none; color:#000;" onclick="openbox()">
         <span style="font-size:12px; color:#000; ">Закрыть Х</span>
      </a>
   </span>
    <br><br>
    <div style="text-align: center;">
      <span style="font-size:35px; font-family: 'Exo2Regular'; line-height: 1.2em; "><? echo $mas['title']?></span>
    </div>
    <br><br>
    <div id="start">
      <div style="text-align:center;">
         <span style="font-size:180%; line-height: 1.2em;  "><? echo $mas['top']?></span>
      </div>
      <a class="free-consultation-phone" style="text-align: center; font-size:25px; padding: 13px; line-height: 1.2em;">
         <? echo $mas['phone']; ?>
      </a>
      <br>
        <div style="text-align:center;">
            <span style="font-size:180%; line-height: 1.2em;"><? echo $mas['middle']?></span>
        </div>
        <input type="tel" name="tel" id="tel" value="+7" maxlength="12"  onkeyup="this.value = this.value.replace (/[^0-9+]/, '')" style="
      width: 235px; padding: 8px; background: #333;  color:#fff; border-radius: 5px; font-size:32px; border:0px solid #333; margin-top:10px;">
      <br>
        <div style="text-align:center;">
            <span style="font-size:81%; margin-left: -3px; "><? echo $mas['under']?></span>
        </div>
        <a onclick="get()" class="free-consultation-button" style="padding-top: 9px;">
            <span><? echo $mas['button']?></span>
        </a><br><br>
    </div>
    <div id="finish" style="display: none; text-align: center;"><br><br><br><br>
            <span style="font-size:180%; ">Ваша заявка принята ждите ответа<br>
            <a onclick="close1('finish')" class="free-consultation-button" style="text-align: center;"> Закрыть окно</a>
            </span>
    </div>
    <div id="error_l" style="display: none; text-align: center;"><br><br><br><br>
            <span style="font-size:180%; ">Ваша заявка принята, ждите ответа
            <a onclick="close1('error_l')" class="free-consultation-button" style="text-align: center;"> Закрыть окно</a>
            </span>
    </div>
    <div id="error" style="display: none; text-align: center;"><br><br><br><br>
            <span style="font-size:180%; ">Вы ввели неправильный номер телефона!<br>
            <a onclick="edit()" class="free-consultation-button" style="text-align: center;"> Исправить</a>
            </span>
    </div>
    <!--Ajax передать форму обработать и выслать сообщения в виде блока -->
        <span style="font-size:12px; width:250px; text-align:center; display:block; bottom:5px; position:absolute; "><? echo $mas['bottom']?></span><br>
</div>

 

Не забываем подключить библиотеку Jquery.

Заполнение полей происходит из массива $mas, который наполняется из базы данных:

<?
$db = mysql_connect ("localhost","ajax","14253647");
mysql_select_db ("ajax",$db);
mysql_set_charset('utf8');

$query = mysql_query("SELECT * FROM window WHERE id = 1");
$mas = mysql_fetch_array($query);
?>

 

Проверка корректности символов осуществляется этой строкой:

onkeyup="this.value = this.value.replace (/[^0-9+]/, '')

 

Функция onkeyup проверяет значение введенного символа в момент отпускания клавиши, и заменяет его на пустой символ, если введенный отличен от цифрового.

 

В вышеуказанном коде присутствуют следующие основные функции:

openbox() – вывод всего блока на экран при нажатии на кнопку:

function openbox(){
    var display = document.getElementById('box').style.display;
    var free = document.getElementById('free-consultation').style.display;
    if(display=='none'){
        document.getElementById('box').style.display = 'block';
    }else{
        document.getElementById('box').style.display='none';
    }
    if(free=='none'){
        document.getElementById('free-consultation').style.display = 'block';
    }else{
        document.getElementById('free-consultation').style.display='none';
    }
}

 

edit() - исправление неверно введенного номера. Возвращает к окну ввода номера:

function edit() {
    document.getElementById('error').style.display='none';
    document.getElementById('start').style.display='block';
}

 

close1(id) – закрытие элемента, название которого передано в функцию. Возвращение к первоначальному виду блока:

function close1(id) {
    document.getElementById(id).style.display='none';
    document.getElementById('start').style.display='block';
    document.getElementById('box').style.display='none';
    document.getElementById('free-consultation').style.display = 'block';
}

 

get() - отправка сообщения на почту, добавление номера в базу данных, вывод сообщения об удачной или неудачной отправке заявки. Основная часть функции расположена в файле check.php, содержимое которого разберем ниже.

function get() {
    var tel = document.getElementById('tel').value;
    var length =  document.getElementById('tel').value.length;
    if (length == 12) {
        $.ajax({
            type: "post",
            url: "ajax/check.php",
            data: {'tel':tel},//параметры запроса
            //тип возвращаемого ответа text либо xml
            success: function(msg) {
                if(msg == 1) {
                    document.getElementById('start').style.display='none';
                    document.getElementById('finish').style.display='block';
                }

                else {
                    document.getElementById('start').style.display='none';
                    document.getElementById('error_l').style.display='block';
                }
            }
        });

    } else {
        document.getElementById('start').style.display='none';
        document.getElementById('error').style.display='block';
    }
}

 

Файл check.php содержит следующие функции:

send_email($phone) – отправка письма с номером на заданный адрес. Перед отправкой считывается дата и время, затем они разбиваются на отдельные переменные при помощи функции explode(). Также существует переформатирование времени с 12 часов на 24. Данные передаются на предыдущую страницу при помощи массива сессии.

function send_email($phone) {
   $date_time_string = date('d.m.Y h:i:s');
// Разбиение строки в 3 части - date, time and AM/PM
   $dt_elements = explode(' ',$date_time_string);
// Разбиение даты
   $date_elements = explode('.',$dt_elements[0]);
// Разбиение времени
   $time_elements =  explode(':',$dt_elements[1]);
// Если у нас время в формате PM мы можем добавить 12 часов для получения  24 часового формата времени
      $time_elements[0] = $time_elements[0]+5;
// вывод результата
   $date = $time_elements[0].':'.$time_elements[1].':'.$time_elements[2].' '.$date_elements[0].'.'.$date_elements[1].'.'.$date_elements[2];
   // от кого
   $fromMail = 'admin@import-china.ru';
   $fromName = 'IMPORT-CHINA';
   // все из базы

   $db = mysql_connect ("localhost","ajax","111111111");
   mysql_select_db ("ajax",$db);
   mysql_set_charset('utf8');
   $query = mysql_query("SELECT * FROM window WHERE id = 1");
   $mas = mysql_fetch_array($query);
   $_SESSION['mas']=$mas;

   // Сюда введите Ваш email
   $emailTo = $mas['email'];

   $subject = 'IMPORT-CHINA.RU '.$phone.' '.$date;
   $subject = '=?utf-8?b?'. base64_encode($subject) .'?=';
   $headers = "Content-type: text/plain; charset=\"utf-8\"\r\n";
   $headers .= "From: ". $fromName ." <". $fromMail ."> \r\n";

   // тело письма
   $body = "Получено письмо с сайта www.import-china.ru\n
   Заявка на Бесплатную Консультацию\n
   Телефон: $phone\n
   Дата: $date\n";

   mail($emailTo, $subject, $body, $headers, '-f'. $fromMail );

}

 

add($phone) – добавление нового номера в базу данных стандартным запросом INSERT INTO. Как и в предыдущей функции производится разбиение даты и времени на конкретные переменные и переформатирование на 24-часовой формат.

function add($phone) {
   $date_time_string = date('d.m.Y h:i:s');
// Разбиение строки в 3 части - date, time and AM/PM
   $dt_elements = explode(' ',$date_time_string);
// Разбиение даты
   $date_elements = explode('.',$dt_elements[0]);
// Разбиение времени
   $time_elements =  explode(':',$dt_elements[1]);
// Если у нас время в формате PM мы можем добавить 12 часов для получения  24 часового формата времени
      $time_elements[0] = $time_elements[0]+5;

// вывод результата
   $date = $time_elements[0].':'.$time_elements[1].':'.$time_elements[2].' '.$date_elements[0].'.'.$date_elements[1].'.'.$date_elements[2];
   $db = mysql_connect ("localhost","phpshop","11111111");
   mysql_select_db ("phpshop",$db);
   mysql_set_charset('utf8');
   mysql_query ("INSERT INTO apps (date,phone) VALUES('$date','$phone')");
}

 

check_phone($phone) – проверка на наличие такого же номера в базе данных по запросу.

function checkPhone($phone)
{
   $db = mysql_connect ("localhost","irogex3","1111111111");
   mysql_select_db ("irogex3",$db);
   mysql_set_charset('utf8');

   $query = mysql_query("SELECT `phone` FROM `free` WHERE (`phone`='$phone')");
   if (!$result = mysql_fetch_array($query)){
      // если нету такого email в БД верни TRUE, значит можно регать новый
      return TRUE;
   }
   else
   {
      // если есть такой email, то верни FALSE
      return FALSE;
   }
}

 

Кроме того, в файле содержится дополнительная проверка на корректность номера, которая удаляет пробелы в начале и конце строки, сравнивает длину и введенные данные:

$phone=trim($_POST['tel']);
   if (($phone !== '+7') and (strlen($phone) == 12)) {
echo '1';
      add($phone);
      send_email($phone);
   } else {
      echo 'no';
        send_email($phone);
   }

 

Таким образом мы реализовали всплывающий блок, работа с которым производится без перезагрузки страницы. Пользователь сможет отправить письмо-заявку на звонок прямо во время знакомства с сайтом. Рабочий образец данного блока вы можете найти на сайте import-china.ru

exp1 Просмотров сегодня +1 19 июня 2017
Создание сайтов и мобильных приложений от 5 500 руб. Любой сложности!
Реклама Собственный фреймворк. Большие и сложные проекты. ТОП 100 разработчиков РФ.
Создание сайтов от 5 500 руб.
Мобильные приложения от 50 000 руб.
irogex.ru
Наши проекты Инстаграм от 6 500 руб.
Конструкторы Ugears купить в Иркутске от 690 руб. с Доставкой!
Реклама UGEARS это путешествие в удивительную атмосферу гармонии природы и совершенства конструкторской мысли
Конструктор Навигатор дат - 690 руб.
Конструктор Комбайн - 2990 руб.
ugears-irk.ru
Оплата и Доставка Контакты
Стоматология в Улан-Удэ | ДентаВита | Шок цены от 100 руб!
Реклама От всей нашей семьи хотим выразить огромную благодарность стоматологической клинике
Осмотр, консультация от 150 руб.
Рентгеновский снимок от 100 руб.
dentavita03.ru
Наши цены Отзывы
Реклама помогает поддерживать
и развивать наш сервис.


Подробнее
(ссылка откроется в новой вкладке)
  Реклама