Форма обратной связи с отправкой СМС уведомления

контактная форма с отправкой смс на телефонПривет, друзья. Уже несколько раз замечал в комментариях просьбу рассказать о том, как сделать форму обратной связи с отправкой СМС уведомления. Кроме того, в разделе «Ваши предложения» также появилось сообщение с предложением написать статью об этом. Наконец-то добрался и до этой темы.

Сначала, казалось, что это достаточно сложный вопрос, но немного углубившись в тему, стало понятно, что у сервисов, предлагающих подобные услуги очень хорошая документация и примеры. Одним из таких сервисов и воспользуемся: sms.ru.

Он дает возможность бесплатно отправлять на свой номер до 5 сообщений в день, что вполне хватит для тестов. Плюс 10 рублей на баланс и 10% скидка на первый месяц обслуживания.

Если найдете более выгодные условия, скиньте ссылку в комментариях.

Перед тем как начать, хочу предупредить, что я не описываю полностью создание формы, со всеми возможными полями на все случае жизни. Не описываю валидацию, адаптивность и другие не касающиеся к статье темы. Я пытаюсь показать, как реализовать возможность отправки данных, полученных из формы по СМС.

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

Структура файлов и папок

Структура файлов и папок

У вас может быть любая структура, главное проверьте пути к файлам. Инспектор вашего браузера поможет в этом.

Создание разметки формы

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

index.html


<form class="some-form" id="some-form" method="POST" enctype="multipart/form-data">
   <div class="some-form__info">
      <img class="some-form__img" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDM2IDM2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzNiAzNiIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CiAgPGc+CiAgICA8Zz4KICAgICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzQsNUgyQzAuODk2LDUsMCw1Ljg5NiwwLDd2MjJjMCwxLjEwNCwwLjg5NiwyLDIsMmgzMiAgICBjMS4xMDQsMCwyLTAuODk2LDItMlY3QzM2LDUuODk2LDM1LjEwNCw1LDM0LDV6IE0zNCwyOUgyVjdoMzJWMjl6IE00Ljg3NSwxMWwxMS43MTEsMTEuNzExYzAuNzgxLDAuNzgxLDIuMDQ3LDAuNzgxLDIuODI4LDAgICAgbDExLjY3My0xMS42NzNjMC4yNDQtMC4xODMsMC40MTMtMC40NiwwLjQxMy0wLjc4OGMwLTAuNTUzLTAuNDQ3LTEtMS0xYy0wLjI1NiwwLTAuNTE2LDAuMTA0LTAuNjkzLDAuMjYyTDI5LjgyOCw5LjVMMTgsMjEuMjk3ICAgIEw2LjI4Niw5LjYxM0M2LjEwMiw5LjM5Niw1LjgzOCw5LjI1LDUuNTMxLDkuMjVjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFjMCwwLjMsMC4xMzksMC41NjIsMC4zNDksMC43NDRMNC44NzUsMTF6IiBmaWxsPSIjMTA4YmViIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K">
      <div class="some-form__preloader"></div>
      <div class="some-form__msgs"></div>
   </div>
   <input type="text" name="name" class="some-form__input some-form__input_name" placeholder="Введите ваше имя">
   <input type="tel" name="tel" class="some-form__input some-form__input_tel" placeholder="Введите ваш телефон">
   <input type="email" name="email" class="some-form__input some-form__input_email" placeholder="Введите ваш Email">
   <textarea type="text" name="text" class="some-form__input some-form__input_text" placeholder="Введите текст сообщения"></textarea>
   <button class="some-form__button">Отправить</button>
</form>

Форма содержит 4 поля:

  • Имя.
  • Телефон.
  • Email.
  • Текст.

А также область для картинки, прелоадера и вывод сообщения о статусе отправки и валидации. Тут все просто. Название классов говорят сами за себя.

Добавим немного стилей и получим такую структуру:

Стили можно посмотреть, скачав исходник в конце статьи.

Для того, чтобы форма работала без перезагрузки страницы, воспользуемся следующим js кодом. Его необходимо подключить после jQuery. Я обычно подключаю скрипты в конце файла.

send.js

