Отправка письма из формы html. Заказ обратного звонка от

Создание формы обратной связи Отправка файлов через форму обратной связи

В предыдущих статьях были рассмотрены различные варианты формы обратной связи и проверка её заполнения посетителем сайта. Довольно часто, кроме простого сообщения от посетителя сайта, требуется переслать автору фотографию, документ, резюме и т.п. Форма обратной связи позволяет легко реализовать отправку любого файла с компьютера пользователя на ваш e-mail . Иногда можно встретить формулировку "Отправка аттача с сайта" от англ. Attach (Прикреплять).

Несмотря на удобство этой функции, следует иметь в виду, что благодарные посетители сайта могут прислать в прикрепленном файле не только фото любимой собачки, кошечки или свежекупленного автомобиля, но и всякую вирусную гадость или видео такого размера, что ваш почтовый ящик переполнится и "закроется на учет". Так сказать, "получи, фашист, гранату!".

Существует множество скриптов отправки файлов с сайта, в том числе и с проверкой отсылаемого содержимого. Найти подходящий не трудно, всё зависит от ваших задач и терпения в поиске по интернету.

В любом случае, начинаем с добавления в созданную нами форму обратной связи (см. статью "Создание формы обратной связи на сайте ") строчку кода , которая как раз и отвечает за формирование строчки с кнопкой Обзор . При нажатии на неё открывается стандартное окно Windows для выбора файла. Кроме того, обязательно надо добавить в начале формы атрибут enctype="multipart/form-data" тега :
.

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

Ваше имя:

Тема:

Ваш email:

Выбор файла для отправки:

Ваше сообщение:

Как всегда, код этой формы вполне работоспособен и его можно (нужно) посмотреть и скопировать в браузере.

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

Теперь нам осталось только немного изменить РНР-страничку, отвечающую за отправку почты с вложенным файлом, добавив в неё class.phpmailer.php командой include "class.phpmailer.php"; и несколько строк для обработки пересылаемого файла.

Полный рабочий код страницы mail.php для отправки с сайта сообщений с прикрепленным файлом приведен ниже:

Обратная связь

Перед заливкой файла mail.php на сайт не забудьте поменять [email protected] на свой e-mail.

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

Обновлено 12.12.2015 г.

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

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

Преимущество такой отправки сообщений очевидны:

1. Вам не нужно "светить в Интернете" свой почтовый адрес, а значит он не попадет к спамерам.

2. Если посетитель хочет задать Вам вопрос или что-то спросить ему не нужно, копировать адрес электронной почты, открывать свой почтовый клиент, писать сообщение и т.д. Посетитель быстро заполнит в форме нужные данные и отправит Вам сообщение.

3. При такой организации обратной связи с посетителями, вероятность доставки Вам сообщения почти 100%, особенно если почтовый адрес привязан к вашему домену. Ведь из длинной почтовой цепочки исключаются промежуточные узлы. А значит надежность доставки почты резко повышается.

Как создать форму отправки сообщений?

Как правило подобные скрипты состоят из двух частей и код расположен в двух разных файлах:

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

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

Для обращения посетителей сайта к этому файлу, обычно делают простую ссылку: Написать автору сайта , Отправить сообщение или что нибудь в этом роде. Когда посетитель кликает по такой ссылке он попадает на отделную страницу с формой в которую нужно ввести данные (информацию) для отправки сообщения.

Итак, создаете новый файл, присвойте ему имя: mail.php или mail.html и вставляете в него код Листинга 1 .

Листинг 1

Для отправки сообщения автору сайта используйте следующую форму: Ваше имя: Ваш e-mail: Ваше сообщение:

Это самая простая форма, состоящая всего из 3-х полей для ввода данных. Эти поля я назвал: Ваше имя , Ваш e-mail , Ваше сообщение . При необходимости количество полей можно увеличить.

Первых два поля: Ваше имя , Ваш e-mail , описываются тегами:

Ваше имя:

но каждому из них присваивается свое имя, которое называетмя идентификатор : name="name" и name="email" соотвественно.

Третье поле для ввода сообщения описано тегами:

Ваше сообщение:

Данное поле имеет идентификатор: name="mess" .

И естественно имеется две кнопки: Отправить сообщение и Очистить форму .

Данным (информации), которые посетитель заносит в форму, присваиваются соотвествующие идентификаторы: name , email и mess , запоминайте - это важно!

Для удобства оформления вся форма помещена в обычную таблицу, внешний вид, которой можно оформить с помощью , у меня это класс: class="td_border" , его я здесь не привожу, при необходимости допишите сами, на свой вкус.

Файл обработчик.

Вторая часть скрипта состоит из файла обработчика: mail2.php , в который методом POST передаются все данные с соответствующими идентификаторами: name , email и mess . Здесь эти данные помещаются в переменные: $name , $email , $mess .

Создаем файл mail2.php и прописываем в него код Листинга 2 :

Листинг 2

$name = $_POST["name"]; $email = $_POST["email"]; $mess = $_POST["mess"]; $REMOTE_ADDR = $_POST["REMOTE_ADDR"]; if (isset ($name)) { $name = substr($name,0,20); //Не может быть более 20 символов if (empty($name)) { echo "Не указано имя!!! "; echo ""; exit; } } else { $name = "не указано"; } if (isset ($email)) { $email = substr($email,0,20); //Не может быть более 20 символов if (empty($email)) { echo "Не указан e-mail !!! "; echo "Вернуться и правильно заполнить форму."; exit; } } else { $email = "не указано"; } if (isset ($mess)) { $mess = substr($mess,0,1000); //Не может быть более 1000 символов if (empty($mess)) { echo "Сообщение не написано!!! "; echo "Вернуться и правильно заполнить форму."; exit; } } else { $mess = "не указано"; } $i = "не указано"; if ($name == $i AND $email == $i AND $mess == $i) { echo "Внимание! Произошла ошибка! Вы не заполнили поля сообщения!"; exit; } $to = "admin@сайт "; $subject = "Сообщение с сайта сайт "; $message = "Имя пославшего письмо: $name .\nЭлектронный адрес: $email\nСообщение: $mess .\nIP-адрес: $_SERVER"; mail ($to,$subject,$message,"Content-type:text/plain; charset = windows-1251 ") or print "Не могу отправить письмо!!!"; echo "Спасибо за отправку Вашего сообщения. Для меня это очень важно! В ближайшее время Вы обязательно получите ответ."; exit; ?>

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

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

Обращаю Ваше внимание, что файл: mail2.php обязательно должен иметь расширение .php , т.к. отправка сообщения осуществляется с помощью функции mail PHP .

И естественно ваш Хостинг, должен поддерживать работу PHP. Это в основном касается бесплатных хостингов, хотя в последнее время даже на бесплатных Хостингах практически везде установлен PHP.

В коде Листинга 2 все просто, исправьте все значения, выделенные красным под свои требования, а именно:

• пропишите свой адрес электронной почты , на который будут отправляться сообщения (переменная $to );
• исправьте тему сообщения (переменная $subject );
• обратите внимание на кодировку (charset = windows-1251 ). Кодировку пропишите ту, которая используется на вашем сайте. В русскоязычном интернете кодировка может быть: "utf-8" или "windows-1251" . Если ошибетесь с кодировкой текст в письме будет отображаться неправильно (кракозябрами).

Вот собственно говоря и все, теперь осталось закачать файлы: mail.php и mail2.php и на вашем сайте появится удобная форма для отправки сообщений.

Комментарии к этой статье (уроку):

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

Хороший урок! Спасибо!

Спасибо Андрей, хороший урок.

Благодарствую, думаю пригодится

Вам пишет Савин Дмитрий Александрович (SAVIN DMITRY ALEXANDROVICH) ,хочу узнать все по подробнее о формах в CSS , я мало обэтом осведомлен: поподробнее о свойстве action , как я знаю action это ссылка на документ, куда отсылается запрос данных либо сами данные с формы, или что-то в этом роде.method="post" обработка данных в наибольших размерах нежели чем get и т. д.Пожалуйста подробнее о формах у меня в них почти просак.

Здравствуйте Андрей! С уважением к Вам Ахмад. Вот я тоже хочу на сайте создать "Добавить Ваш комментарий" чтобы посетители могли оставить свои Отзывы.Какой код писать мне? Спасибо Вам мне понравилось.Ахмад

Красавчик! очень полезная инфа!

Полезно, то полезно, но н запускаетсяю. После заполнения формы выдается листинг mail2.php

Полезно, то полезно, но не запускается. После заполнения формы выдается листинг mail2.php

Все хорошо работает, только кнопочки не получаются объемными как у автора. Может кто-то подскажет, как сделать объемные кнопочки? Автору спасибо!

а у меня не работает. точнее работает на половину. письмо отправляет, но пустое. данные из майл1 не переходят в майл2

На маил не приходит.В чем подвох? Я не пойму как он без логина и пароля чегонибуть отправит. Это что сервер почтовый типа? Простая форма и все

Спасибо за форму! Работает! У кого не работает - внимательно выполняйте каждый шаг. У меня тоже не сразу всё получилось. Андрей, ещё раз спасибо!

Помогите плиз, форму вставила всё вроде бы Ок, но на почту которую я указала сообщение не доходит, хотя и пишется сообщение отправлено...

Подскажите, а как сделать так, чтоб после отправки/неудачной отправке письма не открывалось новое окно а писалость в старом?

Андрей. Я понимаю, что обработчик вызывается. Я пока не особо в php разбираюсь. Но мне вот чего бы хотелось достич: страница с почтовой формой одна,т.е. после нажатия "Отправить сообщение" новое окно не открывается, а изменяется текущая страница. Т.е я так понимаю она динамическая. Самой пока не додуматься как сделать такое, поэтому спрашиваю совета.

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

Классный урок! Спасибо!

Спасибо. Всё отлично работает)

