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

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

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

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

Скриншоты:

2 1

Особенности формы:
- может через 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': 'Произошла ошибка отправки формы!'

Статус организовать очень просто, например, если в mail.php у вас форма отправилась успешно, то пишите: echo 'MF000';

В php обработчик вся информация передается методом serialize(), поэтому там могут быть и файлы $_FILES.

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

  1. Все, спасибо разобрался. 1) Не надо было менять кодировку файла mail.php, 2) Не обратил внимания что в исходниках поле в форме прописано как msg, а в обработчике как message

  2. А как ваш первый пример перевести на cp1251? Просто пересохранение файлов в эту кодировку не помогает. Форма встала, все работает, а вот письма приходят пустые. Из поля где пишем текст ничего в письмо не падает.
    Если не меняю кодировку в обработчике то тупо пропадают поля ИМЯ и ТЕКСТ, если меняю, то имя кракозябрами, а ТЕКСТ отсутствует.

  3. Добрый вечер! Думаю что штука хорошая но в php вообще ни бельмеса)) Можно подробнее и по пунктам?
    Что сделал. 1)Это jquery.form.min.js и это jquery.rd-mailform.min.js закинул в папку js и присоединил в index.html

    В хеаде после jquery, правильно?
    2) body просто скопировал и вставил:
    Простая форма с валидацией

    Отправить

    3) mail.php кидаю в корень просто как в "action" написано. В строчке $to = 'ваш_ящик@mail.ru'; просто сюда в кавычки втасляю свой е-майл. Пробую отправить - не работает?
    4) Что дальше делать подскажите пожалуйста - буду ОЧЕНЬ благодарен, как и тысячи ваших читателей.

    1. 1. правильно (jquery подключен? + css не забудьте), 2 верно, 3 - должен быть там же, где и ваш index.html, 4 в mail.php раскомментируйте 14 строку.

  4. Марина Вы все правильно сделали. Просто форма расчитана на тех, кто хоть немного знает php. Функция майл была закомментирована, так как форма может использоваться не только для отправки писем, но например запись в БД. Второй вариант не доделал, но любому программисту не составит труда потратить пару часов для ее создания. Если Вам нужна форма именно с загрузкой файлов, радиокнопками и т.д. и Вы не знаете как ее сделать, то просто воспользуйтесь моим конструктором https://blogjquery.ru/wp-content/files/services/bestkonst/forma.php - там за Вас все сделает скрипт.

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

    У Вас форма вторая мне идельно для сайта подходит, но вот что не так не пойму(((

    Раскомvентирова строку mail($to, $subject, $msgotprav, $headerss); и с первой формы начала получать сообщения, а по второй форме, что не так может быть. Я просто в php вообще не разбираюсь, только догадками. В скачанных скриптах php по второй форме не прописано, верно?

  6. Форма работает отлично! У вас конфликт скриптов или настроили неправильно. Можете попробовать на хостинг закинуть в корень файлы формы. Проверьте mail.php - может там сделали ошибки. Даже в демонстрации все работает.

  7. Форма не работает. Мне нужен второй вариант формы, но даже первую выложив на хостинг и указав свой e-mailне приходят сообщения! Помогите разобраться.

Добавить комментарий для Леонид Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Введите капчу: