Форма обратной связи на php, html и bootstrap

Статья, в которой рассмотрим, как создать форму обратной связи для сайта, используя HTML, JavaScript (jQuery), популярный фронт-энд фреймворк Bootstrap, технологию AJAX и PHP. Форма будет работать без перезагрузки страницы. Переданные посетителем данные будут отправляться на почту (email).

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

Форма обратной связи и логика её работы осуществляется посредством файлов, расположенных в каталоге feedback на сервере.

Данная директория имеет следующую структуру:

feedback/
├── css/
│   └── bootstrap.min.css
├── js/
│   ├── jquery-3.1.0.min.js
│   └── bootstrap.min.js
├── fonts/
│    ├── glyphicons-halflings-regular.eot
│    ├── glyphicons-halflings-regular.svg
│    └── ...
├── phpmailer/
│    ├── PHPMailerAutoload.php
│    ├── class.phpmailer.php
│    └── ...
├── background.png
├── captcha.php
├── index.html
├── message.txt
├── oswald.ttf
├── process.php
└── script.js

Назначение файлов:

  • bootstrap.min.css, bootstrap.min.js и файлы шрифтов в директории fonts (платформа Twitter Bootstrap 3);
  • jquery-3.1.0.min.js (библиотека jQuery);
  • background.png (фон, на который будет накладываться шрифт при создании капчи);
  • captcha.php (php код, генерирующий капчу);
  • index.html (страница, содержащая html код формы обратной связи);
  • message.txt (текстовый файл, в который при необходимости можно записывать информацию с формы обратной связи);
  • oswald.ttf (шрифт, с помощью которого будем писать код капчи на изображении);
  • script.js (скрипт, обеспечивающий функционирование формы обратной связи в браузере);
  • файлы, расположенные в директории phpmailer (php библиотека для отправки писем);
  • process.php (php код, который будет обрабатывать данные формы на стороне сервера).

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

По умолчанию контактная форма (feedback) доступна посетителю сайта на странице /feedback/index.html.

HTML форма обратной связи (feedback)
HTML форма обратной связи (feedback)

Она состоит 3 полей (имя, email, сообщение), капчи и кнопки "Отправить сообщение".

Дизайн формы feedback выполнен в стиле Twitter Bootstrap 3. Процесс создания такого оформления осуществляется посредством добавления CSS классов Bootstrap к необходимым HTML элементам формы.

HTML код формы обратной связи (index.html):

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

  <h1 class="h2 page-header text-center">Bootstrap - AJAX форма обратной связи</h1> 

  <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="successMessage">
              <strong>Внимание!</strong> Ваше сообщение успешно отправлено.
            </div>

            <!-- Форма обратной связи -->
            <form id="contactForm">
              <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>

              <hr>
              <!-- Изображение, содержащее код капчи -->		  
	            <img id="img-captcha" src="/feedback/captcha.php">
              <!-- Элемент, обновляющий код капчи -->
	            <div id="reload-captcha" class="btn btn-default"><i class="glyphicon glyphicon-refresh"></i> Обновить</div>
	            <!-- Блок для ввода кода капчи -->
	            <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="" autocomplete="off" minlength="6" maxlength="6">
	              <span class="glyphicon form-control-feedback"></span>
              </div>

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

          </div>
        </div><!-- Конец контейнера -->

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

  <script src="/feedback/js/jquery-3.1.0.min.js"></script>
  <script src="/feedback/js/bootstrap.min.js"></script>
  <script src="/feedback/script.js"></script>
</body>
</html>

Формирование изображения, содержащего код капчи, выполняется серверным скриптом captcha.php.

Более подробно познакомиться с тем как работает капча можно в статье Создание капчи на PHP.

PHP код файла 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);
?>

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

После заполнения полей формы посетитель может отправить данные на сервер.

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

Отправкой данных на сервер занимается скрипт javascript. Но перед тем как данные передать серверу по технологии AJAX, он должен проверить их на корректность.

Все действия по обработке формы в браузере, а также обновление страницы после получения ответа от сервера выполняет код JavaScript, находящийся в файле script.js.

JavaScript (jQuery) код файла script.js:

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

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

  // при отправке формы contactForm на сервер (id="contactForm")
  $('#contactForm').submit(function(event) {
    // отменяем стандартное действие браузера
    event.preventDefault();
    // заводим переменную, которая будет говорить о том валидна форма или нет
    var formValid = true;
    // перебираем все элементы управления формы (input и textarea) 
    $('#contactForm input,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;  
      }
    });
    // проверяем элемент, содержащий код капчи
    // получаем значение элемента input, который содержит код капчи
    var captcha = $("#text-captcha").val();
    // если количество символов в коде капчи не равна 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 значение 'captcha'=значение_поля_captcha
      formData.append('captcha', captcha);

	  //отправляем данные на сервер (AJAX)
      $.ajax({
		//метод передачи запроса - POST
        type: "POST",
		//URL-адрес запроса 
        url: "/feedback/process.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") {

			// скрываем форму обратной связи
            $('#contactForm').hide();
			// удаляем у элемента, имеющего id=successMessage, класс hidden
            $('#successMessage').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('Произошли ошибки при отправке формы на сервер.');
          }
        },
        error: function (request) {
          $('#error').text('Произошла ошибка ' + request.responseText + ' при отправке данных.');
        }        
      });
	}	 
  });
});

Код файла script.js выполняет следующие основные функции:

  • валидация (проверка) полей формы перед отправкой их на сервер;
  • подготовка данных, и их отправка методом POST на сервер;
  • получения ответа от сервера и разбор результата;
  • в случае получения успешного ответа (success): скрытие формы и отображения сообщения об удачной отправке информации;
  • если в качества ответа пришла ошибка (error, invalidCaptcha или др.): отображения пользователю отрицательного результата.
Сообщение, которое выводится пользователю, если данные были успешно отправлены
Сообщение, которое выводится пользователю, если данные были успешно отправлены
Письмо, пришедшее с формы обратной связи
Письмо, пришедшее с формы обратной связи
Содержимое файла message.txt
Содержимое файла message.txt

На сервере обработку форму обратной связи выполняет php файл process.php.

Содержимое файла process.php:

<?php
//открываем сессию
session_start();
// переменная, в которую будем сохранять результат работы
$data['result']='error';

// функция для проверки длины строки
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') {
    // устанавливаем результат, равный success
    $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) {
        // пользователь ввёл неправильную капчу
        $data['result']='invalidCaptcha';
      }
    }
  } else {
    //данные не были отправлены методом пост
    $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 (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";

    // создаём экземпляр класса 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 ($mail->Send()) {
      $data['result']='success';
    } else {
      $data['result']='error';
    }      

  }
  // формируем ответ, который отправим клиенту
  echo json_encode($data);
?>

Данный файл выполняет следующие основные действия:

  • получение значений с элементов формы index.html;
  • верификация данных формы и капчи;
  • в случае успеха: отправка email письма указанному пользователю и сохранение данных, введённых пользователем, в файл message.txt.
  • отправка результата клиенту (успех, ошибка или неверная капча).

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

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

Настройка форма обратной связи

Настройка формы, а именно email, на который необходимо отправлять данные, осуществляется посредством редактирования строчек 99-103 (за исключением 102) файла process.php:

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

Строчка 99 и 100 устанавливает от кого (email и имя) отправлено письмо. Тема email указывается на строчке 101. Адрес, на который будут отправляться сообщения, задаётся в качестве параметра $mail->AddAddress.

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

Если сообщения отправлять на почту не нужно, то эти действия необходимо закомментировать (строчки 86-110) в файле process.php:

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

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

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

После скачивания и распаковки архива, каталог feedback необходимо загрузить в корневую директорию сайта. Следующий этап - это настройка (редактирование) формы. Основные моменты приведены в соответствующем разделе этой статьи. После этого форма будет готова к работе.

Данную форму можно использовать для лендинга (lending), блога, магазина, а также для других типов сайтов.

Демонстрация AJAX (без перезагрузки) формы обратной связи с защитой от спама:

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


