Ajax RDmailform - форма отправки сообщений без перезагрузки страницы

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

Код формы базируется на двух js: jquery.form.min.js – для ajax отправки и jquery.rd-mailform.min.js – валидация полей + календарь (связана с jquery.form.min.js). Данную форму я нашел на западном сайте, она настолько мне понравилось, что пришлось потратить день, чтобы понять принцип ее работа, а также создать удобный пакет установки.

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

Скриншоты:

Особенности формы:
– может через ajax передовать файлы в любом количестве на почту
– вместо checbox и радиокнопок используются select-ы
– можно задавать иконки на каждое поле, по умолчанию карандаш
– можно создавать любое количество таких форм
– есть валидация полей
– красивые статусы ошибки/отправки формы
– из главного минуса – нет мультиселектов (только если обрубить select в jquery.rd-mailform.min.js)
– адаптивный дизайн (форма сама подстраивается под размер экрана с viewport)
– если поле создать с типом type=”date”, то к нему автоматически подгрузится календарь

Установка формы

В скачанном примере просто скопировать форму с классом rd-mailform. В action поставьте ссылку на исполняющий php файл.

Добавление поля на примере input (главное, чтобы различались name полей):
<div class=”form-group”>
<label data-add-placeholder data-add-icon>
<input placeholder=”Ваше имя” type=”text” name=”name” data-constraints=”@NotEmpty @LettersOnly”/>
</label>
</div>

В label:
data-add-placeholder – для эффекта исчезновения placeholder (при клике)
data-add-icon – добавляет иконку (font-awesome) для поля в зависимости от ИМЕНИ поля. (В этом случае всегда должен быть type=”text”).

В input:
data-constraints=”@SelectRequired” – условие перед отправкой поля (обязательные поля или формат записи). Возможные значения внизу.

Доступные иконки:
Карандаш (по умолчанию): name=”msg*”,
ФИО: name=”name*”, Почта: name=”email*”,
Телефон: name=”phone*”,
Дата: name=”date*”,
Люди: name=”guests*”
Новые иконки можно добавить в rd-mailform.css (1294 строка)

Форматы полей и обязательные поля:
‘@LettersOnly‘: {message: ‘Пожалуйста, используйте только буквы!’},
‘@NumbersOnly‘: {message: ‘Пожалуйста, используйте только цифры!’},
‘@NotEmpty‘: {message: ‘Поле не должно быть пустым!’},
‘@Email‘: {message: ‘Введите верный адрес электронной почты!’},
‘@Phone‘: {message: ‘Введите правильный номер телефона!’},
‘@Date‘: {message: ‘Используйте MM.DD.YYYY формат!’},
‘@SelectRequired‘: {message: ‘Пожалуйста, выберите вариант!’}

Статусы отправки – что должен возвращать php обработчик, после успешной/не успешной отправки сообщения:
‘MF000‘: ‘Отправлено!’,
‘MF001‘: ‘Получатель не устанавлен!’,
‘MF002‘: ‘Форма не будет работать локально!’,
‘MF003‘: ‘Пожалуйста, заполните поле email в форме!’,
‘MF004‘: ‘Пожалуйста, определите тип Вашей формы!’,
‘MF254‘: ‘Что-то не сработало в функции PHPMailer!’,
‘MF255‘: ‘Произошла ошибка отправки формы!’