Как сделать отправку формы на почту html

Обновлено: 06.07.2024

Сегодня я вам покажу самую простую форму обратной связи на HTML и PHP. Весь код, с описанием, представлен в записи. Для создания формы вам понадобятся базовые знания HTML и PHP.

Для того чтобы ваша форма работала, необходимо:

Писать код в php файле (название.php)
Наличие локального сервера Open Server, Denwer. Или можно загрузить файл на хостинг.

В атрибут value, мы пишем , этот скрипт, сохраняет введённые данные, после обновления страницы. В теге textarea нет значение value, поэтому мы пишем этот скрипт в сам тег.

Теперь перейдём в PHP:

У нас есть 2 варианта добавления скрипта, либо в отдельный файл, либо в файл с формой. Если добавить файл в отдельный файл, то в форме необходимо изменить атрибут action и записать в него путь к файлу со скриптом. Если добавлять скрипт в файл с формой, то скрипт необходимо заключить внутри тега , а сам код разместить до HTML.

Скрип читается так…

Если кнопка btn_submit нажата, то создается массив errors в который мы будем записывать ошибки.

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

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

Функция обработки выглядит, следующим образом…

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

В переменную subject записывается название письма.

Далее идут правила обработки формы. Здесь же мы пишем от кого письмо и вводим адрес почты.

Доброго времени суток. При создании и запуске сайта рекомендуется добавить обратную связь, чтобы общаться с читателями. Кроме того пользователи смогут задать вопрос, если некоторые моменты в статье не понятны. Обычно для этих целей существуют комментарии, но иногда необходимо напрямую связаться с автором статьи, поэтому приходиться прибегать к почтовым сервисам. Лучший способ это сделать форма обратной связи html с отправкой на почту. Существует несколько вариантов реализовать поддержку: Javascript , обычный без отправки на сервер и ajax. Ранее я писал статью про верстку письма в хтмл.

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

Обратная связь (feedback) – это не просто контакты, здесь клиент заполняет поля, обычно это title, name, e-mail и text, нажав кнопку “submit”, произойдет отправка на обработку, дальше остается ждать ответа. ИСХОДНИКИ КОДА СМОЖЕТЕ СКАЧАТЬ ДАЛЕЕ .

Советую также продумать защиту от ботов, иначе вы можете столкнуться с ситуацией, когда спамеры начнут применять роботов, чтобы отправлять рекламу. Во избежание подобных проблем следует вставить капчу. Можно её написать самому, но лучше воспользоваться готовым инструментом reCaptcha от google . Ниже будет описано, как её установить.

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

Например, отправим имя, email и получим результат, для этих целей воспользуемся get. Ниже предоставлен полностью написанный код:

ReqReadyStateChange , срабатывает при получении данных с сервера. Если status 200 , это означает “ok”, хост запущен, наш результат в конечном итоге отобразиться в div контейнере output. Принимающий файл выглядит вот так, обратите внимание “echo”, это вывод в браузере, он отдается клиентской части JS и показывает в innerHTML:

Полученную форму нужно присвоить переменной, например “var form” . Потом эти данные заносятся в объект FormData, этот object отправляем на server через функцию send.

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

С помощью mail обычно присылают описание проблемы. Эта функция принимает четыре значение: email, subject(тема письма), message и header . Дальше смотрим готовый вариант.

Внимание: при создании скрипта feedback, вы можете столкнуться с нарушением кодировки, ранее мы писали, как с этим бороться, но указанный ваше вариант может оказаться не эффективным по той причине, что придется добавлять заголовок в каждый документ, и мы можем получить предупреждение “modify header”. Для решения подобной проблемы лучше задать кодировку в специальном файле. Создайте htaccess и запишите в него AddDefaultCharset UTF-8 .

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

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

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

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

Константы 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 )

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

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

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

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

Переменная $url, это ссылка, которая соединяет с api капчей Гугл. В $key записываем секретный ключ. Все это объединяем запрос с помощью конкатенации (точка) строк.

Результат $query можно вывести через echo. Но нам требуется получить массив, для этого воспользуемся json_decode, Если посмотреть json через var_dump, то он покажет array содержащий список значений success, hostname и “дата и время”. Нам нужен первый элемент “success”, он осуществляет проверку капчи, если она проходит, то возвращает true. Все что описано здесь, показано на скрине выше.

Стандартная форма “фидбек” обычно состоит из input и textarea . На многих веб-сайтах владельцы увеличивают функционал дополнительными полями, например, возможность выбрать тип отправляемого письма, через раскрывающий список: реклама, предложение и так далее. Input с атрибутом type=”file” применяют, чтобы осуществить отправку с вложением к письму. Для тех случаев, когда вопрос необходимо сопроводить картинкой.

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

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

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

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

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

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

Сервер для PHP

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

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

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

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

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

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

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

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

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

Браузер соберёт введённые нами данные и скомпонует таким образом, чтобы их можно было передать в программу на PHP. Как бы упакует в посылку.
В нашей PHP-программе мы сможем получить доступ к этим данным, как бы засосать их в память и хранить в переменных. Можно представить, что мы распакуем посылку и сможем пользоваться её содержимым.
Скрипт PHP что-то сделает с полученными данными, а потом выплюнет пользователю какой-то ответ. Этот ответ будет отображён в виде веб-страницы в браузере.

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

Мы специально делаем так, чтобы форма отсылала письма на тот же адрес, который одновременно и адрес отправителя. Это сделано для того, чтобы вы получали эти письма, когда будете тестировать сервис. В рабочем проекте замените переменную $email в функции send() на свой настоящий адрес, чтобы самим получать письма из формы.

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

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

Что дальше

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

Форма обратной связи - используется, как не странно, для связи пользователя сайта с администратором. В ней пользователь может сообщить о каких то ошибках на сайте или спросить о чем-либо разработчика.

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

Способ №1. Форма обратной связи на html + css + php (функционален, расширяем, относительно сложный способ)
Способ №2. Форма обратной связи только на html от стороннего сервиса (простота установки, функционален)
Способ №3. Форма для связи, реализованная по средствам ссылки для почтового клиента. При клике по ней открывается ваша почта, в которой уже вписан нужный email для связи. (просто, но и нет ни каких функций или возможностей)

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

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

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

Хостинг с поддержкой PHP
Знания HTML+ CSS
Знания PHP

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

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

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

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

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

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

Хостинг HTML
Знание HTML приветствуется

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

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

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

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

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

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

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

Читайте также: