Привет, друзья. Уже несколько раз замечал в комментариях просьбу рассказать о том, как сделать форму обратной связи с отправкой СМС уведомления. Кроме того, в разделе "Ваши предложения" также появилось сообщение с предложением написать статью об этом. Наконец-то добрался и до этой темы.
Сначала, казалось, что это достаточно сложный вопрос, но немного углубившись в тему, стало понятно, что у сервисов, предлагающих подобные услуги очень хорошая документация и примеры. Одним из таких сервисов и воспользуемся: 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
А на сегодня - все. Надеюсь эта статья пригодится вам.
Это интересно:
Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?
Подпиcывайтесь на обновления!
Михаил
Вот здесь — http://smsc.ru/api/ — я так понял, можно отправлять SMS-одним GET запросом, но я не понял, как именно этот запрос нужно отправлять.
dimadv7
Тут тоже можно, только зачем?
Максим
СМС.РУ вообще очень быстро отрабатывают СМС и оно в течении 3-4 секунд приходит уже на телефон. Тестил SMS BIZ он же SMS INTEL, такая бич-дич :) с битрой не дружит, с инет магазинами не другит, смс по 10 минут идут :) Поддержка деревянная, плагины корявые :)
dimadv7
Спасибо, и тестить значит не буду смс.биз.