Другой город
Начать проект

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

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

В данной статье мы предложим свою наработку универсальной отправки форм на 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" => 'mail@E-mail.ru',
"password" => '123456',
"addreply" => 'mail@E-mail.ru',
"replyto" => 'mail@E-mail.ru',
"secure" => 'ssl'
);

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

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

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-mail

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>

<form name="request" method="POST" action="php/function-send-form.php" class="sendler">
	<h2>ОБРАТНАЯ СВЯЗЬ</h2>
	<input name="name" title="Введите имя" type="text" placeholder="Имя" class="Y-required" tabindex="1" confirminfo=".response">
	<input name="E-mail" title="Заполните Е-mail" type="text" class="Y-required" placeholder="e-mail" tabindex="2" confirminfo=".response">
	<textarea name="message" title="Заполните сообщение" class="Y-required" placeholder="Сообщение" tabindex="3" confirminfo=".response"></textarea>
	<input type="radio" id="radio1" class="Y-required" name="radio">
	<label for="radio1">radio 1</label>
	<input type="radio" id="radio2" class="Y-required" name="radio">
	<label for="radio2">radio 2</label>
	<input type="radio" id="radio3" class="Y-required" name="radio">
	<label for="radio3">radio 3</label>
	<input type="checkbox" class="checkbox Y-required" title="Необходимо согласие с правилами" id="checkbox" tabindex="4" confirminfo=".response">
	<label for="checkbox">Я ознакомился и согласен с правилами</label>

	<button class="btn btn-contact" type="submit" name="submitbtn" tabindex="5" value="Отправить">Отправить</button>
	<div class="response"></div>
</form>

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

2.1. Тег form:

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

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


<?php
// include шапки письма. Удобно использовать для множества шаблонов, где шапка письма остается неизменной
include "header.tpl";
// Тема письма. Параметр необходимы в процедуре отправки письма средствами PHPMailer
$subject = "Форма обратной связи"; 
// Сообщение, которое возвращает серверный обработчик function-send-form.php
$return_msg = "Ваша заявка успешно отправлена!";
 ?>

	<h1>Заказ обратного звонка от: <?php echo $name;?></h1>

	<p style="font-size: 16px;">Данные для обратной связи: <?php echo $email;?></p>

	<p style="font-size: 16px;">Время обратного звонка: <?php $time = date("F j, Y, g:i a"); echo $time;?></p>
				
	<p style="font-size: 16px;">Текст сообщения: <?php echo $message;?></p>

// include футера письма, аналогично шапке
<?php include "footer.tpl"; ?>

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

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

Завершение

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


Выберите город