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

Простейшая форма отправки данных на почту при помощи HTML и PHP

Одной из самых востребованных функций на сайте является форма заявки или заказа, данные из которой отправляются на почту владельцу сайта. Как правило такие формы являются простыми и состоят из двух трех полей для ввода данных. Как же создать такую форму заказа? Здесь потребуется использование языка разметки HTML и языка программирования PHP.

Язык разметки HTML сам по себе несложен, нужно всего лишь разобраться в том как и где ставить те или иные теги. С языком программирования PHP все немного сложнее.

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

Создаем форму отправки данных в html

На этом этапе нужно создать файл form.php, в него добавить html код формы. Подробности о каждом элементе формы читайте в статье Как сделать форму в HTML для сайта.

Первая строка будет следующей

Теперь соберем все вместе.

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

Создаем файл, принимающий данные из HTML формы

Это будет файл с именем send.php

В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:

$fio = $_POST[‘fio’];
$email = $_POST[’email’];

Перед названиями переменных в php ставится знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method=”post”. Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров – функций php.

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

$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);

При этом новые переменные в php не создаются, а используются уже имеющиеся. Что сделает фильтр, он преобразует символ ” $fio = urldecode($fio);
$email = urldecode($email);

Третей функцией мы удалим пробелы с начала и конца строки, если таковые имеются:

$fio = trim($fio);
$email = trim($email);

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

Проверка данных, передаваемых от HTML формы в файл PHP

Для того, чтобы проверить, работает ли этот код, передаются ли данные можно просто их вывести на экран при помощи функции echo:

Вторая строка здесь нужна для того, чтобы разделить вывод переменных php на разные строки.

Отправляем полученные данные из формы HTML на почту при помощи PHP

Для отправки данных на почту нужно воспользоваться функцией mail в PHP.

mail(“на какой адрес отправить”, “тема письма”, “Сообщение (тело письма)”,”From: с какого email отправляется письмо rn”);

Например, нужно отправить данные на email владельца сайта или менеджера [email protected].

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

mail(“[email protected]”, “Заявка с сайта”, “ФИО:”.$fio.”. E-mail: “.$email ,”From: [email protected] rn”);

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

if (mail(“[email protected]”, “Заказ с сайта”, “ФИО:”.$fio.”. E-mail: “.$email ,”From: [email protected] rn”))
<
echo “сообщение успешно отправлено”;
> else <
echo “при отправке сообщения возникли ошибки”;
>

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

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

Помещаем HTML и PHP код отправки формы в один файл

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

Форма отправки данных на почту с сайта HTML

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

Это все станет происходить по изменению размер окна, когда начнет составлять 480 пикселей или меньше. Сама основа конструкций представлена на 2 колонки, где основные элементы управления предназначены для того, чтобы сделать форму более привлекательной для ее заполнение. Разбивая текстовые поля ввода на несколько столбцов элемента, а это будет 2 столбца, что тем самым получив менее по форме значение для завершения отправки.

Так выглядит эта структура:

Приступаем к установке:

#domorenvisong <
width: 100%;
font-size: 16px;
>

#domorenvisong input, #domorenvisong textarea <
width: 98%;
border-radius: 5px;
border: 1px solid gray;
font: normal 1.5em auto;
padding: 0.47em;
box-shadow: 0 0 10px gray inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
>

#domorenvisong textarea <
resize:vertical;
height: 200px;
>

#domorenvisong input:focus, #domorenvisong textarea:focus <
box-shadow: 0 0 10px green inset;
>

#domorenvisong input[type=”radio”], #domorenvisong input[type=”checkbox”] <
padding: 0;
width: auto;
height: auto;
border-radius: 0;
>

#domorenvisong select <
width: 80%;
font-size: 1.5em;
border: 2px solid #eee;
>

#domorenvisong .desiganelarges <
width: 49%;
float: left;
>

#domorenvisong .desiganelarges:first-of-type <
margin-right: 2%;
>