(function ($) {
    $(".some-form").submit(function (event) {
        event.preventDefault();
        var formId = ('#' + $(this).attr('id'));
        var fd = new FormData(document.querySelector(formId));
        $.ajax({
            url: "./php/send.php",
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,
            beforeSend: function () {
               
                $(formId).find('.some-form__preloader').css('display', 'block');
                
            },
            success: function (data) {
                
                $(formId).find('.some-form__preloader').css('display', 'none');
                $(formId).find('.some-form__img').css('display', 'none');
                $(formId).find('.some-form__msgs').append(data);
                
                setTimeout(() => {
                    $(formId).find('.some-form__img').css('display','block');
                    $(formId).find('.some-form__msgs').html('');
                    $(formId).find('.some-form__button').prop("disabled", false);
                }, 4000);
            },
        });
    });
}(jQuery));

Давайте в двух словах объясню, что тут происходит. Когда случилось событие submit, то есть форма отправлена, получим id этой формы, чтобы быть уверенным, что работаем именно с нужной, если их несколько на странице.

Затем отправляем запрос к обработчику, при этом показываем прелоадер, пока не получим ответ, чтобы пользователь понимал, что процесс идет. Когда пришел ответ, показываем его, скрывая картинку и прелоадер, а через 4 секунды возвращаемся в исходно состояние.

Обработка формы

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

Скачать можно тут: PHPMailer

Кроме того, для отправки СМС сообщения, как и говорилось выше, нужно зарегистрироваться на сайте sms.ru., получить api_id и скачать библиотеку smsru_php, перейдя в блоке «Примеры» по ссылке с PHP.

СМС уведомление о заявке на сайте

Как видно из скриншота со структурой проекта, я поместил все это в папке php. Кроме того, создал дополнительные 2 файла:

  • config.php,
  • send.php

В файле config.php — расположены настройки для отправки почты и получения СМС. В исходнике пример с комментариями для yandex и mail почты. Если нужен Gmail, просто загуглите «gmail smtp» и заполните соответствующие переменные.

<?php
    
    // Основные настройки для отправки письма
    // ** SMTP-YANDEX
    const HOST      = 'ssl://smtp.yandex.ru';
    const LOGIN     = 'sender'; //Логин без @yandex.ru
    const PASS      = 'yourpass'; //Пароль от почты
    const PORT      = '465';
    const SENDER    = 'sender@yandex.ru'; //Полный адрес почты
    const CHARSET   = 'UTF-8';


    // SMTP-MAIL.RU
    // const HOST    = 'ssl://smtp.mail.ru';
    // const LOGIN   = 'sender@mail.ru'; //Полный адрес почты
    // const PASS    = 'yourpass'; //Пароль от почты
    // const PORT    = 465;
    // const SENDER  = 'sender@mail.ru'; //Полный адрес почты
    // const CHARSET = 'UTF-8';


    // Дополнительные настройки 
    const CATCHER     = 'catcher@yandex.ru'; //Почтовый адрес, на которое придет письмо
    const SUBJECT     = 'Заявка с сайта';
    const SUCCESSMSGS = 'Спасибо за обращение. Сообщение успешно отправлено';
    const FAILMSGS    = 'Сообщение не отправлено, попробуйте еще раз';
    const FAILFILE    = 'Ошибка отправки файла, попробуйте еще раз';
    const ATTENTION   = 'Внимание! Вы заполнили не все обязательные поля';
    
    $nameIsRequired = true; // Обязательно ли поле с именем для заполнения true/false
    $telIsRequired  = true;  // Обязательно ли поле с теоефоном для заполнения true/false

    // Настройки СМС
    
    // Номер телефона на которое придет СМС (совпадает с номером при регистрации);
    $smsTel = '380951111111';
    
    // API ID полученный при регистрации на сайте https://smartlanding.sms.ru 
    $apiid = '4593BEEA-7A36-6D69-7111-11111111111';

В файле send.php и располагается наш обработчик формы:

