Красивая форма обратной связи для сайта

В этой статье рассмотрим, как сделать форму обратной связи для сайта, используя HTML, Bootstrap, JavaScript (jQuery) и PHP. Особенности: работа формы без перезагрузки страницы (ajax), наличие защиты (капчи), возможность прикрепления файлов к форме, отправка формы на почту с вложениями.

Понятие формы обратной связи

Форма обратной связи - это HTML-форма, посредством которой администратор или менеджер сайта сможет получать данные от пользователей. Другими словами это один из способов, с помощью которого одни пользователи (посетители сайта) могут взаимодействовать с другими пользователями (менеджерами или администраторами сайта).

Создание формы обратной связи

Разрабатывать форму обратной связи начнём с описания основных частей этой системы, их функций, а также того как эти части связаны между собой.

Структуру формы обратной связи можно представить в виде 2 основных частей: клиентской и серверной.

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

Клиентская часть - это HTML-форма, CSS стили (оформление формы) и сценарий JavaScript с AJAX.

Создание формы обратной связи начнём с разработки HTML-формы. В этой статье HTML форму представим с помощью 3 обязательных полей (имя пользователя, адреса email и сообщения), элементов, с помощью которых вы можете прикрепить файлы к форме, капчи (для защиты формы от спама) и кнопки для отправки формы на сервер. Но это не означает то, что вы ограничены только этими элементами. При необходимости вы можете добавить новые элементы или удалить существующие. Перед отправкой формы обратной связи на сервер её поля желательно проверить на корректность заполнения. Это процедура позволит снизить нагрузку на сервер, т.к. предварительная валидация данных будет производиться в браузере пользователя. Осуществить эту процедуру можно посредством сценария (кода) JavaScript. Для написания данного кода воспользуемся HTML5 функцией checkValidity, атрибутами элементов и регулярными выражениями. После проверки данных необходимо определиться с тем как необходимо форму передавать на сервер, т.е. с использованием AJAX или нет. Этот выбор определит дальнейшие шаги по созданию формы обратной связи на сайте. В этой статье будем рассматривать взаимодействие клиента (браузера пользователя) с сервером по технологии AJAX. Это означает то, что форма обратной связи будет работать без перезагрузки страницы.

Основные функции, которые будет выполнять скрипт для обработки формы обратной связи на стороне клиента:

  • осуществлять проверку полей формы перед их отправкой на сервер
  • получать данные формы после валидации;
  • отображать на форме максимальное количество файлов, которые пользователь может отправить на сервер;
  • добавлять в форму новый элемент "Выбрать файл";
  • выводить после выбора файла сообщение о том, соответствует ли он установленным критериям или нет (файлы, которые не соответствуют условиям, отправлены на сервер не будут);
  • обновление код капчи (запрашивание нового изображения с сервера);
  • подготавливать данные формы для отправки их на сервер (посредством объекта FormData);
  • отменять отправку формы обратной связи на сервер стандартным образом, для взаимодействия с сервером использовать технологию AJAX;
  • отправлять данные формы на сервер (на указанный URL с помощью запроса POST);
  • получать ответ с сервера;
  • разбирать ответ и в соответствии с ним обновлять элементы страницы.

После разработки клиентской части обратной связи перейдём к реализации северной.

Серверная часть будет состоять из php-скриптов, которые будут выполнять следующие основные функции:

  • генерировать капчу;
  • выполнять обработку формы только в том случае, если запрос на сервер был послан посредством метода POST;
  • выполнять проверку (валидацию) полей формы;
  • проверять валидность кода капчи, введённой пользователем;
  • проверять атрибуты файлов, загруженных пользователем;
  • перемещать файлы под уникальными именами в директорию /feedback/files;
  • отправлять письма с вложениями или выполнять какие-либо другие действия (например, сохранять данные формы в файл);
  • отправлять клиенту (браузеру пользователя) результат (ответ) в формате JSON, содержащий сведения об успехе или возникшие ошибки.

Скачать форму обратной связи для сайта

Скачать ajax форму обратной связи с капчей и возможностью прикрепления к ней файлов можно с github или yandex хранилища.

GitHub Yandex

Файлы имеют кодировку UTF-8 без BOM. Для проверки работоспособности формы в Денвере необходимо в корне сайта создать файл .htaccess и добавить в него строчку:

AddDefaultCharset UTF-8

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

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

Форма обратной связи после копирования будет доступна на сайте, имеющим имя "ИмяСайта", по адресу:

ИмяСайта/feedback/

По умолчанию данная форма отправляет сведения, введённые пользователем, на указанный в файле verify.php адрес электронной почты. Если пользователь при отправке формы, прикрепил к ней файлы, то они будут прикреплены к письму. Это алгоритм работы формы обратной связи по умолчанию.

Настраивается адрес email получателя и другие параметры электронной почты посредством следующих строк в файле verify.php:

// электронный адрес отправителя
$mail->From = 'email@mysite.ru';
// имя отправителя
$mail->FromName = 'Имя сайта';
// тема письма
$mail->Subject = 'Сообщение с формы обратной связи';
// адрес получателя
$mail->AddAddress('myemail@mail.ru');

Кроме этого данная форма позволяет не прикреплять файлы к письму, а указывать их в теле с помощью ссылок.

Чтобы это осуществить, достаточно закомментировать в файле verify.php одни строчки (1) и раскомментировать другие (2).

// если не используем прикрепление файлов
// отправляем файлы в качестве ссылок в теме письма
if (isset($files)) { // (2) начало раскоментирования 
  $output .= "Файлы: " . "\n";
  foreach ($files as $value) {
    $href = substr($value,strpos($value, '/feedback/'));
    $output .= '<p><a href="'.$href.'">'.$href.'</a></p>' . "\n";
  }
} // (2) конец раскоментирования

// создаём экземпляр класса PHPMailer
$mail = new PHPMailer;

$mail->From = 'email@mysite.ru';
$mail->FromName = 'Имя сайта';
$mail->Subject = 'Сообщение с формы обратной связи';
$mail->Body = $output;
$mail->AddAddress( 'myemail@mail.ru' );

// прикрепляем файлы к письму
/*if (isset($files)) { // (1) начало комментирования
  foreach ($files as $value) {
    $output .= $value . "\n";
    $mail->addAttachment($value);
  }
 }*/ // (1) конец комментирования

Кроме отправки формы на email, её также можно настроить так, чтобы она отправляла данные в файл.

Осуществляется это следующим образом (1 - раскоментирован, 2 - полностью закомментирован):

//1. Сохрание формы в файл
$output = "---------------------------------" . "\n";
$output .= date("d-m-Y H:i:s") . "\n";
$output .= "Имя пользователя: " . $name . "\n";
$output .= "Адрес email: " . $email . "\n";
$output .= "Сообщение: " . $message . "\n";
if (isset($files)) {
  $output .= "Файлы: " . "\n";
  foreach ($files as $value) {
     $output .= $value . "\n";
  }
}
if (file_put_contents(dirname(__FILE__).'/message.txt', $output, FILE_APPEND | LOCK_EX)) {
  $data['result']='success';
} else {
  $data['result']='error';         
} 
//2. Отправляем на почту
/*
// включить файл PHPMailerAutoload.php
require_once dirname(__FILE__) . '/phpmailer/PHPMailerAutoload.php';

//формируем тело письма
$output = "Дата: " . date("d-m-Y H:i") . "\n";
$output .= "Имя пользователя: " . $name . "\n";
$output .= "Адрес email: " . $email . "\n";
$output .= "Сообщение: " . "\n" . $message . "\n";

// если не используем прикрепление файлов
// отправляем файлы в качестве ссылок в теме письма
if (isset($files)) {
  $output .= "Файлы: " . "\n";
  foreach ($files as $value) {
    $href = substr($value,strpos($value, '/feedback/'));
    $output .= '<p><a href="'.$href.'">'.$href.'</a></p>' . "\n";
  }
}

// создаём экземпляр класса PHPMailer
$mail = new PHPMailer;

$mail->From      = 'email@mysite.ru';
$mail->FromName  = 'Имя сайта';
$mail->Subject   = 'Сообщение с формы обратной связи';
$mail->Body      = $output;
$mail->AddAddress( 'myemail@mail.ru' );

// прикрепляем файлы к письму
if (isset($files)) {
  foreach ($files as $value) {
     $output .= $value . "\n";
     $mail->addAttachment($value);
  }
}

// отправляем письмо
if ($mail->Send()) {
  $data['result']='success';
} else {
  $data['result']='error';
} */

Кроме настройки вывода, форма обратной связи также позволяет достаточно просто изменить параметры, связанные с загрузкой файлов. Эти параметры собраны в начале файла script.js. Они позволяют установить максимальное количество файлов для загрузки (countFiles), типы разрешённых к загрузке файлов (typefile) и максимальный размер, который может иметь файл (maxsizeFile).

// максимальное количество файлов 
var countFiles = 5;
// типы разрешённых файлов
var typeFile = 'image.*';
// максимльный размер
var maxSizeFile = 524288; //512 Кбайт

Описание готовой формы обратной связи для сайта

В этом разделе опишем назначение основных файлов клиентской и серверной части готовой формы обратной связи.

Клиентская часть формы обратной связи состоит из следующих файлов:

  • index.html (веб-страница, содержащая html5 форму обратной связи);
  • script.js (JavaScript сценарий, который подключен к странице index.html);
  • bootstrap.min.css, bootstrap.min.js (CSS стили и JavaScript плагины Bootstrap)
  • jquery-1.12.4.min.js (библиотека jQuery, необходимая для работы плагинов Bootstrap и скрипта script.js);
  • glyphicons-halflings-regular.eot и др. (файлы, содержащие значки и символы в формате шрифта Glyphicons).

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

Содержимое файла index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Форма обратной связи</title>
  <link rel="stylesheet" href="/feedback/css/bootstrap.min.css">
