smartlanding / Основные элементы landing page
4

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

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

Сначала, казалось, что это достаточно сложный вопрос, но немного углубившись в тему, стало понятно, что у сервисов, предлагающих подобные услуги очень хорошая документация и примеры. Одним из таких сервисов и воспользуемся: 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

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

sms.zip

Размер: 439 кб

Посмотреть пример

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 4

  1. Михаил

    Ответить

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

    • dimadv7

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

  2. Максим

    Ответить

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

    • dimadv7

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

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