форма обратной связи feedback

Форма обратной связи

Описание main.feedback

Компонент выводит форму для отправки сообщения с сайта на E-mail. Компонент является стандартным и входит в дистрибутив модуля.

Для работы формы не требуется модуль Почта.

Компонент относится к Главному модулю.

Параметры

Если компонент размещён на сайте, настроен, но сообщения не приходят, необходимо:

Пример вызова

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Источник

Форма обратной связи HTML с отправкой на почту: как создать с использование javascript, ajax и без php + исходники кода к уроку

Как создается форма обратной связи html с отправкой на почту: 3 варианта + капча Гугл

На многих ресурсах можно увидеть контакты e-mail, телеграм или скайп, обычно они находятся в подвале сайта или на отдельной странице. С помощью контактов можно отправить небольшое сообщение владельцу блога и написать вопрос.

Вариант 1. с помощью Javascript

У объекта XMLHttpRequest есть несколько методов:

Важно: при тестировании, скорее всего, вы получите непонятные символы. Вся проблема заключается в сбитой кодировке. Чтобы это исправить, вставьте вначале заголовок header(‘Content-type: text/html; charset=utf-8’) ;. Смотрим рисунок выше.

Важно: document является главным. С его помощью в JS вызываются все dom-объекты и обработчики событий. Поэтому записав через точку forms.user, мы вызовем forms, у которой атрибут name=”user”.

Что получилось, смотрим на картинке. В принципе код мало чем отличается от реализации выше, единственное различие, это параметры “open”, первый method теперь post, второй мы получаем из формы.

Первым параметром – ваш емайл, куда будут приходить все письма, subject – это тема, message – описание проблема и последняя это header (шапка), там устанавливается кодировка и адресат. Допустим, мы решили задать вопрос по статье. Входящее письмо можно увидеть на скриншоте. Для удобства были расставлены цифры, а чуть ниже нумерованный список – объяснения, за что отвечает код в полученном письме.

Вариант 2. Без php обработчика

Быстрый вариант разработать “фидбэк”, без языков программирования, это вставить ссылку c помощью тега “a” и добавить в href специальное слово mailto:youremail. Полностью, это будет выглядеть вот так:

Дальше остается указать тему и text, после этого нажать кнопку отправить. Сообщение придет от имени отправителя, на которого зарегистрирован outlook.

Вариант 3. используя технологию Ajax

Если посетитель заполнил информацию о себе не соответствующие маскам, то мы можем выслать предупреждение с помощью alert и завершим скрипт командой return. Какие еще можно сделать улучшения? Большинство клиентов, посещая ресурсы, обращают внимание на дизайн. Красивая форма связи для сайта неплохо будет смотреться, если оформить её с помощью стилей. Для этого подключим css и запишем необходимую конструкцию. Основной особенностью станет, плавное исчезновение submit, и появление сообщения об успешной отправке. В теги head, разместим таблицу стилей, чтобы задать верстку.

Кнопка будет состоять из кадров, при щелчке произойдет, смена кадра и появится новая надпись “Работаю”, это может быть полезно, в том случае, если server долгое время не отвечает и надо оповестить клиента, чтобы тот не ушел. Прилагающий спрайт кнопки и задний фон поставляется вместе с исходниками. Ниже на картинке html скрипт.

В теге head добавлен script, также “(document)ready” будет содержать обработчик мыши. В div, у которого есть класс container, четыре поля и ссылка submit. Пример смотрите выше. При нажатии вся инфа отправиться в javascript и будет выполнен асинхронный запрос, соединившись с “пхп” и последующей передачи на хост. Полностью js-script показан ниже.

Если проверка пройдёт нормально, то начинаем делать запрос, используя ajax. В скобках url, это submitUrl название “пхп” файла, который примет наши данные, type –метод post, data – подготовленный список полей, который будет отправлен на host. После выполнения запроса, плавно появится текст, оповещающий об успехе и завершении операции.

В тегах head, добавлен main.css, он отвечает за стиль верстки. Полностью его структура выглядит вот так:

Когда произойдет клик по submit, data.php начнет принимать данные с клиентской стороны. Подробно рассказывать, про его работу мы не будем. Об этом уже писали ранее, но “screenshoot” все же приложим, он находится ниже.

Бывают ситуации, когда администратор, подписан на несколько интересных пабликов или веб-сайтов, например по сео, на e-mail постоянно приходит новый материал. При проверке может случиться так, что среди кучи писем, вопрос заданный читателем просто затеряется. В таком случае есть выход, достаточно реализовать отправку “месседжей” в базу данных (БД). Таким образом, вы всегда будете в курсе, когда вам напишет посетитель блога.

Установка защиты с капчей Гугл ( робот reCaptcha )

