Отправка данных формы на email с помощью php и ajax

Отправка данных формы на email с помощью php и ajax

В данной заметке представлен рабочий скрипт для отправки данных формы на почту без перезагрузки страницы. С минимальными изменениями этот скрипт можно скопировать и использовать в любом проекте и на любой CMS, т.е. он полностью рабочий. Единственное, о чем стоит сказать отдельно: В этой заметке я не уделил внимание визуальной красоте формы, так как основная тема, в данном случае, все-таки сам механизм работы. Онлайн-демо, по понятным причинам, также не представлено.

1. Разметка формы

Итак, для начала нужно создать саму форму (все id и имена я указываю сразу, чтобы не удлинять повествование).

Обратите внимание, для формы на ajax не указываются атрибуты method и action (они будут указаны позже, в JS-коде). Также все поля в данном случае обязательны для заполнения (атрибут required), но это совершенно не обязательно. Обязательным требованием является указание атрибутов name и id. На этом с html закончили (Для того, чтобы форма была красивой нужно добавить классы к тегам и применить css-стили к данным классам и, по желанию, к указанным id).

2. PHP-скрипт отправки

Далее следует создать php-файл, который будет обрабатывать данные, полученные из формы, и отправлять их на указанный в скрипте email. В нашем случае файл называется «form_ask_us_ru.php».
Сам код будет выглядеть так, как показано ниже:

Итак, в данном скрипте все данные из формы забираются через переменные вида $_POST[»];, после этого, все письмо объединяется в переменной $AllInOne. Переменная $to — это почта, на которую будут высланы данные формы, $headers — «заголовки» письма (от кого, адрес для ответа, кодировка письма). Далее следует функция mail(), которая принимает в качестве аргумента все вышеуказанные переменные. Текст «Свяжитесь с нами», принятый в качестве аргумента, в данном случае — это тема письма.

3. Ajax-скрипт + базовая анимация

В принципе, скрипт с небольшими модификациями, может работать и без ajax, но нас интересует именно отправка формы без перезагрузки страницы, поэтому продолжаем. Совершенно неважно как будет подключаться javascript-код в страницу: отдельным файлом или же прямо перед закрывающим . Я, обычно, подключаю прямиком в шаблон (но это, скорее, дело привычки). И так, сам код выглядит следующим образом:

Первая строка — это обработка события по отправке формы, триггером в данном случае служит id тега form. Далее появляется переменная с id popup_text — это всего лишь пустой контейнер div с таким айди, размещенный в любом месте страницы/шаблона. Строка url — содержит ссылку на файл-обработчик данных, типом отправки указывается POST. Метод serialize() — возвращает строку в виде, пригодном для обработки php-скриптом (Это если совсем упрощенно). В случае успеха происходит обработка успешной отправки и в ранее пустом контейнере popup_html всплывает надпись «Ваше сообщение успешно отправлено!», которое постепенно растворяется на экране (Тут можно выбрать другой эффект анимации, либо поиграться с таймингом, это все на вкус и цвет). Методы .val(), примененные к каждому элементу формы — очищают форму от ранее введенных данных (Если этого не требуется, то можно убрать эти строки). В блоке error — можно настроить обработку возможных ошибок при отправки данных, но это не относиться к теме данной статьи.

Итог: На выходе имеем полностью рабочий скрипт, который был апробирован на разных сайтах и CMS. Можно забирать и пользоваться. Надеюсь, заметка была достаточно полезной.