</head>
<body>
  <h1 class="text-center">Форма обратной связи</h1>
  <hr>

  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <!-- Контейнер, содержащий форму обратной связи -->
        <div class="panel panel-info">
          <!-- Заголовок контейнера -->
          <div class="panel-heading">
            <h3 class="panel-title">Форма обратной связи</h3>
          </div>
          <!-- Содержимое контейнера -->
          <div class="panel-body">

            <!-- Сообщение, отображаемое в случае успешной отправки данных -->
            <div class="alert alert-success hidden" role="alert" id="msgSubmit">
              <strong>Внимание!</strong> Ваше сообщение отправлено.
            </div>

            <!-- Форма обратной связи -->
            <form id="messageForm" enctype="multipart/form-data">
              <div class="row">

                <div id="error" class="col-sm-12" style="color: #ff0000; margin-top: 5px; margin-bottom: 5px;"></div>
                <!-- Имя и email пользователя -->
                <div class="col-sm-6">
                  <!-- Имя пользователя -->
                  <div class="form-group has-feedback">
                    <label for="name" class="control-label">Введите ваше имя:</label>
                    <input type="text" id="name" name="name" class="form-control" required="required" value="" placeholder="Например, Иван Иванович" minlength="2" maxlength="30">
                    <span class="glyphicon form-control-feedback"></span>
                  </div>
                </div>
                <div class="col-sm-6">
                  <!-- Email пользователя -->
                  <div class="form-group has-feedback">
                    <label for="email" class="control-label">Введите адрес email:</label>
                    <input type="email" id="email" name="email" class="form-control" required="required"  value="" placeholder="Например, ivan@mail.ru" maxlength="30">
                    <span class="glyphicon form-control-feedback"></span>
                  </div>
                </div>
              </div>

              <!-- Сообщение пользователя -->
              <div class="form-group has-feedback">
                <label for="message" class="control-label">Введите сообщение:</label>
                <textarea id="message" class="form-control" rows="3" placeholder="Введите сообщение, состоящее не менее чем из 20 символов и не более чем из 500" minlength="20" maxlength="500" required="required"></textarea>
              </div>

              <!-- Файлы, для прикрепления к форме -->
              <div class="form-group">
                <p style="font-weight: 700;">Прикрепить к сообщению файлы (максимум <span id="countFiles"></span>):</p>
                <!-- Файл -->
                <input type="file" name="images[]">
                <p style="margin-top: 3px; margin-bottom: 3px; color: #ff0000;"></p>
              </div>
              <hr style="margin-top: 3px; margin-bottom: 3px;">

              <!-- Капча к форме -->
              <!-- Изображение, содержащее код CAPTCHA-->		  
	            <img id="img-captcha" src="/feedback/captcha.php">
              <!--Элемент, запрашивающий новый код CAPTCHA-->
	            <div id="reload-captcha" class="btn btn-default"><i class="glyphicon glyphicon-refresh"></i> Обновить</div>
	            <!--Блок для ввода кода CAPTCHA-->
	            <div class="form-group has-feedback">
                <label id="label-captcha" for="captcha" class="control-label">Пожалуйста, введите указанный на изображении код:</label>
	              <input id="text-captcha" name="captcha" type="text" class="form-control" required="required" value="" minlength="6" maxlength="6" autocomplete="off">
	              <span class="glyphicon form-control-feedback"></span>
              </div>

              <!-- Кнопка, отправляющая форму по технологии AJAX -->  
              <button name="send-message" type="submit" class="btn btn-primary pull-right">Отправить сообщение</button>
            
            </form><!-- Конец формы -->
          </div>
        </div><!-- Конец контейнера -->

      </div>
    </div>
  </div>

  <script src="/feedback/js/jquery-1.12.4.min.js"></script>
  <script src="/feedback/js/bootstrap.min.js"></script>
  <script src="/feedback/script.js"></script>

</body>
</html>

Содержимое файла script.js с комментариями:

//после загрузки веб-страницы
$(function () {

  // максимальное количество файлов 
  var countFiles = 5;
  // типы разрешённых файлов
  var typeFile = 'image.*';
  // максимльный размер
  var maxSizeFile = 524288; //512 Кбайт
  // отображаем на форме максимальное количество файлов
  $('#countFiles').text(countFiles);
  // при изменения значения элемента "Выбрать файл"
  $(document).on('change','input[name="images[]"]',function(e){
    // если выбран файл, то добавить ещё элемент "Выбрать файл"
    if ((e.target.files.length>0)&&($(this).next('p').next('input[name="images[]"]').length==0) && ($('input[name="images[]"]').length<countFiles)) {
      $(this).next('p').after('<input type="file" name="images[]"><p style="margin-top: 3px; margin-bottom: 3px; color: #ff0000;"></p>');
    }
    // если выбран файл, то..
    if (e.target.files.length>0) {
      // получить файл
      var file = e.target.files[0];
      // проверить размер файла
      if (file.size>maxSizeFile) {
        $(this).next('p').text('* Файл не будет отправлен, т.к. его размер больше 512Кбайт');
      }
      // проверить тип файла
      else if (!file.type.match(typeFile)) {
        $(this).next('p').text('* Файл не будет отправлен, т.к. его тип не соответствует разрешённому');
      }
      else {
        // убираем сообщение об ошибке
        if ($(this).next('p')) {
          $(this).next('p').text('');
        }
      }
    }
    else {
      // если после изменения файл не выбран, то сообщаем об этом пользователю
      $(this).next('p').text('* Файл не будет отправлен, т.к. он не выбран');
    }
  });

  // при нажатии на кнопку "Обновить", выведим новый код капчи
  $('#reload-captcha').click(function () {
    $('#img-captcha').attr('src', '/feedback/captcha.php?id=' + Math.random() + '');
  });

  // при отправке формы messageForm на сервер (id="messageForm")
  $('#messageForm').submit(function (event) {
    // отменим стандартное действие браузера
    event.preventDefault();
    // заведём переменную, которая будет говорить о том валидная форма или нет
    var formValid = true;

    // перебирём все элементы управления формы (input и textarea) 
    $('#messageForm input,#messageForm textarea').each(function () {

      //если этот элемент капча, то не проверять его
      if ($(this).attr('id') == 'text-captcha') { 
        return true;
      }
      //найти предков, имеющих класс .form-group (для установления success/error)
      var formGroup = $(this).parents('.form-group');
      //найти glyphicon (иконка успеха или ошибки)
      var glyphicon = formGroup.find('.form-control-feedback');
      //валидация данных с помощью HTML5 функции checkValidity
      if (this.checkValidity()) {
        //добавить к formGroup класс .has-success и удалить .has-error
        formGroup.addClass('has-success').removeClass('has-error');
        //добавить к glyphicon класс .glyphicon-ok и удалить .glyphicon-remove
        glyphicon.addClass('glyphicon-ok').removeClass('glyphicon-remove');
      } else {
        //добавить к formGroup класс .has-error и удалить .has-success
        formGroup.addClass('has-error').removeClass('has-success');
        //добавить к glyphicon класс glyphicon-remove и удалить glyphicon-ok
        glyphicon.addClass('glyphicon-remove').removeClass('glyphicon-ok');
        //если элемент не прошёл проверку, то отметить форму как не валидную 
        formValid = false;
      }
    });

    //проверяем элемент, содержащий код капчи
    //1. Получаем значение элемента input, содержащего код капчи
    var captcha = $("#text-captcha").val();
    //2. Если длина кода капчи, которой ввёл пользователь не равно 6,
    //   то сразу отмечаем капчу как невалидную (без отправки на сервер)
    if (captcha.length != 6) {
      // получаем элемент, содержащий капчу
      inputCaptcha = $("#text-captcha");
      //найти предка, имеющего класс .form-group (для установления success/error)
      formGroupCaptcha = inputCaptcha.parents('.form-group');
      //найти glyphicon (иконка успеха или ошибки)
      glyphiconCaptcha = formGroupCaptcha.find('.form-control-feedback');
      //добавить к formGroup класс .has-error и удалить .has-success
      formGroupCaptcha.addClass('has-error').removeClass('has-success');
      //добавить к glyphicon класс glyphicon-remove и удалить glyphicon-ok
      glyphiconCaptcha.addClass('glyphicon-remove').removeClass('glyphicon-ok');
    }

    // форма валидна и длина капчи равно 6 символам, то отправляем форму на сервер (AJAX)
    if ((formValid) && (captcha.length == 6)) {

      // получаем имя, которое ввёл пользователь	
      var name = $("#name").val();
      // получаем email, который ввёл пользователь
      var email = $("#email").val();
      // получаем сообщение, которое ввёл пользователь
      var message = $("#message").val();
      // получаем капчу, которую ввёл пользователь
      var captcha = $("#text-captcha").val();

      // объект, посредством которого будем кодировать форму перед отправкой её на сервер
      var formData = new FormData();
      // добавить в formData значение 'name'=значение_поля_name
      formData.append('name', name);
      // добавить в formData значение 'email'=значение_поля_email
      formData.append('email', email);
      // добавить в formData значение 'message'=значение_поля_message
      formData.append('message', message);
      // добавить в formData файлы
      // получить все элементы с атрибутом name="images[]"
      var images = document.getElementsByName("images[]");
      // перебрать все элементы images с помощью цикла
      for (var i = 0; i < images.length; i++) {
        // получить список файлов элемента input с type="file"
        var fileList = images[i].files;
        // если элемент не содержит файлов, то перейти к следующей
        if (fileList.length > 0) {
          // получить первый файл из списка
          var file = fileList[0];
          // проверить тип файла и размер
          if ((file.type.match('image.*')) && (file.size<524288)) {
            // добавить его (файл (file) с именем file.name) в formData
            formData.append('images[]', file, file.name);
          }
        }
      }
      // добавить в formData значение 'captcha'=значение_поля_captcha
      formData.append('captcha', captcha);

      // технология AJAX 
      $.ajax({
        //метод передачи запроса - POST
        type: "POST",
        //URL-адрес запроса 
        url: "/feedback/verify.php",
        //передаваемые данные - formData
        data: formData,
        // не устанавливать тип контента, т.к. используется FormData
        contentType: false,
        // не обрабатывать данные formData
        processData: false,
        // отключить кэширование результатов в браузере
        cache: false,
        //при успешном выполнении запроса
        success: function (data) {
          // разбираем строку JSON, полученную от сервера
          var $data =  JSON.parse(data);
          // устанавливаем элементу, содержащему текст ошибки, пустую строку
          $('#error').text('');

          // если сервер вернул ответ success, то значит двнные отправлены
          if ($data.result == "success") {
            // скрываем форму обратной связи
            $('#messageForm').hide();
            // удаляем у элемента, имеющего id=msgSubmit, класс hidden
            $('#msgSubmit').removeClass('hidden');
          }
          else if ($data.result == "invalidCaptcha") {
            // Если сервер вернул ответ invalidcaptcha, то делаем следующее...

            //получаем элемент, содержащий капчу
            inputCaptcha = $("#text-captcha");
            //найти предка, имеющего класс .form-group (для установления success/error)
            formGroupCaptcha = inputCaptcha.parents('.form-group');
            //найти glyphicon (иконка успеха или ошибки)
            glyphiconCaptcha = formGroupCaptcha.find('.form-control-feedback');
            //добавить к formGroup класс .has-error и удалить .has-success
            formGroupCaptcha.addClass('has-error').removeClass('has-success');
            //добавить к glyphicon класс glyphicon-remove и удалить glyphicon-ok
            glyphiconCaptcha.addClass('glyphicon-remove').removeClass('glyphicon-ok');
            //вывести новый код капча
            $('#img-captcha').attr('src', '/feedback/captcha.php?id=' + Math.random() + '');
            //установить полю ввода капчи пустое значение
            $("#text-captcha").val('');
          } else {
            // Если сервер вернул ответ error, то делаем следующее...
            $('#error').text('Произошли ошибки при отправке формы на сервер.');
            if ($data.files) {
              $('#error').html($('#error').text()+'<br>'+$data.files);
            }
          }
        },
        error: function (request) {
          $('#error').text('Произошла ошибка ' + request.responseText + ' при отправке данных.');
        }
      });
    }
  });
});