<?php
use PHPMailer\PHPMailer\PHPMailer;

    require_once( __DIR__ . '/config.php' );
    require_once( __DIR__ . '/smsru_php/sms.ru.php');
    require_once( __DIR__ . '/phpmailer/phpmailer.php');
    require_once( __DIR__ . '/phpmailer/smtp.php');

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    if(telIsRequired){
        if(empty($_POST['tel'])){
            echo '<p class="some-form__info-fail">' . ATTENTION . '</p>';
            die;
        }
    } 
    
    if(nameIsRequired){
        if(empty($_POST['name'])){
            echo '<p class="some-form__info-fail">' . ATTENTION . '</p>';
            die;
        }
    } 

    if (isset($_POST['name'])) {
      $name = strip_tags($_POST['name']) . "<br>";
      $nameFieldset = "<b>Имя: </b> ";
    }

    if (isset($_POST['email']) && !empty($_POST['email'])) {
      $email = strip_tags($_POST['email']) . "<br>";
      $emailFieldset = "<b>Почта: </b> ";
    }

     if (isset($_POST['tel'])) {
        $tel = strip_tags($_POST['tel']) . "<br>";
        $telFieldset = "<b>Телефон: </b> ";
    }
    
    if (isset($_POST['text']) && !empty($_POST['text'])) {
      $text = strip_tags($_POST['text']) . "<br>";
      $textlFieldset = "<b>Сообщение: </b> ";
    }

    $smsru = new SMSRU($apiid);
    $data = new stdClass();
    $data->to = $smsTel;
    $data->text = "$name; $tel;";
    
    
    $mail = new PHPMailer;
    $mail->isSMTP(); 
    $mail->Host = HOST; 
    $mail->SMTPAuth = true; 
    $mail->Username = LOGIN;
    $mail->Password = PASS;
    $mail->SMTPSecure = SMTPSSLTSL; 
    $mail->Port = PORT;
    $mail->setFrom(SENDER);
    $mail->addAddress(CATCHER); 
 
    
    $mail->CharSet = CHARSET;
    $mail->isHTML(true); 
    $mail->Subject = SUBJECT;

    $mail->Body = "
            $nameFieldset $name
            $emailFieldset $email
            $telFieldset $tel
            $textlFieldset $text

    ";
    if(!$mail->send()) {
        echo '<p class="some-form__info-fail">' . FAILMSGS . '</p>';
    } else {
        echo '<p class="some-form__info-success">' . SUCCESSMSGS . '</p>';
        $sms = $smsru->send_one($data);
    }

} else{
    header ("Location: /"); // главная страница вашего лендинга
}

Здесь важно правильно прописать пути к файлам, если у вас другая структура.

    require_once( __DIR__ . '/config.php' );
    require_once( __DIR__ . '/smsru_php/sms.ru.php');
    require_once( __DIR__ . '/phpmailer/phpmailer.php');
    require_once( __DIR__ . '/phpmailer/smtp.php');

Это пример приема данных из поля с вводом именем:

if (isset($_POST['name'])) {
   $name = strip_tags($_POST['name']) . "<br>";
   $nameFieldset = "<b>Имя: </b> ";
}

Проверяем, существуют ли данные и если существуют, то сохраняем в переменную $name. А вот тут передаются переменные, которые мы хотим получить в СМС сообщении:

$data->text = "$name; $tel;";

То есть имя и телефон. Если не хотите получать непосредственно контакты, можно просто передать любую строку. Например:

$data->text = "Поступила новая заявка с сайта";

Кроме получения СМС сообщений на телефон, можно следить за статистикой на сайте:

Отчет о входящих СМС

А вот так выглядит СМСка на телефоне:
Получение СМС из контактной формы

В случае, если нужно получать более 5 сообщений в день, стоимость СМСки около 5 рублей, по крайней мере на Vadafone Украина. Можно создать буквенного отправителя для СМС и заключить договор с компанией. То есть сообщения будут приходить не от СМС.РУ, а от вашего придуманного имени. Например, от имени компании.

Кроме того, есть понятная документация для большинства языков программирования и возможность отправки в Viber. О чем, возможно, поговорим в одной из следующих статей.

Кстати, недавно была статья о том, как отправить данные из формы в Telegram

А на сегодня — все. Надеюсь эта статья пригодится вам.

Скачать исходник

