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


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

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

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

feedback.js — основной файл скрипта, отвечает за AJAX отправку формы.
jquery.arcticmodal.js,
jquery.arcticmodal.css — обеспечивают возможность вывода форм в модальном окне.
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(); — Массив настроек элементов формы.
  2. 'cfg' => array(); — Массив настроек формы.

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

Итак. давайте теперь разберемся с темизацией наших сообщений.
Во-первых, для того, что-бы форма была отправлена в шаблоне, в настройках формы нужно включить использование файла шаблона — '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 — Значение элемента формы.