в коде нет закрывающих тегов /p. Почему?

Warning: mail(): "sendmail_from" not set in php.ini or custom "From:" header missing in E:Roomsu362571transport-online.netwwwmail.php on line 66 Не могу отправить письмо!!! Во - как получается Как быть??

не могу разобраться с кодировкой. Если прописывать windows-1251 - текст скрипта в сообщении нормальный, сам текст сообщения на почту приходит крокозяброй. а если ставить utf-8 - текст скрипта в сообщении на почте - знаки вопроса, а текст сообщения из формы - нормальный. как сделать, что б и то и то нормальным было?

у меня неработает, но сайт еще не на хостинге, когда помещу-будет?

Все работает, спасибо за скрипт! Поскажите пожалуйста как сделать что бы при нажатии кнопки отправить не открывалась новая страница с обработчиком. Что бы сайт оставался на той странице где и был до нажатии кнопки отправить?

а как сделать поле ввода майл выше?

Если необходимо отправить письма на несколько адресов, просто через запятую дописываете нужные адреса вот так: $to = "admin@сайт, [email protected], [email protected]";

А как сделать чтобы после отправки сообщения была переадресация на другую страницу?

есть $to = "admin@сайт"; вопрос: если необходимиа отправка на 2-а адреса! один из адресов в виде $to = "$email"; другими словами функционал "посоветовать другу" с дублированием послания на мной заданную почту. Спасибо.

У меня почему-то форма обратной связи не работает, причём, никакая не работает. Делает вид, что сообщение отправлено, но на почту оно не приходит.

Здравствйте! Обьясните пожалуйста, почему не работает на хостинге, пишет: "Не могу отправить письмо". А на lockalhost на Денвере работает нормально. В чём проблема?...

почему у меня не одна формнеа не пашет пишет

Большое спасибо. Очень все просто и доступно. Я использовал Ваш пример на сайте gosdogovor.ru. Только немного подточил дизайн под себя и состав полей: http://www.gosdogovor.ru/easuzcon.html. Еще раз спасибо.

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

Андрей, а как сделать так стобы при нажатии на кнопку отправлялось сообщение с определенным текстом на определенный адрес? Помогите пожалуйста: [email protected]

В данной статье мы предложим свою наработку универсальной отправки форм на E-mail с проверкой на заполненность средствами PHP и Jquery. Плагин легко можно интегрировать в любой сайт без глубокого анализа кода и архитектуры. В статье мы рассмотрим принцип работы плагина, процедуру инициализации, конфигурации и установки.

Отличительные особенности и возможности плагина универсальной отправки форм:

• Проверка заполненности форм с возможностью группировки элементов и выводом подсказок для пользователя
• Множество шаблонов для отправки с возможностью автоматического выбора шаблона
• Работа формы без перезагрузки - AJAX
• Обработка удачных и ошибочных отправок
• Уникальные заголовки писем
• Отправка файлов на E-mail

Универсальный плагин отправки форм с проверкой на E-mail состоят из основных частей:

• HTML форма для заполнения
• JQuery скрипт для проверки и отправки AJAX
• PHP скрипт для автоматизации обработки данных, отправленных с формы, подключения шаблонов писем и обработки результатом отправки
• PHPMailer в качестве smtp клиента для процедуры отправки письма
• TPL файлы шаблонов отправки письма

Установка примера плагина на хост веб-сервера и первая отправка формы на E-mail

Скачав и распаковав плагин мы увидим следующее дерево файлов и каталогов:

/css/style.css // Файл основных стилей /css/font-awesome.css // Файл стилей шрифта FontAwesome /fonts/* // Файлы шрифта /js/script.js // JQuery скрипт проверки и AJAX отправки формы /mail-tpl/* // Каталог файлов шаблонов /php/phpmailer/* // Каталог файлов PHPMailer /php/config.php // Конфигурация SMTP подключения /php/function-send-form.php //Функция обработки и универсальной отправки на почту E-mail index.html // HTML форма отправки

