Как настроить форму обратной связи на сайте

Как настроить форму обратной связи на сайте

От автора: приветствую вас, друзья. Данная статья будет продолжением статьи, в которой мы реализовывали отправку данных формы на сервер без перезагрузки страницы. Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (email). Итак, давайте настроим форму обратной связи и добавим возможность ее отправки на email.

Исходные файлы текущей статьи вы можете скачать по ссылке.

В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.

Начнем с синтаксиса функции mail. Данная функция имеет три обязательных параметра и два опциональных (не обязательных). Обязательные параметры:

to — email получателя (также можно указать несколько адресов, перечислив их через запятую);

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

subject — тема письма;

message — текст письма.

Из опциональных параметров практически всегда используется только первый, который отвечает за заголовки письма: кодировка, отправитель, тип письма и др.

Давайте попробуем отправить письмо, используя данную функцию. Сделаем это в файле mail.php, в котором мы принимаем данные из формы. Новый код данного файла будет таким:

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

Как видим, код работает, в ответ мы получаем сообщение о том, что письмо отправлено. Поскольку мы работаем на локальном сервере, здесь письма реально не отправляются функцией mail(), они сохраняются в виде текстового файла в специальной папке. В Open Server это папка \userdata\temp\email\. Откроем эту папку и убедимся, что письмо там есть, примерно так оно будет выглядеть:

Отлично! Осталось несколько моментов, которые не помешает поправить в JS скрипте. Например, необходимо выводить сообщение не простым текстом, а именно кодом HTML, а также очищать поля формы после отправки сообщения. Итоговый JS код будет таким:

Теперь все гораздо лучше, письмо из формы отправляется и поля формы очищаются:

Как видим, все работает. Однако на практике функцию mail использовать для отправки сообщений не всегда получится. Некоторые хостеры не предоставляют услугу отправки писем, часто письма, отправленные с хостинга, попадают в спам или не доставляются до адресата. В этом случае рекомендуется отправлять письма через SMTP популярных почтовых серверов: gmail, yandex и т.п. Как это сделать мы узнаем в следующей статье.

Ну а на этом текущую статью мы завершаем. Дополнительно по работе с формами вы можете посмотреть этот урок. Удачи!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (16)

  1. Сергей

    Всё вроде верно, но при установке на сайт, форма письма не отправляет. Скрипт не работает.
    Причём более простая форма, с перезагрузкой работает без проблем и письма приходят.

    • Андрей Кудлай

      Значит, что-то делаете не так, где-то допускаете ошибку.

      • Сергей

        Спасибо за ответ.
        Но копирую все с исходных файлов, интегрируя в свою страницу.
        Может быть проблема в конфликте скриптов?

        • Андрей Кудлай

          Может быть… здесь можно только гадать, в чем проблема. Точно можно попробовать сказать, только посмотрев проблему.

          • Сергей

            Спасибо. Буду разбираться.

          • Андрей Кудлай

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

  2. Сергей

    Спасибо, Андрей! Проблема была в конфликте скрипта со скриптом elastislide.
    Я его отключил, и все заработало. Благо слайд этот я не использовал.

    • Сергей

      А, нет, извините, поторопился — elastislide использую и немало. Получается этот скрипт обратной связи использовать не могу? И почему они конфликтуют?

      • Андрей Кудлай

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

        • Сергей

          Андрей, я сделал вот что — в файле scripts.js переставил скрипт elastislide после скрипта формы, и снова все заработало. Не знаю, что изменилось в принципе.
          Пока я пробовал на тестовой странице и показать нечего. Но задумывал как форму обратной связи (немного переделав, и добавив окно сообщения) из верхнего меню. Все оформлю — покажу. Сайт верстал основываясь на Вашем курсе по Bootstrap, отсюда и elastislide.
          Спасибо за отличные уроки для разработчика. Особенно для самоучек.

  3. Сергей

    Добрый день, Андрей!
    Установил форму (обратная связь в верхнем меню) на сайт, и немного видоизменил добавив окно сообщений — textarea.
    Всё работает нормально, письма приходят.
    Есть один вопрос. Я вероятно что-то не поменял в скрипте, и окно сообщений у меня после отправки не очищается. Как это можно исправить?
    km1954.ru

    • Андрей Кудлай

      Здравствуйте, Сергей.
      Скрипт просто очищает все поля input, а здесь поле textarea. Чтобы очистить и его, можно немного изменить первую строку блока success, вот так:
      $('#recall').find('input, textarea').val('');
      Другой вариант, заменить эту строку такой:
      $('#recall')[0].reset();

      • Сергей

        Спасибо Андрей! Попробую, отпишусь.

        • Сергей

          Спасибо, Андрей! Всё получилось. Единственное, у меня почему-то не выдаёт ошибку при отправке пустой формы. Просто отправляет. Приходит пустое письмо.

          • Андрей Кудлай

            Пожалуйста, Сергей.
            Для запрета отправки пустой формы — необходима ее проверка на клиенте и сервере. Самый простой и быстрый вариант — добавить для обязательных полей атрибут required.

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree