Привет, друзья. Уже несколько раз замечал в комментариях просьбу рассказать о том, как сделать форму обратной связи с отправкой СМС уведомления. Кроме того, в разделе "Ваши предложения" также появилось сообщение с предложением написать статью об этом. Наконец-то добрался и до этой темы.
Сначала, казалось, что это достаточно сложный вопрос, но немного углубившись в тему, стало понятно, что у сервисов, предлагающих подобные услуги очень хорошая документация и примеры. Одним из таких сервисов и воспользуемся: 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
А на сегодня - все. Надеюсь эта статья пригодится вам.
38 комментариев
Вот здесь - __http://smsc.ru/api/ - я так понял, можно отправлять SMS-одним GET запросом, но я не понял, как именно этот запрос нужно отправлять.
Тут тоже можно, только зачем?
СМС.РУ вообще очень быстро отрабатывают СМС и оно в течении 3-4 секунд приходит уже на телефон. Тестил SMS BIZ он же SMS INTEL, такая бич-дич :) с битрой не дружит, с инет магазинами не другит, смс по 10 минут идут :) Поддержка деревянная, плагины корявые :)
Спасибо, и тестить значит не буду смс.биз.
Здравствуйте, отличная статься и очень полезная. Интересует такой вопрос, а как настроить автоответчик с помощью этого сервиса sms.ru?
Есть лендинг на нем форма имя и телефон, клиент заполняет и отправляет и ему на телефон приходит сообщение, с моим текстом ( скоро с вами свяжусь ) ?? такое можно реализовать ? можете подсказать как ?
Наверняка можно, но я не разбирался как, поэтому не могу помочь. Посмотрите на сайте документацию, там все с примерами готового кода есть.
"исходники" ссылка битая. Загружает эту страницу со статьёй.
можно обновить ссылку на исходники?
или выложить на google например
или на почту отправить?
Спасибо.
Александр, спасибо.
Поправил. Если повторится, нажмите ctrl + f5
PHP Fatal error: Class 'PHPMailer\PHPMailer\Exception' not found in /home/chernomo/demo.sait.ru/php/phpmailer/phpmailer.php on line 1726
------------------
Из-за чего такая ошибка может быть?
Сергей, возможно в пути ошибка, все подключили правильно? Ничего не забыли?
Сергей, надо скачать Exception.php и подключить
dimadv7,
Ну на данный момент форма находится в корне поддомена,я так понимаю тогда пути к файлам так и остаются?
Корневой каталог у меня такой:
/home/chernomo/forma.sait.ru
Не работает форма.
Если не вести данные то сообщение выводится - не заполнены все поля.
А вот полностью заполнив прелодер гоняется и все...
Ни каких сообщений
Форма находится в корне
Посмотри ошибки в консоли, выведи ошибки 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
Анатолий, а в консоли нет ошибок?
Вот эта ошибка:
говорит, что класс для отправки формы не найден. А значит, скорее всего, неправильно подключены файлы:
проверьте пути и убедитесь, что используете php версии 5.6 и выше. Если все это подключено верно, обратитесь к хостеру с вопросом, возможно какая-то блокировка стоит на его стороне.
dimadv7, в консоли не было ни каких ошибок
Пробовал отправлять используя yandex
Прописал mail.ru почту отправки все сработало..
Благодарю..
А у меня тупо ничего не происходит. Смс не приходит, даже если тупо исходник лью и меняю номер и id на свои.)
проверьте, есть ли ошибки в консоли и выпадают ли ошибки php.
dimadv7, да всё ок вроде, ошибок нет.
На чем тестируете, реальный или виртуальный сервер? Сервер поддерживает php? Не тестовый ли период, не бесплатный тариф. Какая версия php?
dimadv7, на хостинге, получается, что на реальном
Денис, не тестовый период у хостинга, не бесплатный ли? Какая версия php? PHP вообще поддерживается?
dimadv7, всё поддерживается, я у вас научился бэкенд для оповещения на телеграм писать, всё работает, а вот смс незадача, не как(( Сколько бы отправку не делал смски не приходят, баланс положительный на сайте смс.ру
Так что никаких ошибок не выскакивает? Ни в консоли, ни если сделать вывод ошибок php?
У меня не сразу заработало, помогло включение вывода ошибок в файле send.php После чего по ошибки можно понять что у вас не так.
Не пользовался до этого PHPMailer не могу понять почему в нем нужна почта для отправления (логин, пароль) , а в обычном send от Php не нужна.
Здравствуйте, потому что используется SMTP протокол передачи почты.
Добрый день . форма отличная . Заявки на почту и смс приходят . Подскажите как немного доработать ее. 1) вместо сообщений об успешной отправке в этой же форме - нужна страница спасибо ( показывать на 3-5 сек чтобы считать цели) 2) обнулять форму - после отправки - сейчас все данные остаются . Спасибо за форму
Анатолий, здравствуйте. Цели можно считать и при наступлении события успешного ответа сервера, вот тут:
Цель прописывается так:
Где 40976409 - номер счетчика, а SMARTLID - id цели.
Если все равно нужен переход на странице благодарности, то попробуйте так:
Чтобы вернуть назад пользователя, между тегами 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) нужна еще очистка формы после удачной отправки ..
Здравствуйте, форма выдает ошибку: Fatal error: Uncaught Error: Undefined constant "telIsRequired" in /var/www/u1949252/data/www/avtol.site/php/send.php:11 Stack trace: #0 {main} thrown in /var/www/u1949252/data/www/avtol.site/php/send.php on line 11
Пути проверял, форма на хостинге, PHP FastCGI (Apache) 8.0.17 (alt). Консоль ошибок не выдает, конфиг настроил. Пробовал и на яндекс и на мейлру, не помогает. Куда копать?
Вместо этого:
Сделай так, попробуй:
Дмитрий Давыдов, понизил версию с 8 до 5.6, появилась ошибка: Fatal error: Class 'PHPMailer\PHPMailer\Exception' not found in /var/www/u1949252/data/www/avtol.site/php/phpmailer/phpmailer.php on line 1911. Скачал файл Exception.php, подключил, ошибки исчезли, просто пишет: Сообщение не отправлено, попробуйте еще раз. Дальше не знаю, что делать, консоль молчит.
Дмитрий Давыдов, один раз таки приходило письмо с часовым опозданием, смс небыло.
Верните 8 версию. Вы изменили код, как я показал ранее?
Дмитрий, вернул 8 версию, код изменил как вы писали, ошибка такая: Fatal error: Uncaught Error: Undefined constant "SMTPSSLTSL" in /var/www/u1949252/data/www/avtol.site/php/send.php:75 Stack trace: #0 {main} thrown in /var/www/u1949252/data/www/avtol.site/php/send.php on line 75