Статьи, связанные с этой темой:



   Bootstrap 0    22691 +2

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

  1. nic12 # 0
    Поставил форму на сайт с html, подобная установлена но без капчи и стали приходить спам-письма.
    Нашел в поиске эту форму отправки, установил, но она не работает, т.е. капча имеется, показываются нужные надписи и если капча введена неправильно, тоже это информация выходит.
    При правильном заполнении пишет, что письмо отправлено, но в почтовый ящик она не приходит.
    Файл index вынес из папки и его переименовал. В строчку 13 $emailTo и 30 From: вписал свой емейл Подскажите где искать?
    1. Александр Мальцев # 0
      1. Проверьте ошибки на клиенте (в браузере) в панели разработчика во вкладке Console и Network. Во вкладке Network посмотрите какой приходит ответ.
      2. Попробуйте проверить все пути…
      3. Проверьте ошибки на сервере

      Попробуйте на время заменить функцию mail на вывод в файл, и проверьте попадают в него данные или нет.
      1. nic12 # 0
        Александр, спасибо за ответ, вот такой ответ нашел, может не то: unreachable code after return statement. До этого на всякий случай файл php сохранил без бом.
        Такая же форма с файлом html и php работает без вопросов, может натолкну на мысль…
        Код
        <?php
        if (isset($_POST['name'])) {$name = $_POST['name'];}
        if (isset($_POST['email'])) {$email = $_POST['email'];}
        if (isset($_POST['mess'])) {$mess = $_POST['mess'];}
        if (empty($name))
        {
        echo "<b>Не указано имя!<p>";
        echo "<a href=../kontakt.html>Вернуться и правильно заполнить форму.</a>";
        }
        else
        if (empty($email))
        {
        echo "<b>Не указан e-mail!<p>";
        echo "<a href=../kontakt.html>Вернуться и правильно заполнить форму.</a>";
        }
        else
        if (empty($mess))
        {
        echo "<b>Сообщение не написано!<p>";
        echo "<a href=../kontakt.html>Вернуться и правильно заполнить форму.</a>";
        }
        else
        $to = "xxxxxxx@mail.ru"; /*Здесь укажите свой адрес!*/
        $charset = "windows-windows-1251";
        $subject = "Сообщение с сайта";
        $message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";
        $send = mail ($to,$subject,$message);
        if ($send == 'true')
        {
        echo "<center><b>Спасибо за отправку вашего сообщения
        <a href=../kontakt.html>Нажмите</a>, чтобы вернуться на страницу";
        }
        else
        {
        echo "<p><b>Ошибка. Сообщение не отправлено!";
        }
        ?>
        
        1. nic12 # 0
          Александр, если в текстовый файл, то текст приходит
          2016.01.17 17:48
          Содержимое заполненных пользователем полей:
          Имя: иван
          Email: ччччччч@yandex.ru
          Сообщение:
          klkllklklk' СЂСЂСЂСЂСЂСЂСЂСЂСЂСЂСЂСЂСЂ
    2. nic12 # 0
      Александр, форма заработала, ничего не менял, как-то так, сам не понял, спасибо!
      1. Денис # 0
        Привет, подскажи, а можно ли всплывающие подсказки о неверном заполнении полей показывать на английском языке? если да то как? не нашел откуда он эти фразы берёт «Заполните это поле», «Адрес должен содержать....» и т.д.
        И Ещё уменьшил количество символов до 4 в файле
        captcha.php
        $captchastring = substr(str_shuffle($captchastring), 0, 6);
        поменял на
        $captchastring = substr(str_shuffle($captchastring), 0, 4);

        Но подсказка по прежнему хочет чтобы я 6 символов вводил, где ещё нужно править?
        1. Александр Мальцев # 0
          Эти сообщения выдаёт встроенный валидатор браузера. Если браузер на английском языке, то и сообщения будут на английском.
          Это необходимо поменять ещё в HTML файле в следующей строчке (59):
          <input id="text-captcha" name="captcha" type="text" class="form-control" required="required" value="" minlength="4" maxlength="4">
          
          И в файле script.js (строчки 42 и 55):
          if (captcha.length!=4) {
          if (formValid && captcha.length==4) {
          
        2. Игорь # 0
          все поставил как написано, НО текст весь ?????, а не буквы (не понимает русский)
          И сообщения не доходят!
          В текстовой файл пишет, но опять все внутренние названия ??????, а не буквы (не понимает русский)
          1. Игорь # 0
            Письма теперь отправляет (если в адресе было admin@mysite.ru, то не работало)
            А вот с кодировкой проблема, что в форме, так и в сообщении
            Как быть?
            1. Игорь # 0
              Простите…
              перекодировал без BOM… полет нормальный!
              1. Руслан # 0
                Спасибо за статью!
                Но есть одна проблемка… Делаю сайт на самописном движке. На главной странице все работает, а вот на других страницах ничего не работает: капча выводится, но не обновляется; сообщение не отправляется, получается не срабатывает JS. Код вынесен в отдельный файл и подключатся ко всем страницам.
                1. Руслан # 0
                  Еще добавлю, что использую ЧПУ. Скорей всего с этим связано…
                  1. Рамиль # 0
                    У меня была такая же проблема.
                    Открыл стили bootstrap.min.css и заменил все url(../fonts/glyphicons-... на url(http://mysite.com/mail/fonts/glyphicons-... и все получилось.

                    Удачи.
                    1. Александр Мальцев # 0
                      Измени пути на абсолютные (/..).
                      1. Руслан # 0
                        это я уже сделал давно. jquery отрабатывает, все картинки отображаются, а ajax в никакую…
                    2. Рамиль # 0
                      Поставил форму на сайт, все работает отлично, но скрытые надписи "Внимание, сообщение отправлено!" и "Пожалуйста, введите указанный на изображении код:" всегда видны перед отправкой. То есть как правила они должны быть скрытыми, а на сайте всегда видны перед input-ами и после каптчи.

                      Спасибо.
                      1. Александр Мальцев # 0
                        Во-первых скрыта только первая надпись. Для этого используется класс Bootstrap hidden:
                        <!-- Сообщение, отображаемое в случае успешной отправки данных -->
                        <div class="alert alert-success hidden" role="alert" id="msgSubmit">
                        <strong>Внимание!</strong> Сообщение отправлено.
                        </div>
                        
                        Если не работает, то проверьте свои стили.
                        1. Рамиль # 0
                          А не подскажете какая будет строка в файле .css этот класс Bootstrap?
                          1. Александр Мальцев # 0
                            #msgSubmit {
                              display: none !important;
                            }
                            
                      2. Andrew Golovaciuc # 0
                        Здорово подключил все работает
                        отправляется как нужно
                        но сначала не работало
                        P.S
                        поправил пути к файлам и все забартало
                        1. Сергей # 0
                          Добрый день.

                          Можно ли, добавить в форму
                          отправку файлов input type=«file»?
                          1. Александр Мальцев # 0
                            Здравствуйте.
                            Для этого придется произвести следующие изменения.
                            1. В файле index.html:
                            <!-- Добавить к форме атрибут enctype="multipart/form-data" -->
                            <form id="messageForm" enctype="multipart/form-data">
                            ...
                            <!-- Ну и собственно разместить сам элемент -->
                            <input type="file" name="image" id="image" value="">
                            
                            2. В файле verify.php (например, перед строчкой 30 — отправкой на почту):
                            //сохраняем исходный путь к файлу в переменную
                            $sourcePath = $_FILES['file']['tmp_name'];
                            //перемещаем файл в папку uploads, если ошибок нет
                            if ( 0 < $_FILES['file']['error'] ) {
                              echo 'Error: ' . $_FILES['file']['error'] . '
                            ';
                            }
                            else {
                              move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
                            }
                            
                            3. В файле script.js немного изменяем скрипт:
                            if (formValid && captcha.length==6) {
                              var name = $("#name").val();
                              var email = $("#email").val();
                              var message = $("#message").val();
                              var captcha = $("#text-captcha").val();
                              // изменения
                              var file_data = $('#image').prop('files')[0];  
                              var form_data = new FormData();                  
                              form_data.append('file', file_data);
                              form_data.append('name', name);
                              form_data.append('email', email);
                              form_data.append('message', message);
                              form_data.append('captcha', captcha);
                              //конец изменений
                              $.ajax({
                                type: "POST",
                                url: "/feedback/verify.php",
                                //изменения
                                data: form_data,
                                contentType: false,
                                processData: false,
                                cache: false,
                                //конец изменений
                                success : function(text){
                                  if (text == "success"){
                                    $('#messageForm').hide();
                                    $('#msgSubmit').removeClass('hidden');
                                  }
                                  ...
                            
                            Ну и конечно создать на сервере необходимые каталоги.
                            1. Андрей # 0
                              Странно, все сделал как Вы написали — само письмо приходит, но без вложения. Подскажите почему может так получиться?
                              1. Александр Мальцев # 0
                          2. Иван # 0
                            Здравствуйте. Большое спасибо за урок. Прям спасли =)
                            Не подскажете, как в файле verify.php указать кодировку для письма? А то некоторые почтовые клиенты ругаются.
                            Спасибо.
                            1. Александр Мальцев # 0
                              Здравствуйте.
                              Попробуйте так:
                              //7. Отправляем на почту
                              $header = "MIME-Version: 1.0\r\n";
                              $header.= "Content-Type: text/html; charset=UTF-8\r\n";
                              $header.= "From: myemail@mail.ru\r\n";
                              $success = mail($emailTo, $subject, $body, $header);
                              
                              1. Иван # 0
                                Спасибо, сработало. Только теперь перенос строк отключился, но это мелочи =)
                                1. Богдан # 0
                                  Александр, огромное спасибо вам за форму. У меня, как и у Ивана была проблема с кодировкой. Дописал предложеные вами строчки, теперь проблем нет, но отключился перенос строк, все сплошным текстом. Подскажите в чем может быть проблема?
                                  1. Богдан # 0
                                    Сам отвечу на свой вопрос. Поменял Content-Type: text/html на Content-Type: text/plain и текст стал нормально переноситься.
                            2. Al # 0
                              Спасибо!
                              А как отправлять сразу на сколько $emailTo?
                              1. Александр Мальцев # 0
                                Через запятую:
                                $emailTo = 'email1@mail.ru'.', ';
                                $emailTo.= 'email2@mail.ru';
                                
                              2. oleg # 0
                                Александр, здравствуйте. Спасибо за материал.
                                Подскажите как передать параметром из index.html-файла
                                электронный (несколько электронных) адрес для отправки в файл verify.php.
                                Это нужно когда на сайте есть несколько форм по отправке обратного адреса.
                                Спасибо
                                1. Александр Мальцев # 0
                                  Спасибо, Олег.
                                  Можно использовать скрытые поля в форме:
                                  <input type="hidden" name="sendemail" value="name1@mail.ru,name2@mail.ru">
                                  
                                  А в файле verify.php их получать и подставлять в функцию mail:
                                  $sendemail = $_POST["sendemail"];
                                  $success = mail($sendemail, $subject, $body, "From: myemail@mail.ru \r\n");
                                  
                                  1. oleg # 0
                                    Получилось только нужно написать так
                                    <input type="hidden" id="sendemail" name="sendemail" value="name1@mail.ru,name2@mail.ru"> 
                                    
                                    и в файле script.js дописать соответственно
                                    спасибо
                                2. oleg # 0
                                  Александр, здравствуйте.
                                  Еще такой вопрос.
                                  Как расширить немного поля, чтобы текст поместился полностью и чтобы поля были ровными.
                                  Сейчас вот так выглядят мои поля


                                  Имя и контактный телефон урезан
                                  Убирал свойство в файле bootstrap.min.css
                                  .form-control {
                                  display: block;
                                  }
                                  поля показывают, но при этом разбросанные.
                                  Мне надо немного их расширить?
                                  Спасибо
                                  1. Александр Мальцев # 0
                                    Попробуйте изменить значение отступа справа.
                                    form-control {
                                      padding-right: 6px !important;
                                    }
                                    
                                    1. oleg # 0
                                      Александр добрый день, проблема не решилась.
                                      В результате, такой результат


                                      текст-подсказка снова урезаны
                                      1. Александр Мальцев # 0
                                        Тут вариантов много. Можно, например, расстояние между блоками уменьшить или что-то другое сделать. Ещё зависит от того адаптивная у Вас форма или нет.
                                        Тут желательно данную ситуацию представить на jsfiddle.
                                  2. Al # 0
                                    Спасибо за скрипт!
                                    Подскажите, а как убрать капчу?
                                    А защиту сделать с помощью скрытого поля?
                                    1. Андрей # 0
                                      Для того, чтобы убрать капчу из этой формы, Вам нужно убрать весь код, отвечающий за ее вывод в html коде формы (в примере строки 52-61)
                                      А далее в файле script.js убрать строки, отвечающие за ее проверку (в примере строки 37-55) и убрать закрывающую на строке фигурную скобку на строке 100
                                      А затем в файле verify.php убрать условие, проверяющее капчу: строки 11 и 42-46.
                                      1. Александр Мальцев # 0
                                        Добавить к форме скрытое поле:
                                        <input type="hidden" id="robots" name="robots" value="">
                                        
                                        В файле verify.php необходимо обработку форму производить только после того, если данное поле пустое:
                                        <?php
                                        if($_POST['robots'] = '') {
                                          //обработка формы
                                        }
                                        ?>
                                        
                                        Можно, также сделать немного по другому. Например, после загрузки страницы, выполнять скрипт, который будет изменять значение данного поля на нечто другое.
                                        $(function() {
                                          setTimeout(function() {
                                            document.getElementById('robots').value='CODE';
                                          },5000);
                                        });
                                        
                                        Ну соответственно и скрипт поменять:
                                        if (!empty($_POST['robots']) && ($_POST['robots']=='CODE')) {
                                          //обработка форма
                                        };
                                        
                                        Спам роботы используют сложные алгоритмы, которые способны обойти различную защиту. Поэтому в первую очередь стоит подумать об усилении защиты, чем об её упрощении. Так чем сайт будет более популярен, тем больше шанс попасть под спам атаку…
                                      2. Михаил # 0
                                        Добрый день!
                                        Детально все прочитал, столкнулся с проблемой такой:
                                        в текстовый файл запись осуществляется, а при другой настройке на почту письма не приходят! Подскажите в чем проблема
                                        1. Александр Мальцев # 0
                                          Посмотреть работает ли функция mail на хостинге.
                                        2. Андрей # 0
                                          Спасибо за код. Скачал, откорректировал пути и всё заработало. Очень круто!
                                          А возможно-ли добавить индикатор прогресса, который будет крутиться после нажатия «Отправить» до момента появления сообщения об успешной отправки. А то этот промежуток времени непонятно происходит-ли что-нибудь или нет.
                                          1. Александр Мальцев # 0
                                            Сделать можно, но насколько это актуально. Время замерял?
                                            Например, на самом простом хостинге (специально замерил):
                                            — запрос без вложений: 0.3 секунды;
                                            — запрос с файлом 4 Мб: 3-4 секунды.
                                            Т.е. такую вещь актуально делать если есть вложения более 3Мб.
                                            Сделать можно так:
                                            1. В форме немного изменяем блок с кнопкой submit на:
                                            <!-- Кнопка, отправляющая форму по технологии AJAX --> 
                                            <div class="pull-right">
                                              <img id="loading" src="feedback/5.gif" style="margin-right: 10px;" class="hidden">
                                              <button type="submit" class="btn btn-primary">Отправить сообщение</button>
                                            </div>
                                            
                                            2. В JavaScript добавить перед success:
                                            //при успешном выполнении запроса
                                            beforeSend: function () {
                                              $('#loading').removeClass('hidden');
                                            },
                                            complete: function () {
                                              $('#loading').addClass('hidden');
                                            },
                                            
                                            Вращающуюся иконку (изображение) можно скачать с сайта _http://preloaders.net/en/search/rotating. Размер иконки желательно установить 34px.
                                            1. Андрей # 0
                                              Я для начала на «домашнем» сервере страницы верстаю, у меня на нём письмо без вложений уходит на 3-4 сек, вот и заметил «пустоту» действий. Значок вставил, теперь всё отлично стало. Спасибо.
                                          2. Сергей # 0
                                            Привет, почему капчу не выводит просто синий квадратик?
                                            1. Александр Мальцев # 0
                                              Открывай в браузере консоль разработчика и изучай сообщения (ошибки) во вкладке Network и Console.
                                            2. PaveL # 0
                                              Доброго времени суток, большая благодарность за уроки, реализовал форму на сайте все отправляет как нужно, но заметил следующую вещь — с локального сервера когда тестирую при нажатии отправить письмо отправляется и появляется надпись — «Спасибо! Ваше письмо отправлено», но вот выгружая сайт на хостинг заполняя всю туже форму и нажимая отправить — письмо отправляется, но надпись «Спасибо! Ваше письмо отправлено» не появляется а вся форма остается и заполненные поля отмечены галочками. Вот и задумался с чем это связано, буду благодарен за совет.
                                              с Денвера где все отлично!

                                              с Хостинга (
                                              1. Александр Мальцев # 0
                                                Нажать в браузере клавишу F12->Network->verify.php->вкладка «Response». Посмотреть какой приходит ответ. Но, это не success. Т.е. возникает какая-то ошибка в файле verify.php (Например, хостинг не предоставляет доступ к функции mail. Это очень характерно для бесплатных хостингов — они запрещают рассылать письма) или в какой-то другой строчке… Надо, анализировать…

                                                Также к скрипту в статье можно добавить следующий код:
                                                //если получен ответ invalid, то значит произошла ошибка при отправке данных
                                                if (text == "invalid") {
                                                  //скрыть форму обратной связи
                                                  $('#messageForm').hide();
                                                  //изменить содержимое элемента, имеющего id msgSubmit
                                                  $('#msgSubmit').html('<strong>Внимание!</strong> Сообщение не отправлено. Попробуйте позже');
                                                  //удалить класс hidden
                                                  $('#msgSubmit').removeClass('hidden');
                                                }
                                                
                                                Так как хостинге, хоть и очень редко, но бывают сбои. Можно пользователя уведомить о том, что произошла какая-то ошибка и попросить его отправить данную форму позже.
                                                1. oleg # 0
                                                  Александр добрый день.
                                                  Подскажите куда конкретно прописать данный код?
                                                  И еще. Если произойдет какая-то ошибка при отправлении письма, код сработает?
                                                  Спасибо
                                                  1. Александр Мальцев # 0
                                                    Код необходимо поместить в то же место, где мы обрабатываем и другие ответы от сервера.
                                                    success : function(text) {
                                                      //если получен ответ invalid, то значит произошла ошибка при отправке данных
                                                      if (text == "invalid") {
                                                        //скрыть форму обратной связи
                                                        $('#messageForm').hide();
                                                        //изменить содержимое элемента, имеющего id msgSubmit
                                                        $('#msgSubmit').html('<strong>Внимание!</strong> Сообщение не отправлено. Попробуйте позже');
                                                        //удалить класс hidden
                                                        $('#msgSubmit').removeClass('hidden');
                                                      }
                                                      //если получен ответ success, то значит данные отправлены
                                                      if (text == "success") {
                                                        //скрыть форму обратной связи
                                                        $('#messageForm').hide();
                                                        //удалить у элемент, имеющего id msgSubmit, класс hidden
                                                        $('#msgSubmit').removeClass('hidden');
                                                      }
                                                    
                                                    Конечно, будет.
                                                  2. PaveL # 0
                                                    Александр, но дело в том что письма с хостинга приходят тут проблем нет, проблема в том что форма не принимает вид как не Денвере (появляется надпись — «Спасибо! Ваше письмо отправлено»). Всю голову сломал ) так и не могу понять в чем дело что я делаю не так? и сделал чтобы сообщение которое отправляют в файл «message» записывался, тоже все работает… а вот просто не пишет что письмо отправлено и не сворачивается форма вообщем. Хостинг не бесплатный, все поддерживает. Просто не понятно, могу выложить пример для наглядности, буду очень благодарен за дельный совет.
                                                    1. PaveL # 0
                                                      Вопрос снят, долго искал проблему и как говорится кто ищет тот находит )) проблема заключалась в кодировке на хостинге, принудительно в параметрах выставил и все заработало. Очень благодарен за уроки. А на таких запинках все детально изучаешь и разбираешься во всем, оно и к лучшему наверное… всем удачи! Спасиб что не оставили мой вопрос без внимания.
                                                2. Сергей # 0
                                                  У меня картинка-капча не отображается никак не пойму с чем связано? Как решить проблему?
                                                  1. Сергей # 0
                                                    Вопрос снимаю, на хостинге все работает. Отлично. Спасибо.
                                                  2. Соня # 0
                                                    Здравствуйте! Установила форму на хостинге всё работает письма доходят, но при отправки сообщения не выводится надпись, что оно отправлено, т.е. — «Внимание! Сообщение отправлено.» — не появляется. Что надо сделать? Спасибо.
                                                    1. Александр Мальцев # 0
                                                    2. Антон # 0
                                                      Добрый день, сколько не старался я внести изменения для отправки файла, так ничего и не получилось ( если вам не трудно можете описать подробнее изменение скрипта. Спасибо!
                                                      1. Антон # 0
                                                        На сколько я понимаю конкретно вот эта строка отправляет данные на почту, но о каком то прикрепленном файле тут речи не идет
                                                        $success = mail($emailTo, $subject, $body, "From: mail@mail.ru \r\n");
                                                        1. Александр Мальцев # 0
                                                          Использовать этот комментарий:
                                                          itchief.ru/lessons/bootstrap-3/creating-feedback-form-using-bootstrap-php-and-ajax#comment-1766

                                                          Загрузку на сервер файла сделал в вышепредставленном комментарии, а про отправку забыл.

                                                          Для этого необходимо изменить код файла verify.php.
                                                          Для отправки почты вместо функции mail будем использовать скрипт PHPMailer.
                                                          github.com/PHPMailer/PHPMailer
                                                          1. Пример с вложением:
                                                          <?php
                                                          // включить файл PHPMailerAutoload.php
                                                          require('путь/до/PHPMailerAutoload.php');
                                                          //открываем сессию
                                                          session_start();
                                                          //получить имя, которое ввёл пользователь
                                                          $name = $_POST["name"];
                                                          //получить email, которое ввёл пользователь
                                                          $email = $_POST["email"];
                                                          //получить сообщение, которое ввёл пользователь
                                                          $message = $_POST["message"];
                                                          //если пользователь правильно ввёл капчу то
                                                          if ($_SESSION["code"] == $_POST["captcha"]) {
                                                            //формируем тело письма
                                                            $bodytext = "--------------------------------------\n";
                                                            $bodytext .= date("Y.m.d H:i")."\n";
                                                            $bodytext .= "Содержимое заполненных пользователем полей:\n";
                                                            $bodytext .= "Имя: ".$name."\n";
                                                            $bodytext .= "Email: ".$email."\n";
                                                            $bodytext .= "Сообщение: \n".$message."\n";
                                                            // создаём экземпляр класса PHPMailer
                                                            $mail = new PHPMailer;
                                                            
                                                            $mail->From      = 'email@mysite.ru';
                                                            $mail->FromName  = 'Имя сайта';
                                                            $mail->Subject   = 'Сообщение с формы обратной связи';
                                                            $mail->Body      = $bodytext;
                                                            $mail->AddAddress( 'myemail@mail.ru' );
                                                          
                                                            if ( $_FILES['file']['error']==0 ) {
                                                              move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
                                                              // прикрепляем файл
                                                              $mail->addAttachment('uploads/'.$_FILES['file']['name']);
                                                            }
                                                            // отправляем письмо
                                                            $success = $mail->Send();
                                                          
                                                            //Если действия были успешны, то отправляем "success"
                                                            if ($success) {
                                                              echo "success";
                                                            }
                                                            //иначе отправляем "invalid"
                                                            else {
                                                              echo "invalid";
                                                            }
                                                          }
                                                          else {
                                                            //если пользователь ввёл неправильную капчу, то отправляем "invalidcaptcha"
                                                            echo 'invalidcaptcha';
                                                          }
                                                          
                                                          2. Файл в качестве ссылки:
                                                            $bodytext = "--------------------------------------\n";
                                                            $bodytext .= date("Y.m.d H:i")."\n";
                                                            $bodytext .= "Содержимое заполненных пользователем полей:\n";
                                                            $bodytext .= "Имя: ".$name."\n";
                                                            $bodytext .= "Email: ".$email."\n";
                                                            $bodytext .= "Сообщение: \n".$message."\n";
                                                            $mail = new PHPMailer;
                                                            if ( $_FILES['file']['error']==0 ) {
                                                              move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
                                                              $file = $_FILES['file']['name'];
                                                              $path = 'uploads/'.$file;
                                                            }
                                                            // добавляем ссылку на файл
                                                            $bodytext .= 'Файл:\n'.'<a href="http://mysite.ru/'.$path.'">'.$file.'</a>';
                                                            $mail->From      = 'email@mysite.ru';
                                                            $mail->FromName  = 'Имя сайта';
                                                            $mail->Subject   = 'Сообщение с формы обратной связи';
                                                            $mail->Body      = $bodytext;
                                                            $mail->AddAddress( 'myemail@mail.ru' );
                                                          
                                                            $success = $mail->Send();
                                                          
                                                          1. Андрей # 0
                                                            Добрый день.
                                                            Спасибо, все работает. А как сделать отправку к примеру 3-х файлов — нужно сделать у них name=files[]?

                                                            Также у меня почему-то на хостинге от NIC.ru ответ при отправке success? но часть скрипта, которая убирает класс hidden не срабатывает. То есть форма уходит, но на появляется сообщение об успешности отправки(((
                                                        2. Aumm # 0
                                                          Не рисует капчу, то есть фон есть, а символов нет… В консоле ошибок нет, ответ сервера 200.
                                                          В чем проблема может быть и куда копать?

                                                          И как вообще можно отключить капчу?
                                                          1. Aumm # 0
                                                            _http://fs-db.ru/feedback/ я не вижу ошибок в консоле, кроме кривой кодировки в комментариях
                                                            1. Александр Мальцев # 0
                                                              Вам надо смотреть файл captcha.php.
                                                          2. HUNTER # 0
                                                            Здравствуйте! Установила форму, поправила пути, с капчей что-то не получается. Фоновое изображение есть, а символы которые надо ввести не отображаются. Что я делаю не так?
                                                            1. Александр Мальцев # 0
                                                              Проверьте, скорее всего у Вас возникают проблемы с функцией php imagettftext. Данная функция предназначена для рисование текста на изображении шрифтом TrueType.
                                                            2. Михаил # 0
                                                              Здравствуйте, спасибо за урок и подробные ответы на вопросы.
                                                              У меня есть ошибки, с которыми разобраться не получилось пока.

                                                              1. В HTML форме на сайте, на 58 строку, ругается ValidatorW3 (в демо это 63 строка) Есть способ исправить?

                                                              2. В Safari выскакивает ошибка, в папке /css/bootstrap.min.css.map — нет такого файла. Есть без .map -нужен или не нужен он?
                                                              1. Александр Мальцев # 0
                                                                Код HTML поправил на соответствие стандарту.
                                                                Файл с расширением map используется только для отладки. Скорее всего в Safari в инструментах разработчика у Вас включена соответствующая опция (CSS source maps). Если Вы не собираетесь настраивать bootstrap.min.css, то он не нужен.
                                                              2. Дмитрий # 0
                                                                Александр, добрый день.
                                                                Установил форму, но почему то не отображается что письмо отправлено(не отправлено)
                                                                Хотя письма приходят все нормально

                                                                С кодировкой вроде бы все хорошо.

                                                                Вот что пишет закладка response

                                                                Warning: session_start(): Cannot send session cache limiter — headers already sent (output started at /var/www/user/data/www/ХХХХ/feedback/verify.php:1) in /var/www/user/data/www/ХХХХ/feedback/verify.php on line 3
                                                                success

                                                                ХХХХ русский сайт
                                                                1. Александр Мальцев # 0
                                                                  Сохраните файлы так, чтобы они имели кодировку UTF-8 без BOM.
                                                                2. Андрей # 0
                                                                  я скачал папку с архивом, а как ее установить на сайт?
                                                                  1. Александр Мальцев # 0
                                                                    Тут не надо ничего устанавливать. Форму обратной связи копируете из файла index.html в необходимую страницу. Остальные файлы просто копируете в структуру Вашего сайта. После этого проверяете пути и при необходимости изменяете.
                                                                  2. Colkey # 0
                                                                    потерто…
                                                                    1. Андрей # 0
                                                                      Спасибо за рабочую форму, отлично работает и файлы отправляются, и в случае ошибки сообщение выводит, и при отправке иконку ожидания поставил — за это отдельное спасибо.
                                                                      Есть две просьбы, нельзя ли прикрутить фильтр расширений отправляемых файлов по маске и отправку нескольких файлов с ограничением по длине и количеству отправляемых файлов?
                                                                      1. Александр Мальцев # 0
                                                                        Хорошо, рассмотрю такую возможность.
                                                                      2. Андрей # 0
                                                                        Заранее спасибо.
                                                                        1. Андрей # 0
                                                                          Как дела с доработкой, можно надеяться?
                                                                          1. Александр Мальцев # 0
                                                                            Да, можно. В ближайшее время сделаю.
                                                                            1. Александр Мальцев # 0
                                                                              Это реализовано в следующей статье: Форма обратной связи для сайта.
                                                                            2. Алексей # 0
                                                                              Я так и не смог настроить формирование капчи. Форму установил, пути вроде везде поправил, но текст капчи не отображается. проверил в консоли разработчика, никаких ошибок нет. скрипт отрабатывает и по иждее должен вернуть сформированное изображение…
                                                                              подскажите, может кто сталкивался с этим?
                                                                              1. Алексей # 0
                                                                                отключил капчу, но и без нее не отрабатывает. но появилась новая ошибка в консоли:
                                                                                Uncaught TypeError: Cannot read property 'length' of undefined(anonymous function) @ script.js:1m.event.dispatch @ jquery-1.11.3.min.js:1r.handle @ jquery-1.11.3.min.js:1
                                                                                1. Алексей # 0
                                                                                  Разобрался) Спасибо за статью!
                                                                              2. Руслан # 0
                                                                                Подскажите, пробую изменить форму, добавив к ней группу радио-инпутов (всего два), с обычными ответами: «да» и «нет».
                                                                                <div class="form-group has-feedback">
                                                                                     <label for="gurt" class="control-label">Необходимость поселения в общежитие:</label>
                                                                                     <input type="radio" id="gurt" name="gurt" class="radio-inline" value="Yes"><label for="gurt1"> Да</label>
                                                                                     <input type="radio" id="gurt" name="gurt" class="radio-inline" value="No"><label for="gurt2"> Нет</label>
                                                                                <span class="glyphicon form-control-feedback"></span></div>
                                                                                
                                                                                Так вот. Не передаются в письмо данные выбора этих полей. Вообще передаются, но только одно — первое в группе. Т.е. выбор не действует. Где у меня ошибка? Дополнения внес в файлы verify.php и script.js.
                                                                                1. Анна # 0
                                                                                  Спасибо за форму. Всё прекрасно работает. Но почему-то, после показа сообщения об успешной отправке, при обновлении страницы форма остается с заполненными полями. Как сделать, чтобы введенная ранее информация не сохранялась?
                                                                                  1. Александр Мальцев # 0
                                                                                    Спасибо за отзыв. Для этого необходимо добавить к форме атрибут autocomplete=«off»:
                                                                                    <form id="messageForm" autocomplete="off">
                                                                                    ...
                                                                                    </form>
                                                                                    
                                                                                  2. Александр # 0
                                                                                    Здравствуйте… Спасибо большое за вашу интересную статью. У меня проблема такова все работает за исключением того что нет самой каптчи…
                                                                                    1. Александр # 0
                                                                                      Приветствую.

                                                                                      Форма работает, все хорошо, но не всегда капча вписывается в дизайн. Возможно ли прикрутить к этой форме гулову ReCaptcha?
                                                                                      1. Александр Мальцев # 0
                                                                                        Напишу как это сделать в виде отдельной статьи.
                                                                                        1. Александр # 0
                                                                                          Отлично. Было бы не плохо
                                                                                      2. Ivan # 0
                                                                                        Хелп, каптча не работает

                                                                                        надпись в консли:
                                                                                        GET _http://n1foto.com/captcha.php 500 (Internal Server Error)

                                                                                        путь проверил, файл лежит по месту. Подскажите, что делать?
                                                                                        1. Александр Мальцев # 0
                                                                                          Это происходит потому что файл captcha.php имеет не правильный формат. Данный файл необходимо сохранить в кодировке UTF-8 без BOM. Иначе к файлу добавляются дополнительные символы и он становится не image.
                                                                                          Т.е. в Вашем примере значение Content-Type равно:
                                                                                          Content-Type:text/html; charset=UTF-8
                                                                                          
                                                                                          А должно быть:

                                                                                          Ваша задача сводится в пересохранении файла в каком-нибуть текстовом редакторе (например, Visual Studio Code) с кодировкой UTF-8 без BOM.
                                                                                          1. Ivan # 0
                                                                                            Александр, спасибо за ответ.

                                                                                            Проверил кодировку, она и есть — UTF-8 без BOM…

                                                                                            1. Александр Мальцев # 0
                                                                                              Проверьте наличие шрифта oswald.ttf в директории:
                                                                                              $font = dirname(__FILE__).'/oswald.ttf';
                                                                                              
                                                                                              Если не поможет, то необходимо смотреть логи, т.е. искать из-за чего происходит ошибка.
                                                                                        2. Ivan # 0
                                                                                          не понимаю ничего(
                                                                                          content-type почему-то text/html
                                                                                          хотя в самом php файле caprtcha прописано
                                                                                          header('Content-type: image/png');

                                                                                          что делать?

                                                                                          1. Дмитрий # 0
                                                                                            Попробуйте перед captcha.php добавить «feedback» получится feedback/captcha.php Капча появится, только форма всё равно не работает…
                                                                                            У меня проблема в том что я нажимаю «отправить», страница обновляется и дописывается адрес name=Тест&email=dfgdfg%40masd.ru&captcha=3n862n и всё. Дальше никак не идёт, может быть я что-то пропустил? кстати галочка о том что я верно ввёл капчу тоже не появляется, видимо проблема именно в ней.
                                                                                            1. артем # 0
                                                                                              Добрый день! Отличный статья, отличный код — каждый шаг закоментирован!!! Браво… Но, блин, не обновляется каптча(( Всё проверил, пути исправил на абсолютные("/") и лежат на своих местах… В консоли ошибка в файле script.js:
                                                                                              ReferenceError: $ is not defined
                                                                                              <анонимная>

                                                                                              Не пойму где ошибка и как исправить(((
                                                                                              1. Александр Мальцев # 0
                                                                                                Здравствуйте.
                                                                                                Эта ошибка говорит о том, что у Вас не подключена библиотека jQuery. Необходимо её подключить.

                                                                                                Но зачем там что-то подправлять (в архиве лежит готовая сборка). Ваша задача скачать архив, распаковать его, и залить готовый каталог feedback на сервер.
                                                                                                После этого в браузере набираете:
                                                                                                имя_сайта/feedback/
                                                                                                
                                                                                                Примечание: в архиве находится сборка feedback, работающая на последней jquery (3.1.0) и bootstrap (3.3.7). Также в ней поправлены некоторые моменты, оставленные в комментариях пользователями сайта.
                                                                                                1. артем # 0
                                                                                                  Спасибо большое! Всё заработало… Было подключено jquery.easing-1.3.js — подумал этого достаточно =( Помутнение какое-то, не иначе ))
                                                                                              2. Михаил # 0
                                                                                                Здравствуйте, Александр, спасибо вам за ваш просветительский труд. Вопрос такой, по умолчанию, при удачной отправке, выводится сообщение «Ваше сообщение успешно отправлено», но форма не перезагружается и для отправки нового сообщения приходится перезагружать страницу, это так задумано или у меня что-то не правильно работает? Вставлял форму через iframe
                                                                                                1. Александр Мальцев # 0
                                                                                                  Здравствуйте. Так было и задумано.
                                                                                                  Если Вам необходимо обеспечить возможнось отправлять несколько сообщений без перезагрузки страницы, то необходимо очищать форму и показывать сообщение (например, в модальном окне).
                                                                                                  Форма обратной связи - Отображение сообщение об успехе в модальном окне
                                                                                                  Скачать сборку можно по следующей ссылке:
                                                                                                  yadi.sk/d/oAcdsgL5uCZze
                                                                                                2. Олег # 0
                                                                                                  Здравствуйте Александр.
                                                                                                  Отличный скрипт формы обратной связи, большое спасибо за ваш труд.
                                                                                                  Подскажите пожалуйста в чём может быть проблема? после установки кода формы в страничку, форма по чему то уходит в право страницы, а не по центру как должна быть.
                                                                                                  где в стилях поправить расположение, или размер формы изменить.
                                                                                                  1. Александр Мальцев # 0
                                                                                                    Положение формы определяется 3 строчкой. При этом она занимает всю доступную ширину. По умолчанию она занимает 1/2 ширину этого контейнера (если ширина страницы >=768px) и всю ширину (если ширина страницы <768px). При этом (если ширина страницы >=768px), то установлен отступ слева, равный 1/4 ширине контейнера.
                                                                                                    <div class="container">
                                                                                                      <div class="row">
                                                                                                        <div class="col-sm-6 col-sm-offset-3">
                                                                                                          <!-- Форма ... -->
                                                                                                        </div>
                                                                                                      </div>
                                                                                                    </div>
                                                                                                    
                                                                                                    При желании эту строчку можно изменить, задать ей фиксированную ширину или что-то другое.
                                                                                                    <div style="width: 500px; margin: 0 auto;">
                                                                                                      <!-- Форма ... -->
                                                                                                    </div>
                                                                                                    
                                                                                                    Более подробно ознакомиться с сеткой Bootstrap можно в теме: Как работает сетка Bootstrap.

                                                                                                    Но скорее всего это связано с тем, что Вы хотите вставить её куда-то в страницу. Для этого Вам необходимо скопировать её так (без верхних контейнеров):
                                                                                                    <div class="col-sm-6 col-sm-offset-3">
                                                                                                      <!-- Форма ... -->
                                                                                                    </div>
                                                                                                    
                                                                                                  2. Олег # 0
                                                                                                    Здравствуйте Александр.

                                                                                                    Подскажите пожалуйста в чём может быть проблема? Установил вашу форму обратной связи всё работает отлично :-) но появилась не большая не приятность заметил сегодня.Дело в том что ваш стил формы влияет на мои стили сайта не могу понять по чему, хотя ваш файл стилей вынесен в другую папку, но при установке кода подключения стилей формы
                                                                                                    на самой страничке обратной связи не много падают мои стили, как решить этот вопрос.
                                                                                                    1. Александр Мальцев # 0
                                                                                                      Здравствуйте.
                                                                                                      Самый простой способ — это подключить свои стили в конце (после стилей формы обртаной связи).
                                                                                                      Если это не сработает, то можно самому оформить форму. Для этого удалить link c bootstrap.css и скопировать в ваш файл недостоющие стили из bootstrap.css или консоли разработчика браузера.
                                                                                                      Если разбираться не хочется, то можно поступить проще, например, вставить форму обратной связи через iframe.
                                                                                                      <iframe src="index.html" width="700" height="1000" frameborder="0"></iframe>
                                                                                                      
                                                                                                      Где index.html — путь до файла, где расположена форма обратной связи.
                                                                                                    2. Сергей # 0
                                                                                                      Здравствуйте! Спасибо за форму. Отлично всё реализовано!
                                                                                                      Есть один момент, который я хотел бы попросить Вас подправить. Я-то разобрался с ним, а вот новички могут споткнуться на нем…

                                                                                                      При скачивании и разархивации сборки формы (также и в варианте с модальным окном) у нас все файлы находятся в папке «feedback» в ней же лежит и файл index.html, а пути ко многим файлам и скриптам почему в кодах прописаны так:

                                                                                                      <link rel="stylesheet" href="/feedback/css/bootstrap.min.css">
                                                                                                      Соответственно сама форма (и её стили) по умолчанию не будет работать пока не поудаляешь /feedback/ во всех файлах. Возможно я что-то не так делал, но как бы я не пытался распаковать архив — итог один и тот же.

                                                                                                      И если не сложно, подскажите можно ли как-то реализовать капчу таким образом, как в этой Вашей форме комментариев (вводить сумму чисел, а не набор букв)? А ещё чтобы была возможность указать галочкой пункт «Отправить копию письма себе на ящик».

                                                                                                      Заранее благодарен!
                                                                                                      1. Александр Мальцев # 0
                                                                                                        По умолчанию пакет формы обратной связи должен располагаться в директории feedback, которую необходимо поместить в корневой каталог на сервере. Если файл index.html переименовать и перенести в другое место, то пути к файлам сохраняться (из-за их абсолютности) и всё будет работать. Это основной принцип размещения файлов.
                                                                                                        Если нужно какое-то другое поведение, то тут не угадаешь. В этом случае придётся настраивать пути к файлам в зависимости от задачи.
                                                                                                        1. Александр Мальцев # 0
                                                                                                          Замена капчу на сумму двух цифр.
                                                                                                          1. Изменить содержимое файла captcha.php на следующий:
                                                                                                          <?php
                                                                                                          session_start();
                                                                                                          $minCaptcha = 1;
                                                                                                          $maxCaptcha = 10;
                                                                                                          $a = mt_rand($minCaptcha, $maxCaptcha);
                                                                                                          $b = mt_rand($minCaptcha, $maxCaptcha);
                                                                                                          $_SESSION['code'] = $a + $b;
                                                                                                          header("Content-Type: text/html; charset=utf-8");
                                                                                                          echo "Введите сумму " . $a . " + " . $b 
                                                                                                          ?>
                                                                                                          
                                                                                                          2. В файл script.js внести следующие изменения:
                                                                                                          2.1. Изменить captcha.length!=6 на !captcha.length, а captcha.length==6 на captcha.length.
                                                                                                          2.2. После загрузки страницы добавить:
                                                                                                          // отобразить код капчи
                                                                                                          $.get("/feedback/captcha.php",function(data){
                                                                                                            $('#captcha').text(data);
                                                                                                          });
                                                                                                          
                                                                                                          2.3. В содержимое блока
                                                                                                          else if ($data.result == "invalidCaptcha") {
                                                                                                          добавить
                                                                                                          // выводим новый код капчи
                                                                                                          $.get("/feedback/captcha.php",function(data){
                                                                                                            $('#captcha').text(data);
                                                                                                          });
                                                                                                          
                                                                                                          3. В index.html блок капчи изменить на следующий:
                                                                                                          <!-- Блок для ввода кода капчи -->
                                                                                                          <div class="form-group has-feedback">
                                                                                                            <label id="captcha" for="captcha" class="control-label"></label>
                                                                                                            <input id="text-captcha" name="captcha" type="text" class="form-control" required="required" value="" autocomplete="off" minlength="1">
                                                                                                            <span class="glyphicon form-control-feedback"></span>
                                                                                                          </div>
                                                                                                          
                                                                                                          1. Александр Мальцев # 0
                                                                                                            Добавление чекбокса «Отправить копию письма себе на ящик».
                                                                                                            В index.html после блока ввода капчи добавить:
                                                                                                            <div class="checkbox">
                                                                                                              <label>
                                                                                                                <input id="copymail" type="checkbox"> Отправить копию письма себе на ящик
                                                                                                              </label>
                                                                                                            </div>
                                                                                                            
                                                                                                            В файл script.js после кода
                                                                                                            //получаем капчу, которую ввёл пользователь
                                                                                                            var captcha = $("#text-captcha").val();
                                                                                                            
                                                                                                            ввести следующий
                                                                                                            //получаем значение чекбокса "Отправить копию письма"
                                                                                                            var copymail = $('#copymail').prop('checked');}
                                                                                                            
                                                                                                            В файл process.php после строчки
                                                                                                            $mail->AddAddress( 'myemail@mail.ru' );
                                                                                                            
                                                                                                            необходимо вставить следующие:
                                                                                                            if (isset($_POST['copymail'])) {
                                                                                                              if ($_POST['copymail']==true) {
                                                                                                                $mail->AddAddress( $email );
                                                                                                              }
                                                                                                            }
                                                                                                            
                                                                                                            1. Александр Мальцев # 0
                                                                                                              Бесплатно скачать готовую форму обратной связи с цифровой капчей a+b и флажком для отправления копии письма себе на ящик можно с помощью следующей ссылки:
                                                                                                              feedback with number captcha and checkbox
                                                                                                              1. Сергей # 0
                                                                                                                Огромное Вам спасибо, Александр! Мира Вам, счастья и богатства!
                                                                                                            2. Pastuh # 0
                                                                                                              Александр, а почему бы не использовать SMTP для отправки почты с формы обратной связи. Как правило все тоже самое, только люди могут подключить себе яндекс почту(бесплатный сервис), гугл почту(платный сервис), или настроить свой почтовый сервис(много заморочек).
                                                                                                              Просто при отправке писем через php mail, чаще всего такие письма будут залетать в спам, что не есть приятно, и по итогу, мы получим финт конем, что какая ни будь почтовая система наш IP забанит, а вытаскивать его ой как тяжко. Ибо в данном случае у нас нет SSL сертификата, DKIM подписи, SPF запись вряд ли у домена настроена и тд и тп.

                                                                                                              Просто я могу дописать ваш код, и скинуть сюда реализацию с SMTP, ну и мини гайдик как зарегистрировать доменную почту на яндексе. Просто мне кажется это бы дало больше плюсов пользователям.
                                                                                                              1. Александр Мальцев # 0
                                                                                                                Да, для сайта это лучше. Но это более сложно реализации. Конечно, любой владелец сайта в этом заинтересован, чтобы его письма не попали в спам. Но изначально не стал усложнять отправку писем через Яндекс.

                                                                                                                Если у Вас уже есть готовое решение, то поделитесь. Многие пользователи будут Вам благодарны.
                                                                                                              2. Сергей # 0
                                                                                                                Александр, подскажите где можно изменить ограничение по отправляемому количеству знаков в сообщение? До 1000 знаков письма отправляются, а вот если больше, то «Произошли ошибки при отправке формы на сервер.».

                                                                                                                Я ставлю форму для вопросов от своих пользователей, и, порой, они бывают довольно-таки объемными, так как в моей тематике вопросы идут с детальным описанием. Нужно хотя бы 3-5 тысяч знаков. Можно ли такое где-то указать, и в каких файлах?

                                                                                                                Заранее благодарен.
                                                                                                                1. Александр Мальцев # 0
                                                                                                                  В файле process.php верификация длины сообщения осуществляется с помощью кода (например, максимальную длину установить 20000):
                                                                                                                  //получить сообщение, которое ввёл пользователь
                                                                                                                  if (isset($_POST['message'])) {
                                                                                                                    $message = $_POST['message'];
                                                                                                                    if (!validStringLength($message,20,20000)) {
                                                                                                                      $data['message']='Поле сообщение содержит недопустимое количество символов.';     
                                                                                                                      $data['result']='error';   
                                                                                                                    }      
                                                                                                                  } else {
                                                                                                                    $data['result']='error';
                                                                                                                  } 
                                                                                                                  
                                                                                                                  В файле index.html длина ограничивается атрибутом maxlength (например, 20000):
                                                                                                                  <textarea id="message" class="form-control" rows="3" minlength="20" maxlength="20000" required="required"></textarea>
                                                                                                                  
                                                                                                                  Больше никаких ограничений нет. Если не поможет, то необходимо проверить настройки php. Например, настройку post_max_size = 10M.
                                                                                                                2. Сергей # 0
                                                                                                                  Александр, ещё раз огромное спасибо за форму! Просто супер!

                                                                                                                  Ещё один вопрос... В функционале присутствует файл «message.txt», куда автоматически записываются все отсылаемые формой данные. Подскажите, можно ли как-то безболезненно отказаться от этой функции (это наиболее приемлемый вариант) или же чтобы файл самоочищался через какой-то промежуток времени, скажем 1 раз месяц?
                                                                                                                  1. Александр Мальцев # 0
                                                                                                                    Откройте файл process.php и удалите из него следющий код:
                                                                                                                    //1. Сохрание формы в файл
                                                                                                                    $output = "---------------------------------" . "\n";
                                                                                                                    $output .= date("d-m-Y H:i:s") . "\n";
                                                                                                                    $output .= "Имя пользователя: " . $name . "\n";
                                                                                                                    $output .= "Адрес email: " . $email . "\n";
                                                                                                                    $output .= "Сообщение: " . $message . "\n";
                                                                                                                    if (file_put_contents(dirname(__FILE__).'/message.txt', $output, FILE_APPEND | LOCK_EX)) {
                                                                                                                      $data['result']='success';
                                                                                                                    } else {
                                                                                                                      $data['result']='error';         
                                                                                                                    } 
                                                                                                                    
                                                                                                                  2. Oleg # 0
                                                                                                                    Здравствуйте!
                                                                                                                    Спасибо за статью! Кое-что для себя усвоил. Но «свои варианты» пока нИАсилил, поэтому прошу помощи (увы, не спец...).
                                                                                                                    Скажите, пожалуйста, как сделать, чтобы мои формы — их 2 варианта — «включились» в работу? Ну, во первых, они, конечно, отличаются от Вашего примера, но это, наверное, не сильно важно — могу разобраться…
                                                                                                                    Код первой формы —
                                                                                                                    <div class="col-lg-8 col-md-8 col-sm-8 address">
                                                                                                                                            <h2>Форма обратной связи</h2>
                                                                                                                                            <form id="contact-form" class="contact-form">
                                                                                                                                              <div class="success"> Сообщение отправлено! <strong>Мы ответим в ближайшее время.</strong> </div>
                                                                                                                                              <fieldset>
                                                                                                                                                <div class="coll-1">
                                                                                                                                                  <div class="txt-form">Name<span>*</span></div>
                                                                                                                                                  <label class="name">
                                                                                                                                                    <input type="text" value="Имя*:">
                                                                                                                                                    <span class="error">*Это невалидное имя. Заполните, пожалуйста, на латинице.</span> <span class="empty">*Поле обязательно к заполнению.</span> </label>
                                                                                                                                                </div>
                                                                                                                                                <div class="coll-2">
                                                                                                                                                  <div class="txt-form">Email<span>:</span></div>
                                                                                                                                                  <label class="email">
                                                                                                                                                    <input type="email" value="E-mail*:">
                                                                                                                                                    <span class="error">*Это невалидный email адрес.</span> <span class="empty">*Поле обязательно к заполнению.</span> </label>
                                                                                                                                                </div>
                                                                                                                                                <div class="coll-3">
                                                                                                                                                  <div class="txt-form">Phone:</div>
                                                                                                                                                  <label class="phone notRequired">
                                                                                                                                                    <input type="tel" value="Phone:">
                                                                                                                                                    <span class="error">*Это невалидный телефонный номер.</span> <span class="empty">*Поле обязательно к заполнению.</span> </label>
                                                                                                                                                </div>
                                                                                                                                                <div class="clear"></div>
                                                                                                                                                <div>
                                                                                                                                                  <div class="txt-form">Comment<span>*</span></div>
                                                                                                                                                  <label class="message">
                                                                                                                                                    <textarea>Сообщение*:</textarea>
                                                                                                                                                    <span class="error">*Сообщение слишком короткое.</span> <span class="empty">*Поле требуется к заполнению.</span> </label>
                                                                                                                                                </div>
                                                                                                                                                <div class="clear"></div>
                                                                                                                                              </fieldset>
                                                                                                                                              <div class="buttons-wrapper clearfix"><a href="mailto:..." class="btn-link btn-link2" data-type="submit">отправить<span></span></a><strong>*ПОЛЯ ОБЯЗАТЕЛЬНЫЕ К ЗАПОЛНЕНИЮ</strong></div>
                                                                                                                                            </form>
                                                                                                                                        </div>
                                                                                                                    И, собственно, второй:
                                                                                                                    <form id="contact-form2" class="reservation-form">
                                                                                                                                              <div class="success">Reservation form submitted! <strong>We will be in touch soon.</strong> </div>
                                                                                                                                              <fieldset>
                                                                                                                                                <div class="coll-1">
                                                                                                                                                  <div class="txt-form">name:<span></span></div>
                                                                                                                                                  <label class="name">
                                                                                                                                                    <input type="text" value="Name:">
                                                                                                                                                    <span class="error">*This is not a valid name.</span> <span class="empty">*Поле обязательно к заполнению.</span> </label>
                                                                                                                                                </div>
                                                                                                                                                <div class="coll-2">
                                                                                                                                                  <div class="txt-form">Email<span>:</span></div>
                                                                                                                                                  <label class="email">
                                                                                                                                                    <input type="email" value="E-mail:">
                                                                                                                                                    <span class="error">*Это невалидный email адрес.</span> <span class="empty">*Поле обязательно к заполнению.</span> </label>
                                                                                                                                                </div>
                                                                                                                                                <div class="coll-3">
                                                                                                                                                  <div class="txt-form">phone:</div>
                                                                                                                                                  <label class="arrival notRequired">
                                                                                                                                                    <input type="tel" value="Phone:">
                                                                                                                                                    <span class="error">*Это невалидный номер телефона.</span> <span class="empty">*Поле обязательно к заполнению.</span> </label>
                                                                                                                                                </div>
                                                                                                                                                <div class="coll-4">
                                                                                                                                                  <div class="txt-form">phone:</div>
                                                                                                                                                  <label class="Length of stay notRequired">
                                                                                                                                                    <input type="tel" value="Fax:">
                                                                                                                                                    <span class="error">*Это невалидный номер телефона.</span> <span class="empty">*Поле обязательно к заполнению</span> </label>
                                                                                                                                                </div>
                                                                                                                                                <div class="clear"></div>
                                                                                                                                                <div>
                                                                                                                                                  <div class="txt-form">Comment<span>*</span></div>
                                                                                                                                                  <label class="message">
                                                                                                                                                    <textarea>Сообщение:</textarea>
                                                                                                                                                    <span class="error">*Сообщение слишком короткое.</span> <span class="empty">*Поле обязательно к заполнению.</span> </label>
                                                                                                                                                </div>
                                                                                                                                                <div class="clear"></div>
                                                                                                                                              </fieldset>
                                                                                                                                              <div class="buttons-wrapper clearfix"><a href="#" class="btn-link btn-link2" data-type="submit">послать<span></span></a><a href="#" class="btn-link btn-link2" data-type="reset">стереть<span></span></a></div>
                                                                                                                                            </form>
                                                                                                                    По сути, они, вроде, одинаковые…
                                                                                                                    Но вот как их подключить? Из Вашей статьи понял, что нужен каталог feedback со всем необходимым. Потому как смотрю — в шаблоне его нет, соответственно — и script.js и process.php нет и т.д. Допустим, я скачаю Ваш пример — там это есть, но мне не очень понятно, как тогда поменять данную Вами форму на свои? У Вас файл index.html, а у меня основная форма в contacts.html и вторая — на других страницах… Где что прописывать? Как их подключить? Если Вам не очень трудно подсказать, конечно…
                                                                                                                    И ещё. Зашёл по ссылке почитать о том, как добавить вложение для форм. Ещё пока не разбирался детально — просто с отправкой бы разобраться, но хотел спросить — там универсальное решение? Т.е. от кода формы не зависит? А то это тоже будет головная боль, а очень надо!!!
                                                                                                                    Спасибо!
                                                                                                                    Всего доброго!
                                                                                                                    1. Александр Мальцев # 0
                                                                                                                      Вы привели только HTML формы, которые сами по себе работать не будут. Они просто выводятся, как и другой контент HTML документа. Для того чтобы они работали необходимо иметь как минимум серверный скрипт php, который будет получать данные формы и выполнять необходимые действия (например, отправлять форму на почту). Если вы хотите реализовать форму обратной связи без перезагрузки, то ещё понадобится JavaScript код (AJAX).
                                                                                                                      Насчёт структуры… Каталог feedback просто содержит файлы, необходимые для работы формы. Т.е. тут всё собрано в одном каталоге для удобства (просто скопируй и готово). Если вы хотите подключать форму обратной связи к нескольким страницах, то тут возможно потребуется более грамотная организация файлов.
                                                                                                                      Какое имя использовать вообще не важно (index.html или contacts.html), т.к. вы подключает всё к нему, а не его.

                                                                                                                      Вы можете использовать и свои формы. Тут это не важно. Самое главное — это название полей, формы и т.д. Т.е. то, что используют скрипты javascript и php. Название каждого файла подробно описано, т.е. вам необходимо только их грамотно подключить к своим файлам (contacts.html и т.д.) и всё. Тоже качается и вложений.
                                                                                                                    2. Oleg # 0
                                                                                                                      Александр, спасибо.
                                                                                                                      То, что Вы ответили, я теоретически понял сразу, прочитав Вашу статью. В Вашем примере все файлы уже собраны — и script.js и .php и .css (но я правильно понимаю — .css и шрифты, например, нужны именно для Вашего варианта формы?).
                                                                                                                      Просто меня, как неспеца сбило с толка — Ваш файл index.html. Если я Вас правильно сейчас понял, то мне необходимо в скрипте script.js и в файлах .php — phpmailer и process точно прописать значения полей форм? Т.е, — value? Там, где это надо…
                                                                                                                      Т.е. в скрипте, например, где нужно прописать значение поля «name», я должен взять его отсюда:
                                                                                                                      <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>
                                                                                                                      ?!
                                                                                                                      Или этого не достаточно (при условии, что скрипт подключится к странице, т.е. «пропишется», например, в contacts.html)? Поясните, пожалуйста, на пальцах, я не сайтостроитель и делаю не магазин, но очень бы надо…
                                                                                                                      И если на нескольких страницах формы, как к ним ко всем подключить?
                                                                                                                      Т.е. по сути 2 простых вопроса (простых для спецов) — КАК подключить и КАК подключить не одну форму, т.е. на разных страницах?!

                                                                                                                      Заранее — спасибо большое!
                                                                                                                      1. Александр Мальцев # 0
                                                                                                                        1. Подключить файл script.js ко всем необходимым страницам (который, например расположен в корне сайта).
                                                                                                                        <script src="/script.js"></script>
                                                                                                                        
                                                                                                                        1.1. Минимальное содержимое файла без проверки:
                                                                                                                        // после загрузки веб-страницы
                                                                                                                        $(function() {
                                                                                                                          // при отправке формы contactForm на сервер (id="contactForm")
                                                                                                                          $('#contactForm').submit(function(event) {
                                                                                                                            // отменяем стандартное действие браузера
                                                                                                                            event.preventDefault();
                                                                                                                            // создаём объект, который будет содержать данные для отправки
                                                                                                                            var formData = new FormData();
                                                                                                                            // добавить в formData значение поле name (id поля = name)
                                                                                                                            // первый параметр - получаем значение поля
                                                                                                                            // имя, под которым данное поле будет доступно в массиве $_POST на сервере
                                                                                                                            formData.append($("#name").val(), name);
                                                                                                                            // ... повторяем данное действие для всех необходимых полей
                                                                                                                            // т.е. добавляем в formData все данные которые хотим отправить на сервер
                                                                                                                              
                                                                                                                            //отправляем данные на сервер (AJAX)
                                                                                                                            $.ajax({
                                                                                                                              //метод передачи запроса - POST
                                                                                                                              type: "POST",
                                                                                                                              //URL-адрес запроса (подключение файла process.php для обработки формы) 
                                                                                                                              url: "/process.php",
                                                                                                                              //передаваемые данные - formData
                                                                                                                              data: formData,
                                                                                                                              // не устанавливать тип контента, т.к. используется FormData
                                                                                                                              contentType: false,
                                                                                                                              // не обрабатывать данные formData (т.к. они уже и так обработаны объектом FormData)
                                                                                                                              processData: false,
                                                                                                                              // отключить кэширование результатов в браузере
                                                                                                                              cache: false,
                                                                                                                              //при успешном выполнении запроса
                                                                                                                              success : function(data){
                                                                                                                                // ... написать действия, которые будут отображаться пользоваетлю
                                                                                                                                // в зависимости от полученного ответа с сервера
                                                                                                                                // т.е. если пришёл один ответ, то значит то что форма отправилась
                                                                                                                                // если другой, то что произошла ошабка и форма не отправилась
                                                                                                                                // результат ответа сервера формируется в файле process.php (обычно с помощью if)
                                                                                                                              },
                                                                                                                              error: function (request) {
                                                                                                                                // отобразить ошибку
                                                                                                                              }        
                                                                                                                            });
                                                                                                                          });
                                                                                                                        });
                                                                                                                        
                                                                                                                        Ваше основное действие — это добавление следующих строчек:
                                                                                                                        formData.append(значение_поля, имя_его_на_сервере);
                                                                                                                        
                                                                                                                        Подключение файла php в этом скрипте осуществяется на строчке:
                                                                                                                        url: "/process.php"
                                                                                                                        
                                                                                                                        2. В файле process.php написать то, что вы хотите сделать с данными формы (например, отправить их на почту).
                                                                                                                        <?php
                                                                                                                          // отправляем данные формы на почту
                                                                                                                          // включить файл PHPMailerAutoload.php
                                                                                                                          require_once dirname(__FILE__) . '/phpmailer/PHPMailerAutoload.php';
                                                                                                                          //формируем тело письма
                                                                                                                          $output .= "Имя пользователя: " . isset($_POST['name']);
                                                                                                                          // ... другие поля
                                                                                                                        
                                                                                                                          // создаём экземпляр класса PHPMailer
                                                                                                                          $mail = new PHPMailer;
                                                                                                                          $mail->CharSet = 'UTF-8'; 
                                                                                                                          $mail->From      = 'от куда';
                                                                                                                          $mail->FromName  = 'имя сайта';
                                                                                                                          $mail->Subject   = 'Сообщение с формы обратной связи';
                                                                                                                          $mail->Body      = $output;
                                                                                                                          $mail->AddAddress('куда');
                                                                                                                          // отправляем письмо
                                                                                                                          $mail->Send();      
                                                                                                                        ?>
                                                                                                                        
                                                                                                                        В этом коде убраны все проверки, осталось только основное действие. Этот код использует библиотеку phpmailer.
                                                                                                                      2. seventh # 0
                                                                                                                        Присоединяюсь к числу выражающих огромную благодарность за Ваши труды, Александр!

                                                                                                                        Замечу, что у меня на PHP 7 с ходу не заработало — оказался не установленным модуль php-gd. Выдавало ошибку
                                                                                                                        PHP Fatal error:  Uncaught Error: Call to undefined function imagecreatefrompng() in /var/www/html/feedback/captcha.php:13\nStack trace:\n#0 {main}\n
                                                                                                                        Решается простой установкой (на примере Ubuntu):
                                                                                                                        apt-get install php-gd
                                                                                                                        и перезагрузкой апача
                                                                                                                        service apache2 reload
                                                                                                                        В случае с shared-хостингом, вероятно, необходимо обратиться к компании, предоставляющей услуги хостинга.

                                                                                                                        Так же хочу спросить — как сделать распознавание капчи нечувствительным к регистру?
                                                                                                                        1. Александр Мальцев # 0
                                                                                                                          На 61 строчке в файле process.php замените эту
                                                                                                                          if ($_SESSION["code"] != $captcha) {
                                                                                                                          
                                                                                                                          на следующую
                                                                                                                          if (mb_strtolower($_SESSION["code"], 'UTF-8') != mb_strtolower($captcha, 'UTF-8')) {
                                                                                                                          
                                                                                                                        2. Андрей # 0
                                                                                                                          Александр, спасибо за пример. Есть вопрос:
                                                                                                                          в файле process.php есть проверка длины поля NAME (от 2 до 30), также проверка длины поля Message (от 20 до 500 символов).
                                                                                                                          Но если взять демо-версию отправки формы, то она отправляет (пишет «Сообщение отправлено») при name=a, email=a@a, message=a (т.е. по одному символу в поле Name и Message). Почему не срабатывают проверки на длину поля из process.php?
                                                                                                                          1. Александр Мальцев # 0
                                                                                                                            Поправил и внёс небольшие улучшения в скрипт. Проверяйте…
                                                                                                                          2. Андрей # 0
                                                                                                                            Александр, спасибо что оперативно реагируете, но сейчас в Вашей «демо формы обратной связи» так и не смог увидеть надпись «сообщение отправлено».( Вводил как и правильные по количеству символов поля, так и неправильные, но конечного результата так и не увидел… Но это может я «туплю»… Обращаюсь к пользователям: может еще кто попробует?
                                                                                                                            1. Marie # 0
                                                                                                                              добрый день. возникла проблема — необходимо добавлять разных адресатов в некоторой зависимости.
                                                                                                                              В форме добавила скрытый инпут
                                                                                                                              <input type="hidden" id="recipient" name="recipient" value="<?echo $academy_contact_email?>">
                                                                                                                              В script.js добавила получение значения этого поля
                                                                                                                              var recipient = $("#recipient").val();
                                                                                                                              formData.append('recipient', recipient);
                                                                                                                              в process.php
                                                                                                                              $mail->AddAddress($_POST['recipient']);
                                                                                                                              Отображается ошибка «Произошли ошибки при отправке формы на сервер.» В чем тут проблема может быть?
                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                Всё ваши действия правильные. Попробуйте проверить, что у Вас подставляется вместо <?echo $academy_contact_email?>. Или для проверки замените этот php-код на обычное текстовое значение.
                                                                                                                              2. Oleg # 0
                                                                                                                                Александр!
                                                                                                                                Спасибо большое! По аналогии (благодаря Вашим ответам) удалось запустить родные формы с «родным» скриптом — forms.js и MailHandler-ом! Спасибо!
                                                                                                                                Теперь, когда соберусь с духом вставить в форму отправку файлов и каптчу — буду Вас «донимать» немного… :)

                                                                                                                                Спасибо!
                                                                                                                                1. AndrewO # 0
                                                                                                                                  11 февраля 2016, 16:09 you wrote:
                                                                                                                                  «Эти сообщения выдаёт встроенный валидатор браузера. Если браузер на английском языке, то и сообщения будут на английском.»

                                                                                                                                  Действительно, переключил браузер на украинский, відповідає тепер на соловьїній, що "… має бути три".
                                                                                                                                  Проблема вот какая:
                                                                                                                                  Использую Вашу замечательную форму в сайте гуцульского журнала. Объяснить гуцулам (а их много, 2000 тис. тираж) как изменить язык бровзера = принципиально невозможно.

                                                                                                                                  Нельзя ли «эти сообщения» принудительно перевести в теле капчи, чтобы они не зависисели ни от бровзера ни от языковых настроек?

                                                                                                                                  Заранее благодарен, AndrewO
                                                                                                                                  1. Александр Мальцев # 0
                                                                                                                                    Используйте службу Google Translate API v2 чтобы перевести сообщения, которые поступают с сервера.
                                                                                                                                    Документация: cloud.google.com/translate/v2/quickstart
                                                                                                                                    1. AndrewO # 0
                                                                                                                                      Спасибо!
                                                                                                                                  2. Artyom # 0

                                                                                                                                    Здравствуйте!
                                                                                                                                    Спасибо за Ваш труд, но вот такая вот вышла ошибка когда раскрыл проект на OpenServer, подскажите пожалуйста, что не так?
                                                                                                                                    1. Александр Мальцев # 0
                                                                                                                                      Скорее всего, вы неправильно указали путь к файлу process.php.
                                                                                                                                      Чтобы проверить из коробки, скачайте архив формы обратной связи по ссылке в статье, распакуйте его и загрузите его в корень сайта (директорию feedback). После этого форма обратной связи будет доступна по ссылке протокол://имя_домена/feedback/index.html.
                                                                                                                                    2. Artyom # 0
                                                                                                                                      Блин, спасибо Вам Оооогроомное! ))
                                                                                                                                      Все работает, все нормально! Буду всем советовать!
                                                                                                                                      Скажите, а как можно добавлять и убирать поля?
                                                                                                                                      И можно ли настроить отправку с формы, на три разных почтовых ящика?
                                                                                                                                      1. Александр Мальцев # 0
                                                                                                                                        Инструкцию по работу с полями, можете взять со станицы, на которой рассмотрено создание контактной формы с вложениями. Она расположена в секции «Руководство по добавлению полей в форму».
                                                                                                                                        Для того чтобы отправить форму на 3 email адреса достаточно продублировать эту строчку ещё 2 раза:
                                                                                                                                        $mail->AddAddress( 'email1@mail.ru' );
                                                                                                                                        $mail->AddAddress( 'email2@mail.ru' );
                                                                                                                                        $mail->AddAddress( 'email3@mail.ru' );
                                                                                                                                        
                                                                                                                                        1. Artyom # 0
                                                                                                                                          Извините за кучу вопросов, но возникло еще несколько:
                                                                                                                                          1) Эта ссылка на «контактную форму с вложениями» подходит и для изменений этой контактной формы?
                                                                                                                                          2) Я вот перенес форму на хостинг, все заработало. Но когда снес стили Bootstrap'а, форма выдает ошибку Post500 в .php файле. Это как-то связано с отсутствием Bootstrap'а?
                                                                                                                                          3) Можно ли данный скрипт компилировать и минифицировать с остальными .js скриптами?

                                                                                                                                          Заранее благодарен за быстрые ответы! Буду рекомендовать этот источник всем своим друзьям и знакомым! )
                                                                                                                                          1. Александр Мальцев # 0
                                                                                                                                            1. Да, в ней только добавлены алгоритмы для загрузки файлов на сервер.
                                                                                                                                            2. Скорее всего снесли кроме Bootstrap что-то ещё. Bootstrap — это только оформление. Проверьте может ещё что-то удалили…
                                                                                                                                            3. Да, можете скопировать содержимое в свой js-файл и сжать его.
                                                                                                                                            1. Artyom # 0
                                                                                                                                              Спасибо большое, сейчас буду разбираться!
                                                                                                                                      2. Виктор # 0
                                                                                                                                        Произошла ошибка при отправке формы на сервер.
                                                                                                                                        Что это за ошибка?
                                                                                                                                        1. Александр Мальцев # 0
                                                                                                                                          Если у Вас в браузере ошибок не возникло, то скорее всего это произошло при отправке письма:
                                                                                                                                          // отправляем письмо
                                                                                                                                          if ($mail->Send()) {
                                                                                                                                            $data['result']='success';
                                                                                                                                          } else {
                                                                                                                                            $data['result']='error';
                                                                                                                                          }
                                                                                                                                          
                                                                                                                                          Удалите этот код и проверьте появляется ли ошибка.

                                                                                                                                          Если Вы хотите настроить более детальный вывод ошибок, то их необходимо добавить в php (например, $data['error-send']):
                                                                                                                                          // отправляем письмо
                                                                                                                                          if ($mail->Send()) {
                                                                                                                                            $data['result']='success';
                                                                                                                                          } else {
                                                                                                                                            $data['result']='error';
                                                                                                                                            $data['error-send'] = 'Произошла ошибка при отправке письма!';
                                                                                                                                          }
                                                                                                                                          
                                                                                                                                          А потом в файле script.js настройте их вывод в необходимое место:
                                                                                                                                          else {
                                                                                                                                            // если сервер вернул ответ error, то делаем следующее...
                                                                                                                                            $('#error').text('Произошли ошибки при отправке формы на сервер.');
                                                                                                                                            // проверяем вернул ли сервер ошибку 'error-send' и если да, то добавим её к выводу
                                                                                                                                            if ($data['error-send']) {
                                                                                                                                              $('#error').html($('#error').html()+$data['error-send']);
                                                                                                                                            }
                                                                                                                                          }
                                                                                                                                          
                                                                                                                                          Т.е. это можно выполнить до какой-угодной деталлизации.
                                                                                                                                        2. yachmen # 0
                                                                                                                                          Александр, капча в форме перестала отображаться. И демо-вариант так же не отображается.
                                                                                                                                          <img src=«http://itchief.ru/assets/uploadify/8/b/5/8b53ca31be58b2c85303845475e9d7eds.jpg>
                                                                                                                                          1. Александр Мальцев # 0
                                                                                                                                            Спасибо, в демо исправил. А в какой ещё форме не отображается?
                                                                                                                                            1. yachmen # 0
                                                                                                                                              Я скачал исходники и проверил на своем сервере — увидел проблему с капчей, только после этого решил проверить демо на вашем сайте.
                                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                                По умолчанию необходимо директорию feedback из архива скопировать в корень сайта.
                                                                                                                                                1. yachmen # 0
                                                                                                                                                  Сделал именно так и обнаружил проблему с отображением капчи, глянул в демку — абсолютно такая же проблема. Можете обновить исходники?
                                                                                                                                                  1. yachmen # 0
                                                                                                                                                    Александр, закинул содержимое архива в корень — форма отображается корректно. Создал несколько подкаталогов на сайте, закинул содержимое туда — форма не отображается. Это потому что пути не абсолютные? Или еще какая то проблема?
                                                                                                                                                    1. Александр Мальцев # 0
                                                                                                                                                      Пути абсолютные. Если вам необходимо переместить форму, то для этого достаточно лишь переместить файл index.html в необходимую директорию и дать ему нужное имя. А весь каталог feedback так и оставить в корне.

                                                                                                                                                      Если вам необходимо по другому, то в этом случае надо будет настроить пути.
                                                                                                                                            2. qwerty1 # 0
                                                                                                                                              Александр, подскажите, как добавить в форму чекбокс согласия обработки и два выпадающих списка?
                                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                                Для добавления в форму обратной связи чекбокса (checkbox) необходимо выполнить следующие действия:
                                                                                                                                                1. Вставка элемента input с type, равным checkbox в HTML форму:
                                                                                                                                                  <!-- Чексбокс -->
                                                                                                                                                  <div class="checkbox">
                                                                                                                                                    <label>
                                                                                                                                                      <input type="checkbox" name="agreement" id="agreement"> Я согласен на обработку данных
                                                                                                                                                    </label>
                                                                                                                                                  </div>
                                                                                                                                                2. Установка кнопке submit не активное состояние:
                                                                                                                                                  <button type="submit" class="btn btn-primary pull-right" disabled="disabled">Отправить сообщение</button>
                                                                                                                                                  
                                                                                                                                                3. Добавление скрипта, устанавливающего активность кнопки в зависимости от состояния чекбокса:
                                                                                                                                                  <script>
                                                                                                                                                  $(function() {
                                                                                                                                                    $('#agreement').change(function() {
                                                                                                                                                      if ($(this).prop('checked') == true) {
                                                                                                                                                        $('#contactForm button[type="submit"]').prop('disabled', false);
                                                                                                                                                      } else {
                                                                                                                                                        $('#contactForm button[type="submit"]').prop('disabled', true);
                                                                                                                                                      }
                                                                                                                                                    });
                                                                                                                                                  });
                                                                                                                                                  </script>
                                                                                                                                                  
                                                                                                                                                1. Александр Мальцев # 0
                                                                                                                                                  Для добавления выпадающего списка в форму обратной связи выполните следующие шаги:
                                                                                                                                                  1. Вставьте в форму необходимый раскрывающий список (например, содержащий размеры) (файл index.html):
                                                                                                                                                    <div class="form-group">
                                                                                                                                                      <label for="size">Выберите размер:</label>
                                                                                                                                                      <select class="form-control" id="size" name="size">
                                                                                                                                                        <option disabled selected value> -- выберите размер -- </option>
                                                                                                                                                        <option>XS</option>
                                                                                                                                                        <option>S</option>
                                                                                                                                                        <option>M</option>
                                                                                                                                                        <option>L</option>
                                                                                                                                                        <option>XL</option>
                                                                                                                                                        <option>XXL</option>
                                                                                                                                                      </select>
                                                                                                                                                    </div>
                                                                                                                                                    
                                                                                                                                                  2. Добавьте значение выбранного пункта меню в объект formData (файл script.js — для отправки на сервер):
                                                                                                                                                    // если пользователь выбрал поле, то добавляем его в formData
                                                                                                                                                    if ($('#size').val()) {
                                                                                                                                                      formData.append('size', $('#size').val());
                                                                                                                                                    }
                                                                                                                                                    
                                                                                                                                                  3. Получаем значение на сервере (если оно есть) и добавляем его в тело письма для отправки на почту (файл process.php). Или любое другое необходимое действие.
                                                                                                                                                    if (isset($_POST['size'])) {
                                                                                                                                                      $output .= "Размер: " . $_POST['size'];
                                                                                                                                                    }
                                                                                                                                                    
                                                                                                                                                  Добавление второго списка выполняем аналогично.
                                                                                                                                                  1. qwerty1 # 0
                                                                                                                                                    Спасибо за оперативность. Все понятно просто!
                                                                                                                                                2. Юрий # 0
                                                                                                                                                  Здравствуйте. Александр.
                                                                                                                                                  Подскажите как добавить в форму возможность отправки любого файла, а не только картинки?
                                                                                                                                                  И что делать с нечитаемыми иероглифами в отправляемом письме — приходит вот такое Сообщение:
                                                                                                                                                  Спасибо.
                                                                                                                                                  1. Александр Мальцев # 0
                                                                                                                                                    Необходимо в файлах php и js убрать строчки, которые отвечают за проверку расширения файлов.

                                                                                                                                                    Проверьте есть ли у вас в файле php, который отвечает за отправку писем, строчка:
                                                                                                                                                    $mail->CharSet = 'UTF-8';
                                                                                                                                                    Эта строчка должна распологаться после:
                                                                                                                                                    $mail = new PHPMailer;
                                                                                                                                                  2. Artem # 0
                                                                                                                                                    Что не могу понять… Ввожу правильную каптчу — «Произошли ошибки при отправке формы на сервер.»
                                                                                                                                                    В консоли смотрю, приходит POST'ом, нор всё время — {«result»:«error»}

                                                                                                                                                    1. Artem # 0
                                                                                                                                                      Ах да, в папке проекта создаётся файлик «message.txt» с сообщениями из формы, но всё равно — {«result»:«error»}
                                                                                                                                                      1. Александр Мальцев # 0
                                                                                                                                                        Значит, у вас всё отлично отрабатывает до этого момента. После этого в файле process.php идёт отправка формы на указанный email. Там и возникает ошибка… Скорее всего, вы имеете хостинг (тариф хостинга), который просто не позволяет отправлять почту.
                                                                                                                                                        1. Artem # 0
                                                                                                                                                          Проект пока даже не на хостинге, а на локальном сервере… Но по идее в Open Server и в Xampp должны приходить письма! Но ни там, ни там ничего не наблюдается =(
                                                                                                                                                          1. Александр Мальцев # 0
                                                                                                                                                            Если есть заглушка, то должно…
                                                                                                                                                            Определите в каком месте возникает ошибка и тогда будет всё понятно.
                                                                                                                                                            Для этого необходимо добавить после каждой из строчек
                                                                                                                                                            $data['result']='error'
                                                                                                                                                            
                                                                                                                                                            дополнительное описание:
                                                                                                                                                            $data['errortext']='строчка 109 или при mail send';
                                                                                                                                                            
                                                                                                                                                            1. Artem # 0
                                                                                                                                                              Да, ошибка в этом блоке, в самом конце:

                                                                                                                                                              if ($mail->send()) {
                                                                                                                                                                      $data['result']='success';
                                                                                                                                                                  } else {
                                                                                                                                                                      $data['result']='error';
                                                                                                                                                                  }
                                                                                                                                                              Прошёлся по трейсу в классе… Метод send, preSend и вот наконец punyencodeAddress

                                                                                                                                                              if ($this->has8bitChars($domain) and @mb_check_encoding($domain, $this->CharSet)) {
                                                                                                                                                                              $domain = mb_convert_encoding($domain, 'UTF-8', $this->CharSet);
                                                                                                                                                                              if (($punycode = defined('INTL_IDNA_VARIANT_UTS46') ?
                                                                                                                                                                                  idn_to_ascii($domain, 0, INTL_IDNA_VARIANT_UTS4) :
                                                                                                                                                                                  idn_to_ascii($domain)) !== false) {
                                                                                                                                                                                  return substr($address, 0, $pos) . $punycode;
                                                                                                                                                                              }
                                                                                                                                                                          }
                                                                                                                                                              Редактор пишет в строке idn_to_ascii($domain, 0, INTL_IDNA_VARIANT_UTS4), что передаются 3 параметра, а в реализации самого метода idn_to_ascii всего 2. Пробовал удалять или 0 или константу INTL_IDNA_VARIANT_UTS4 — но тогда: только переменные передаются по ссылке!

                                                                                                                                                              function idn_to_ascii($utf8_domain, &$errorcode = null) { }
                                                                                                                                                              Где же я так нагрешил по крупному то(((
                                                                                                                                                              1. Александр Мальцев # 0
                                                                                                                                                                Это что-то с локальным сервером… Попробуйте сменить его на какой-то другой.
                                                                                                                                                                1. Artem # 0
                                                                                                                                                                  Эммм, дома дебиан — Xampp, на работе Windows — Open Server… Всё одно и тоже! Хорошо попробую — Wampp на ноуте завтра
                                                                                                                                                    2. Сергей Горин # 0
                                                                                                                                                      Добрый день, Александр! И снова обращаюсь к Вам с просьбой о помощи, теперь уже по данной теме. Подскажите пожалуйста, как в php реализовать возможность отправки содержимого полей формы с поддержкой html тегов? И второй вопрос: как сделать, чтобы письмо приходило не в виде обычного текста, а в виде html-разметки с css-оформлением? Буду Вам признателен за простейшие примеры кода!
                                                                                                                                                      1. Александр Мальцев # 0
                                                                                                                                                        Здравствуйте.
                                                                                                                                                        Для этого необходимо указать, что тело письма будет представлять собой html. Это осуществляется посредством добавления следующей инструкции в код:
                                                                                                                                                        $mail->IsHTML(true);
                                                                                                                                                        
                                                                                                                                                        Этот режим позволит формировать тело письма, с помощью html тегов и css:
                                                                                                                                                        $output = '<h3 style="color:red;">Сообщение с формы обратной связи</h3>';
                                                                                                                                                        $output .= '<hr>';
                                                                                                                                                        $output .= '<p><b>Данные, оставленные пользователем в форме обратной связи:</b></p>';
                                                                                                                                                        ...
                                                                                                                                                        
                                                                                                                                                        1. Сергей Горин # 0
                                                                                                                                                          Огромное спасибо, Александр! Предложенное Вами решение оказалось куда проще, чем я мог себе представить ))

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