Доброго времени суток. При создании и запуске сайта рекомендуется добавить обратную связь, чтобы общаться с читателями. Кроме того пользователи смогут задать вопрос, если некоторые моменты в статье не понятны. Обычно для этих целей существуют комментарии, но иногда необходимо напрямую связаться с автором статьи, поэтому приходиться прибегать к почтовым сервисам. Лучший способ это сделать форма обратной связи html с отправкой на почту. Существует несколько вариантов реализовать поддержку: Javascript, обычный без отправки на сервер и ajax. Ранее я писал статью про верстку письма в хтмл.
Как создается форма обратной связи html с отправкой на почту: 3 варианта + капча Гугл
На многих ресурсах можно увидеть контакты e-mail, телеграм или скайп, обычно они находятся в подвале сайта или на отдельной странице. С помощью контактов можно отправить небольшое сообщение владельцу блога и написать вопрос.
Обратная связь (feedback) – это не просто контакты, здесь клиент заполняет поля, обычно это title, name, e-mail и text, нажав кнопку “submit”, произойдет отправка на обработку, дальше остается ждать ответа. ИСХОДНИКИ КОДА СМОЖЕТЕ СКАЧАТЬ ДАЛЕЕ.
Советую также продумать защиту от ботов, иначе вы можете столкнуться с ситуацией, когда спамеры начнут применять роботов, чтобы отправлять рекламу. Во избежание подобных проблем следует вставить капчу. Можно её написать самому, но лучше воспользоваться готовым инструментом reCaptcha от google. Ниже будет описано, как её установить.
Вариант 1. с помощью Javascript
JS, это клиентский язык программирования, он умеет соединяться c “пхп” даже без сторонних библиотек. Разберем простой пример, есть некий посетитель, известно его имя и email. Пусть это будет “Tom” с email@gmail.com. Эти данные мы занесем в массив user, для отсылки воспользуемся классом XMLHttpRequest, таким образом, у нас будет напрямую соединение с сервером. Response-Text- это данные полученные с хоста, их выведем в специальный контейнер div, у которого атрибут id output. Примерно вот так.
У объекта XMLHttpRequest есть несколько методов:
- Open инициализирует созданный запрос, вызывается сразу после XMLHttpRequest, передает пять параметров: method (get, post и т.д). Url – здесь указывается php скрипт. Async – выполняется запрос? асинхронно принимает логическое значение (true|false). Последние два это user и password, используются для аутентификации, по умолчанию стоит null. В нашем случае при инициализации мы воспользуемся только первыми двумя параметрами.
- Onreadystatechange – вызывается при изменении readyState. В свойство readystatechange, можно присвоить функцию, которая будет вызываться после получения данных с сервера.
- Send – отправляет инфу, которая была инициализирована в open.
Например, отправим имя, email и получим результат, для этих целей воспользуемся get. Ниже предоставлен полностью написанный код:
ReqReadyStateChange, срабатывает при получении данных с сервера. Если status 200, это означает “ok”, хост запущен, наш результат в конечном итоге отобразиться в div контейнере output. Принимающий файл выглядит вот так, обратите внимание “echo”, это вывод в браузере, он отдается клиентской части JS и показывает в innerHTML:
Важно: при тестировании, скорее всего, вы получите непонятные символы. Вся проблема заключается в сбитой кодировке. Чтобы это исправить, вставьте вначале заголовок header(‘Content-type: text/html; charset=utf-8’);. Смотрим рисунок выше.
Сделаем реальную отправку forms, на этот раз применим method post. Наш “фитбек” будет состоять из четырех полей: тема сообщения, имя автора, email и text.
Чтобы отправить заполненные поля, требуется обработчик событий addEventListener. В нашем скрипте будет передано в него два значения click (щелчок мышки) и функция, она будет срабатывать при нажатии кнопки submit. Для получения элементов воспользуемся объектом document.
Важно: document является главным. С его помощью в JS вызываются все dom-объекты и обработчики событий. Поэтому записав через точку forms.user, мы вызовем forms, у которой атрибут name=”user”.
Полученную форму нужно присвоить переменной, например “var form”. Потом эти данные заносятся в объект FormData, этот object отправляем на server через функцию send.
Что получилось, смотрим на картинке. В принципе код мало чем отличается от реализации выше, единственное различие, это параметры “open”, первый method теперь post, второй мы получаем из формы.
С помощью mail обычно присылают описание проблемы. Эта функция принимает четыре значение: email, subject(тема письма), message и header. Дальше смотрим готовый вариант.
Первым параметром – ваш емайл, куда будут приходить все письма, subject – это тема, message – описание проблема и последняя это header (шапка), там устанавливается кодировка и адресат. Допустим, мы решили задать вопрос по статье. Входящее письмо можно увидеть на скриншоте. Для удобства были расставлены цифры, а чуть ниже нумерованный список – объяснения, за что отвечает код в полученном письме.
- Заголовок header, который содержит “From: $name <$useremail>\r\n\r\n”. Получив сообщение от посетителя вебсайта, администратору достаточно нажать кнопку “ответить”, чтобы пообщаться с пользователем.
- Это переменная $youremail, здесь указывается почтовый ящик, куда хотите получать все письма.
- Текст “месседж ($message)” – приходит сообщение, там сам текст и имя отправителя. (“Вам пришло сообщение от, $name!\n Текст сообщения: $text”;).
Внимание: при создании скрипта feedback, вы можете столкнуться с нарушением кодировки, ранее мы писали, как с этим бороться, но указанный ваше вариант может оказаться не эффективным по той причине, что придется добавлять заголовок в каждый документ, и мы можем получить предупреждение “modify header”. Для решения подобной проблемы лучше задать кодировку в специальном файле. Создайте htaccess и запишите в него AddDefaultCharset UTF-8.
Вариант 2. Без php обработчика
Быстрый вариант разработать “фидбэк”, без языков программирования, это вставить ссылку c помощью тега “a” и добавить в href специальное слово mailto:youremail. Полностью, это будет выглядеть вот так:
<a href=”mailto: youremail@yandex.ru“> Почта администратора </a>. Когда вы щелкните по этой ссылке, откроется программа outlock. Адрес автоматически подставиться в поле “кому”.
Дальше остается указать тему и text, после этого нажать кнопку отправить. Сообщение придет от имени отправителя, на которого зарегистрирован outlook.
Вариант 3. используя технологию Ajax
Технология ajax умеет отправлять инфу на хост без перезагрузки страницы, при этом снижая нагрузку на вебсайт. Скрипт срабатывает при нажатии на ссылку submit, вся информация будет проверена на корректность. Например, юзер заполняет поле name, при отправке будет проверяться, что имя состоит из букв латинского и русского алфавита, а не из непонятных символов. Для почтового адреса создадим регулярное выражение, чтобы проверялся формат введённого e-mail: “youremail@example.com”.
Если посетитель заполнил информацию о себе не соответствующие маскам, то мы можем выслать предупреждение с помощью alert и завершим скрипт командой return. Какие еще можно сделать улучшения? Большинство клиентов, посещая ресурсы, обращают внимание на дизайн. Красивая форма связи для сайта неплохо будет смотреться, если оформить её с помощью стилей. Для этого подключим css и запишем необходимую конструкцию. Основной особенностью станет, плавное исчезновение submit, и появление сообщения об успешной отправке. В теги head, разместим таблицу стилей, чтобы задать верстку.
Кнопка будет состоять из кадров, при щелчке произойдет, смена кадра и появится новая надпись “Работаю”, это может быть полезно, в том случае, если server долгое время не отвечает и надо оповестить клиента, чтобы тот не ушел. Прилагающий спрайт кнопки и задний фон поставляется вместе с исходниками. Ниже на картинке html скрипт.
В теге head добавлен script, также “(document)ready” будет содержать обработчик мыши. В div, у которого есть класс container, четыре поля и ссылка submit. Пример смотрите выше. При нажатии вся инфа отправиться в javascript и будет выполнен асинхронный запрос, соединившись с “пхп” и последующей передачи на хост. Полностью js-script показан ниже.
Константы emailRegex, name и themeRegex содержат регулярные выражения, чтобы выполнить проверку требуется создать несколько функций test и внести в их скобки значения: строку, которую собираемся закинуть на host.
Если проверка пройдёт нормально, то начинаем делать запрос, используя ajax. В скобках url, это submitUrl название “пхп” файла, который примет наши данные, type –метод post, data – подготовленный список полей, который будет отправлен на host. После выполнения запроса, плавно появится текст, оповещающий об успехе и завершении операции.
В тегах head, добавлен main.css, он отвечает за стиль верстки. Полностью его структура выглядит вот так:
Когда произойдет клик по submit, data.php начнет принимать данные с клиентской стороны. Подробно рассказывать, про его работу мы не будем. Об этом уже писали ранее, но “screenshoot” все же приложим, он находится ниже.
Бывают ситуации, когда администратор, подписан на несколько интересных пабликов или веб-сайтов, например по сео, на e-mail постоянно приходит новый материал. При проверке может случиться так, что среди кучи писем, вопрос заданный читателем просто затеряется. В таком случае есть выход, достаточно реализовать отправку “месседжей” в базу данных (БД). Таким образом, вы всегда будете в курсе, когда вам напишет посетитель блога.
Для записи в БД оповещений от юзеров, надо создать таблицу с пятью полями: id, theme, name, email и text. При вызове php файла, произойдет добавление “INSERT”, что значит вставка записи. Как это сделать смотрите выше.
Установка защиты с капчей Гугл (робот reCaptcha)
Некоторые юзеры предпочитают ботов для автоматической рассылки рекламы когда создается форма обратной связи HTML с отправкой на почту. Чтобы избежать нежелательный spam, рекомендуется поставить капчу от Гугла. reCaptcha работает по принципу выбора определенных изображений, на которых находятся объекты, например светофоры, велосипеды, машины и другие. Человек легко справиться с этой задачей, а вот робот окажется в тупике. Чтобы настроить капчу, нужно перейти на сайт Google и заполнить форму регистрации. Делаем запрос в поисковике, выбираем первый сайт.
Откроется страница, щелкаем по ссылке “Admin Console”, она находится вверху. Появится форма регистрация сайта, заполняем, как показано на картинке и жмем кнопку отправить.
Дальше сервис выдаст два ключа, первый “ключ сайта” разрешен к публикации на ресурсе, второй секретный показывать нельзя. После того, как забрали два ключа, переделаем страницу с нашей feedback. Подключим в начале api.js, и немножко изменам структуру “хтмл”, образец ниже.
Теперь можно попробовать протестировать, если все сделано правильно, мы получим.
Javascript проверяет у нас все заполненные поля, на предмет ввода. Капчу, тоже следует протестировать, для этого есть getResponse, он получает токен, если удалось правильно выбрать изображения, в противном случае мы вернем пустоту. Убедиться в этом можно через alert(v);. Взято со “скрина” ниже.
Проверку капчи, также следует делать на php. Здесь пригодиться секретный ключ, который мы ранее скопировали. Делаем проверку.
Переменная $url, это ссылка, которая соединяет с api капчей Гугл. В $key записываем секретный ключ. Все это объединяем запрос с помощью конкатенации (точка) строк.
Используем Google.com, и присоединяем к этому домену параметры в виде get строки: secret, response, remoteip.
Результат $query можно вывести через echo. Но нам требуется получить массив, для этого воспользуемся json_decode, Если посмотреть json через var_dump, то он покажет array содержащий список значений success, hostname и “дата и время”. Нам нужен первый элемент “success”, он осуществляет проверку капчи, если она проходит, то возвращает true. Все что описано здесь, показано на скрине выше.
Стандартная форма “фидбек” обычно состоит из input и textarea. На многих веб-сайтах владельцы увеличивают функционал дополнительными полями, например, возможность выбрать тип отправляемого письма, через раскрывающий список: реклама, предложение и так далее. Input с атрибутом type=”file” применяют, чтобы осуществить отправку с вложением к письму. Для тех случаев, когда вопрос необходимо сопроводить картинкой.
Здесь мы разобрали, как работает форма обратной связи html с отправкой на почту и капчей гугл. Есть много способов улучшить feedback, расширить функционал за счет новых полей и даже сделать мини-форум, где читатели смогут заходить на сайт и смотреть, ответили администраторы или нет. Существует множество вариантов для своего улучшения фидбек.
СКАЧАТЬ исходники кода к уроку можно по ссылке ниже:
Вот так и делаются такие вещи. Если материал понравился не забывай поставить лайк и сделать репост а также почитай статью про генератор онлайн таблиц. Всех благ.
Интересует форма обратной связи html с отправкой на почту скачать
Хочу купить форма обратной связи html с отправкой на почту javascript