32 комментария

  • Михаил

    Вот здесь — __http://smsc.ru/api/ — я так понял, можно отправлять SMS-одним GET запросом, но я не понял, как именно этот запрос нужно отправлять.

    Ответить
  • Максим

    СМС.РУ вообще очень быстро отрабатывают СМС и оно в течении 3-4 секунд приходит уже на телефон. Тестил SMS BIZ он же SMS INTEL, такая бич-дич :) с битрой не дружит, с инет магазинами не другит, смс по 10 минут идут :) Поддержка деревянная, плагины корявые :)

    Ответить
  • dimadv7

    Спасибо, и тестить значит не буду смс.биз.

    Ответить
  • dimadv7

    Тут тоже можно, только зачем?

    Ответить
  • Денис

    Здравствуйте, отличная статься и очень полезная. Интересует такой вопрос, а как настроить автоответчик с помощью этого сервиса sms.ru?
    Есть лендинг на нем форма имя и телефон, клиент заполняет и отправляет и ему на телефон приходит сообщение, с моим текстом ( скоро с вами свяжусь ) ?? такое можно реализовать ? можете подсказать как ?

    Ответить
  • dimadv7

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

    Ответить
  • Александр

    «исходники» ссылка битая. Загружает эту страницу со статьёй.
    можно обновить ссылку на исходники?
    или выложить на google например
    или на почту отправить?
    Спасибо.

    Ответить
  • dimadv7

    Александр, спасибо.
    Поправил. Если повторится, нажмите ctrl + f5

    Ответить
  • Сергей

    PHP Fatal error: Class 'PHPMailer\PHPMailer\Exception' not found in /home/chernomo/demo.sait.ru/php/phpmailer/phpmailer.php on line 1726
    ——————
    Из-за чего такая ошибка может быть?

    Ответить
  • dimadv7

    Сергей, возможно в пути ошибка, все подключили правильно? Ничего не забыли?

    Ответить
  • Сергей

    dimadv7,
    Ну на данный момент форма находится в корне поддомена,я так понимаю тогда пути к файлам так и остаются?

    Корневой каталог у меня такой:
    /home/chernomo/forma.sait.ru

    Ответить
  • Анатолий

    Не работает форма.
    Если не вести данные то сообщение выводится — не заполнены все поля.
    А вот полностью заполнив прелодер гоняется и все…

    Ни каких сообщений
    Форма находится в корне

    Ответить
  • dimadv7

    Посмотри ошибки в консоли, выведи ошибки php, проверь есть ли они.

    Ответить
  • Анатолий

    dimadv7, Выдает следующие ошибки

    Notice: Use of undefined constant telIsRequired — assumed 'telIsRequired' in /var/www/spa/data/www/svarka.ru/php/send.php on line 15

    Notice: Use of undefined constant nameIsRequired — assumed 'nameIsRequired' in /var/www/spa/data/www/svarka.ru/php/send.php on line 22

    Notice: Use of undefined constant SMTPSSLTSL — assumed 'SMTPSSLTSL' in /var/www/spa/data/www/svarka.ru/php/send.php on line 61

    Fatal error: Class 'PHPMailer\PHPMailer\Exception' not found in /var/www/spa/data/www/svarka.ru/php/phpmailer/phpmailer.php on line 1911

    Ответить
  • dimadv7

    Анатолий, а в консоли нет ошибок?

    Вот эта ошибка:

    Fatal error: Class 'PHPMailer\PHPMailer\Exception' not found in /var/www/spa/data/www/svarka.ru/php/phpmailer/phpmailer.php on line 1911
    

    говорит, что класс для отправки формы не найден. А значит, скорее всего, неправильно подключены файлы:

    use PHPMailer\PHPMailer\PHPMailer;
        require_once( __DIR__ . '/config.php' );
        require_once( __DIR__ . '/smsru_php/sms.ru.php');
        require_once( __DIR__ . '/phpmailer/phpmailer.php');
        require_once( __DIR__ . '/phpmailer/smtp.php');
    

    проверьте пути и убедитесь, что используете php версии 5.6 и выше. Если все это подключено верно, обратитесь к хостеру с вопросом, возможно какая-то блокировка стоит на его стороне.

    Ответить
  • Анатолий

    dimadv7, в консоли не было ни каких ошибок

    Пробовал отправлять используя yandex
    Прописал mail.ru почту отправки все сработало..

    Благодарю..

    Ответить
  • Денис

    А у меня тупо ничего не происходит. Смс не приходит, даже если тупо исходник лью и меняю номер и id на свои.)

    Ответить
  • dimadv7

    проверьте, есть ли ошибки в консоли и выпадают ли ошибки php.

    Ответить
  • Денис

    dimadv7, да всё ок вроде, ошибок нет.

    Ответить
  • dimadv7

    На чем тестируете, реальный или виртуальный сервер? Сервер поддерживает php? Не тестовый ли период, не бесплатный тариф. Какая версия php?

    Ответить
  • Денис

    dimadv7, на хостинге, получается, что на реальном

    Ответить
  • dimadv7

    Денис, не тестовый период у хостинга, не бесплатный ли? Какая версия php? PHP вообще поддерживается?

    Ответить
  • Денис

    dimadv7, всё поддерживается, я у вас научился бэкенд для оповещения на телеграм писать, всё работает, а вот смс незадача, не как(( Сколько бы отправку не делал смски не приходят, баланс положительный на сайте смс.ру

    Ответить
  • dimadv7

    Так что никаких ошибок не выскакивает? Ни в консоли, ни если сделать вывод ошибок php?

    Ответить
  • Михаил

    Сергей, надо скачать Exception.php и подключить

    use PHPMailer\PHPMailer\Exception;
    require_once( __DIR__ . '/phpmailer/Exception.php');
    
    Ответить
  • Михаил

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

    error_reporting(-1);
    $mail->SMTPDebug = 1;
    
    Ответить
  • Михаил

    Не пользовался до этого PHPMailer не могу понять почему в нем нужна почта для отправления (логин, пароль) , а в обычном send от Php не нужна.

    Ответить
  • dimadv7

    Здравствуйте, потому что используется SMTP протокол передачи почты.

    Ответить
  • Анатолий

    Добрый день . форма отличная . Заявки на почту и смс приходят . Подскажите как немного доработать ее. 1) вместо сообщений об успешной отправке в этой же форме — нужна страница спасибо ( показывать на 3-5 сек чтобы считать цели) 2) обнулять форму — после отправки — сейчас все данные остаются . Спасибо за форму

    Ответить
  • dimadv7

    Анатолий, здравствуйте. Цели можно считать и при наступлении события успешного ответа сервера, вот тут:

    success: function (data) {

    Цель прописывается так:

    yaCounter40976409.reachGoal('SMARTLID');
    

    Где 40976409 — номер счетчика, а SMARTLID — id цели.

    Если все равно нужен переход на странице благодарности, то попробуйте так:

    success: function (data) {
    window.location.replace("/thank-you-page.php");
    }
    

    Чтобы вернуть назад пользователя, между тегами head, на странице благодарности добавьте:

    <head>
        <meta charset="UTF-8">
        <title>Страница благодарности формы обратной связи</title>
    
        <meta http-equiv="Refresh" content="4" URL=/"> 
    </head>
    

    Где число в content — время в секундах, когда пользователя вернет обратно на главную страницу.

    Если будет переход на новую страницу, то и обнулять ничего не надо, все само перезагрузится.

    Ответить
  • Анатолий

    dimadv7, спасибо за ответ . но вот этот код (success: function (data) {
    window.location.replace(«/thank-you-page.php»);
    }) — отрабатывает у меня некорректно . он перенаправляет в любом случае : правильно заполнена форма (заявка) или я ничего не заполнил , просто нажал кнопку отправить, все равно перенаправляет (в итоге страница спасибо показалась, заявка не пришла , конверсия неверно посчиталась).
    Считать визиты страницы спасибо нужно только кто заполнил форму , в идеале получать полную информацию. здесь e-mail строже проверяется — но клиент может и не оставл e-mail а только номер телефона.
    тестил и так и сяк . спокойно вот так заявка может прийти :
    Имя: 1
    Телефон: +7(1
    Сообщение: 1

    2) этот возврат () у меня не отработал . пришлось скрипт искать. поставил вот такое :
    setTimeout('location.replace(«http://*******.ru/index.html»)', 5000);

    Буду благодарен за комментарий . так как в скриптах не силен

    Ответить
  • Анатолий

    в итоге вернулся к вашему первонач. варианту т.к. весь код написан под него (с небольшими изменениями под свой LP). 1) в полях ввода настроил валидацию 2) блок где выводятся информационное сообщение об успешной отправке сдвинул вниз к кнопке -отправить- (ваш вариант: у меня на мобильном его не видно и непонятно произошла отправка или нет) 3) да похоже цели придется прописывать на события 4) нужна еще очистка формы после удачной отправки ..

    Ответить

Добавить комментарий

Подписывайтесь на обновления, чтобы ничего не пропустить.