Серверная часть формы обратной связи состоит из следующих файлов:

  • captcha.php (скрипт для генерации капчи);
  • oswald.ttf (шрифт, который используется для написания кода капчи на изображении);
  • background.png (фон на который будет наложен текст капчи);
  • verify.php (скрипт, выполняющий отправку данных формы на email);
  • PHPMailerAutoload.php (автозагрузчик библиотеки PHPMailer, которая используется для отправки писем по email).

Серверная часть формы обратной связи

Содержимое файла verify.php с комментариями:

<?php
  // открываем сессию
  session_start();

  // переменная в которую будем сохранять результат работы
  $data['result']='error';

  // разрешённые типы файлов
  $allowedExtension = array("jpg" => "image/jpg", "jpeg" => "image/jpeg", "gif" => "image/gif", "png" => "image/png");
  
  // директория для хранения файлов ()
  $pathToFile = $_SERVER['DOCUMENT_ROOT'].'/feedback/files/';

  // максимальный размер файла
  $maxSizeFile = 524288;

  // функция для проверки длины строки
  function validStringLength($string,$min,$max) {
    $length = mb_strlen($string,'UTF-8');
    if (($length<$min) || ($length>$max)) {
      return false;
    }
    else {
      return true;
    }
  }

  // если данные были отправлены методом POST, то...
  if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    $data['result']='success';

    //получить имя, которое ввёл пользователь
    if (isset($_POST['name'])) {
      $name = $_POST['name'];
      if (!validStringLength($name,2,30)) {
        $data['name']='Поля имя содержит недопустимое количество символов.';   
        $data['result']='error';     
      }
    } else {
      $data['result']='error';
    } 
    //получить email, которое ввёл пользователь
    if (isset($_POST['email'])) {
      $email = $_POST['email'];
      if (!filter_var($email,FILTER_VALIDATE_EMAIL)) {
        $data['email']='Поле email введено неправильно';
        $data['result']='error';
      }
    } else {
      $data['result']='error';
    }   
    //получить сообщение, которое ввёл пользователь
    if (isset($_POST['message'])) {
      $message = $_POST['message'];
      if (!validStringLength($message,20,500)) {
        $data['message']='Поле сообщение содержит недопустимое количество символов.';     
        $data['result']='error';   
      }      
    } else {
      $data['result']='error';
    } 
    //получить капчу, которую ввёл пользователь
    if (isset($_POST['captcha'])) {
      $captcha = $_POST['captcha'];
    } else {
      $data['result']='error';
    } 
    // если не существует ни одной ошибки, то прододжаем... 
    if ($data['result']=='success') {
      
      // если пользователь ввёл правильный код капчи, то...
      if ($_SESSION["code"] == $captcha) {

        //обработаем файлы, загруженные пользователем посредством элементов с name="images[]"

        // если ассоциатианый массив $_FILES["images"] существует, то
        if(isset($_FILES["images"])) {
          // переберём все файлы (изображения)
          $files = array();
          foreach ($_FILES["images"]["error"] as $key => $error) {
            // если ошибок не возникло, т.е. файл был успешно загружен на сервер, то...
            if ($error == UPLOAD_ERR_OK) {
              // имя файла на устройстве пользователя
              $nameFile = $_FILES['images']['name'][$key];
              // расширение загруженного пользователем файла в нижнем регистре
              $extFile = mb_strtolower(pathinfo($nameFile, PATHINFO_EXTENSION));
              // размер файла
              $sizefile = $_FILES['images']['size'][$key];
              //myme-тип файла
              $filetype = $_FILES['images']['type'][$key]; 
              // проверить расширение файла, размер файла и myme-тип
              if (!array_key_exists($extFile, $allowedExtension)) {
                $data['files']='Ошибка при загрузке файлов (неверное расширение).';
                $data['result']='error';
              } elseif ($sizefile > $maxSizeFile) {
                $data['files']='Ошибка при загрузке файлов (размер превышает 512Кбайт).';
                $data['result']='error';
              } elseif (!in_array($filetype, $allowedExtension)){
                $data['files']='Ошибка при загрузке файлов (неверный тип файла).';
                $data['result']='error';
              } else {
                //ошибок не возникло, продолжаем...
                 
                // временное имя, с которым принятый файл был сохранён на сервере
                $tmpFile = $_FILES['images']['tmp_name'][$key];
                // уникальное имя файла
                $newFileName = uniqid('img_', true).'.'.$extFile;
                // полное имя файла
                $newFullFileName = $pathToFile.$newFileName;
                // перемещаем файл в директорию
                if (!move_uploaded_file($tmpFile, $newFullFileName)) {
                  // ошибка при перемещении файла
                  $data['files']='Ошибка при загрузке файлов.';                
                  $data['result']='error';
                } else {
                  $files[] = $newFullFileName;
                }
              }
            } else {
              //ошибка при загрузке файл на сервер
              $data['result']='error';
            }
          }
        }
      } else {
        // пользователь ввёл неправильную капчу
        $data['result']='invalidCaptcha';
      }
    }
  } else {
    //ошибка не существует ассоциативный массив $_POST["send-message"]
    $data['result']='error';
  }

  // дальнейшие действия (ошибок не обнаружено)
  if ($data['result']=='success') {
    //1. Сохрание формы в файл
    $output = "---------------------------------" . "\n";
    $output .= date("d-m-Y H:i:s") . "\n";
    $output .= "Имя пользователя: " . $name . "\n";
    $output .= "Адрес email: " . $email . "\n";
    $output .= "Сообщение: " . $message . "\n";
    if (isset($files)) {
      $output .= "Файлы: " . "\n";
      foreach ($files as $value) {
         $output .= $value . "\n";
      }
    }
    if (file_put_contents(dirname(__FILE__).'/message.txt', $output, FILE_APPEND | LOCK_EX)) {
      $data['result']='success';
    } else {
      $data['result']='error';         
    } 
    //2. Отправляем на почту

    // включить файл PHPMailerAutoload.php
    require_once dirname(__FILE__) . '/phpmailer/PHPMailerAutoload.php';

    //формируем тело письма
    $output = "Дата: " . date("d-m-Y H:i") . "\n";
    $output .= "Имя пользователя: " . $name . "\n";
    $output .= "Адрес email: " . $email . "\n";
    $output .= "Сообщение: " . "\n" . $message . "\n";

    // если не используем прикрепление файлов
    // отправляем файлы в качестве ссылок в теме письма
    /*if (isset($files)) {
      $output .= "Файлы: " . "\n";
      foreach ($files as $value) {
        $href = substr($value,strpos($value, '/feedback/'));
        $output .= '<p><a href="'.$href.'">'.$href.'</a></p>' . "\n";
      }
    }*/

    // создаём экземпляр класса PHPMailer
    $mail = new PHPMailer;

    $mail->CharSet = 'UTF-8';  
    $mail->From      = 'email@mysite.ru';
    $mail->FromName  = 'Имя сайта';
    $mail->Subject   = 'Сообщение с формы обратной связи';
    $mail->Body      = $output;
    $mail->AddAddress( 'myemail@mail.ru' );

    // прикрепляем файлы к письму
    if (isset($files)) {
      foreach ($files as $value) {
         $output .= $value . "\n";
         $mail->addAttachment($value);
      }
    }
 
    // отправляем письмо
    if ($mail->Send()) {
      $data['result']='success';
    } else {
      $data['result']='error';
    }
  }

  echo json_encode($data);

?> 

Содержимое файла captcha.php с комментариями:

<?php
//открывает сессию
session_start();
 
//присваивает PHP переменной captchastring строку символов
$captchastring = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz';
//получает первые 6 символов после их перемешивания с помощью функции str_shuffle
$captchastring = substr(str_shuffle($captchastring), 0, 6);
//инициализация переменной сессии с помощью сгенерированной подстроки captchastring,
//содержащей 6 символов
$_SESSION["code"] = $captchastring;
 
//Генерирует CAPTCHA
 
//создает новое изображение из файла background.png 
$image = imagecreatefrompng(dirname(__FILE__).'/background.png');
//устанавливает цвет (R-200, G-240, B-240) изображению, хранящемуся в $image
$colour = imagecolorallocate($image, 200, 240, 240);
//присваивает переменной font название шрифта
$font = dirname(__FILE__).'/oswald.ttf';
//устанавливает случайное число между -10 и 10 градусов для поворота текста 
$rotate = rand(-10, 10);
//рисует текст на изображении шрифтом TrueType (1 параметр - изображение ($image), 
//2 - размер шрифта (18), 3 - угол поворота текста ($rotate), 
//4, 5 - начальные координаты x и y для текста (18,30), 6 - индекс цвета ($colour),
//7 - путь к файлу шрифта ($font), 8 - текст ($captchastring) 
imagettftext($image, 18, $rotate, 28, 32, $colour, $font, $captchastring);
//будет передавать изображение в формате png
header('Content-type: image/png');
//выводит изображение
imagepng($image);
?>

HTML-форма обратной связи

HTML форма обратной связи построена с помощью html-элементов и классов Bootstrap 3. Bootstrap 3 - это фреймворк, который позволяет создавать элегантные и красивые дизайны сайтов.

Дизайн формы обратной связи

При необходимости в форму обратной связи можно добавить новые поля (телефон, адрес сайта и т.д.) и удалить существующие.

