Делаем форму обратной связи на сайте
Говорят, что если программист может написать форму обратной связи, он может написать всё.
Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.
В сегодняшней версии программы — только самые основы этого упражнения. В следующих частях мы прокачаем систему.
Смысл программы в том, что посетитель страницы заполняет нужные поля, пишет текст сообщения и нажимает кнопку «Отправить». На почту владельцу сайта приходит письмо с текстом сообщения и данными о том, кто это сообщение отправил.
Чтобы сделать у себя на сайте такое, нам понадобится:
- сервер, который умеет работать с PHP-скриптами,
- страница, где разместим форму,
- скрипт на PHP — он будет отвечать за отправку сообщения.
Сервер для PHP
Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.
Сервер для PHP можно запустить на вашем компьютере, но без дополнительной настройки он будет виден только лично вам. Это нормальная ситуация при разработке продукта, но для реальной боевой задачи нужно будет поднять сервер где-то в интернете.
Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:
Готовим страницу с формой
Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.
Шаблон страницы
Заголовок
Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :
/*Задаём общие параметры для всей страницы: шрифт и отступы*/ body < /*text-align: center;*/ margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px; >/* Настраиваем внешний вид полей ввода*/ input < display: inline-block; margin: 10px auto; border: 2px solid #eee; padding: 10px 20px; font-family: Verdana, Arial, sans-serif; font-size: 16px; >textarea
Чтобы сделать форму на странице, мы будем использовать такие теги:
— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.
— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.
Ещё мы воспользуемся тегом — он мысленно собирает наши поля в одну форму и помогает управлять ими из одного места. У каждой формы есть свой метод, по которому она работает с данными. Форма может или отправлять данные (post), или получать их (get). Так как нам надо отправить сообщение в PHP-скрипт, будем использовать метод post. Сразу пропишем путь к скрипту на сервере — по этому адресу мы зальём нужный файл на следующем этапе. Этот скрипт, который мы позже напишем, и есть обработчик формы.
Оформим всё в виде кода:
Пишем обработчик формы на PHP
Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:
- Браузер соберёт введённые нами данные и скомпонует таким образом, чтобы их можно было передать в программу на PHP. Как бы упакует в посылку.
- В нашей PHP-программе мы сможем получить доступ к этим данным, как бы засосать их в память и хранить в переменных. Можно представить, что мы распакуем посылку и сможем пользоваться её содержимым.
- Скрипт PHP что-то сделает с полученными данными, а потом выплюнет пользователю какой-то ответ. Этот ответ будет отображён в виде веб-страницы в браузере.
Логика работы PHP-программы будет такая:
- получаем значения переменных из тех данных, которые получил обработчик;
- готовим сообщение, где укажем все поля в форме;
- отправляем это сообщение и смотрим на результат выполнения функции отправки;
- если письмо ушло по нужному адресу — пишем, что всё хорошо, если нет — говорим, что что-то не так;
- через 10 секунд после вывода сообщения автоматически переходим на сайт «Кода» 🙂
Мы специально делаем так, чтобы форма отсылала письма на тот же адрес, который одновременно и адрес отправителя. Это сделано для того, чтобы вы получали эти письма, когда будете тестировать сервис. В рабочем проекте замените переменную $email в функции send() на свой настоящий адрес, чтобы самим получать письма из формы.
// Если письмо не ушло — выводим сообщение об ошибке else ?>Отправляем PHP-скрипт на сервер
Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.
Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:
Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!
Что дальше
Дальше как обычно — улучшаем.
- Например, сейчас, если не заполнить поле с темой или адресом, то будет ошибка и письмо не уйдёт. При этом пользователь не будет знать, что же именно он сделал не так. Можно организовать проверку на заполнение полей и выводить нужные сообщения, если что-то не заполнено.
- Всегда можно улучшить безопасность и защитить скрипт от многократных запросов — чтобы никто не абьюзил сервис и не делал из нас спамеров.
- А ещё при отправке мы переходим на страницу обработчика, а потом вообще на другой сайт. Чтобы сделать как у всех, чтобы форма отправлялась без перезагрузки страницы, можно использовать Ajax. Когда-нибудь доберёмся и до него. Подписывайтесь, чтобы не пропустить.
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Отправка данных формы на email с помощью php и ajax
В данной заметке представлен рабочий скрипт для отправки данных формы на почту без перезагрузки страницы. С минимальными изменениями этот скрипт можно скопировать и использовать в любом проекте и на любой CMS, т.е. он полностью рабочий. Единственное, о чем стоит сказать отдельно: В этой заметке я не уделил внимание визуальной красоте формы, так как основная тема, в данном случае, все-таки сам механизм работы. Онлайн-демо, по понятным причинам, также не представлено.
1. Разметка формы
Итак, для начала нужно создать саму форму (все id и имена я указываю сразу, чтобы не удлинять повествование).
Обратите внимание, для формы на ajax не указываются атрибуты method и action (они будут указаны позже, в JS-коде). Также все поля в данном случае обязательны для заполнения (атрибут required), но это совершенно не обязательно. Обязательным требованием является указание атрибутов name и id. На этом с html закончили (Для того, чтобы форма была красивой нужно добавить классы к тегам и применить css-стили к данным классам и, по желанию, к указанным id).
2. PHP-скрипт отправки
Далее следует создать php-файл, который будет обрабатывать данные, полученные из формы, и отправлять их на указанный в скрипте email. В нашем случае файл называется «form_ask_us_ru.php».
Сам код будет выглядеть так, как показано ниже:
'; $fMail = 'Почта: '.$_POST['ask-us-email'].'
'; $fMessage = 'Сообщение: '.$_POST['ask-us-text'].'
'; $AllInOne = $fName.$fMail.$fMessage; $to = 'alex@alexryabikov.ru'; $headers="From: Alexryabikov.ru \nReply-to:info@alexryabikov.ru\nContent-Type: text/html; charset=\"utf-8\"\n"; // функция, которая отправляет наше письмо mail($to, 'Свяжитесь с нами', $AllInOne, $headers); ?>
Итак, в данном скрипте все данные из формы забираются через переменные вида $_POST[»];, после этого, все письмо объединяется в переменной $AllInOne. Переменная $to — это почта, на которую будут высланы данные формы, $headers — «заголовки» письма (от кого, адрес для ответа, кодировка письма). Далее следует функция mail(), которая принимает в качестве аргумента все вышеуказанные переменные. Текст «Свяжитесь с нами», принятый в качестве аргумента, в данном случае — это тема письма.
3. Ajax-скрипт + базовая анимация
В принципе, скрипт с небольшими модификациями, может работать и без ajax, но нас интересует именно отправка формы без перезагрузки страницы, поэтому продолжаем. Совершенно неважно как будет подключаться javascript-код в страницу: отдельным файлом или же прямо перед закрывающим . Я, обычно, подключаю прямиком в шаблон (но это, скорее, дело привычки). И так, сам код выглядит следующим образом:
Первая строка — это обработка события по отправке формы, триггером в данном случае служит id тега form. Далее появляется переменная с id popup_text — это всего лишь пустой контейнер div с таким айди, размещенный в любом месте страницы/шаблона. Строка url — содержит ссылку на файл-обработчик данных, типом отправки указывается POST. Метод serialize() — возвращает строку в виде, пригодном для обработки php-скриптом (Это если совсем упрощенно). В случае успеха происходит обработка успешной отправки и в ранее пустом контейнере popup_html всплывает надпись «Ваше сообщение успешно отправлено!», которое постепенно растворяется на экране (Тут можно выбрать другой эффект анимации, либо поиграться с таймингом, это все на вкус и цвет). Методы .val(), примененные к каждому элементу формы — очищают форму от ранее введенных данных (Если этого не требуется, то можно убрать эти строки). В блоке error — можно настроить обработку возможных ошибок при отправки данных, но это не относиться к теме данной статьи.
Итог: На выходе имеем полностью рабочий скрипт, который был апробирован на разных сайтах и CMS. Можно забирать и пользоваться. Надеюсь, заметка была достаточно полезной.
Другие читатели также интересовались:
- Регулярные выражения в notepad++
- Вывод списка товаров (bitrix:catalog.section) в слайдере
- SQL-запросы на каждый день
- Вывод количества просмотра элемента на детальной странице в Битриксе
Как сделать форму отправки сообщений на сайте
От автора: приветствую вас, друзья. Данная статья будет продолжением статьи, в которой мы реализовывали отправку формы на email с помощью PHP функции mail(). В этой статье мы узнаем, как сделать форму отправки сообщений с сайта через SMTP популярных почтовых сервисов. Приступим?.
Исходные файлы текущей статьи вы можете скачать по ссылке.
Вы можете задать вполне логичный вопрос: а чем не устраивает функция mail(), которая замечательно работает на локальном сервере? Все дело в том, что в настоящее время работоспособность данной функции на реальном хостинге стоит под большим вопросом. Порой хостер просто отключает отправку писем со своего сервера, часто письма просто не доходят до адресата и попадают в спам.
Именно по этим причинам и рекомендуется использовать для отправки писем сторонние SMTP сторонних популярных сервисов: gmail.com, yandex.ru, mail.ru и т.п. Ну а отправить письмо нам помогут различные библиотеки, например замечательная библиотека PHPMailer. Эта библиотека достаточно проста в использовании и универсальна. PHPMailer позволяет отправлять не только простые письма, но и письма в формате HTML, письма с вложениями, в общем, библиотека умеет все, что необходимо для отправки сообщений с сайта.
Начнем со скачивания архива с библиотекой и подключения его к обработчику формы, у нас это файл mail.php: