PHP + AJAX скрипт отправки форм на E-mail

PHP скрипты и решения: PHP + AJAX скрипт отправки форм на E-mail

Привет, Друзья! Хочу представить вашему вниманию универсальный скрипт отправки данных из форм на email. Скрипт идеально подойдет для сайтов типа Landing Page, сайтов визиток и т.д. Наш скрипт Формы обратной связи выделяется среди массы остальных скриптов в интернете тем, что имеет возможность подключения неограниченного количества форм с разными полями на одной странице и способен отправлять письма нескольким получателям.

Итак. Давайте приступим. Начнем пожалуй с возможностей скрипта.
  1. Подключение неограниченного количества форм на одной странице.
  2. Проверка правильности заполнения полей.
  3. Настройка уведомлений.
  4. Возможность использования шаблонов писем для каждой формы.
  5. Тип письма — (если используются html теги)
  6. Отправка на неограниченное количество адресов.
  7. Индивидуальная настройка каждой формы.
  8. Скрипт работает на , без перезагрузки страницы.
  9. Защита от спам ботов.

Первоначальная настройка.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/jquery.arcticmodal.js"></script>
<script type="text/javascript" src="js/feedback.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).on('click', '.modal_btn', function(){
			$('#small-modal').arcticmodal();
		});
	});
</script>
<link href="css/jquery.jgrowl.css" rel="stylesheet" type="text/css">
<link href="css/jquery.arcticmodal.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">

Скрипт работает на основе библиотеки , поэтому первое что нам необходимо сделать это подключить ее. Для этого рекомендую воспользоваться Google Hosted Libraries.

О остальных файлах давайте подробнее:

feedback.js — основной файл скрипта, отвечает за AJAX отправку формы.
jquery.arcticmodal.js,
jquery.arcticmodal.
— обеспечивают возможность вывода форм в модальном окне.
jquery.jgrowl.js,
jquery.jgrowl.css
— позволяют выводить уведомления на странице (блоки в верхнем углу страницы).

HTML и обязательные атрибуты.


<form action="" name="form-1">
    <input class="name" name="name" type="text" placeholder="Ваше имя">
    <input class="tell" name="tell" type="text" placeholder="Ваш телефон">
    <input class="feedback" name="send" type="button" value="Отправить">
</form>

Обязательным атрибутом для всех элементов формы является атрибут name="" — необходим для последующей настройки формы.
Для кнопки (type=«button») обязательно нужно указать class=«feedback». Так же хочу обратить ваше внимание на то, что в качестве кнопки может выступать любой html тег с классом «feedback».

Вызов формы в модальном окне

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

<div class="modal_btn">Вызов формы в модальном окне</div>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).on('click', '.modal_btn', function(){
			$('#small-modal').arcticmodal();
		});
	});
</script>

Так как форма должна быть видна только в модальном окне ее нужно скрыть, поместив в div с атрибутом style=«display: none;», а также для стилизации модального окна обернуть в парочку стандартных дивов.

<div style="display: none;">
    <div class="box-modal" id="small-modal">
        <div class="modal-close arcticmodal-close">x</div>
        <div class="modal-content-box">
            <!-- Здесь Ваша форма -->
        </div>
    </div>
</div>


Вот мы и разобрались с основными настройками подключения нашего скрипта отправки форм на E-mail. Давайте теперь заглянем во внутрь и разберемся с настройкой полей, уведомлений да и всего остального, что там есть.

Пример настроек для одной формы

Настройки всех форм хранятся в файле feedback\index.php

$form['form-1'] = array(
	'fields' => array(
		'name' => array(
			'title' => 'Имя',
			'validate' => array(
				'preg' => '%[A-Z-a-zА-Яа-я\s]%',
				'minlength' => '3',
				'maxlength' => '35',
			),
			'messages' => array(
				'preg' => 'Поле [ %1$s ] возможно содержит ошибку',
				'minlength' => 'Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s',
				'maxlength' => 'Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s',
			)
		),
		'tell' => array(
			'title' => 'Телефон',
			'validate' => array(
				'preg' => "/^((8|\+)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{5,10}$/",
				'minlength' => '5',
			),
			'messages' => array(
				'preg' => 'Поле [ %1$s ] возможно содержит ошибку',
				'minlength' => 'Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s',
			)
		),
	),
	'cfg' => array(
		'charset' => 'utf-8',
		'subject' => 'Тема письма',
		'title' => 'Заголовок в теле письма',
		'ajax' => true,
		'validate' => true,
		'from_email' => 'noreply@email.com',
		'from_name' => 'noreply',
		'to_email' => 'noreply1@email.com, noreply2@email.com',
		'to_name' => 'noreply1, noreply2',
		'geoip' => true,
		'referer' => true,
		'type' => 'html',
		'tpl' => true,
		'antispam' => 'email77',
		'antispamjs' => 'address77',
		'okay' => 'Сообщение отправлено - OK',
		'fuck' => 'Сообщение отправлено - ERROR',
		'spam' => 'Cпам робот',
		'notify' => 'color-modal-textbox',
		'usepresuf' => false
	)
);

// Следующая форма
$form['form-2'] = array(
	'fields' => array(
.....

Для добавления настроек новой формы, нужно по примеру массива $form['form-1'] создать новый массив $form['']

Помните я говорил о обязательном атрибуте name=""?
Обязательным атрибутом для всех элементов формы является атрибут name="" — необходим для последующей настройки формы.
Так вот пришло время рассказать для чего же он все таки нужен.
name="" — это буквенно-цифровой ключ для массива, должен быть уникальным для массива $form['']

Пример html кода для наглядности

<form action="" name="form-1">
    <input class="name" name="name" type="text" placeholder="Ваше имя">
    <input class="tell" name="tell" type="text" placeholder="Ваш телефон">
    <input class="feedback" name="send" type="button" value="Отправить">
</form>
<form action="" name="form-2">
    <input class="name" name="name" type="text" placeholder="Ваше имя">
    <input class="tell" name="tell" type="text" placeholder="Ваш телефон">
    <input class="email" name="email" type="text" placeholder="Ваш E-mail">
    <input class="feedback" name="send" type="button" value="Отправить">
</form>


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

$form['form-1'] = array();
$form['form-2'] = array(); и т.д.
Это основные массивы для каждой новой формы, содержат в себе:
  1. 'fields' => array(); — Массив настроек элементов формы.
    • 'name' => array(); — Массив настроек элемента формы (например input name=«name» type=«text») который имеет ряд настроек.
      • 'title' => 'Ваше имя' — название элемента формы, будет выводится при ошибках или в шаблоне
      • 'validate' => array(); — массив, содержит правила валидации элемента формы
        • 'preg' => '%[A-Z-a-zА-Яа-я\s]%' — регулярное выражение
        • 'minlength' => '3' — минимальный размер поля
        • 'maxlength' => '35' — максимальный размер поля
        • 'substr' => '35' — всегда обрезать до N символов
      • 'messages' => array(); — массив, содержит сообщения валидации, а именно:
        • 'preg' => 'Элемент формы не соответствует регулярному выражению' — ошибка валидации, ключ(preg) не соответствие ключу валидации
        • 'minlength' => 'Минимальная длинна поля [ %1$s ] меньше допустимой — %2$s' — ошибка валидации, ключ(preg) не соответствие ключу валидации
        • 'maxlength' => 'Максимальная длинна поля [ %1$s ] превышает допустимую — %2$s' — ошибка валидации, ключ(preg) не соответствие ключу валидации

  2. 'cfg' => array(); — Массив настроек формы.
    • 'charset' => 'utf-8' — кодировка
    • 'subject' => 'Тема письма', — Тема письма
    • 'title' => 'Заголовок в теле письма', — Заголовок в теле письма
    • 'ajax' => true, — это аякс форма TODO (если не нужно, поставить — false)
    • 'validate' => true, — (true) если хотим валидацию формы на сервере, заменяет js валидацию при 'ajax' => true. Когда выкл(false) то можно не задавать настройки validate полей. TODO
    • 'from_email' => 'myemail', — отправитель, указать имя поля(name=«myemail»), а если не нужно email от пользователя, тогда заглушку noreply@email.com
    • 'from_name' => 'myname', — отправитель, указать имя поля(name=«myname»), а если не нужно имени пользователя, тогда заглушку No-reply
    • 'to_email' => 'noreply1@email.com', — email получателя. Для отправки на несколько адресов перечислить их через запятую. Пример ('to_email' => 'noreply1@email.com, noreply2@email.com, noreply3@email.com',)
    • 'to_name' => 'noreply1', — Имя получателя. При отправке на несколько адресов через запятую перечислить имена получателей. Пример ('to_name' => 'noreply1, noreply2, noreply3',)
    • 'geoip' => true, — узнать местоположение по типу TODO
    • 'referer' => false, — добавлять URL страницы с которой была отправлена форма
    • 'type' => 'plain', — тип письма — plain, html (если используются html теги)
    • 'tpl' => false, — использовать шаблон письма. Если true, то будет подключен файл шаблона, в соответствии с именем формы (name=«form-1»), из папки и обработан файл (feedback/tpl/form-1.tpl), в противном случае будет отправлено все как есть, каждое поле с новой строки
    • 'antispam' => 'email77', — Анти спам, метод основан на скрытом (display:none) поле, которое автоматом заполняет только робот, тем самым выдает себя.
    • 'antispamjs' => 'address77', — Анти спам, метод основан на скрытом (display:none) поле, изначально заполненное, которое автоматически очищает javascript при загрузке страницы, даже умный робот не может это предвидеть, и тогда он блокируется.
    • 'okay' => 'Сообщение пользователю', — Сообщение пользователю, выводится при условии успешно отправленной формы, можно использовать html теги.
    • 'fuck' => 'Сообщение пользователю', — Сообщение пользователю, выводится при возникновении ошибки отправки формы, можно использовать html теги.
    • 'spam' => 'Сообщение пользователю', — Сообщение пользователю, выводится при подозрении на спам робот, можно использовать html теги.
    • 'notify' => 'color-modal', — какой тип уведомлений показывать, textbox — блоки в верхнем углу страницы, color — цветная подсветка в форме, modal — модальное окно в центре страницы, none — отключить. Можно совмещать, пример: color-modal — ошибки заполнения подсветкой полей, а текстовый статус отправки в модальном окне TODO
    • 'usepresuf' => false — Используется ли кастомное добавление к теме либо к заголовку письма, на случай не большого изменения можно указать например %%cfg.title.suffix%%, для этого в форме должно быть скрытое поле, подробнее, см. ф-цю presuf()

Настройка шаблонов писем

Итак. давайте теперь разберемся с темизацией наших сообщений.
Во-первых, для того, что-бы форма была отправлена в шаблоне, в настройках формы нужно включить использование файла шаблона — 'tpl' => true,
Во-вторых, нужно создать файл шаблона с расширением *.tpl в папке (feedback/tpl/), в соответствии с именем формы (name=«form-1»).

Пример: (feedback/tpl/form-1.tpl)

<table style="background:#eee; color:#333; border:solid 1px #000000;">
  <tr>
    <td colspan="2"><strong>Заголовок в теле письма</strong></td>
  </tr>
  <tr>
    <td>%%name.title%%</td>
    <td>%%name.value%%</td>
  </tr>
  <tr>
    <td>%%tell.title%%</td>
    <td>%%tell.value%%</td>
  </tr>
</table>


name, tell и т.д. — Это атрибуты (name="") полей которые заполняет пользователь.
title — Название элемента формы, которое задается в массиве настроек элементов формы.
value — Значение элемента формы.

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

P.S. Скрипт разработан командой Airvix

Демо и Скачать
Ссылка на демонстрацию скрипта
Скачать скрипт
Напишите свой комментарий
comments powered by HyperComments