Например, рассмотрим, как добавить в форму номер телефона:

<div class="form-group has-feedback">
  <label for="tel" class="control-label">Введите номер телефона:</label>
  <input type="tel" id="tel" name="tel" class="form-control" required="required" value="" placeholder="Например, +7 911 230 1111">
  <span class="glyphicon form-control-feedback"></span>
</div>

Форма обратной связи с телефоном

Неверное (не валидное) заполнение формы отображается после нажатия на кнопку "Отправить сообщение" и до отправки формы на сервер.

Форма обратной связи, содержащая ошибки
Форма обратной связи, содержащая ошибки

Успешная обработка формы на сервере (отправка данных на почту) отображается пользователю с помощью сообщения.

Сообщение об успешной отправки формы обратной связи
Сообщение об успешной отправки формы обратной связи

Руководство по добавлению полей в форму

Краткая инструкция по добавлению новых полей в форму обратной связи:

  1. Добавить новый элемент в HTML-форму (файл index.html):
    <input type="text" id="id_поля" name="id_поля">
  2. Добавить строчку, которая будет вставлять данные из HTML элемента в объект formData (файл script.js):
    // добавить после строчки 
    // var formData = new FormData();
    // в formData значение 'id_поля'=значение_поля
    formData.append( 'id_поля', $("#id_поля").val() );
  3. Вставить в блок, в котором формируется тело письма, следующий код (файл verify.php):
    // если в массиве POST имеется ключ id_поля
    if (isset($_POST[' id_поля'])) {
      // то добавить его код к телу 
      $output .= "Имя_поля: " . "\n" . $POST[' id_поля'] . "\n";
    }
    

Если наоборот, вы хотите удалить некоторое поле из формы, то необходимо найти в файлах index.html, script.js и verify.php соответствующие куски кода (аналогично вышеприведённым для определённого элемента) и удалить.



   PHP 0    5947 +1

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

  1. 404 # 0
    Здравствуйте. Большое спасибо за удобную форму.
    Возникла необходимость выпилить из формы каптчу, как это правильно сделать?
    1. Александр Мальцев # 0
      Здравствуйте. Ссылка для скачивания контактной формы без капчи.
      1. 404 # 0
        Большое спасибо! То, что нужно.
    2. Anton # 0
      Добрый день!, большое спасибо за отличную форму!, пытаюсь встроить ее на страницу она ломает глобальные стили. как можно понизить приоритет внутреннего (Внедренного стиля) css чтоб подключаемый стиль не ломал страницу?, сапасибо
      1. Александр Мальцев # 0
        Здравствуйте. Спасибо за отзыв.
        Попробуйте css файл в форме заменить на этот.
        yadi.sk/d/4uc58Il9tVVKS
        Там оставлены только необходимые стили.

        Кроме этого, попробуйте свой файл стилей подключить после bootstrap.min.css:
        <link rel="stylesheet" href="/feedback/css/bootstrap.min.css">
        <link rel="stylesheet" href="my.css">
        
        1. Anton # 0
          не помогло(
          1. Александр Мальцев # 0
            Вот несжатые стили:
            yadi.sk/d/l0BdrCKztVs3k

            Попробуйте разобраться, что переопределяет Ваши стили.
            Ну или как вариант, создайте свои стили для формы.
            Можно использовать теже классы что и в этом примере, но с другим оформлением, которое будут вписываться в Ваш дизайн.
            1. Anton # 0
              можете помочь со встраиванием за вознаграждение, использую Конструктор сайта — Parallels Web Presence Builder, он не дает поступа к своим файлам
              1. Александр Мальцев # 0
                Большинство конструкторов не имеют прямого доступа к файлам, создание сайтов в них осуществляется только через готовые блоки. Если Вы не ограничены только этим конструктором, то можете скопировать эту форму в директорию на сайте (например, используя FTP). А в меню сайта указать ссылку на неё. А если доступа к файловой системе нет, то тут уже наверно ничем не поможешь…

                Лучше потратить время и создать на чём нибудь другом. Иначе потом не сможете перенести свой проект и будете всё время привязаны к этому конструктору.
                1. Anton # 0
                  доступа к файловой системе нет, я разместил форму на другом сайте (http://titul-usinsk.ru/feedback/) а на нужном встроил ее .html блоком прописав ссылки, сначала не заработала и вылетала ошибка пока в /feedback/script.js" не прописал путь до «titul-usinsk.ru/feedback/verify.php, сейчас отправка работает но… письмо уходит а форма возвращает „Произошла ошибка при отправке данных.“, нужно еще какие то пути прописать?, извените что так много у меня вопросов тут, еще раз спасибо что помогаете
                  1. Александр Мальцев # 0
                    Единственно, что необходимо изменить это путь в файле script.js:
                    url: "http://mysite.ru/feedback/verify.php"
                    
                    Скорее всего у Вас не разрешены кроссдоменные запросы.
                    Чтобы это сделать, откройте файл .htaccess и добавьте в него следующую строчку:
                    Header set Access-Control-Allow-Origin "*"
                    
                    1. Anton # 0
                      добавил, заработало, урааа, спасибо вам за отличный блог и помощь, теперь я ваш постоялец ))))
      2. Anton # 0
        Спасибо, пробую, еще проблема в том что письма приходят таком виде
        Дата: 20-07-2016 15:35
        Имя пользователя: Anton
        Адрес email: 111111111@gmail.com
        Сообщение:
        11111111111111111111111111111111111111111111111111111
        1. Anton # 0
          в .htaccess строчка
          AddDefaultCharset UTF-8 есть
          1. Александр Мальцев # 0
            Эта строчка на кодировку письма ни как не влияет.
          2. Александр Мальцев # 0
            В файле verify.php после строчки:
            $mail = new PHPMailer;
            
            добавь эту:
            $mail->CharSet = 'UTF-8';
            
            1. Anton # 0
              Спасибо, да помогло:)
          3. Obddevice # 0
            Добрый день, отличный пример, получилось сделать хорошую форму с нужными полями, сделал даже изменение темы письма с учетом данных полученных из формы и отправку копии письма пользователю. Такая вот система приема заявок уже получилась.

            Единственное что не смог сделать, настроить загрузку файлов отличных от изображений (в моем случае есть потребность получать zip/rar/7z архивы).

            Еще очень хотелось бы подключить recaptcha.

            Спасибо!
            1. Александр Мальцев # 0
              Немного изменил форму, в именно убрал проверку по mime типам. Т.к. многие браузеры mime тип файла с расширением 7z не определяют.
              Сборку доступна по следующему URL:
              yadi.sk/d/23HW2CRgtc5H5
              Теперь проверка осуществляется по расширению файлов.
              В файле script.js:
              var typeFile = [
                'jpg',
                'jpeg',
                'gif',
                'png',
                'rar',
                '7z',
                'zip'
              ];
              
              В файле verify.php:
              // разрешённые типы файлов
              $allowedExtension = array("jpg", "jpeg", "gif", "png", "rar", "7z", "zip");
              
              С recaptcha сделаю, но немного попозже.
              1. Anton # 0
                Приветствую!, а как если не секрет сделал отправку копии письма пользователю?
                1. obddevice # 0
                  Александр, спасибо, заработало.
                  Все архивы правда сохраняются на сервер как «img_579616d69175c6.18729815.rar» но это уже не проблема =) исправим.

                  Anton, после:
                  $mail->AddAddress('ваш@ящик');
                  добавил:
                  $mail->AddCC($email);
                  Так же можно почитать про класс PHP Mailer и добавлять получателей через запятую или добавить скрытую копию, настроить поле Replay to и прочее… это довольно просто.

                  Можно еще в заголовок письма добавлять уникальную информацию из формы:

                  $mail->Subject   = "Заявка от  " . $name;
                  чтобы в почте был порядок.

                  И еще куча вариантов.
                  1. Александр Мальцев # 0
                    Такие имена генерируются специально, чтобы обеспечить их уникальность с помощью следующих строк:
                    // уникальное имя файла
                    $newFileName = uniqid('img_', true).'.'.$extFile;
                    // полное имя файла
                    $newFullFileName = $pathToFile.$newFileName;
                    
                    Если это не сделать, то надо каким-то другим способом обеспечивать уникальность имени. В противном случае существует вероятность того, что пользователи смогут загрузить файлы с одинаковыми именами.

                    Если необходимо оставить исходное имя (имя, которое имел файл на компьютере пользователя), то можно сделать так:
                    if (!move_uploaded_file($tmpFile, $nameFile)) {
                    
                2. Александр Мальцев # 0
                3. obddevice # 0
                  Еще добавил в .htaccess правило «Options All -Indexes» и перенес message.txt в папку files, ведь получается что любой сможет найти этот и все загруженные файлы и посмотреть содержимое что совсем не безопасно.
                  Если форма работает самостоятельно, не внутри какой то CMS со своей политикой безопасности, это очень важно.
                  1. Anton # 0
                    как правильно удалить код «ведите сообщения»?
                    1. Александр Мальцев # 0
                      Необходимо удалить код из html, js и php.
                      Наверно к статье необходимо добавить более подробную инструкцию по добавлению и удалению полей к форме.
                      feedback form без поля message
                    2. Александр # 0
                      Александр, добрый день.
                      Отличный урок. Замечательная реализация.
                      Только у меня не получается встроить форму в уже готовую страницу. Точнее форма встраивается. Но капча не генерирует код. Фон капчи грузится. А кодов нет.
                      Я все файлы из вашего примера разложил соответствующим папкам.

                      /htdoc
                      css
                      files
                      fonts
                      img
                      js (script.js)
                      php (captcha.php,verify.php)
                      phpmailer

                      в форме изменил путь до капчи
                      <img id="img-captcha" src="php/captcha.php"><\code>
                      
                      Затем в файле script.js изменил 
                      
                      <code>$('#reload-captcha').click(function () {
                          $('#img-captcha').attr('src', '../php/captcha.php?id=' + Math.random() + '');
                        });
                      
                      и еще

                      //URL-адрес запроса 
                              url: "../php/verify.php",
                      
                      и вот тут

                      $('#img-captcha').attr('src', '../php/captcha.php?id=' + Math.random() + '');

                      в capcha.php изменил

                      //создает новое изображение из файла background.png 
                      $image = imagecreatefrompng(dirname(__FILE__).'../../img/background.png');
                      ...
                      
                      //присваивает переменной font название шрифта
                      $font = dirname(__FILE__).'../../fonts/oswald.ttf';
                      

                      файл verify.php

                      // включить файл PHPMailerAutoload.php
                          require_once dirname(__FILE__) . '../../phpmailer/PHPMailerAutoload.php';
                      


                      Скажите, что не так и в каких местах мне нужно изменить пути до файлов и как правильно написать эти пути?

                      Спасибо.
                      1. Александр Мальцев # 0
                        В скриптах php нельзя просто так использовать запись:
                        '../../'
                        
                        Это просто добавит эту строку в путь.

                        Здесь необходимо использовать функцию realpath:
                        $font = realpath(dirname(__FILE__) . '/..').'/fonts/background.png'
                        
                        Или как второй вариант использовать абсолютный путь:
                        $root = $_SERVER['DOCUMENT_ROOT'];
                        $font = $root.'/fonts/background.png';
                        
                      2. Александр # 0
                        Спасибо, попробую.
                        1. Игорь # 0
                          Отличная форма! У меня вопрос — а можно ли сделать чтобы формировался автоответ отправителю. Например — Ваше сообщение доставлено, просьба на данное письмо не отвечать и т.д.
                          1. Александр Мальцев # 0
                            После отправки письма, можете также отправить сообщение отправителю.
                            Для этого в файле verify.php после строчки:
                            // отправляем письмо
                            if ($mail->Send()) {
                              $data['result']='success';
                            
                            вставьте следующие:
                            $mail->ClearAllRecipients();
                            $mail->clearAttachments();
                            $mail->From      = 'email@mysite.ru';
                            $mail->FromName  = 'Имя сайта';
                            $mail->Subject   = 'Ваше сообщение отправлено';
                            $mail->Body      = $name . ', ваше сообщение доставлено. На данное письмо отвечать не надо.';
                            $mail->AddAddress( $email );
                            $mail->Send();
                            
                            1. Игорь # 0
                              Супер, Супер!!! В принципе, афигеный конструктор, я включу автоответ. Было очень мало инфы про включение дополнительных полей, разобрался — все очень легко, но просьба, хелп писать в коде и сноску где еще подправить.
                              Выше был написан пост про крякозябры, я его не увидел и изменил в файле phpmailer\class.phpmailer.php 48 строку с public $CharSet = 'iso-8859-1'; на
                              public $CharSet = 'UTF-8'; после этого все письма пошли в кириллице. Это неправильно? Просто у меня фрондэнд и бакэнд стоит nginx и .htaccess он не воспринимает.
                              Не буду скрывать — буду менять с www.vrnzags.ru/feedback/mail.php
                              на www.vrnzags.ru/feed/
                              www.vrnzags.ru/feed/post.php
                          2. Владислав # 0
                            prntscr.com/cc8x36
                            Не отправляет, хостинг 1GB
                            1. Владислав # 0
                              Оказывается проверка была на количество символов у сообщения(

                              Теперь новая ошибка, кодировка:
                              prntscr.com/ccexxx
                              1. Александр Мальцев # 0
                                Добавь в файл .htaccess строчку:
                                AddCharset utf-8 .php .html .js
                                
                                1. Владислав # 0
                                  Нашел:
                                  $mail->CharSet = 'utf-8';
                            2. Владислав # 0
                              Не получается запустить smtp (php долгий очень)
                              $mail = new PHPMailer;
                                  $mail->SMTPAuth  = true;
                                  $mail->Username  = '123@mail.ru';
                                  $mail->Password  =  '123123';
                              	$mail->Host = 'ssl://smtp.mail.ru:465';
                              	$mail->Port = '465';
                              	$mail->Mailer = 'smtp';
                              	$mail->CharSet = 'utf-8';
                                  $mail->From      = '1231@3123.ru';
                                  $mail->FromName  = '123123.ru - Мятый элемент';
                                  $mail->Subject   = 'Сообщение с формы обратной связи';
                                  $mail->Body      = $output;
                                  $mail->AddAddress( '123@mail.ru' );
                              prntscr.com/cd2xja
                              1. Александр Мальцев # 0
                                Не совсем понял ваши настройки (123@mail.ru). Чтобы настроить почту домена через стороний сервер необходимо подтвердить на mail.ru право на ваш домен, настроить на хостинги mx-записи, txt-записи. Либо вообще передать делигирование домена mail.ru.
                                1. Владислав # 0
                                  Я использую обычную почту от mail.ru (сайт, логин и пароль заменил на 123).
                                  Надо чтобы письма отходили через SMTP
                                  1. Александр Мальцев # 0
                                    Из скриншота видно, что сервер отклонил соединение.
                                    Попробуйте добавить в начало:
                                    $mail->IsSMTP();// отсылать письмо используя SMTP 
                                    
                                    Кроме этого проверьте значение $mail->Host, действительно ли оно должно быть такое?
                                    Кроме этого попробуйте изменить $mail->From таким образом, чтобы оно совпадало с адресом отправления.
                                    Если вы хотите использовать SSL, то попробуйте добавить:
                                    $mail->SMTPSecure = 'ssl';
                                    
                              2. Слава # 0
                                Очень крутая форма! Спасибо!

                                Александр, по добавлению и удалению полей, инфы, да, очень не хватает!
                                Нужны только имя, телефон и файлы, и вот что-то без ошибки не получается )
                                1. Александр Мальцев # 0
                                  Мини инструкцию к концу статьи добавил.
                                  Сборка с именем и телефоном: yadi.sk/d/IiaNuxolujPKa
                                2. Слава # 0
                                  отлично, спасибо, Александр.
                                  Кстати, а как отключить обязательное заполнение, в каком либо из полей?
                                  И Александр, как вам можно благодарность перечислить?
                                  1. Александр Мальцев # 0
                                    Два действия:
                                    1. На стороне клиента (в браузере). Необходимо найти строчку с соответствующим полем (например, name) и убрать атрибуты, предъявляющие требования к полю (в данном случае это required, minlength и maxlength). Т.е. после удаление останется следующее:
                                    <div class="form-group has-feedback">
                                      <label for="name" class="control-label">Введите ваше имя:</label>
                                      <input type="text" id="name" name="name" class="form-control" value="" placeholder="Например, Иван Иванович" >
                                      <span class="glyphicon form-control-feedback"></span>
                                    </div>
                                    
                                    2. Убрать проверку в файле verify.php.
                                    2.1. Т.е. удалить код (теперь проверки поля (в данном случае name) на сервере не будет):
                                    //получить имя, которое ввёл пользователь
                                    if (isset($_POST['name'])) {
                                      $name = $_POST['name'];
                                      if (!validStringLength($name,2,30)) {
                                        $data['name']='Поля имя содержит недопустимое количество символов.';   
                                        $data['result']='error';     
                                      }
                                    } else {
                                      $data['result']='error';
                                    } 
                                    
                                    2.2. А там где формируем тело письма добавить следующий код:
                                    if (isset($_POST['name'])) {
                                      $output .= "Имя: " . $_POST['name'] . "\n";
                                    }
                                    
                                    Он будет проверять, передали ли мы поле name с формы. Если да, то добавит его содержимое к телу письма.

                                    Для перевода благодарности можно воспользоваться страницей: itchief.ru/help-site
                                    1. Слава # 0
                                      Супер, спасибо, Александр!
                                  2. Кирилл # 0
                                    Огромное спасибо за форму!
                                    Подскажите пожалуйста, я хочу добавить выбор, чтобы сообщение отправлялось на разные ящики исходя из ситуации пользователя (например выпадающий список, что-то типа: Отдел 1, Отдел 2, Отдел 3 — и чтобы при выборе нужного раздела письмо уходило в соответствии с адресом этого отдела)… как реализовать?
                                    1. Кирилл # 0
                                      В html файл с формой добавил такой код:

                                      <div class="col-sm-6">
                                      <!-- Выбор ящика -->
                                      <div class="form-group has-feedback">
                                      <label for="box" class="control-label">Выберите цель обращения:</label>
                                      <select name="box" id="box" style="display: block; width: 100%; height: 25px;">
                                      <option selected value="1">Пункт 1</option>
                                      <option value="2">Пункт 2</option>
                                      <option value="3">Пункт 3</option>
                                      <option value="4">Пункт 4</option>
                                      </select>
                                      </div>
                                      </div>
                                      
                                      В файл verify.php добавил это:

                                      Вверху:
                                          //получить мыло, которое выбрал пользователь
                                          if (isset($_POST['box'])) {
                                            $box = $_POST['box'];
                                          } else {
                                            $data['result']='error';
                                          } 
                                      
                                      При отправке:
                                      //формируем тело письма
                                      $output = "Дата: " . date("d-m-Y H:i") . "\n";
                                      $output .= "Имя пользователя: " . $name . "\n";
                                      $output .= "Адрес email: " . $email . "\n";
                                      $output .= "Сообщение: " . "\n" . $message . "\n";
                                      $output .= "Выбран пункт: " . $box . "\n";
                                      
                                      Но при отправке выдаёт ошибку, то есть не получает $_POST['box'] — не пойму, почему… Что делаю не так?
                                      1. Александр Мальцев # 0
                                        Т.к. передача осуществляется с помощью AJAX, то кроме как добавить поле в форму ещё необходимо передать его значение в объект FormData (файл script.js).
                                        Т.е. найти строчки такого содержимого:
                                        formData.append('message', message);
                                        
                                        и вставить сразу же после них своё поле. Т.е. чтобы оно тоже добавилось в набор данных, которые отправятся на сервер.
                                        formData.append('box', $("#box").val() );
                                        
                                        Первый параметр — это имя, по которому необходимо будет обращаться к данным на сервере. Второй параметр — это получения значения поля box.

                                        А куда отправить определяется строчкой:
                                        $mail->AddAddress( 'myemail@mail.ru' );
                                        
                                        Т.е. Вам необходимо туда доставить содержимое переменной $box, если она будет содержать email или если число (как это сделано у Вас, то организовать выбор email по case):
                                        $mail->AddAddress( $box );
                                        
                                    2. Кирилл # 0
                                      Спасибо!

                                      Подскажите ещё пожалуйста, можно ли как-то автоматически очищать папку files после отправки сообщения? Не хочется копить там файлы…
                                      1. Александр Мальцев # 0
                                        После отправки сообщения добавить код для удаления файлов:
                                        // отправляем письмо
                                        if ($mail->Send()) {
                                          $data['result']='success';
                                        } else {
                                          $data['result']='error';
                                        }
                                        
                                        // добавляем этот код:
                                        if (isset($files)) {
                                          foreach ($files as $value) {
                                            unlink($value);
                                          }
                                        }
                                        
                                      2. Иван # 0
                                        Большое спасибо за такую крутую форму! А можно добавить что-то типа прелоадера, когда отправляется сообщение? Потому что сейчас пользователю не очень понятно, что происходит после нажатие кнопки Отправить…
                                        1. Александр Мальцев # 0
                                          Данная задача уже была решена в этом комментарии.
                                          Само решение следующее: необходимо скачать вращающуюся иконку, добавить её к форме и написать script.
                                          JavaScript код предствленный в комментарии можно улучшить, добавив в него установку состояния disabled для кнопки «Отправить».
                                          beforeSend: function () {
                                            $('#loading').removeClass('hidden');
                                            $('[type="submit"]').prop('disabled',true);
                                          },
                                          complete: function () {
                                            $('#loading').addClass('hidden');
                                            $('[type="submit"]').prop('disabled',false);
                                          },
                                          
                                          Ссылка для загрузки: форма с вращающейся иконкой.
                                        2. Слава # 0
                                          Александр, ещё момент, есть необходимость использовать несколько форм на странице, как избежать конфликт между ними? Спасибо.
                                          1. Александр Мальцев # 0
                                            Самый простой способ — это всё продублировать… Т.е. и файлы и содержимое в них.
                                            Например, сделать копию captcha.php — captcha2.php. После этого открыть его и в нём изменить code на code2:
                                            $_SESSION["code2"] = $captchastring;
                                            
                                            После этого сделать копию verify.php — verify2.php.
                                            Следующий этап продублировать содержимое файла script.js (следующие куски кода).
                                            $('#countFiles2').text(countFiles);
                                            // при изменения значения элемента "Выбрать файл"
                                            $(document).on('change','input[name="images2[]"]',function(e){
                                              // если выбран файл, то добавить ещё элемент "Выбрать файл"
                                              if ((e.target.files.length>0)&&($(this).next('p').next('input[name="images2[]"]').length==0) && ($('input[name="images2[]"]').length<countFiles)) {
                                                $(this).next('p').after('<input type="file" name="images2[]"><p style="margin-top: 3px; margin-bottom: 3px; color: #ff0000;"></p>');
                                              }
                                              ...
                                            });
                                            // при нажатии на кнопку "Обновить", выведем новый код капчи
                                            $('#reload-captcha2').click(function () {
                                              $('#img-captcha2').attr('src', '/feedback/captcha2.php?id=' + Math.random() + '');
                                            });
                                            // при отправке формы messageForm на сервер (id="messageForm")
                                            $('#messageForm2').submit(function (event) {
                                              ...
                                            });
                                            
                                            И наконец, изменить файл index.html и некоторые поля в нём.
                                            <form id="messageForm2" enctype="multipart/form-data">
                                              ...
                                              <input type="file" name="images2[]">
                                              ...
                                              <img id="img-captcha" src="/feedback/captcha2.php">
                                              ...
                                            </form>
                                            
                                          2. Андрей # 0
                                            Здравствуйте!!! Очень хорошая форма и вы круто все объясняете, долго я это искал!!!
                                            Но у меня выдает такую ошибку:(прикрепил скрин)http://itchief.ru/assets/uploadify/0/6/7/067b41f041564dd38654d1adc3d22739.png
                                            P.S. Ошибка из строки
                                            $('#error').text('Произошла ошибка ' + request.responseText + ' при отправке данных.');
                                            1. Александр Мальцев # 0
                                              Здравствуйте. Проверьте путь в HTML документе до файла verify.php. Т.к. он жалуется на его отсутствие.
                                              1. Андрей # 0
                                                Нужно подключить файл?? так?
                                                include("include/verify.php");
                                                Так ничего не меняется, а если путь изменять, то это же в файле script.js… или я что то не понимаю.
                                                У меня в HTML документе php вставки, которые находятся в папке include, там и есть необходимая форма и туда я и вложил документы verify.php, script.js и папку phpmailer.
                                                1. Александр Мальцев # 0
                                                  Путь к файлу verify.php из javascript указывается так:
                                                  //URL-адрес запроса 
                                                  url: "/feedback/verify.php",
                                                  
                                                  Тут всё зависит от того, где расположен файл относительно местоположения скрипта javascript. Можно использовать как относительные, так и абсолютные пути.
                                                  Например, если файл verify.php расположен в каталоге include, который находится в корне сайта. То можно указать так:
                                                  //URL-адрес запроса 
                                                  url: "/include/verify.php",
                                                  
                                                2. Андрей # 0
                                                  Еще тема такая, что у меня два адреса в одной директории данных, когда пишу путь на.рф, то пишет вышеуказанную ошибку, когда пишу путь на .com, то пишет просто «произошла ошибка при отправке данных», но по сути строка ошибки та же самая…
                                                  1. Александр Мальцев # 0
                                                    Попробуйте не указывать протокол и доменное имя.
                                                    Начинайте указывать путь от корня сайта (/) или используйте относительный путь.
                                                  2. Андрей # 0
                                                    Вот мои пути в файле verify.php
                                                    if (file_put_contents(dirname(__FILE__).'/message.txt', $output, FILE_APPEND | LOCK_EX)) {
                                                          $data['result']='success';
                                                    require_once dirname(__FILE__) . '/phpmailer/PHPMailerAutoload.php';
                                                    пути в script.js
                                                    url: "https://doctor-federation.com/include/verify.php",
                                                    вот в этом пути пробовал многое… ничего не подходит…
                                                3. Роман # 0
                                                  Добрый день. Если в Firefox открывать форму по ссылке на странице, имеющей кодировку Windows-1251, то форма открывается в кодировке Windows-1251, а не в UTF-8. В итоге кракозябры…
                                                  1. Александр Мальцев # 0
                                                    Значит такой заголовок отдаёт Ваш сервер (Content-Type: text/html; charset=windows-1251).
                                                    Можно открыть файл .htaccess и добавить в него следующую строчку, чтобы Ваш сервер всегда отдавал UTF-8 (или указать в настройках сервера):
                                                    AddDefaultCharset UTF-8
                                                    
                                                    После этого необходимо и все другие страницы перевести в UTF-8.
                                                    Хотя не знаю как Вы вообще используете windows-1251. Сейчас сайты открывают на многих устройствах, у которых операционная система не Windows.
                                                    1. Роман # 0
                                                      Вы, безусловно, правы. Буду переводить на UTF-8. Есть еще один момент. Если ввести в поле сообщение меньшее количество символов, чем требуется, то форма выдает ошибку «Произошли ошибки при отправке формы» вместо «Поле сообщение содержит недопустимое количество символов»
                                                      1. Александр Мальцев # 0
                                                        Обработка ошибок на PHP нужны только для тех пользователей, кто специально их обошёл в браузере. Т.е. можно ответить что данные просто так не уйдут. Т.к. первоначально обработка ошибок выполняется на стороне браузера.
                                                        Если это необходимо, то Вы можете сделать это так:
                                                        // если сервер вернул ответ error, то делаем следующее...
                                                        var errorText = 'Произошли ошибки при отправке формы на сервер.'
                                                        if ($data.name) {
                                                          errorText = errorText + $data.name;
                                                          var nameInput = $("#name");
                                                          // находим предка, имеющего класс .form-group (для установления success/error)
                                                          formGroupName = nameInput.parents('.form-group');
                                                          // находим glyphicon (иконка успеха или ошибки)
                                                          glyphiconName = formGroupName.find('.form-control-feedback');
                                                          // добавляем к formGroup класс .has-error и удаляем .has-success
                                                          formGroupName.addClass('has-error').removeClass('has-success');
                                                          // добавляем к glyphicon класс glyphicon-remove и удаляем glyphicon-ok
                                                          glyphiconName.addClass('glyphicon-remove').removeClass('glyphicon-ok');
                                                        }
                                                        if ($data.email) {
                                                          errorText = errorText + $data.email;
                                                          var emailInput = $("#email");
                                                          // находим предка, имеющего класс .form-group (для установления success/error)
                                                          formGroupEmail = emailInput.parents('.form-group');
                                                          // находим glyphicon (иконка успеха или ошибки)
                                                          glyphiconEmail = formGroupEmail.find('.form-control-feedback');
                                                          // добавляем к formGroup класс .has-error и удаляем .has-success
                                                          formGroupEmail.addClass('has-error').removeClass('has-success');
                                                          // добавляем к glyphicon класс glyphicon-remove и удаляем glyphicon-ok
                                                          glyphiconEmail.addClass('glyphicon-remove').removeClass('glyphicon-ok');
                                                        }
                                                        if ($data.message) {
                                                          errorText = errorText + $data.message;
                                                          var messageInput = $("#message");
                                                          // находим предка, имеющего класс .form-group (для установления success/error)
                                                          formGroupMessage = messageInput.parents('.form-group');
                                                          // находим glyphicon (иконка успеха или ошибки)
                                                          glyphiconMessage = formGroupMessage.find('.form-control-feedback');
                                                          // добавляем к formGroup класс .has-error и удаляем .has-success
                                                          formGroupMessage.addClass('has-error').removeClass('has-success');
                                                          // добавляем к glyphicon класс glyphicon-remove и удаляем glyphicon-ok
                                                          glyphiconMessage.addClass('glyphicon-remove').removeClass('glyphicon-ok');
                                                        }        
                                                        $('#error').html(errorText);
                                                        // выводим новый код капчи
                                                        $('#img-captcha').attr('src', '/feedback/captcha.php?id=' + Math.random() + '');
                                                        // устанавливаем полю, с помощью которого осуществляем ввод капчи пустое значение
                                                        $("#text-captcha").val('');
                                                        if ($data.files) {
                                                          $('#error').html($('#error').html()+$data.files);
                                                        }
                                                        
                                                        Т.е. заменить следующий код в файле script.js на вышеприведённый:
                                                        // Если сервер вернул ответ error, то делаем следующее...
                                                        $('#error').text('Произошли ошибки при отправке формы на сервер.');
                                                        if ($data.files) {
                                                          $('#error').html($('#error').text()+$data.files);
                                                        }
                                                        
                                                  2. Alex # 0
                                                    Классаня форма, но как её добавить в joomla?
                                                    1. Александр Мальцев # 0
                                                      С joomla не знаком. Попробуйте сделать так. Скопировать директорию feedback со всеми файлами в корень сайта. После этого открой необходимую страницу в joomla и вставить в неё html-код формы из файла index.html. Только предварительно отключить использование визуального текстового редактора. Кроме этого ещё необходимо подключить Bootstrap и файл script.js к странице.
                                                    2. fancybear # 0
                                                      Форма отличная! Использую на своем сайте, было бы неплохо если бы стояла капча recaptcha 2.0 удобная черт побери.
                                                      1. Александр Мальцев # 0
                                                        Спасибо. Как подключить recaptcha 2.0 можно почитать в статье Установка гугловской рекаптчи на сайт.
                                                      2. Anna # 0
                                                        Александр, добрый день!
                                                        Еще раз спасибо за форму — пользуюсь. Очень всё понятно объяснено.
                                                        У меня вопрос. На сайте я сделала расширенную форму: добавила выбор из календаря, селекты, дополнительные поля и т.д. -это на странице Забронировать, а на главной оставила форму с тремя полями, телефон, email, сообщение — типа «перезвоните мне».
                                                        Чтобы письма менеджеру приходили с другой темой с этой формы, я продублировала папку feedback, изменила тему, убрала из письма ненужные поля и т.п. Теперь, когда отправляется письмо с одной формы на почту приходит сразу 2 письма — с разными темами. Почему так?
                                                        И ещё, как можно отправлять подтверждение о получении на указанный при заполнении формы email?

                                                        Спасибо!
                                                        1. Александр Мальцев # 0
                                                          Здравствуйте.
                                                          Проверьте, не подключаете ли вы к одной странице (*.html) 2 файла script.js, т.к. именно он отправляет и принимает данные с сервера. Либо проверьте путь к нему.
                                                          Ещё одна ссылка содержится в файле script.js в адресе:
                                                          url: "/feedback/verify.php",
                                                          
                                                          Проверьте эту строчку в разных файлах script.js, чтобы они указывали на файлы, расположенные в разных каталогах.

                                                          Запросить подтверждения прочтения письма у пользователя можно так:
                                                          $mail->ConfirmReadingTo = 'myemail@mail.ru';
                                                          
                                                          Но такие действия выполняются только в том случае, если пользователь это захочет. А также если почтовая программа настроена так, что разрешает отправку ответа.

                                                          1. Anna # 0
                                                            Александр, спасибо!
                                                            Да, у меня дважды подключался script.js

                                                            Я неправильно сформулировала вторую часть вопроса. Не подтверждение от пользователя, а копия пользователю на указанный при заполнении формы e-mail. Т.е. менеджеру приходит письмо и пользователю, который заполнял форму, отбивка на указанный e-mail: вы указали то-то и то-то, спасибо, мы получили, скоро ответим.
                                                            1. Александр Мальцев # 0
                                                              Копию письма (AddCC) или скрытую копию письма (AddBCC) можно отправить так:
                                                              $mail->AddCC('mail1@domain.com');
                                                              $mail->AddBCC('mail2@domain.com');
                                                              
                                                              Если необходимо с другим содержимым то так:
                                                              itchief.ru/lessons/php/feedback-form-for-website#comment-2735
                                                              1. Anna # 0
                                                                Александр, я что-то торможу. Вы, похоже, немного изменили исходники формы с того момента, как я ее скачивала и настраивала под себя. Пытаюсь встроить отправку письма пользователю по указанному выше в комментарии примеру, но не получается — письмо на адрес пользователя не приходит.
                                                                Вот мой работающий исходный код verify.php (без отправки письма-подтверждения)
                                                                
                                                                <?php
                                                                //открывает сессию
                                                                session_start();
                                                                //получить имя, которое ввёл пользователь
                                                                $name = $_POST["name"];
                                                                //получить email, которое ввёл пользователь
                                                                $email = $_POST["email"];
                                                                $phone = $_POST["phone"];
                                                                $message = $_POST["message"];
                                                                //если пользователь правильно ввёл капчу
                                                                if ($_SESSION["code1"] == $_POST["captcha"]) {
                                                                  //свой email (email, куда будут приходить сообщения)
                                                                  $emailTo = "myemail@gmail.com";
                                                                  //тема письма
                                                                  $subject = "ПЕРЕЗВОНИТЬ";
                                                                  //формируем тело письма
                                                                  //1. Полоска
                                                                  $body = "--------------------------------------\n";
                                                                  //2. Дата, когда сообщение пришло на сервер
                                                                  $body .= date("Y.m.d H:i")."\n";
                                                                  //3. Текст (заголовок)
                                                                  $body .= "Подробности заявки: \n\n";
                                                                  //4. Имя пользователя
                                                                  $body .= "Имя: ".$name."\n";
                                                                  $body .= "Телефон: ".$phone."\n";
                                                                  //5. Email пользователя
                                                                  $body .= "Email: ".$email."\n";
                                                                
                                                                  //6. Сообщение пользователя
                                                                  $body .= "Сообщение: \n".$message."\n";
                                                                  //7. Отправляем на почту
                                                                  $success = mail($emailTo, $subject, $body, "From: no-reply@no-reply.ru \r\n");
                                                                  
                                                                  //7. Добавляем в конец файла message.txt 
                                                                  //$file = 'message.txt';
                                                                  //$success = file_put_contents($file, $body, FILE_APPEND | LOCK_EX);
                                                                  //8. Если действия были успешны, то отправляем "success"
                                                                  if ($success) {
                                                                    echo "success";
                                                                   
                                                                  }
                                                                  //иначе отправляем "invalid"
                                                                  else {
                                                                    echo "invalid";
                                                                  }
                                                                }
                                                                else {
                                                                  //если пользователь ввёл неправильную капчу, то отправляем "invalidcaptcha"
                                                                  echo 'invalidcaptcha';
                                                                }
                                                                
                                                                
                                                                  ?>
                                                                Вопрос: куда нужно вставлять указанный код
                                                                $mail->ClearAllRecipients();
                                                                $mail->clearAttachments();
                                                                $mail->From      = 'email@mysite.ru';
                                                                $mail->FromName  = 'Имя сайта';
                                                                $mail->Subject   = 'Ваше сообщение отправлено';
                                                                $mail->Body      = $name . ', ваше сообщение доставлено. На данное письмо отвечать не надо.';
                                                                $mail->AddAddress( $email );
                                                                $mail->Send();
                                                                Спасибо!
                                                                1. Александр Мальцев # 0
                                                                  Да, многое улучшил :)
                                                                  Данный код вставить в ваш файл не получится, т.к. у вас для отправки почты используется php функция mail. А сейчас библиотека phpMailer. Если хотите использовать, то скачайте новую версию файла php и настройте его под себя.
                                                                  1. Anna # 0
                                                                    Саша, 20 сайтов по 2 формы на каждом… А если все-таки с функцией mail… Может подскажете…
                                                                  2. Александр Мальцев # 0
                                                                    Добавьте необходимые заголовки:
                                                                    $headers = 'From: no-reply@no-reply.ru' . "\r\n";
                                                                    $headers .= 'Cc: mail1@mail.ru' . "\r\n";
                                                                    $headers .= 'Bcc: mail2@mail.ru' . "\r\n";
                                                                    $success = mail($emailTo, $subject, $body, $headers);
                                                                    
                                                                    1. Anna # 0
                                                                      Спасибо!
                                                                      В общем никаких сложных (правильных и красивых) путей не стала искать. Может кому-то пригодится.
                                                                      Чтобы письмо-подтверждение о получении сообщения с сайта с произвольным содержимым уходило на почту пользователю, сделала следующее.
                                                                      добавила поля $subject1, $body1 и продублировала отправку еще одного письма
                                                                      //7. Отправляем на почту
                                                                        $success = mail($emailTo, $subject, $body, "From: no-reply@site.ru \r\n");
                                                                        $success = mail($email, $subject1, $body1, "From: no-reply@site.ru \r\n");
                                                                      где $email — почта, введенная пользователем в поле формы на сайте.
                                                          2. Anna # 0
                                                            спасибо от меня Вам и вашему сайту на соответствующей странице ;)
                                                            1. Александр Мальцев # 0
                                                              Приятно получать такие спасибки :)
                                                            2. Кирилл # 0
                                                              Здравствуйте.
                                                              Попытался заместо видения email сделать выбор категории, но приходит следующие — Выбрана категория: undefined.
                                                              Где я накосячил?
                                                              1. Александр Мальцев # 0
                                                                Не совсем понял про категорию. Если категорией является HTML элемент select, то сначала в javascript необходимо получить его значение (с помощью метода val()), поместить в объект FormData. А на сервере получить это значение ($_POST['имя_ключа']), на основании ключа, с которым было связано это значение в FormData. После этого что-то с ним сделать (например, вывести или сравнить с чем-нибудь и т.д.).
                                                                1. Kirill2511 # 0
                                                                  В HTML вписал следующие —
                                                                  <div class="form-group has-feedback">
                                                                                      <label for="selec" class="control-label">Выберите категорию:</label>
                                                                                      <select class="form-control" name="selec">
                                                                                      <option selected value="1">qwe</option>
                                                                                      <option value="2">qwer</option>
                                                                                      </select>
                                                                  В js —
                                                                        var selec = $("#selec").val();
                                                                        formData.append('selec', $("#selec").val() );
                                                                  
                                                                  В php —
                                                                      if (isset($_POST['selec'])) {
                                                                        $selec = $_POST['selec'];
                                                                      } else {
                                                                        $data['result']='error';
                                                                      } 
                                                                  
                                                                  и
                                                                      #$output .= "Выбрана категория: " . $selec . "\n"; 
                                                                  	$output .= "Выбрана категория: " . "\n" . $_POST['selec'] . "\n";
                                                                  

                                                                  Изначально побывал ". $selec. "\n" пока не прочитал низ темы, потом побывал через пост.
                                                                  1. Александр Мальцев # 0
                                                                    Добавьте для элемента select атрибут id, т.к. в javascript вы получаете его по id:
                                                                    <select class="form-control" name="selec" id="selec">
                                                                    
                                                                    А так как вы сейчас делаете, в js необходимо элемент select получать так (т.е. по атрибуту name):
                                                                    var selec = $('select[name="selec"]').val();
                                                                    
                                                                    1. Kirill2511 # 0
                                                                      Спасибо, все заработало.
                                                                      1. Виктор # 0
                                                                        Уже какой раз пробую не выходит… Просто зависает форма и всё…

                                                                        Если не трудно напишите куда что вставлять
                                                                        1. Александр Мальцев # 0
                                                                          Посмотрите ошибки в консоли браузера.
                                                                          Кроме этого в статье есть Руководство по добавлению полей в форму, в которой описано что и куда добавлять. Попробуйте разобраться (не знаю как это руководство подробней описать, если только снять видео)…
                                                                2. Виктор # 0
                                                                  Всем доброго времени суток! У меня вопрос
                                                                  Я снимаю вроде все ограничения по закачки файла (по умолчанию 512 КБ) делаю 1.5 МБ. После заполнения формы, пишет, что письмо отправлено, но в папке file этого файла нету (файл весит 1.4 Мб), а в текстовом документе отображается всё, кроме ссылки на файл. Это как нибудь можно исправить? Мне надо что бы люди могли закачивать файлы до 10 Мб

                                                                  p.s. Закачиваю файл в размере 250 Кб, всё везде появляется
                                                                  1. Александр Мальцев # 0
                                                                    Кроме как изменить в скриптах, необходимо ещё настроить соответсвующие директивы.
                                                                    Попробуйте воспользоваться этим ответом:
                                                                    itchief.ru/lessons/php/how-to-install-recaptcha-on-website#comment-2896
                                                                  2. Виктор # 0
                                                                    И как ещё сделать выпадающий список? Что пользователь мог выбрать один из вариантов
                                                                    1. Александр Мальцев # 0
                                                                      В этом комментарии itchief.ru/lessons/php/feedback-form-for-website#comment-3161 есть ответ на ваш вопрос.
                                                                      1. Виктор # 0
                                                                        Спасибо большое за ответы, буду попробовать)
                                                                    2. lood # 0
                                                                      Добрый день! У меня форма почему то не работает.
                                                                      Адрес указал в строке 184: $mail->AddAddress( 'info@***.ru' );.
                                                                      После отправки пишется «сообщение отправлено». Но по факту, письма не приходят.
                                                                      Что мне еще нужно дописать?
                                                                      1. Александр Мальцев # 0
                                                                        Необходимо сначала проверить поддерживает ли хостинг вообще отправку писем или нет.
                                                                        1. lood # 0
                                                                          Александр, да, такав возможность у моего хостинга есть, она подключена.
                                                                          Может быть мне в коде нужно какие то атрибуты подключить еще?
                                                                          1. Александр Мальцев # 0
                                                                            Может они попадают в спам. Необходимо проверить этот момент.
                                                                            1. lood # 0
                                                                              Александр! Ну, конечно же я это проверил!!! А то бы, даже спрашивать не стал! )
                                                                              Какие еще варианты решения могут быть?
                                                                              1. Александр Мальцев # 0
                                                                                Проверьте для начала, уходит ли почта.
                                                                                Этого можно сделать так:
                                                                                1. Удалить весь код из файла, кроме отправки файла.
                                                                                require_once dirname(__FILE__) . '/phpmailer/PHPMailerAutoload.php';
                                                                                $mail = new PHPMailer;
                                                                                $mail->From      = 'email@mysite.ru';
                                                                                $mail->FromName  = 'Имя сайта';
                                                                                $mail->Subject   = 'Сообщение с формы обратной связи';
                                                                                $mail->Body      = 'Текст письма';
                                                                                $mail->AddAddress( 'myemail@mail.ru' ); // куда отправить
                                                                                $mail->Send();
                                                                                
                                                                                2. Запустить данный скрипт на выполнение.
                                                                                3. Проверить в почтовом ящике письмо.
                                                                                1. lood # 0
                                                                                  В файле verify.php удалил все, вставил текст, который Вы написали выше. Больше ничего не трогал. При нажатии «Отправить» ничего не происходить. Письма не приходят.
                                                                                  Что делать?
                                                                                  1. Александр Мальцев # 0
                                                                                    Если ваш тариф хостинга позволяет отправку писем, то напишите о проблеме в техподдержку. Также можете включить лог ошибок в панели управления хостингом, открыть файл, в который они пишутся, и посмотреть какие ошибки у вас возникают.
                                                                      2. Максим # 0
                                                                        Доброго времени суток.
                                                                        Просмотрел комменты, своей проблемы не нашел.
                                                                        Добавил парочку новых строк в форму.
                                                                        Письмо с формы приходит, но с новых строк видны только заголовки, самого вводимого содержимого строки в письме нету.
                                                                        Буду рад совету. Спасибо.
                                                                        1. Александр Мальцев # 0
                                                                          Здравствуйте.
                                                                          Посмотрите ответ на подобный вопрос:
                                                                          itchief.ru/lessons/bootstrap-3/creating-feedback-form-using-bootstrap-php-and-ajax#comment-3334
                                                                        2. Андрей # 0
                                                                          Александр приветствую. Ваша форма обратной связи на моем сайте благополучно работает уже пол года, но вот сегодня почему-то пришло совершенно пустое письмо — ни адресата, ни текста, вообще ничего. Это меня озадачило, поскольку обычно выполняются всякие проверки перед отправкой. Как такое может происходить?
                                                                          1. Александр Мальцев # 0
                                                                            Проверки в файле verify.php есть. Может быть, письмо было отправлено не из этой формы, а каким-то другим способом. Кстати тема письма совпадает с тем, какое вы установили ему в файле verify.php?
                                                                          2. Андрей # 0
                                                                            Заголовок (тема, сервера откуда отправлено и т.п.) письма точно такой-же, как и в нормальных письмах. Это и озадачило. Правда я судя по всему использую не самую последнюю вашу версию исходников, без phpmailer. Может быть из-за этого?
                                                                            И кстати давно хотел спросить, как сделать replay-to, что-бы отвечая на письмо, сразу подставлялся адрес, введенный отправителем?
                                                                            1. Александр Мальцев # 0
                                                                              В первых версиях формы обратной связи проверки на стороне сервере вообще не было. Так что пора обновить…
                                                                              В файл php необходимо добавить строчку:
                                                                              $mail->AddReplyTo('replyto@email.com', 'Reply to name');
                                                                              
                                                                              1. Андрей # 0
                                                                                Правильно я понял, что добавить в файл verify.php? Возможно я не туда добавил, но при ответе теперь обратный адрес подставляется так «Reply to name <replyto@email.com>», а не адрес, введенный отправителем.
                                                                                1. Александр Мальцев # 0
                                                                                  Вам необходимо подставить значения соотвествующих переменных:
                                                                                  $mail->AddReplyTo($email, 'Reply to ' . $name);
                                                                                  
                                                                            2. Андрей # 0
                                                                              Спасибо так работает. Только кириллическое написание имени отправителя почему-то получается кракозябрами. Как и заголовок письма.
                                                                              1. Андрей # 0
                                                                                Нашел ответ по кодировке в ветке выше, помогло $mail->CharSet = 'utf-8';.
                                                                                Александр, ваша сайт Супер!!!
                                                                                1. Alexander # 0
                                                                                  Добрый день.
                                                                                  Такая проблемка:
                                                                                  Запилил форму в модальное окно, выглядит очень красиво, но в denver форма выполняется отлично, а вот на хостинге не хочет… не проверяется капча и не отправляется сообщение.
                                                                                  1. Александр Мальцев # 0
                                                                                    Здравствуйте.
                                                                                    Посмотрите, какие возникают ошибки. А также проверьте, поддерживает ли тариф вообще отправку писем…
                                                                                  2. Alexander # 0
                                                                                    Как их посмотреть, если их нет, а точнее я их не вижу.
                                                                                    Тариф поддерживает отправку писем, поскольку раньше использовал другие формы.
                                                                                    u-lab.ru/arch/ ссылка на форму справа вверху «напишите нам»
                                                                                    Вот что отображается после нажатия на кнопку «Отправить сообщение»
                                                                                    1. Александр Мальцев # 0
                                                                                      У вас возникает ошибка на 46 строчки в файле verify.php. А именно проблема с вызовом несуществующей функции filter_var. Скорее всего, у вас версия PHP, в которой её нет.
                                                                                      Можете просто убрать проверку поля email (или заменить её на что-то другое).
                                                                                      Чтобы удалить проверку, замените нижеприведённый код:
                                                                                      //получить email, которое ввёл пользователь
                                                                                      if (isset($_POST['email'])) {
                                                                                        $email = $_POST['email'];
                                                                                        if (!filter_var($email,FILTER_VALIDATE_EMAIL)) {
                                                                                          $data['email']='Поле email введено неправильно';
                                                                                          $data['result']='error';
                                                                                        }
                                                                                      } else {
                                                                                        $data['result']='error';
                                                                                      }
                                                                                      
                                                                                      на:
                                                                                      //получить email, которое ввёл пользователь
                                                                                      if (isset($_POST['email'])) {
                                                                                        $email = $_POST['email'];
                                                                                      } else {
                                                                                        $data['result']='error';
                                                                                      }
                                                                                      
                                                                                      1. Alexander # 0
                                                                                        Александр, спасибо большое!
                                                                                        Всё работает как часы!
                                                                                        Удачи!
                                                                                    2. Любомир # 0
                                                                                      Здравствуйте, Александр!
                                                                                      Очень красивая форма, все в ней устраивает, но я хочу убрать поля капча и сообщение.
                                                                                      Оставить только имя и телефон. К сожалению, это не получается у меня, в итоге форма перестает работать, хотя удаляю куски кода из файлов указанных в статье.
                                                                                      Понимаю, что вас уже достали здесь комментариями, но не могли бы вы сделать вариант только с именем и телефоном?
                                                                                      Буду очень благодарен и оставлю вам донат :)
                                                                                      1. Александр Мальцев # +1
                                                                                        Здравствуйте.
                                                                                        Ссылка для формы, состоящей только из имени и номера телефона: yadi.sk/d/_UrVReQ2zzvgP.
                                                                                      2. wolkkkaa # 0
                                                                                        Я чуток тугой в этом.
                                                                                        А где указывать свою почту.чтобы принимать письма.жду ответа!
                                                                                        там мне нравки все!
                                                                                        1. Александр Мальцев # 0
                                                                                          Открыть файл verify.php и на строчке 183 вместо myemail@mail.ru вписать свою почту.
                                                                                        2. Oleg # 0
                                                                                          Здравствуйте Александр, спасибо за форму, все работает отлично. Только объясните как убрать поле прикрепления файлов, я если убираю, то перестает работать отправка письма. Спасибо.
                                                                                          1. Александр Мальцев # 0
                                                                                            Здраствуйте. Форма feedback без прикрепления к ней файлов: yadi.sk/d/q1_QiZj532HVYX

                                                                                          Вы должны авторизоваться, чтобы оставлять комментарии.