#domorenvisong .desiganelarges label, #domorenvisong .desiganelarges fieldset <
font: bold 0.8em Verdana;
text-transform: uppercase;
display: block;
margin-top: 2em;
margin-bottom: 3px;
>

#domorenvisong fieldset <
width: 98%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
>

#domorenvisong .desiganelarges label:first-child, #domorenvisong .desiganelarges fieldset:first-child <
margin-top: 0;
>

#domorenvisong fieldset ul <
list-type: none;
margin: 0;
padding: 0;
>

#domorenvisong fieldset ul li <
display: inline-block;
margin-bottom: 5px;
margin-right: 1em;
>

#domorenvisong div.buttons <
clear: both;
text-align: center;
>

#domorenvisong input.button <
margin-top: 1.5EM;
width: 50%;
box-shadow: 0 0 10px gray;
text-transform: uppercase;
cursor: pointer;
min-width: 97px;
max-width: 595px;
color: white;
font-weight: bold;
letter-spacing: 7px;
text-shadow: 0 -2px 1px #8a8a8a;
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a90329′, endColorstr=’#6d0019′,GradientType=0 );
>

#domorenvisong input.button:active <
text-shadow: 0 0 1px #8a8a8a;
background: rgb(109,0,25);
background: -moz-linear-gradient(top, rgba(109,0,25,1) 0%, rgba(143,2,34,1) 56%, rgba(169,3,41,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,0,25,1)), color-stop(56%,rgba(143,2,34,1)), color-stop(100%,rgba(169,3,41,1)));
background: -webkit-linear-gradient(top, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -o-linear-gradient(top, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: -ms-linear-gradient(top, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
background: linear-gradient(to bottom, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#6d0019′, endColorstr=’#a90329′,GradientType=0 );
>

@media screen and (max-width: 480px)<

#domorenvisong <
font-size: 14px;
>

#domorenvisong .desiganelarges <
width: 100%;
float: none;
>

#domorenvisong .desiganelarges:first-of-type <
margin-right: 0;
>

#domorenvisong .desiganelarges:nth-of-type(2) <
padding-top: 2em;
>

#domorenvisong select <
width: 100%;
>
>

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

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

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

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

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

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

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

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

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

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

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

Останавливаться подробно на процедуре конфигурации файла config.php мы не будем. Более подробную информацию о конфигурации SMTP клиента PHPMailer можно почитать здесь!

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

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

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

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

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

1. Копировать следующий перечень файлов и каталогов:

2. Создать новую или отредактировать существующую форму по следующему примеру:

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

2.1. Тег form:

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

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

action – ссылка на серверный обработчик AJAX запроса. Если ваш путь серверного обработчика AJAX запроса отличается – необходимо отредактировать значение атрибута

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.

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

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

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

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

Завершение

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

Лучший способ сказать автору «СПАСИБО» рассказать друзьям или поделиться ссылкой!

Другие статьи:

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

Правила дизайна успешной кнопки – требования юзабилити

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

Плагин DateTimePicker для сайта – инструкция, настройка, инициализация

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

Плагин маски ввода для input – jquery maskedinput – инструкция, настройка, инициализация

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

Публикация на стене Вконтакте средствами API – кросспостинг

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

Чтение excel на PHP – основные методы класса PHPExcel

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

TinyMCE вырезает теги – исключения для тегов TinyMCE

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

Cвойства и методы TinyMCE – вставка тегов, вывод значений

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB.

Установка и настройка TinyMCE – инициализация и параметры

В статье мы: познакомимся с каруселью; научимся интегрировать ее на свой сайт; познакомимся с основными параметрами инициализации;рассмотрим самые популярные свойства и методы классов jCarousel

Установка и настройка jCarousel – параметры и методы

Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие,кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: “Писать или не писать smtp клиент с нуля?”.

Источники:

https://webriz.ru/25-prosteyshaya-forma-otpravki-dannyh-na-pochtu-pri-pomoschi-html-i-php.html
https://zornet.ru/load/forma_otpravki_dannykh_na_pochtu_s_sajta_html/145-1-0-9089
https://r-band.ru/poleznosti/plagin-otpravki-formy-na-e-mail