Для дальнейшего первого опыта отправки демонстрационной формы нам необходимо сконфигурировать файл /php/config.php :

$__smtp = array("host" => "smtp.host.ru", "debug" => 0, "auth" => true, "port" => "465", "username" => "[email protected]", "password" => "123456", "addreply" => "[email protected]", "replyto" => "[email protected]", "secure" => "ssl");

Останавливаться подробно на процедуре конфигурации файла config.php мы не будем.

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

http(https)://domen.domen/path/to/dir/index.html

Если у нас открылась презентационная страница с описанием и формой - все сделано верно. Далее мы заполняем форму и ждем кнопку "Отправить". В случае успешной отправки форма выведем соответствующее сообщение. В случае ошибок при отправке - выведется информация об ошибке. Процедуру отладки PHPMailer мы так же рассматривать не будем.

Установка и интеграция плагина универсальной отправки формы на E-mail на сайт

Для установки плагина на существующий сайт необходимо:

1. Копировать следующий перечень файлов и каталогов: /js/script.js // JQuery скрипт проверки и AJAX отправки формы /mail-tpl/* // Каталог файлов шаблонов /php/phpmailer/* // Каталог файлов PHPMailer /php/config.php // Конфигурация SMTP подключения /php/function-send-form.php //Функция обработки и универсальной отправки на почту E-mail2. Создать новую или отредактировать существующую форму по следующему примеру: ОБРАТНАЯ СВЯЗЬ radio 1 radio 2 radio 3 Я ознакомился и согласен с правилами Отправить

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

2.1. Тег form:

name - Определяет название шаблона tpl при обработке полученного массива POST скриптом function-send-form.php. Название шаблона письма должно соответствовать значению атрибута name и формируется по маске ".tpl "

method - значение атрибута всегда POST. В противном случае функция обработки формы PHP не сработает. По умолчанию скрипт обработки данных function-send-form.php ориентирован только на POST параметры формы.

class - атрибут может содержать любое количество набора классов, но для корректно работы JQuery скрипта необходимо наличие класса sendler. По данном классу происходит отслеживание события отправки формы на вашем сайте.

2.2. Поля для заполнения внутри формы могут содержать следующие атрибуты:

name - определяет имя POST параметра

type - для корректно работы формы и распознания типов элементов формы атрибут рекомендуется к обязательному использованию

title - выводит подсказку в тег, который указан классов в атрибуте текущего тега confirminfo

class - все поля, обязательные для заполнения и проверки должны содержать в значении атрибута класс "Y-required ", "group000_Y-required ". group000_Y-required - группирует необходимые элементы в группы, для проверки заполненности одного из элементов группы. Radio группировать не нужно, группировка происходит про атрибуту name, как это заложено разработчиками type

confirminfo - значение атрибута определяет класс тега, куда выводится предупреждение о незаполненности элемента формы

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

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

3. В результате редактирования или создания формы должен отрабатывать JQuery обработка формы с функцией AJAX. Результат работы формы должен вернуться в тег с классом "response ". Если у вас что-то работает неправильно - свертись с примером, приложенным в виде архива к данной статье. Принцип работы плагина универсальной отправки форма на E-mail с проверкой

Плагин отправки формы на E-mail работы в несколько этапов и по следующему принципу.

1. Срабатывает событие отправки формы с классом sendler.

2. Событие отправки формы перехватывает JQuery скрипт и запускает процедуру проверки формы на корректность заполнения.

3. В случае нарушений правил заполнения формы скрипт добавляет к обязательным полям на заполнение класс wrong и, в случае наличия необходимых атрибутов title и confirminfo, выводит сообщения с подсказками для заполнения.

4. В случае успешного прохождения проверки формы запускается функция отправки формы AJAX запросом на обработчик (ссылку), указанный в атрибуте action.

5. Серверный обработчик получает необходимые параметры AJAX запроса, подключает необходмый шаблон письма (ориентируясь на атрибут name формы - POST параметр template). Далее происходит инициализация класса PHPMailer, формирования тела письма, заголовков и поцидура отправки письма на E-mail

6. В случае успешно или неуспешной отправки письма серверный обработчик вернет соответствующее сообщение на страницу в JQuery скрипт

Правила создания и редактирования tpl шаблонов письма

Правила верстки html писем мы рассматривать не будем. Рассмотрим обязательные параметры tpl шаблона письма и принцип создания шаблонов для скрипта универсальной отправки формы на E-mail.