Некоторые юзеры предпочитают ботов для автоматической рассылки рекламы когда создается форма обратной связи HTML с отправкой на почту. Чтобы избежать нежелательный spam, рекомендуется поставить капчу от Гугла. reCaptcha работает по принципу выбора определенных изображений, на которых находятся объекты, например светофоры, велосипеды, машины и другие. Человек легко справиться с этой задачей, а вот робот окажется в тупике. Чтобы настроить капчу, нужно перейти на сайт Google и заполнить форму регистрации. Делаем запрос в поисковике, выбираем первый сайт.

Дальше сервис выдаст два ключа, первый “ключ сайта” разрешен к публикации на ресурсе, второй секретный показывать нельзя. После того, как забрали два ключа, переделаем страницу с нашей feedback. Подключим в начале api.js, и немножко изменам структуру “хтмл”, образец ниже.

Теперь можно попробовать протестировать, если все сделано правильно, мы получим.

Javascript проверяет у нас все заполненные поля, на предмет ввода. Капчу, тоже следует протестировать, для этого есть getResponse, он получает токен, если удалось правильно выбрать изображения, в противном случае мы вернем пустоту. Убедиться в этом можно через alert(v);. Взято со “скрина” ниже.

Проверку капчи, также следует делать на php. Здесь пригодиться секретный ключ, который мы ранее скопировали. Делаем проверку.

Здесь мы разобрали, как работает форма обратной связи html с отправкой на почту и капчей гугл. Есть много способов улучшить feedback, расширить функционал за счет новых полей и даже сделать мини-форум, где читатели смогут заходить на сайт и смотреть, ответили администраторы или нет. Существует множество вариантов для своего улучшения фидбек.

СКАЧАТЬ исходники кода к уроку можно по ссылке ниже:

Вот так и делаются такие вещи. Если материал понравился не забывай поставить лайк и сделать репост а также почитай статью про генератор онлайн таблиц. Всех благ.

Источник

Делаем форму обратной связи на сайте

Говорят, что если программист может написать форму обратной связи, он может написать всё.

Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.

В сегодняшней версии программы — только самые основы этого упражнения. В следующих частях мы прокачаем систему.

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

Чтобы сделать у себя на сайте такое, нам понадобится:

Сервер для PHP

Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.

Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:

Готовим страницу с формой

Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.

Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :

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

— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.

— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.

Ещё мы воспользуемся тегом

Пишем обработчик формы на PHP

Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:

Логика работы PHP-программы будет такая:

Отправляем PHP-скрипт на сервер

Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.

Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:

Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!

Что дальше

Дальше как обычно — улучшаем.

Источник

3 способа. Как сделать форму обратной связи на html?

Существует несколько способов реализовать данную фичу у себя. Их можно поделить по уровню сложности, а так же по требованиям от хостинга.

Способ №1. Форма обратной связи html + php.

Данный способ подойдет вам, если необходимо максимально расширяемое решение. Данную форму можно сделать какую угодно. Запрашивать любые данные у пользователей, которые вам необходимы. Можно сделать отправку файлов, капчу, отправку фото, адресов страниц от куда была совершена отправка и многое, многое другое.

Для данной формы вам потребуется:

Начнем с создания PHP файла который будет обрабатывать запросы пользователей на сервере. Он должен, проверить, все ли необходимые поля были заполнены и если все нормально, отправить сообщение.

Далее давай те напишем HTML код формы

Ну и конечно же файл CSS, что-бы все облагородить)

Вот, что получилось в итоге.

Способ №2. Сервис для формы обратной связи.

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

Для данного способа вам понадобиться:

У Google и Яндекса есть отличные сервисы для создания различных форм, опросов и всего подобного. Вам остается настроить все, что вам нужно в визуальном редакторе, получить код и вставить на нужной странице. Собственно все, можно настроить уведомления на почту или просматривать результаты в ручную.

Я собрал вот такую форму на сервисе Яндекса.

Куча различных виджетов уже готовы и доступны для вас
Уведомления на почту

После составления формы, нужно лишь скопировать полученный по кнопке «поделиться» код и вставить в нужное место на странице вашего сайта.

Способ №3. Ссылка для отправки email.

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

Такую ссылку можно усложнить и задать сразу еще и тему к примеру

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

Источник

Блог Vaden Pro

Создаем форму обратной связи на PHP

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.

Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

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

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

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

Мы использовали данный код:

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap. Урок по оформлению форм с его использованием можно посмотреть тут.

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

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

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

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

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

После чистки тегов добавляем отправку сообщения:

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.

Проверка формы на адекватность вводимых данных

Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.

Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.

Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:

Ну а теперь обычный разбор:

Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:

Теперь по пунктам забираем состав проверки:

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

Полный код страниц формы

Для удобства разместили полный код страниц в открытом доступе. Итак, в корне сайта должны лежать файлы:

Подводя итоги

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

Так что начинайте с малого, своей первой рабочей формы, и дополняйте ее по мере необходимости своими частями.

Надеюсь этот мануал окажется для Вас полезным. Если что-то было не понятно или не получается повторить – задавайте вопросы в комментариях.

О защите от спама я напишу в следующих статьях.

Источник