Рассмотрим пример из архива:

Заказ обратного звонка от:

Данные для обратной связи:

Время обратного звонка:

Текст сообщения:

// include футера письма, аналогично шапке

Как можно заменить, значения атрибутов name тегов формы идентичны именам переменных в шаблоне письма tpl. Все верно, так оно и есть!

Все вновь созданные шаблоны складываем в каталог mail-tpl с расширением файла .tpl .

Название tpl документа должно совпадать значению атрибута name формы отправки на сайте.

Завершение

Пожалуй, это вся необходимая информация для эффективного использования плагина универсальной отправки форм на E-mail с проверкой. Всем спасибо за внимание!

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега , как показано в примере 1.

Пример 1. Отправка данных формы

HTML5 IE Cr Op Sa Fx

Данные формы

В этом примере данные формы, обозначенные атрибутом name (login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

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

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами?q=node/add и?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

Ниже перечислены типовые области применения этих методов на сайтах.

GET

Передача небольших текстовых данных на сервер; поиск по сайту.

Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.

POST

Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.

Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега (пример 2).

Пример 2. Открытие формы во фрейме

HTML5 IE Cr Op Sa Fx

Использование фрейма

В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .

Элементы формы традиционно располагаются внутри тега , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).

Пример 3. Связывание формы с полями

HTML5 IE Cr Op Sa Fx

Форма

В этом примере тег однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.

Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы ( и ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.

Пример 4. Отправка формы

HTML5 IE Cr Op Sa Fx

Отправка формы

Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.

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

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

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

HTML

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

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Имя: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Телефон: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > E- mail : < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" > Сообщение: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Отправить" />

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

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

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

• < form method= "post" action= "mail.php" > …

  
  для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).

• < input maxlength= "30" type= "text" name= "name" />

  
  Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type="text" говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.

• < label for = "name" > Имя:

  
  Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.

• < textarea rows= "7" cols= "50" name= "message" >

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

• < input type= "submit" value= "Отправить" />

  
  О том, что это кнопка для отправки формы нам сообщает type="submit", а value задает текст, который будет внутри этой кнопки.

• < div class = "right" >

  
  использованы только для дальнейшего визуального оформления формы.

CSS

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

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

form { background: #f4f5f7; padding: 20px; } form . left, form . right { display: inline- block; vertical- align: top; width: 458px; } form . right { padding- left: 20px; } label { display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; } input, textarea { border: 1px solid #82858D; padding: 10px; font- size: 16px; width: 436px; } textarea { height: 98px; margin- bottom: 32px; } input[ type= "submit" ] { width: 200px; float: right; border: none; background: #595B5F; color: #fff; text- transform: uppercase; }

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

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

Не используйте для переноса строк и создания отступов лишние теги по типу < br>, < p> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться < br> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен? .

Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

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

PHP

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

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

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

Ваше сообщение успешно отправлено

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

$back = "

Вернуться назад

" ;

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

if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) { //внутрення часть обработчика } else { echo "Для отправки сообщения заполните все поля! $back " ; exit ; }

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST["name"] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo "Для отправки сообщения заполните все поля! $back" и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

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

$name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ;

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

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

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

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

mail ("почта_для_получения_сообщений@gmail.com" , "Письмо с адрес_вашего_сайта" , "Вам написал: " . $name . "
Его номер: " . $phone . "
Его почта: " . $mail . "
Его сообщение: " . $message , "Content-type:text/html;charset=windows-1251" ) ;

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

"почта_для_получения_сообщений@gmail.com" – сюда между кавычек вставляете свою почту

"Письмо с адрес_вашего_сайта" – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.

"Вам написал: ".$name." < br /> Его номер: ".$phone." < br /> Его почта: ".$mail." < br /> Его сообщение: ".$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом < br /> делаем перенос строки, чтобы сообщение в целом было читабельно.

Content-type:text/html;charset=windows-1251 - в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

ВАЖНО!

Кодировка указанная в «голове» документа ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

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

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

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

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

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

< script> function checkForm(form) { var name = form. name. value; var n = name. match(/ ^[ A- Za- zА- Яа- я ] * [ A- Za- zА- Яа- я ] + $/ ) ; if (! n) { alert("Имя введено неверно, пожалуйста исправьте ошибку" ) ; return false ; } var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) { alert("Телефон введен неверно" ) ; return false ; } var mail = form. mail . value; var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; if (! m) { alert("E-mail введен неверно, пожалуйста исправьте ошибку" ) ; return false ; } return true ; }

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

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

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

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

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