Форма обратной связи для сайта с отправкой на почту

Форма обратной связи для сайта с отправкой на почту
Содержание:
  1. Назначение и основные характеристики
  2. Исходные коды
  3. Скриншоты
  4. Установка и настройка
  5. Часто задаваемые вопросы
  6. Что внутри?
  7. Комментарии

В этой статье мы изучим, как добавить на сайт форму обратной связи и настроить её под свои поля. Отправляет данные эта форма на почту. Её код написан на чистом CSS, JavaScript и PHP.

Назначение и основные характеристики

Форма обратной связи (на английском feedback или contact form) – это один из способов взаимодействия клиента с менеджером или владельцем сайта. Например, её можно использовать для получения отзывов от клиентов, заказа услуг, оставления заявок и т.д.

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

Основные характеристики этой формы:

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

Исходные коды

Файлы формы обратной связи расположены на GitHub: https://github.com/itchief/feedback-form.

Последний релиз – 4.0.6. Скачать его можно, нажав на эту ссылку. Распространяется она под лицензией MIT.

Оформление формы выполнено с помощью стилей, находящихся в файле «form-processing.css». Для исполнения серверных сценариев необходимо иметь PHP не ниже v7.0.

Другие архивы различных форм, созданных на основе этой, можете посмотреть на «Яндекс.Диск».

Демо формы

Скриншоты

Внешний вид формы обратной связи Как осуществляется валидация формы обратной связи Отображение информации об успешной отправки формы обратной связи

Установка и настройка

1. Добавить форму в HTML документ.

<form id="form" action="/feedback/processing.php" enctype="multipart/form-data" novalidate>
  ...
</form>

Указание обработчика осуществляется с помощью атрибута action. Форма используется для получения сведений от пользователя. Пример формы расположен в «index.html».

2. Подключить к странице CSS и JavaScript файлы:

<link rel="stylesheet" href="/feedback/css/form-processing.css">
<script src="/feedback/js/form-processing.js"></script>

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

3. Написать код для вывода сообщения об успехе.

Какое сообщение и каким образом оно должно выводиться пользователю при успешной отправке формы вы определяете сами. Выполнять это следует в обработчике события success, которое генерируется в «form-processing.js» для тега <form>.

Например, для этого в «index.html» используется следующий HTML и JavaScript.

HTML код:

<!-- Сообщение об успешной отправки формы -->
<div class="form-success form-success_hide">
  <div class="form-success__message">Форма успешно отправлена. Нажмите <button type="button" class="form-success__btn">здесь</button>, если нужно отправить ещё одну форму.</div>
</div>

JavaScript:

document.addEventListener('itc.successSendForm', (e) => {
  const el = e.target.closest('.form-container').querySelector('.form-success');
  el.classList.remove('form-success_hide');
});
// при клике на .form-success__btn
document.querySelector('.form-success__btn').addEventListener('click', (e) => {
  const el = e.target.closest('.form-container').querySelector('form');
  const form = ItcSubmitForm.getOrCreateInstance(el);
  form.reset();
  e.target.closest('.form-container').querySelector('.form-success').classList.add('form-success_hide');
});

Метод reset() используется для сброса формы.

4. Инициализировать форму как ItcSubmitForm:

// 'form' - селектор для выбора <form>
ItcSubmitForm.getOrCreateInstance('form');

Передача дополнительных настроек осуществляется в формате объекта, который нужно указать в качестве 2 аргумента:

ItcSubmitForm.getOrCreateInstance('form', {
  isCheckValidationOnClient: true, // проверять форму перед отправкой на сервер
  attachMaxItems: 5, // максимальное количество файлов, которые можно добавить к форме
  attachMaxFileSize: 512, // 512 Кбайт - максимальный размер файла
  attachExt: ['jpg', 'jpeg', 'bmp', 'gif', 'png'] // допустимые расширения файлов
});

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

5. Настроить константы в серверном php-скрипте «form-processing.php».

5.1. Если вы используете капчу, встроенную в форму, то константе HAS_CHECK_CAPTCHA необходимо установить значение true. В противном случае false:

define('HAS_CHECK_CAPTCHA', true);

5.2. Файлы (поле attach):

// не пропускать форму, если к ней не прикреплён хотя бы один файл
const HAS_ATTACH_REQUIRED = false;
// разрешённые mime типы файлов
const ALLOWED_MIME_TYPES = ['image/jpeg', 'image/gif', 'image/png'];
// максимальный размер файла
const MAX_FILE_SIZE = 512 * 1024;

5.3. Настройки почты:

// отправлять письмо на указанный адрес email
const HAS_SEND_EMAIL = true;
// добавить файлы в тело письма в виде ссылок (В противном случае прикрепить)
const HAS_ATTACH_IN_BODY = true;
// базовый URL-адрес (используется, если составления полного URL для ссылок, добавляемых в тело письма)
const BASE_URL = 'https://domain.com';
// настройка почты (отправка осуществляется через SMTP)
const EMAIL_SETTINGS = [
  'addresses' => ['manager@domain.com'], // кому необходимо отправить письмо
  'from' => ['no-reply@domain.com', 'Имя сайта'], // от какого email и имени необходимо отправить письмо
  'subject' => 'Сообщение с формы обратной связи', // тема письма
  'host' => 'ssl://smtp.yandex.ru', // SMTP-хост
  'username' => 'name@yandex.ru', // // SMTP-пользователь
  'password' => '*********', // SMTP-пароль
  'port' => '465' // SMTP-порт
];

5.4. Отправка уведомления пользователю (необходим email в форме):

// необходимо ли отправлять уведомление пользователю на почту
const HAS_SEND_NOTIFICATION = false;
// тема письма
const SUBJECT_FOR_CLIENT = 'Ваше сообщение доставлено';

5.5. HAS_WRITE_LOG определяет, необходимо ли писать предупреждения и ошибки при обработке формы в лог (файлы записываются в папку /feedback/logs/):

// писать предупреждения и ошибки в лог
define('HAS_WRITE_LOG', true);

5.6. Константа HAS_WRITE_TXT определяет необходимо ли сохранять успешные формы в файл «/feedback/logs/forms.log»:

// записывать успешные формы в файл forms.log
const HAS_WRITE_LOG = true;

6. После завершения настройки, скопировать папку «feedback» в корневую директорию сайта.

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

На сайте с доменным именем «domain.com» эта форма будет доступна по следующему URL: http://domain.com/feedback/ (или https://domain.com/feedback/).

Часто задаваемые вопросы

1. Как убрать капчу

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

1. Удалить из HTML блок с капчей:

<!-- Капча -->
<div class="form-group form-captcha">
  ...
</div>

2. В php обработчике формы установить константе HAS_CHECK_CAPTCHA значение false.

// проверять ли капчу
  const HAS_CHECK_CAPTCHA = false;

2. Как добавить новое поле в форму

Для добавления нового поля (например, phone) достаточно выполнить следующие действия.

1. Вставить HTML код, содержащий <input type="tel" name="phone"> в <form>:

<!-- Телефон -->
<div class="form-group">
  <label for="phone" class="control-label">Телефон</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">+7</div>
    </div>
    <input id="phone" type="tel" name="phone" class="form-control" value="(___)___-__-__" pattern="^(?[0-9]{3})?(s+)?[0-9]{3}-?[0-9]{2}-?[0-9]{2}$">
    <div class="invalid-feedback"></div>
  </div>
</div>

2. При необходимости можно создать маску для телефона. Например, на базе «masked_input_1.4.1-min.js»:

<script>
// masked_input_1.4.1-min.js
// angelwatt.com/coding/masked_input.php

MaskedInput({
  elm: document.getElementById('phone'), // select by id
  format: '(___)___-__-__',
  separator: '()-'
});
</script>

3. Добавить в «form-processing.php» код для валидации номера телефона:

// валидация phone
if (!empty($_POST['phone'])) {
  $data['form']['phone'] = preg_replace('/D/', '', $_POST['phone']);
  if (!preg_match('/^(8|7)(d{10})$/', $phone)) {
    $data['result'] = 'error';
    $data['errors']['phone'] = 'Поле содержит не корректный номер.';
    itc_log('Phone не корректный.');
  }
}

Также необходимо добавить строчку, которая будет заменять плейсхолдер %phone% в шаблоне письма:

$search = ['%subject%', '%name%', '%email%', '%message%', '%phone%', '%date%'];
$replace = [EMAIL_SETTINGS['subject'], $data['form']['name'], $data['form']['email'], $data['form']['message'], $data['form']['phone'], date('d.m.Y H:i')];

В месте, где записываем лог:


$output .= 'Телефон: ' . isset($data['form']['phone']) ? $data['form']['phone'] : 'не указан' . PHP_EOL;

4. Добавить в шаблон письма «email.tpl»:

Телефон: <b>%phone%</b>

Пример формы, в котором присутствует поле для ввода телефона: скачать.

3. Как использовать почту Gmail

По умолчанию в аккаунте Google отключена возможность отправлять почту через SMTP-сервер Gmail с помощью PHP. Чтобы её включить необходимо предоставить доступ к аккаунту для приложения.

Но перед этим, необходимо узнать текущее состояние двухэтапной аутентификации.

Для этого необходимо перейти в Google аккаунт и открыть раздел «Безопасность». В группе «Вход в аккаунт Google» найти настройку «Двухэтапная аутентификация» и посмотреть её статус.

Если настройка «Двухэтапная аутентификация» выключена, то перейти к группе «Ненадежные приложения, у которых есть доступ к аккаунту» и нажать на «Открыть доступ (не рекомендуется)». После этого на открывшейся странице перевести переключатель «Небезопасные приложения заблокированы» в состояние включено. На этом действия по настройке Google аккаунта завершены.

В противном случае, т.е. когда настройка «Двухэтапная аутентификация» включена необходимо выполнить другие действия, а именно создать пароль для приложения. Т.к. использовать пароль, который вы используете для обычного входа на почту, для SMTP аутентификации в соответствии с безопасностью Google в этом случае нельзя.

Для создания паролю приложению нужно перейти в Google аккаунт, а затем в раздел «Безопасность». Далее на этой странице найти группу настроек «Вход в аккаунт Google» и кликнуть на ссылку «Пароли приложений». На открывшейся странице из раскрывающегося списка «Приложение» необходимо выбрать «Другое (введите название)» и написать, например, имя своего сайта, а затем нажать на кнопку «Создать». Созданный пароль необходимо скопировать, он нам нужен будет при настройке отправки почты с использованием PHPMailer.

Пароли приложений в Google аккаунте

Для этого необходимо открыть файл «form-processing.php» и сделать следующие настройки почты:

const EMAIL_SETTINGS = [
  'addresses' => ['manager@domain.com'], // кому необходимо отправить письмо
  'from' => ['name@gmail.com', 'Имя'], // от какого email и имени необходимо отправить письмо
  'subject' => 'Сообщение с формы обратной связи', // тема письма
  'host' => 'ssl://smtp.gmail.com', // SMTP-хост
  'username' => 'name@gmail.com', // // SMTP-пользователь
  'password' => '*********', // SMTP-пароль
  'port' => '465' // SMTP-порт
];

При включенной двухэтапной аутентификации Google мы указываем в качества ключа password пароль, созданный для приложения. В противном случае – пароль от аккаунта.

Нескольких форм на одной странице

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

1. Добавить к каждой из них id (например, form-1, form-2 и т.д.), для того их можно было более просто получить.

2. Если их обработка на сервере будет значительно отличаться, то создать необходимые php-скрипты и указать их в action:

<!-- форма 1 -->
<form id="form-1" action="/feedback/form-processing-1.php" enctype="multipart/form-data" novalidate>
  ...
</form>
<!-- форма 2 -->
<form id="form-2" action="/feedback/form-processing-2.php" enctype="multipart/form-data" novalidate>
  ...
</form>

3. Добавить в URL адрес для капчи GET-параметр id (так образом мы можем создать свою капчу для каждой формы):

<!-- форма 1 -->
<form id="form-1" action="/feedback/form-processing-1.php" enctype="multipart/form-data" novalidate>
  ...
  <img class="form-captcha__image" src="/feedback/captcha/captcha.php?id=captcha-1" data-src="/feedback/captcha/captcha.php?id=captcha-1" width="132" height="46" alt="Капча">
  ...
</form>
<!-- форма 2 -->
<form id="form-2" action="/feedback/form-processing-2.php" enctype="multipart/form-data" novalidate>
  ...
  <img class="form-captcha__image" src="/feedback/captcha/captcha.php?id=captcha-2" data-src="/feedback/captcha/captcha.php?id=captcha-2" width="132" height="46" alt="Капча">
  ...
</form>

4. Выполнить инициализацию форм как ItcSubmitForm:

// инициализация #form-1
ItcSubmitForm.getOrCreateInstance('#form-1');
// инициализация #form-2
ItcSubmitForm.getOrCreateInstance('#form-2');

5. Внести изменения в «form-processing-1.php» и «form-processing-2.php» для обработки форм. Изначально эти файлы можно создать как копии «form-processing.php».

6. В месте, в котором проверяется код капчи, установить в качестве ключа $_SESSION то значение id, которое мы использовали в <img>:

// в файле form-processing-1.php
if ($_POST['captcha'] === $_SESSION['captcha-1']) {

// в файле form-processing-2.php
if ($_POST['captcha'] === $_SESSION['captcha-2']) {

Пример с двумя формами, расположенными на одной странице, расположен на GitHub в папке examples.

Что внутри?

Форма в HTML состоит из следующих элементов:

  • <input type="text" name="name"> – имя;
  • <input type="email" name="email"> – email;
  • <textarea name="message"> – сообщение;
  • <input type="file" name="attach[]" multiple> – файлы;
  • <input type="text" name="captcha"> – капча;
  • <input type="checkbox" name="agree"> – пользовательское соглашение;
  • <button type="submit"> – кнопка для отправки формы.

Это набор полей, которая <form> имеет по умолчанию. При необходимости в неё можно добавить новые, а также удалить существующие.

Работа формы выполняется через AJAX.

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

Когда пользователь нажимает на кнопку «Отправить», возникает событие submit на элементе <form>. В JavaScript срабатывает соответствующий обработчик. Код этого обработчика выполняет валидацию полей (если значение ключа _isCheckValidationOnClient равно true). Если все поля соответствуют требованиям, то форма отправляется на сервер через AJAX (сбор данных осуществляется с использованием FormData).

Запрос на сервере обрабатывается в «form-processing.php». Сначала в нём осуществляется валидация данных. При их корректности осуществляется отправка формы на указанный в настройках email. Результат обработки формы отправляется клиенту в формате JSON.

После получения ответа от сервера, JavaScript разбирает его и определённым образом обновляем страницу.

Как организована валидация

Валидация полей формы в JavaScript выполняется с использованием метода checkValidity():

let valid = true;
// input, textarea
this._elForm.querySelectorAll('input, textarea').forEach(el => {
  if (el.checkValidity()) {
    this._setStateValidaion(el, 'success');
  } else {
    this._setStateValidaion(el, 'error', el.validationMessage);
    valid = false;
  }
});
return valid;

Метод _setStateValidaion() устанавливает для элемента определённые классы, которые используются для его стилизации.

Как генерируется капча

Для генерации капчи используются 3 файла:

  • captcha.php (скрипт для генерации капчи);
  • oswald.ttf (шрифт, посредством которого код капчи пишется на изображении);
  • background.png (изображение, на которое накладывается текст капчи).

При нажатии на кнопку Обновить генерируется новый код капчи и обновляется его изображение на странице.

Добавление файлов в форму

В <form> код для добавления файлов организован с использованием <input>, который имеет атрибуты type="file" и multiple:

<!-- Файлы -->
<div class="form-group form-attach" data-count="5">
  <div class="form-attach__label">Файлы (не более <span class="form-attach__count">5</span>)</div>
  <div class="form-attach__wrapper">
    <input type="file" name="attach[]" multiple required>
    <div class="form-attach__description">
      <div>Нажмите для загрузки файлов или перетащите их</div>
      <div class="text-sm">PNG, JPG, GIF (до 512 Кбайт)</div>
    </div>
    <div class="form-attach__items"></div>
  </div>
  <div class="invalid-feedback"></div>
</div>

Для создания превью изображений в JavaScript используется FileReader.

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

Что отправляет form-processing.php на клиент (в браузер)

В «form-processing.php» отправляется всегда то, что находится в переменной $data.

Результат обработки находится в ключе result. Он может иметь одно из следующих значений:

  • 'success' - успех;
  • 'error' - при обработке формы возникли ошибки.

Ошибки валидации помещаются в $data['errors']. Например так записывается ошибка для поля email:

$data['errors']['email'] = 'Email не корректный.';

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

$data['logs'][] = 'Сообщение, которое нужно вывести в консоль браузера.';

Добавление файлов к письму

По умолчанию файлы прикрепляются к письму. Осуществляется это так:

foreach ($attachs as $attach) {
  $mail->addAttachment($attach);
}

Кроме этого имеется также возможность добавить их в виде ссылок в тело письма (зависит это от значения константы HAS_ATTACH_IN_BODY)

$ul = 'Файлы, прикреплённые к форме: <ul>';
foreach ($attachs as $attach) {
  $href = str_replace($_SERVER['DOCUMENT_ROOT'], '', $attach);
  $name = basename($href);
  $ul .= '<li><a href="' . BASE_URL . $href . '">' . $name . '</a></li>';
  $data['href'][] = BASE_URL . $href;
}
$ul .= '</ul>';

В письмо «email.tpl» они вставляются в место, определяемым плейсхолдером %attachs%.

Другие статьи по созданию форм обратных связей:

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

farsel
farsel

Здравствуйте, Александр!

Большое спасибо за Вашу форму, очень полезная штука.

Есть одна мелочь, которую никак не могу настроить:

поле MAIL FROM NAME заполнил по-своему, но в письмах, тем не менее, вместо моего имени везде указывается Simple User.

Всё перерыл, но никак не пойму, почему не подставляется моё имя.

Александр Мальцев
Александр Мальцев

Привет! В коде устанавливается здесь:

const EMAIL_SETTINGS = [
  'from' => ['no-reply@domain.com', 'Имя сайта'],
  // ...
];
// ...
$mail->setFrom(EMAIL_SETTINGS['from'][0], EMAIL_SETTINGS['from'][1]);

Почему не работает, нужно разбираться. С таким не сталкивался.

farsel
farsel

Большое спасибо за ответ!

Это я сам ошибся, оказывается, применяя настройки от версии 2.1 (с телефоном) к текущей версии 4.07.

В конце концов, сделал версию 4.07 с телефоном по совету из комментариев, переделал поле name.

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

Ещё раз спасибо за вашу работу!

Аноним
Аноним

Добрый вечер, Александр!

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

Я плохо знаю javascript, не могу сообразить как в IF обратиться к полю "el.id == 'name'" и его длине el.value.length.
if ((phone.value) && (email.value)) {
      this._setStateValidaion(el, 'error', 'Введите хотя бы один контакт'');
     valid = false;          
        }
        else {
        	"Валидация поля"     
        }

Заранее большое спасибо!

Александр Мальцев
Александр Мальцев

Добрый день! Элементы, которые нужно обрабатывать как-то по-другому необходимо сначала исключить из заданной проверки:

this._elForm.querySelectorAll('input, textarea').forEach(el => {
  // ...
  if (el.name === 'phone' || el.name === 'email') {
    return;
  }
  // ...
});

После этого ниже написать необходимую проверку:

const inputEmail = this._elForm.querySelector('[name="email"]');
const email = inputEmail?.value ?? '';
const inputPhone = this._elForm.querySelector('[name="phone"]');
const phone = inputPhone?.value ?? '';
if (!(email.length || phone.length)) {
  this._setStateValidaion(inputEmail, 'error', 'Введите email или телефон');
  this._setStateValidaion(inputPhone, 'error', 'Введите email или телефон');
}

Но самое главное, не забыть написать проверку на стороне сервера.

Аноним
Аноним

Добрый вечер Александр!

Спасибо большое за помощь. С валидацией в PHP все получилось.

А вот с валидацией телефон или почты на JS опять проблема.

Ошибки в валидации код показывает верно. Но если правильно ввести телефон или почту, поля формы все равно показывают ошибку. То есть не срабатывает команда - valid = true. Подскажите пожалуйста, как правильно написать valid при правильно введенном телефоне или почты.

Заранее большое спасибо!

if (!(email.length || phone.length)) {
   this._setStateValidaion(inputEmail, 'error', 'Введите email или телефон');
   this._setStateValidaion(inputPhone, 'error', 'Введите email или телефон');
   } 
else 
if (!email.length) {
   if (inputPhone.id == 'phone') {
      if (countDigits2(inputPhone.value) != 11) {		
         this._setStateValidaion(inputPhone, 'error', `Телефон должен содержать 11 цифр`);
         valid = false;
         } 
        valid;
      }
      if (inputEmail.id == 'email') {
         this._setStateValidaion(inputEmail, 'error', 'Введите email или телефон');
            valid = false;
	    } 
       } 
else
if (!phone.length) {
   if (inputEmail.id == 'email') {
      if (!isValidEmailAddress(inputEmail.value)) {
         this._setStateValidaion(inputEmail, 'error', `Email должен иметь вид home@yandex.ru`);
         valid = false;
          } 
         valid;
      }
      this._setStateValidaion(inputPhone, 'error', 'Введите email или телефон');
      valid = false;
}
Аноним
Аноним
else 	
if (email.length || phone.length) {
   if (inputEmail.id == 'email') {
      if (!isValidEmailAddress(inputEmail.value)) {
            this._setStateValidaion(inputEmail, 'error', `Email должен иметь вид home@yandex.ru`);
            valid = false;
              } 
              valid;
          }
      if (inputPhone.id == 'phone') {
         if (countDigits2(inputPhone.value) != 11) {		
            this._setStateValidaion(inputPhone, 'error', `Телефон должен содержать 11 цифр`);
           valid = false;
           } 
           valid;
          }
}
Аноним
Аноним

Спасибо, все работает. Нашел ошибку.

Александр Мальцев
Александр Мальцев

Отлично!

Creativeufa
Creativeufa

Александр, подскажите пожалуйста как сделать так.

Чтобы при отправке формы скрывалась кнопка Отправить сообщение и вместо нее была кнопка Отправить новое.

Сейчас происходит так, что после отправки кнопка Отправить сообщение активная и ее можно нажимать хоть сколько, соответственно на каждое нажатие уходят письма с сайта.

Creativeufa
Creativeufa

Вдруг у кого такое же будет.

Я перекопировал свойства Телефон как Имя.

1) в файле form-processing.php

// валидация phone 
if (!empty($_POST['phone'])) {
  $data['form']['phone'] = htmlspecialchars($_POST['phone']);
} else {
  $data['result'] = 'error';
  $data['errors']['phone'] = 'Заполните это поле.';
  itc_log('Не заполнено поле телефон.');
}
1) в файле файле index.html

взял свойства поля Имя и пересоздал на его основе Телефон

![](/assets/images/storage/fe2fa4818f0d164608683c95ef2bce0d.png)
Creativeufa
Creativeufa

Добрый день, Александр!

Спасибо за Ваш труд!

Пытаюсь добавить поле телефон по инструкции, добавил везде участки кода

При запуске выходят такие ошибки

1) Поле телефон может принимать пустое значение, все поля выдают ошибку а поле телефона зеленое

2) После добавления поля телефон кнопка отправить вообще не реагирует и письмо не уходит. Все перекопал, не могу найти ошибку (

Как только убираю эти участки кода, все работает прекрасно.

Помогите пожалуйста.
MaxDev
MaxDev

Добрый день, такая ошибка, куда смотреть подскажите пожалуйста

Uncaught TypeError: Cannot read properties of null (reading 'result')

at ItcSubmitForm._successXHR (form-processing.js:140:13)

at xhr.onload (form-processing.js:238:14)

Yundiga
Yundiga
  1. Правильно ли я понимаю, что это единственный файл, включающий в себя всю форму, я думала, что нужны еще файлы? Или это еще файл с расширением .css и содержанием "<link rel="stylesheet" href="/feedback/css/form-processing.css">" и с расширением .js и содержанием "<script src="/feedback/js/form-processing.js"></script>".
Итого получается, код формы добавляем в файл index.html и создаем эти два файла, так?
  1. Почту, на которую будет приходить сообщение с этой формы указываем здесь:

<label for="email" class="control-label">Email-адрес</label> ?

  1. Не понятно, уже имеется файл index.html и форма находится не на главной странице, а на отдельной странице, тогда в уже имеющийся файл добавить код формы? Правильно понимаю?
Александр Мальцев
Александр Мальцев

Привет! Тут вроде всё просто.

Для подключения формы на любую страницу необходимо:

- вставить HTML-код формы на эту страницу (в ней с помощью атрибута action указать путь к php-файлу, который будет её обрабатывать на сервере);

- подключить к странице на которой размещена форма файл form-processing.js (он осуществляет передачу данных формы на сервер через AJAX по адресу, который указан в action и соответственно после получения от сервера его отображение на странице);

- в файле form-processing.css содержатся стили для оформления формы, данный файл можно не использовать и написать свои стили.

Это всё что необходимо подключить к странице.

Email в форме – это почта пользователя. Email на который должна приходить форма администратору сайта, указывается в form-processing.php.

Остальные файлы нужны для выполнения работы на сервере.

Вообще принцип подключения формы такой: берёте и копируете всю папку feedback себе в корень сайта. Единственный файл, который не нужен в этой папке – это «index.html». После этого на любые страницы на сайте просто вставляете код формы как например это сделано в «index.html» и подключаете файлы form-processing.css и form-processing.js.
it-darius
it-darius

Здравствуйте, такая проблема:

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

Подскажите, пожалуйста, в чем может быть причина?

Александр Мальцев
Александр Мальцев

Привет! Нужно ещё в php-файле убрать код, связанный с email-адресом (проверки и так далее).

Павел_К
Павел_К

Здравствуйте.

В описание есть установка двух форм на одной странице #Нескольких форм на одной странице .Установка формы на различных страницах по одной на каждой, аналогична?

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

Павел_К
Павел_К

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

/assets/images/storage/f39b7900c870a5e558a3b477ac013073.jpeg
Александр Мальцев
Александр Мальцев

Добрый день! Чтобы узнать с какой страницы ушло сообщение, можно с помощью JavaScript добавлять в форму скрытый input со значением, равным title страницы.

Ссылки - это ссылки на файлы, которые были прикреплены к форме. Добавлять их в виде ссылок в тело письма или нет зависит от значения константы HAS_ATTACH_IN_BODY. Чтобы эти ссылки ввели на указанные файлы нужно правильно ещё настроить BASE_URL.

MaxDev
MaxDev

Прикрепляю фотографии текста ниже (это в инкогнито если, в обычном такого нету)

MaxDev
MaxDev

action="<?php echo gettemplatedirectory_uri(); ?>/feedback/form-processing.php" подключение в атрибуте action идет такое, чтобы обнаружить форму, может дело в этом? JS файлы и остальное я так и подключал, но там атрибут src присутствует

Александр Мальцев
Александр Мальцев

Проверьте, как подключаете JavaScript файлы и доступна ли форма в этот момент.

MaxDev
MaxDev

То настроил, сейчас происходит это, в чем может быть причина? smtp указано (или все таки тут что то неверно). Выдает в логах это

Александр Мальцев
Александр Мальцев

В smtp необходимо вбивать свои реальные данные.

MaxDev
MaxDev

Вы простите, что много вопросов, я не силен, но последнее, почему только это приходит, вроде же в email.tpl все указано, что я делаю не так? в самом php добавлял, как сказано

Александр Мальцев
Александр Мальцев

Не знаю, тут нужно смотреть весь код. Может что-то где-то упустили.

MaxDev
MaxDev

https://netrunnerpc.ru/wp-content/themes/netrunnerpc/feedback/form-processing.php?name=%D0%9C%D0%B0%D0%BA%D1%81%D0%B8%D0%BC&email=zavidiy1998%40mail.ru&phone=89521172318&agree=true

Добрый вечер, есть сайт, прикрутил вашу форму, натянуто CMS WordPress, при отправке формы, выдает просто новую страницу с URL который выше, и нет никакой проверки на валидацию, ума не приложу, что может это быть, и что вообще делать.

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

Сама форма на сайте https://netrunnerpc.ru/?page_id=13

![](/assets/images/storage/b157f6fe727a658cc03f116d3c5b7615.png)

Александр Мальцев
Александр Мальцев

Необходимо правильно подключить форму и JavaScript файлы.

Sana
Sana

Здравствуйте, Александр! После добавления шаблона к ресурсу modx перестает работать отображение миниатюр загружаемых файлов, и при загрузке название очередного файла заменяет собой предыдущее. Подскажите, пожалуйста, как исправить?

Александр Мальцев
Александр Мальцев

Добрый день! Может что-то с кэшем, попробуйте его очистить.

AndyWPL
AndyWPL

Здравствуйте!

А можно каким-то образом к этой форме привязать перекодирование изображений на лету? Изменение размера или качества JPG например? GD или ImageMagick? Сейчас у людей на телефонах камеры с огромным разрешением. И например у почтовых сервисов вроде япочты есть ограничения на вложения. У яндекса 30 мб вроде. Часто бывает такое что даже 1 файл не проходит. Перерыл очень много скриптов, к сожалению нигде не нашёл такой возможности.
Александр Мальцев
Александр Мальцев

Добрый день! Да, такой функционал можно добавить.

AndyWPL
AndyWPL

А как не подскажете? Само декодирование я находил, но в форму отправки его не подключал никто в примерах.

Александр Мальцев
Александр Мальцев

Как только реализую, выложу на GitHub.

MaxDev
MaxDev

Добрый день, вопрос как это исправить? (Uncaught ReferenceError: ItcSubmitForm is not defined)

Сам код написать в тега script в файле HTML (ItcSubmitForm.getOrCreateInstance('form'); )

Из за этого форма не работает, как и валидация

!

</a></p>

MaxDev
MaxDev

Все не надо, ошибка была в мелочах, отличная форма, спасибо вам большое

Александр Мальцев
Александр Мальцев

Спасибо за отзыв!

alexpebody
alexpebody

Все очень круто! Просто, четко и понятно. Спасибо большое!!!

Александр Мальцев
Александр Мальцев

Спасибо за отзыв!

Serg95
Serg95

Добрый вечер Александр!

Огромное вам спасибо за ваш труд.

Ниже, в комментариях, вы рекомендуете отключить проверку на клиенте следующим образом:

const form = new ItcSubmitForm('form', {
  isCheckValidationOnClient: false
});

Это верно скорее всего на предыдущих версиях формы.

Не подскажите, как отключить проверку в последней версии? Предполагаю, отключить можно тут, но не получается.
constructor(target, config = {}) {
    this._attach = {
      index: 0,
      maxItems: config['attachMaxItems'] || 5, // максимальное количество файлов, которые можно добавить к форме
      maxFileSize: config['attachMaxFileSize'] || 512, // максимальный размер файла
      ext: config['attachExt'] || ['jpg', 'jpeg', 'bmp', 'gif', 'png'], // дефолтные допустимые расширения для файлов
      items: []
    };
   this._isCheckValidationOnClient = config['isCheckValidationOnClient'] !== false; 
    this._elForm = target;
    this._init();
  }
Александр Мальцев
Александр Мальцев

Добрый день! Рад, что форма нравится. Попробуйте так, если не будет работать, то посмотрю, что не так:

ItcSubmitForm.getOrCreateInstance('form', {
  isCheckValidationOnClient: false
});
minfo
minfo

Здравствуйте Александр!

Скачал вашу последнюю форму feedback-form-v.4.0.7.zip и по вышеприведённой инструкции добавил поле с телефоном.

Обнаружил неточность:

  1. Как добавить новое поле в форму -> 3. Добавить в «form-processing.php» код для валидации номера телефона:

строчку

if (!preg_match('/^(8|7)(d{10})$/', $phone)) {

заменить на

if (!preg_match('/^(8|7)(d{10})$/',$_POST['phone']))

Подскажите пожалуйста

Пустое поле с телефоном почему то всегда проходит js валидацию, как можно это исправить в файле form-processing.js

![](/assets/images/storage/e8cc50de94842d8eff0548b9ce237464.png)

Александр Мальцев
Александр Мальцев

Добрый день!

Нужно добавить ещё проверку на пустоту:
if (empty($_POST['phone'])) {
  $data['result'] = 'error';
  $data['errors']['phone'] = 'Заполните это поле.';
  itc_log('Phone пустой.');
}
Serge_19
Serge_19

День добрый! Подскажите, удалось ли решить проблему?

У меня тоже подсвечивает эту ошибку, при разной степени настроек письмо все таки уходит с файлами в том числе, но сообщения об успешной отправке не появляется, выдается ошибка в файле form-processing.js блоке:
// при успешной отправки формы
if (data['result'] === 'success') {
  this._elForm.dispatchEvent(new Event('itc.successSendForm', {bubbles: true}));
  return;
Соответственно следующий блок тоже не срабатывает, говорит data['result'] пуст! Точнее так:
**form-processing.js:145 Uncaught TypeError: Cannot read properties of null (reading 'result')**
    at ItcSubmitForm._successXHR (form-processing.js:145:13)    at xhr.onload (form-processing.js:234:14)
При этом в логах ответа все прекрасно приходит, ответ ОК и массив заполнен данными из формы.
{"errors":[],"form":{"name":"Name","email":"email@email.ru","message":"text text","captcha":"UGA","agree":true},"logs":[],"result":"success"}
Понятно, что это особенности ответа сервера. Приходит какой-то кривой ответ от сервера, не обладаю достаточными познаниями JS чтобы отследить как формируется этот result.

Писал в поддержку, говорят у вас все обрабатывается, но тем не менее.

Может вам удалось обойти эту проблему?
Serge_19
Serge_19

Или даже проблема не в сервере. js-файл ждет ответ от php, а там вот это:

response: null
status: 200
statusText: "OK"
responseType: "json"
responseURL: "http://site.ru/form-processing.php"

Надо смотреть как ведет обработку файл form-processing.php.

Serge_19
Serge_19

Кажется разобрался в чем дело. Я заметил что у PHPmailer'a есть в оригинале настройка:

$mail->SMTPDebug = 0;

Её нет в этой сборке, решил её добавить чтобы посмотреть процессы.

Она и есть причина ошибки пустого ответа, убрал эту строчку и все заработало.

Ошибка оказалась совсем не очевидная для меня.

Будьте в курсе ))
Александр Мальцев
Александр Мальцев

Привет! Отлично, что разобрался. Но не совсем понятно, так как эта настройка вроде по умолчанию имеет значение 0.

Serge_19
Serge_19

В сборке ее совсем нет, даже строчки :)

Я решил добавить, чтобы отслеживать процессы, сразу выставил значение на 3 и начал тестировать. Добавил в самом начале настроек сервера.

Тут и началось ...

Насколько я теперь понимаю, помимо чистого ответа JSON файл form-processing.php стал в результате в первых строчках выдавать ответы сервера о его настройках и процессах, а только в конце появлялась нужная строчка JSON. В свою очередь файл form-processing.js стал сообщать, что вы указываете тип для обработки данных JSON, а присылаете другое, смените тип на '' или 'text', это значение элемента contentText в объекте ответа сообщало.

И когда я установил $mail->SMTPDebug = 0; что то стало получаться, но для надежности совсем убрал. Тогда стал приходить чистый JSON и обработчики файла JS стали её узнавать.

Не знаю, возможно если добавить строчку дебага в конце, что то изменится, но я уже это не проверял. А программа отличная, спасибо большое! P.S.: еще хорошо бы добавить обработчик для заполнения объекта с данными формы в цикле, чтобы вручную не прописывать получение данных из каждого поля, если полей, скажем 20. Можно создать отдельный файл с массивом имен полей и в цикле брать значения этих полей из этого файла и сопоставлять с реальными именами из массива POST, если поля совпадают, то присваивать значение этого поля. Тогда и кода будет меньше и поля будут только свои, которые в форме. Но это дело наживное :)
Александр Мальцев
Александр Мальцев

Отлично! Да, это сделать нужно. Но хочется красиво, чтобы указывать поля и требования к ним. Когда будет время это сделаю. Ну а пока, добавил фишку, чтобы лог PHPMailer писался в файл и помещался в директорию logs. Теперь можно устанавливать уровень debug для PHPMailer и он не будет попадать в вывод. Всё будет писаться в файл, да и отлаживать так будет проще.

Kind
Kind

Добрый день, выполнил все шаги, но вот такая ошибка вылезает, после нажатия на кнопку "Отправить сообщение"

Ошибка в консоли:

form-processing.js:139 Uncaught TypeError: Cannot read properties of null (reading 'result')

at ItcSubmitForm._successXHR (form-processing.js:139:13)

at xhr.onload (form-processing.js:228:14)

_successXHR @ form-processing.js:139

xhr.onload @ form-processing.js:228

Объект load (асинхронный)

_onSubmit @ form-processing.js:222

Подсвечивает эту строку if (data['result'] === 'success')

Скорее всего? я дубина, но подскажите, что может быть не так, уже пол месяца пытаюсь решить проблему)

Ссылка на видео с пк https://www.awesomescreenshot.com/video/16184839?key=79800a73b416290dd75e380993d5087e

Александр Мальцев
Александр Мальцев

Добрый день! Скорее всего какая-то ошибка на сервере. Посмотрите, что он вам присылает. Где это посмотреть можно увидеть в этом комментарии: comment-10759.

Kind
Kind

Доброе утро, заметил, что process.php есть только в https://github.com/itchief/feedback-form-in-modal в папке "process". В форме, которую здесь обсуждают, такого файла нет. Добавил его в папку "template".

Сервер присылает такой ответ:

<br />

<b>Warning</b>: require_once(/vendor/phpmailer/phpmailer/src/Exception.php): Failed to open stream: No such file or directory in <b>/var/www/u1986199/data/www/xn--b1aga8b7a.com/feedback4/template/process.php</b> on line <b>45</b><br />

<br />

<b>Fatal error</b>: Uncaught Error: Failed opening required '/vendor/phpmailer/phpmailer/src/Exception.php' (include_path='.:') in /var/www/u1986199/data/www/xn--b1aga8b7a.com/feedback4/template/process.php:45

Stack trace:

#0 {main}

thrown in <b>/var/www/u1986199/data/www/xn--b1aga8b7a.com/feedback4/template/process.php</b> on line <b>45</b><br />

45 line выглядит так "require_once('/vendor/phpmailer/phpmailer/src/Exception.php');" и в указанной директории этот файл есть

Александр Мальцев
Александр Мальцев

Добрый день! Что-то конкретно сложно подсказать, тут нужно смотреть, какая-та путаница с путями.

AGr0
AGr0

А куда исходники делись?

Александр Мальцев
Александр Мальцев

Исправил ссылку на исходники.

Leo Angel
Leo Angel

Здравствуйте, Александр!

Спасибо за прекрасную форму. Я адаптировал её под свои нужды, добавив поля и ещё кое-что - по мелочи.

Всё работает "на ура"! Но возникла одна небольшая проблема - при прикреплении файлов форма присваивает загруженным файлам уникальные имена вида

upload_xxxxxxxxxxxxxxxxxxxxx.jpg

Как, что и где (в каком файле) нужно изменить, чтобы имена файлов в папке upload имели вид
yyyyyyy_xxxxxxxxxxxxxxxxxxxxx.jpg
где yyyyyyy - оригинальное имя загружаемого файла.

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

Заранее спасибо за ответ и разъяснения.

С уважением

Александр Мальцев
Александр Мальцев

Добрый день! Форма так и работает (zip-архив проекта).

Ара
Ара
Здравствуйте, Александр!
Подскажите как правильно выполнить инициализацию нескольких форм на одной странице сделать с помощью цикла:
const form = new ItcSubmitForm('form');
При этом с учетом сообщений об успешной отправки формы:
// при возникновении события success на <form>
document.querySelector('form').addEventListener('success', (e) => {
  const el = e.target.closest('.form-container').querySelector('.form-success');
  el.classList.remove('form-success_hide');
});
// при нажатии кнопки .form-success__btn, расположенной в сообщении
document.querySelector('.form-success__btn').addEventListener('click', (e) => {
  form.reset();
  e.target.closest('.form-container').querySelector('.form-success').classList.add('form-success_hide');
});
Не получается делать в комплексе так как если и можем собрать в переменную document.querySelectorAll('form'), то как быть с e.target.closest('.form-container').querySelector('.form-success'); не представляю.

Буду благодарен за подсказку.
Ара
Ара
Приветствую, Александр
Реализовал данную проблему следующим образом.

// Маска телефона для формы
MaskedInput({
  elm: document.getElementById("phone"), // select by id
  format: "7(___)___-__-__",
  separator: "()-",
});

// Маска телефона для формы
MaskedInput({
  elm: document.getElementById("phone-1"), // select by id
  format: "7(___)___-__-__",
  separator: "()-",
});
// Маска телефона для формы
MaskedInput({
  elm: document.getElementById("phone-2"), // select by id
  format: "7(___)___-__-__",
  separator: "()-",
});

// Инициализация формы 1
let form1 = document.querySelector("#feedback-form-1");
if (form1) {
  new ItcSubmitForm("#feedback-form-1");
  form1.addEventListener("success", (e) => {
    const el = e.target.closest(".form-container").querySelector(".form-success");
    el.classList.remove("form-success_hide");
  });
}
// Инициализация формы 2
let form2 = document.querySelector("#feedback-form-2");
if (form2) {
  new ItcSubmitForm("#feedback-form-2");
  form2.addEventListener("success", (e) => {
    const el = e.target.closest(".form-container").querySelector(".form-success");
    el.classList.remove("form-success_hide");
  });
}
// Инициализация формы 3
let form3 = document.querySelector("#feedback-form-3");
if (form3) {
  new ItcSubmitForm("#feedback-form-3");
  form3.addEventListener("success", (e) => {
    const el = e.target.closest(".form-container").querySelector(".form-success");
    el.classList.remove("form-success_hide");
  });
}
Однако попытки оптимизировать код только неудачные.


const forms = {};
document.querySelectorAll("form").forEach((form) => {
  forms[form.id] = new ItcSubmitForm(form);
forms[form.id].addEventListener("success", (e) => {
	const el = e.target.closest(".form-container").querySelector(".form-success");
	el.classList.remove("form-success_hide");
 });
Александр Мальцев
Александр Мальцев
Добрый день! Переделал этот момент в форме. Обновил файлы на GitHub.
solanj
solanj
не получается вставить поле с телефоном. то вообще не приходил в письмах, теперь приходит в виде: Телефон пользователя: %email.phone%
у вас написано:
необходимо добавить строчку, которая будет заменять плейсхолдер %phone% в шаблоне письма:
$search = ['%subject%', '%name%', '%email%', '%message%', '%phone%', '%date%'];
$replace = [EMAIL_SETTINGS['subject'], $data['form']['name'], $data['form']['email'], $data['form']['message'], $data['form']['phone'], date('d.m.Y H:i')];
скажите куда вставляются эти строчки. ни где не могу найти в архиве ни чего похожего на $search = ['%subject%', '%name%', '%email%',…
в process.php вставляла, ни чего не меняется
JITREE
JITREE
По какой-то причине, после подключения файла css bootsrap, форма пересатет работать, с чем может быть связанна данная проблема?
Александр Мальцев
Александр Мальцев
Скорее всего название классов в CSS пересекаются, надо изменить.
Андрей
Андрей
Приветствую. Еще раз спасибо за ваш полезный сайт. Подскажите как сделать, чтобы кнопка «отправить» была задизаблена, пока корректно не заполнены все поля формы обратной связи?
Андрей
Андрей
Собственно сам уже нашел решение через дополнительный скрипт)
Александр Мальцев
Александр Мальцев
Привет! Отлично!
solanj
solanj
Использую форму feedback_v.2.0.1_with_phone, но телефон на почту не приходит, хотя и прописаноа в шаблоне письма: Телефон пользователя: %email.phone%
itchief.ru/assets/uploadify/9/6/a/96af758f22998fc4ac46ebd9bb960d82.jpg
Подскажите, плиз, где что подправить?
Александр Мальцев
Александр Мальцев
Посмотрите может там несколько шаблонов.
solanj
solanj
В каком смысле несколько? я ни чего не переделывала, все что есть в вашем архиве, то и у меня. Откуда взяться нескольким?
Скандинавия Хаус
Скандинавия Хаус
Использую форму с неработающей Captcha scandinaviahouse.ru и это помогает от спама.
SomMD
SomMD
Добрый день! Не подскажете, как доработать форму, чтобы после отправки перекидывало на другую страницу (например, страницу благодарности или похожих предложений?)
Александр Мальцев
Александр Мальцев
Здравствуйте! Можно указать нужный URL с помощью location.href:
document.querySelector('form').addEventListener('success', (e) => {
  // после успешной отправки формы
  location.href = 'https://ya.ru';
});
vladqgs
vladqgs
Добрый день, установил фору но вот сообщения приходят битые, что может быть?
itchief.ru/assets/uploadify/e/e/b/eebcc326804a8241eca41efb1b3fd7bb.png
Александр Мальцев
Александр Мальцев
Добрый день! Попробуйте сначала отладить отправку: itchief.ru/php/feedback-form#comment-11725
Константин
Константин
Здравствуйте. Не получается настроить отправку через SMTP, форма отрабатывается, но письма не приходят. Через SMTP yandex приходит только уведомление пользователю, что его письмо отправлено, а письмо админу с сообщением не приходит, не могу понять в чем проблема. На этом же хостинге есть ещё один сайт на другом домене сделанный на CMS со встроенной формой, там все работает, а вашу никак не могу запустить. Ещё подскажите, как настроить отправку не через SMTP, а через phpmail. Спасибо.
Александр Мальцев
Александр Мальцев
Попробуйте сначала создать простой php-файл и отестить отправку почты. После того как полностью разберётесь с настройками PHPMailer, перенесёте их в form-processing.php.

Константин
Константин
Спасибо за ответ, уже разобрался, все работает. Форма отличная, спасибо.
wargrant
wargrant
Благодарю вас за отличную форму, Все корректно работает.

Подскажите, пожалуйста, как убрать ограничение на кол-во символов в поле «name». Сейчас в него помещается только 30 символов.
Александр Мальцев
Александр Мальцев
Рад, что понравилась!
Требования к полям устанавливаются в HTML и в form-processing.php:
<input id="name" type="text" name="name" class="form-control" value="" placeholder="Имя" minlength="2" maxlength="30" required="required">
В данном случае удалите атрибут maxlength="30".
alastaraven
alastaraven
Здравствуйте! Нашёл вашу форму, т.к. она подходит для моей задачи. Я успешно установил её, немного повозился с капчей (отчасти помогли ваши ответы к комментариям), поменял поля. Была ещё проблема с валидацией поля phone, тоже с помощью обсуждения такой проблемы тут, подкорректировал код, вроде бы теперь всё нормально.
Некоторое время письма приходили на почту, но теперь при нажатии на кнопку отправки письма не приходят, а в консоли ошибка:
Поискав информацию, понял, что этот код отвечает за отправку данных без перезагрузки страницы, но не понимаю: что нужно исправить, чтобы форма отсылала письма на почту успешно?
Код в файле form-processing.js:
// отправка формы
	_onSubmit() {

		this._elForm.dispatchEvent(new Event('before-send'));

		if (this._isCheckValidationOnClient) {
			if (!this._checkValidity()) {
				const elInvalid = this._elForm.querySelector('.is-invalid');
				if (elInvalid) {
					if (elInvalid.classList.contains('form-attach')) {
						elInvalid.querySelector('input[type="file"]').focus();
					} else {
						elInvalid.focus();
					}
				}
				return;
			}
		}

		const submitWidth = this._elForm.querySelector('[type="submit"]').getBoundingClientRect().width;
		const submitHeight = this._elForm.querySelector('[type="submit"]').getBoundingClientRect().height;
		this._elForm.querySelector('[type="submit"]').textContent = '';
		this._elForm.querySelector('[type="submit"]').disabled = true;
		this._elForm.querySelector('[type="submit"]').style.width = `${submitWidth}px`;
		this._elForm.querySelector('[type="submit"]').style.height = `${submitHeight}px`;

		this._elForm.querySelector('.form-error').classList.add('form-error_hide');

		var xhr = new XMLHttpRequest();
		xhr.open('POST', this._elForm.action);
		xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
		xhr.responseType = 'json';
		xhr.onload = () => {
			this._elForm.querySelector('[type="submit"]').textContent = this._submitText;
			this._elForm.querySelector('[type="submit"]').disabled = false;
			this._elForm.querySelector('[type="submit"]').style.width = '';
			this._elForm.querySelector('[type="submit"]').style.height = '';
			if (xhr.status == 200) {
				this._successXHR(xhr.response);
			} else {
				this._errorXHR();
			}
		}
		xhr.send(this._getFormData());
	};
Александр Мальцев
Александр Мальцев
У вас ошибка 500 для form-processing.php. Проверьте на синтаксические ошибки form-processing.php, может там что-то корректировали. Нужно разбираться с ним.
Andrey Petricenko
Andrey Petricenko
Здравствуйте. А мы можем в тг списаться? объясни мне тоже плиз

alastaraven
alastaraven
Andrey Petricenko, я пока и сам ещё не разобрался совсем. Что именно объяснить?
Andrey Petricenko
Andrey Petricenko
Здравствуйте. Мне не до конца понятна логика… Надо папку feedback закинуть в корневую папку сайта и вставить HTML в index? + подключить стили и джс, я правильно понимаю(пхп никоим образом не подключается к проекту)? Объясните подробно плиз
Александр Мальцев
Александр Мальцев
Здравствуйте!
1. Папку «feedback» необходимо скопировать в корневую папку сайта.
2. Форму нужно поместить на определённую страницу в необходимое место. Взять пример формы можно из «index.html», который есть в папке «feedback».
3. После этого подключить к странице CSS и JavaScript файлы, а также код для инициализации формы как ItcSubmitForm. То есть так, как это сделано в «index.html».

На этом всё, php-скрипты как-то подключать не нужно, они будут выполняться при посуплении AJAX запросов.
Валерий Тарасюк
Валерий Тарасюк
Александр, здравствуйте.
Я использую Вашу Форму обратной связи, релиз – 4.0.3.
Реализовать подобное мне не удается длительное время.
Прежде всего, восхищает ваш профессионализм, неутомимое желание помочь
как новичкам, так бывалым сайтостроителям.
Реализуя Форму обратной связи, я узнал многое для себя как в части верстки,
так и программирования — Javascript, PHP.
Остается загадкой — за счет чего достигается АДАПТИВНОСТЬ.
Сетка Bootstrap не используется, остаются КЛАССЫ.
Если это так, то будет уместно перечислить адаптивные классы.

На локальном сервере я использую PHP 7.4.2
К чему я это?

Первое

define('EMAIL_SETTINGS', [
  'addresses' => ['manager@domain.com'], // кому необходимо отправить письмо
  'from' => ['no-reply@domain.com', 'Имя сайта'], // от какого email и имени необходимо отправить письмо
  'subject' => 'Сообщение с формы обратной связи', // тема письма
  'host' => 'ssl://smtp.yandex.ru', // SMTP-хост
  'username' => 'name@yandex.ru', // // SMTP-пользователь
  'password' => '*********', // SMTP-пароль
  'port' => '465' // SMTP-порт
]);
......................................................
Настраивая email для отправки обнаружил синт. ошибку в form-processing.php
 $replace = [EMAIL_SETTINGS['subject'], $data['form']['name'], $data['form']['email'], $data['form']['message'], date('d.m.Y H:i')];
.
PS. Добавил правку к этой строке из комментариев, синтошибка не исправилась
… необходимо заменить плейсхолдеры на правильные:
$search = ['%subject%', '%name%', '%email%', '%message%', '%date%']; поменять на
$search = ['%email.subject%', '%email.nameuser%', '%email.emailuser%', '%email.message%', '%email.date%'];
Ну или же убрать в самих шаблонах приставку email.

Закачаю этот код на внешний сервер, буду смотреть что там.

Второе.
Эта ошибка возникает, если не верно указана капча
Из лога. Не пройдена капча. Указанный код не соответствует MkswSA
Uncaught TypeError: Cannot read properties of null (reading 'result')
at ItcSubmitForm._successXHR (form-processing.js:141:13)
at xhr.onload (form-processing.js:232:14)

Третье.
Здесь при кажущейся очевидности, вопросов у меня как у новичка в почтовых сервисах, больше, чем ответов.
Письма я жду на личную почту, но они не приходят
// настройка почты (отправка осуществляется через SMTP)
define('EMAIL_SETTINGS', [
'addresses' => ['val_tar@mail.ru'], // кому необходимо отправить письмо
'from' => ['no-reply@rusport54.ru', 'Имя сайта'], // от какого email и имени необходимо отправить письмо
'subject' => 'Сообщение с формы обратной связи', // тема письма — на форме этого поля НЕТ
'host' => 'ssl://smtp.mail.ru', // SMTP-хост
'username' => 'val_tar@mail.ru', // // SMTP-пользователь
'password' => '*********', // SMTP-пароль
'port' => '465' // SMTP-порт
]);

Всех благ
Александр Мальцев
Александр Мальцев
Здравствуйте! Все используемые стили находятся в файле css/style.css. Адаптивность построена на флексах. В шаблонах нет приставки email. Что за синтаксическая ошибка? Не совсем понял.
Форму залил на хостинг и протестировал. Таких ошибок нет.
В from необходимо указывать email с которого вы отправляете email:
'from' => ['val_tar@mail.ru', 'Имя сайта']
Ключ subject задает тему письма, такое поле следует добавлять на форму только, если на страницах много форм обратных связей и вы хотите конкретно знать с какой формы произошла отправка данных:
'subject' => 'Сообщение с формы обратной связи', // тема письма
Если письма не приходят необходимо проверить отправляются ли письма с сервера.
Валерий Тарасюк
Валерий Тарасюк
Александр, здравствуйте.
Все нештатные ситуации, которые возникли у меня
при отладке Формы обратной связи, касаются ЛОКАЛЬНОГО сервера.
Возможно, их не будет на внешнем сервере.

>Адаптивность построена на флексах.
Спасибо, буду изучать

Первое
> Что за синтаксическая ошибка? Не совсем понял.
Ситнаксическая. ошибка в form-processing.php выдает PHP designer

  $search = ['%subject%', '%name%', '%email%', '%message%', '%date%'];
L:ine 196 ::  .syntax error., unexpected '[', expecting ']'
  $replace = [EMAIL_SETTINGS['subject'], $data['form']['name'], $data['form']['email'], $data['form']['message'], date('d.m.Y H:i')];
=====================================================
Не об этом ли писал Евгений? Сам же дал ответ через 13 минут.

Евгений
13.03.2022, 20:06
Не переводятся плейсхолдеры в письмах

%email.title%
Пользователь %email.nameuser% оставил следующее сообщение:
%email.message%
Email пользователя: %email.emailuser%
Дата отправки: %email.date%
Файлы: %email.attachments%
Подскажите куда копать? Заранее спасибо!

Евгений
13.03.2022, 20:19
Разобрался, необходимо заменить плейсхолдеры на правильные:
$search = ['%subject%', '%name%', '%email%', '%message%', '%date%']; поменять на
$search = ['%email.subject%', '%email.nameuser%', '%email.emailuser%', '%email.message%', '%email.date%'];
Ну или же убрать в самих шаблонах приставку email.

PS. Я добавил правку к этой строке из комментария Евгения, синтошибка не исправилась.
Подскажите в чем причина? Заранее спасибо! Валерий Тарасюк
=======================================================

Второе.
Александр, что означает строка закомментирована

use PHPMailer\PHPMailer\PHPMailer;
//use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
Третье.
Как возникает ошибка

Uncaught TypeError: Cannot read properties of null (reading 'result')
at ItcSubmitForm._successXHR (form-processing.js:145:13)
at xhr.onload (form-processing.js:236:14)

Если isCheckValidationOnClient: false, // проверять форму перед отправкой на сервер

  <script>
    /*
      attachMaxItems: 3,
      attachMaxFileSize: 128,
      attachExt: ['png', 'jpg']
    */

    //const form = new ItcSubmitForm('form');
    const form = new ItcSubmitForm('form', {
    isCheckValidationOnClient: false,        // проверять форму перед отправкой на сервер
    attachMaxItems           : 5,           // максимальное количество файлов, которые можно добавить к форме
    attachMaxFileSize        : 512,         // 512 Кбайт - максимальный размер файла
    attachExt: ['jpg', 'bmp', 'gif', 'png'] // допустимые расширения файлов
    });
Не заполнив ни одного поля формы, нажать Отправить форму

Всех благ
Ара
Ара
Добрый день.
При реализации данной формы, столкнулся с ошибкой. Подскажите, в каком направлении искать решение.
После нажатии кнопки отправки формы, в console

form-processing.js:141 Uncaught TypeError: Cannot read properties of null (reading 'result')
at ItcSubmitForm._successXHR (form-processing.js:141:13)
at XMLHttpRequest.xhr.onload (form-processing.js:232:14)
_successXHR @ form-processing.js:141
xhr.onload @ form-processing.js:232
load (async)
_onSubmit @ form-processing.js:226
(anonymous) @ form-processing.js:262
Александр Мальцев
Александр Мальцев
Добрый день! Вам необходимо проверить какой результат возвращает сервер. Какая-то ошибка происходит там.
microwave
microwave
Добрый день!
С установкой последней версии формы стала возникать такая же ошибка. Никаких изменений в коде кроме добавления одного текстового поля не совершал.
Александр Мальцев
Александр Мальцев
Добрый день! Нужно посмотреть какой ответ возвращает form-processing.php на вкладке Network в инструментах разработчика браузера. Иначе подсказать почему не работает не получится.
Оксана
Оксана
Скажите, пожалуйста, кто-то наблюдает отключение плагина Contact Form7 и CF7 Google Sheet Connector для пользователей из России?
Василий Николаевич Корбут
Василий Николаевич Корбут
Супер!
Подскажите пожалуйста следующее
1) как сделать валидацию поля имени на ввод только букв (желательно кирилица) И желательно если в поле имени введены только цифры — сразу в жбан) Вообще как бы и от «Петр1» мне не хочется получать письма.
2) как сделать проверку ввода ссылок в поле сообщения (думаю мало кому нужны ссылки в сообщениях со своего сайта — можно сделать отключаемо)
Александр Мальцев
Александр Мальцев
Спасибо!
Чтобы не писать несколько раз, можно отключить проверку на клиенте:
const form = new ItcSubmitForm('form', {
  isCheckValidationOnClient: false
});
Теперь валидация будет проверяться только на сервере (в файле «form-processing.php»).

1) Валидация name:
// валидация name
if (empty(trim($_POST['name']))) {
  $data['result'] = 'error';
  $data['errors']['name'] = 'Заполните это поле.';
  itc_log('Не заполнено поле name.');
} else if (preg_match('/[^а-яёА-ЯЁ ]/u', trim($_POST['name']))) {
  $data['result'] = 'error';
  $data['errors']['name'] = 'Имя не корректное. Разрешается использовать только кириллицу.';
  itc_log('Имя не корректное. Разрешается использовать только кириллицу.');
} else {
  $data['form']['name'] = htmlspecialchars($_POST['name']);
}
2) Валидация message:
// валидация message
if (empty(trim($_POST['message']))) {
  $data['result'] = 'error';
  $data['errors']['message'] = 'Заполните это поле.';
  itc_log('Не заполнено поле message.');
} else if (preg_match('/<[^<]+>/', trim($_POST['message'])) || preg_match('/http/iu', trim($_POST['message']))) {
  $data['result'] = 'error';
  $data['errors']['message'] = 'В сообщение имеются теги или ссылки.';
  itc_log('В сообщение имеются теги или ссылки.');
} else if (mb_strlen(trim($_POST['message']), 'UTF-8') < 20) {
  $data['result'] = 'error';
  $data['errors']['message'] = 'Это поле должно быть не меньше 20 cимволов.';
  itc_log('Поле message должно быть не меньше 20 cимволов.');
} else {
  $data['form']['message'] = htmlspecialchars($_POST['message']);
}
Василий Николаевич Корбут
Василий Николаевич Корбут
спасибо, работает
НО!
в логах:
Date: 21.04.2022 10:38:20 | Форма успешно отправлена.
Date: 21.04.2022 10:38:20 | Успешно отправлено уведомление пользователю.

но письма не приходят.
может ли хостинг beget.com блокировть отправку… Потому как вроде приходило, потом перестали письа приходить (в спамах тоже нет писем)
Александр Мальцев
Александр Мальцев
Да, конечно может фильтровать. Отправляете по SMTP?
Василий Николаевич Корбут
Василий Николаевич Корбут
'host' => 'ssl://smtp.yandex.ru', // SMTP-хост
если эта строчка, то она не изменна.
Александр Мальцев
Александр Мальцев
Если используете почтовый ящик Yandex.
Василий Николаевич Корбут
Василий Николаевич Корбут
вот ещё строчка была закомментирована
use PHPMailer\PHPMailer\SMTP;
я её раскомментировал, но проблема не решилась.
Василий Николаевич Корбут
Василий Николаевич Корбут
да, я использую яндекс ящик, может быть я письмо отправляю на него и доступ от него же указал?
Александр Мальцев
Александр Мальцев
Посмотрите этот комментарий. Может причина в этом.
Василий Николаевич Корбут
Василий Николаевич Корбут
пробовал одним из самых первых способов, таи изначально все галки были включены
Александр Мальцев
Александр Мальцев
Письма можно отправлять себе же. Что-то непонятное. Тогда наверно нужно смотреть SMTP debug в PHPMailer или написать в техподдержку хостинга может они что-то блокируют.
Василий Николаевич Корбут
Василий Николаевич Корбут
как спросит у технички хостёра, чтоб они сразу поняли? письма при тестировании несколько раз приходили но с задержками
Александр Мальцев
Александр Мальцев
Напишите, что письма не приходят на почту.
Василий Николаевич Корбут
Василий Николаевич Корбут
спасибо, вроде разобрались. эл. адрес от какого отправлять надо писать от которого и доступ. А возможно ли сделать, чтобы во 'from' подставлялся указанный при заполнении формы адрес эл почты? иначе если приходит письмо и ответ мы пишем самому себе. Приходится копировать из тела письма емэил автора сообщения и вставлять в поле получателя…
Александр Мальцев
Александр Мальцев
Можно, но во from должен быть ваш адрес, а не тот который указал пользователь. Он же отправляет вам письмо не по email, а через форму.
moder2023
moder2023

Здравствуйте, загрузил вашу форму на хостинг ввел все данные от smtp

Но пишет: "При отправке сообщения произошла ошибка. Пожалуйста, попробуйте ещё раз позже."

Все данные прописаны верно, списался с smtp хостом, они пишут передает пустой код

moder2023
moder2023

Здравствуйте, загрузил вашу форму на хостинг ввел все данные от smtp

Но пишет: "При отправке сообщения произошла ошибка. Пожалуйста, попробуйте ещё раз позже." Все данные прописаны верно, списался с smtp хостом, они пишут передает пустой код
Александр Мальцев
Александр Мальцев

Привет! Посмотри логи.

Aleksandr Ustinov
Aleksandr Ustinov
Добрый день, давно использовал эту форму, стало поступать очень много бот-сообщений, удалил форму с сайта полностью, поменял на другую форму(сообщения с сайта приходят в телегу) однако с той же регулярностью на почту идут сообщения якобы из данной формы(которой уже полгода не существует) подскажите как от этого избавится? кеш сайта чистил, менял хостинг, однако это не помогает
Александр Мальцев
Александр Мальцев
Привет! Может быть капча не была установлена, так достаточно просто удалить файл php-файл, в старой версии он назывался «process.php».
Aleksandr Ustinov
Aleksandr Ustinov
Капча была включена. позже менял на капчу от «ГУГЛА» спама стало по меньше но все равно идет. Причем адрес обратной почты указан как в настройках почты. Так же менял адрес почты обратной, но спам идет от имени первого адреса.
В том то и дело, что удалил все файлы полностью с сайта. Вообщем видимо или где то в кеше сидит, либо просто кто то скачивает сайт и уже его добавляют в спам к боту…
Александр Мальцев
Александр Мальцев
Если файлов нет, то форма обратной связи тут ни причем. php-файлы обычно никто не кэшируют.
Нужно искать что-то другое, а на какой CMS или что-то самописное?
Вирусов нет?
DKIM подпись используете? Может кто-то вообще отправляет письма на этот адрес с какого-нибудь другого сервера.
Aleksandr Ustinov
Aleksandr Ustinov
Вирусов нет, сайт на modx evo
Александр Мальцев
Александр Мальцев
Ну поменяйте просто пароль от почты. DKIM подпись настроена?
Игорь С.
Игорь С.
Здравствуйте, долго стеснялся написать. Но никак не могу понять, почему не отправляются письма по SMTP
все данные заполнены верно, 100 раз перепроверял, при отключении отправки по SMTP или просто с помощью функции mail письма уходят, а вот по SMTP нет. В чём может быть загвоздка?
Александр Мальцев
Александр Мальцев
Привет! А какой SMTP-хост?
Игорь С.
Игорь С.
Привет )
Хост ssl://smtp.yandex.ru а мой сервер на reg.ru с ispmanager
Александр Мальцев
Александр Мальцев
Тут нужно создать пароль приложений или поставить галочку «Портальный пароль», чтобы использовать свой.

Доступ к почтовому ящику Яндекса с помощью почтовых клиентов
Игорь С.
Игорь С.
Спасибо большое
ratm
ratm
Здравствуйте!

Спасибо за труд! В последней версии исчез функционал, связанный с чекбоксом Пользовательского соглашения. И демка на старом коде…
Александр Мальцев
Александр Мальцев
Здравствуйте! Спасибо за отзыв!
Да, сейчас кнопка submit не связана с чекбоксом. Мне кажется так более корректно и не путает пользователя почему кнопка не активна. Сейчас при нажатии на кнопку ему явно показывается (подсвечивается красным цветом), что он должен принять пользовательское соглашение.
Демку не обновил, т.к. хотел ещё некоторые моменты доделать, а именно убрать Progress Bar и добавить спиннер для кнопки, который будет отображаться при отправке формы и до получения ответа от сервера для индикации того, что что-то делается.
Сейчас что запланировал обновил, можно тестировать.
Евгений
Евгений
Не переводятся плейсхолдеры в письмах

%email.title%
Пользователь %email.nameuser% оставил следующее сообщение:
%email.message%
Email пользователя: %email.emailuser%
Дата отправки: %email.date%
Файлы: %email.attachments%
Подскажите куда копать? Заранее спасибо!
Евгений
Евгений
Разобрался, необходимо заменить плейсхолдеры на правильные:
$search = ['%subject%', '%name%', '%email%', '%message%', '%date%']; поменять на
$search = ['%email.subject%', '%email.nameuser%', '%email.emailuser%', '%email.message%', '%email.date%'];
Ну или же убрать в самих шаблонах приставку email.
Евгений
Евгений
Добрый день! Внесу небольшую порправку, в версии 4.0.1 в файле form-processing.php, необходимо изменить $template = file_get_contents(dirname(__FILE__). '/template/email.tpl'); на $template = file_get_contents(dirname(__FILE__). '/process/email.tpl'); Иначе письма доставляться не будут, хотя форма будет отрабатывать.
Евгений
Евгений
Доброе время суток! При загрузке файла изображения, выдаёт ошибку Uncaught ReferenceError: ProcessForm is not defined at FileReader.Помогите разобраться… Заранее спасибо!
Александр Мальцев
Александр Мальцев
Здравствуйте! FileReader поддерживается практически во всех браузерах.
При необходимости просто добавьте window.FileReader в условие:
if (file.type.match(/image.*/) && window.FileReader) {
  // ...
} else {
  // ...
}
Евгений
Евгений
Спасибо! Но тоже не помогло( Ругается в этом же условии, на эту строку ProcessForm._getAttachTemplate(index, file, e.target);
Александр Мальцев
Александр Мальцев
Некоторое время назад обновил проект, сейчас ProcessForm нет. Если вы используете последнюю версию, то перегрузите страницу с очисткой кеша (Ctrl + F5), а также проверьте как выполняете инициализацию формы:
const form = new ItcSubmitForm('form');
Попробуйте скачать новую версию с GitHub.
Евгений
Евгений
Установил новую версию, выдаёт ошибку при загрузке файла… Видать где-то путь не правильный, подскажите куда копать!? Заранее спасибо!
Евгений
Евгений
Разобрался, не была создана папка uploads в архиве. Спасибо за помощь и за отличную форму!
alex2222
alex2222
Здравствуйте. Отличная форма.
Есть вопрос. Как сделать обязательным поле загрузки файлов?
Александр Мальцев
Александр Мальцев
Привет! Сделаю в ближайшее время.
Александр
Александр
Ответ сервера
{result: "error"}
result: "error"
Александр
Александр
Разобрался. Как говорится: «дело было не в бабине......». Просто поменяли пароль от почты а мне ничего не сказали. Поправил пароль и все заново полетело. Огромное спасибо за форму.
Александр Мальцев
Александр Мальцев
Привет! Пожалуйста! Рад, что всё разрешилось.
romenskiy
romenskiy
Александр, приветствую!
Нам нужно дописать к форме небольшое условие(обязательность прикрепление файла к форме). Пишем Вам на emal, но письма может не доходят или попадают в спам. Проверьте, пожалуйста, почту.
Александр
Александр
Доброго времени суток. Сегодня ошибка появилась снова. С низу формы в красной рамке появляется надпись «Исправьте данные и отправьте форму ещё раз. » при этом все необходимые поля заполнены верно. Примерно месяц назад я столкнулся с подобной проблемой, но решение было в том, что без моего ведома был изменен пароль от почты, прописал новый пароль все заработало. Сегодня я сразу проверил эти настройки, все в номе, но форма отказалась работать. Подскажите пожалуйста в чем проблема, может на сервере нужно какие то настройки сделать? Скрин отправлял ранее он находится двумя постами ниже. Заранее благодарен.
Александр
Александр
Доброго времени суток. К сожалению я почистил папку спама и не могу найти вашего письма.
Александр
Александр
Решение.
В файл .htaccess прописал 301 редирект который в конце убирает .php

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^.*$ $0.php [L,QSA]
RewriteCond %{THE_REQUEST} ([^\s]*)\.html(\?[^\s]*)?
RewriteRule (.*) %1 [R=301,L]

Пришлось удалить, теперь все работает.
Александр Мальцев
Александр Мальцев
Если убираете «.php» с помощью «.htaccess», то попробуйте указать путь к файлу «process.php» без указания в конце «.php».
Александр
Александр
Доброго времени суток. С Вашей формой сайт работал исключительно в течении года, но сегодня непонятно из за чего просто отказалась работать. С низу формы в красной рамке появляется надпись «Исправьте данные и отправьте форму ещё раз. » при этом все необходимые поля заполнены верно. Подскажите пожалуйста в чем проблема, может на сервере нужно какие то настройки сделать?

Вот форма на сайте.
remontservo.ru/Sharan/pages/request
Заранее благодарен.
Anar
Anar
Здравствуйте!
Прежде всего, спасибо за продукт. По всем параметрам очень подходит, однако я столкнулся с тем, что не могу поменять язык ошибок при заполнении формы (например, при пустом поле или малом количестве символов).

Не подскажете как я могу исправить этот момент? Спасибо за внимание.
Александр Мальцев
Александр Мальцев
Здравствуйте! Спасибо! Язык ошибок зависит от языка, установленного в браузере. Проверка в браузере осуществляется с помощью метода checkValidity(). Настроить проверку можно с помощью атрибутов, а если нужно добавить пользовательские правила проверки, то можно воспользоваться методом SetCustomValidity().
Anar
Anar
Я не являюсь, к сожалению, знакотом, поэтому заранее извиняюсь за простые вопросы, однако, не могли вы ли вы мне подсказать, где я могу поменять метод проверки?

Спасибо еще раз за внимание.
Баткаев Ринат Рафаильевич
Баткаев Ринат Рафаильевич
Доброго дня! Спасибо большое за Ваш труд!
У меня возникла проблема, может вы ее уже касались?
Заполняешь форму, отправляешь и получаю результат:

2021-11-02 05:19:55 SERVER -> CLIENT: 554 5.7.1 [2] Message rejected under suspicion of SPAM; ya.cc/1IrBc 1635830395-SC3MfmIBvW-JrJqeMrh
2021-11-02 05:19:55 SMTP ERROR: DATA END command failed: 554 5.7.1 [2] Message rejected under suspicion of SPAM; ya.cc/1IrBc 1635830395-SC3MfmIBvW-JrJqeMrh
SMTP Error: data not accepted.
{«result»:«error»}

Как можно повлиять на данную ситуацию?
Баткаев Ринат Рафаильевич
Баткаев Ринат Рафаильевич
Есть еще одна проблема. После заполнения и отправки формы, на форме появляется:
Исправьте данные и отправьте форму ещё раз.
Но при этом письмо доставляется

В инструментах разработчика выдает сообщение
2021-11-02 13:19:44 SERVER -> CLIENT: 221 2.0.0 Closing connection.
2021-11-02 13:19:44 Connection: closed
{«result»:«success»}

Как так? Что не нравится форме?(
Александр Мальцев
Александр Мальцев
Здравствуйте! Попробуйте отключить отладку:
$mail->SMTPDebug = 0;
Сергей
Сергей
Добрый день!

Разместил форму, настроил по SMTP через Gmail.
После заполнения полей и отправки – сообщение приходит на почту.
Если прикрепить файл, сообщение также дойдет, только прикрепленные файлы теряются — не приходят / не сохраняются. Сама форма никакие предупреждения не выдает — пишет, что все отлично.

Пожалуйста, подскажите, где искать причину потери файлов?

P.S.
Спасибо большое за форму!
Александр Мальцев
Александр Мальцев
Здравствуйте!
Проверьте, если права записи во временную папку. Посмотрите, что в логах Apache или другого сервера, который вы используете.
Феррим
Феррим
Не работает отправка через smtp
ни через yandex ssl://smtp.yandex.ru — ошибка сразу
smtp.yandex.ru — ошибка через пару минут, ни через smtp.mail.ru — тоже неа,
ни через хостинг mail.имядомена.ru.

Форма выдаёт: Исправьте данные и отправьте форму ещё раз.
process.php: result: «error»
logs: Ошибка при отправке письма: SMTP connect() failed. github.com/PHPMailer/PHPMailer/wiki/Troubleshooting
При этом при отключенном smtp письма отправляются, но нужно через smtp.
fog
fog
Простите за беспокойство, не поможете решить проблему? В комментариях здесь такой не нашёл. При попытке использовать форму все поля проверяются, включая капчу, появляются зелёные галочки. Но при нажатии кнопки «Отправить сообщение» появляется надпись «Исправьте данные и попробуйсте отправить форму ещё раз», а в логе такая ошибка:
PHP Fatal error:  Uncaught Error: Class 'phpmailer\src\PHPMailer' not found in .../public_html/feedback/process/process.php:227
Stack trace:
#0 {main}
  thrown in .../public_html/feedback/process/process.php on line 227
Что я сделал неправильно? Объясните, пожалуста.
fog
fog
Разобрался сам. Спасибо за форму. Теперь всё работает.
Александр Мальцев
Александр Мальцев
Отлично!
Shtill
Shtill
Форма, несомненно, крутая. Долго я просидел над ней, чтобы всё заработало :)

Но сейчас возник вопрос. Если зайти на сайт с телефона, и попытаться вписать номер телефона, то не срабатывает шаблонизатор (или как это правильно называется). Т.е. висит поле вида +7 (___)___-__-__, на ПК при вводе цифр, эти "_" автоматически убираются. А вот на телефоне если писать, то цифры встают между этими символами и не проходит валидация номера. Что-то можно придумать?
Михаил Зябров
Михаил Зябров
Здравствуйте. Подскажите, пожалуйста, в чем может быть проблема: добавил в форму несколько полей для ввода данных, и при отправке формы появляется сообщение «исправьте данные...». Если меняю index.html на скаченный изначально файл — все работает. Для полей, которые добавил, прописал и проверку по аналогии с message и прописал в шаблоне письма по инструкции.
Александр Мальцев
Александр Мальцев
Здравствуйте. Посмотрите какой ответ приходит от сервера (process.php) на вкладке Response.

Ответ от сервера
Михаил Зябров
Михаил Зябров
Parse error: syntax error, unexpected end of file in /home/kebtaxi/kebtaxi.com/www/feedback/process/process.php on line 300
Михаил Зябров
Михаил Зябров
Все, нашел ошибку. Проблема была в пропущенной скобке :) все работает отлично. Огромное спасибо за такой полезный труд
Александр Мальцев
Александр Мальцев
Отлично!
Denis
Denis
Добрый вечер!
Столкнулся с такой проблемой: когда прикрепляю фото через форму приходит сообщение с ссылкой:
https://***//var/www/u104974/data/www/spbautomarket.ru/uploads/upload_60d4f5fdb5b466.95738149.png
А должно быть:
https://***/uploads/upload_60d4f5fdb5b466.95738149.png
Что необходимо поправить?
Александр Мальцев
Александр Мальцев
Здравствуйте!
Попробуйте явно указать значение переменной:
$startPath = 'https://***/';
waresok
waresok
Здравствуйте! Добавил Вашу классную форму на свой сайт, письма успешно приходят, но процесс отправки не завершается, выводится ошибка «Исправьте данные и отправьте форму ещё раз.», возникает точно на этапе отправке т.к. если IS_SEND_MAIL = false, то ошибки нет. Во вкладке Сеть>Ответ браузера есть ошибка «SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data», кроме того не создается лог файл, хотя опция включена.
Просьба подсказать причину ошибок и варианты решения.
Pavel
Pavel
Здравствуйте! Отличная форма!
Но у меня возникла проблема:
Если значения отправки писем поставить «false», то форма отрабатывает, письма, соответственно, не шлет, файлы сохраняет и пишет успешный лог. Но как только я проставляю значения «true» (используется почта gmail, доступ для приложений настроен согласно мануалу в статье), то полоса прогресса обработки формы доходит до конца, зависает, а через некоторое время выдает сообщение «Исправьте данные и отправьте форму ещё раз.» в лог при таком результате ничего не пишется.
Буду рад, если Вы сможете мне помочь!
Alex
Alex
Добрый день. Огромное Вам спасибо за форму! Отличная разработка. У меня возник вопрос. Как можно добавить несколько полей? Я хочу сделать опросник. Пользователь должен оставить довольно много информации о себе. Так же хочу реализовать select (выбор из списка), чекбоксы, радиокнопки. Информацию посетители должны оставлять как текстовую, так и числительную.
У Вас случаем нет какого-нибудь мануала для вашей формы?
Просто пробовал по методу, как описано в статье, где добавляется телефон. Но выдаёт ошибку, типа поправьте форму и тд. Хотя всё делал по тому же образу и подобию.
Заранее благодарю!
Sergey
Sergey
Здравствуйте Александр.
Спасибо вам за ценные практические примеры.
С помощью нескольких предложенных вами форм, я получил желаемый вид формы (скриншот).
eostudio
eostudio
Добрый день! форма супер! То что надо!
Все работает, файлы и данные приходят, но форма не перезагружается и в консоли —
Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.request.onreadystatechange (process-forms-without-jquery.js:210)
  var _this = this;
Вот кусок кода из js файла:
  var request = new XMLHttpRequest();
  request.onreadystatechange = function () {
    if (request.readyState === 0 || request.readyState === 4) {
      if (request.status == 200) {
        _success(JSON.parse(request.responseText), _this);
      } else {
        _error(_this);
      }
      //done();
    }
  };
ругается на эту строку
_success(JSON.parse(request.responseText), _this);
подскажите куда копать?
Александр Мальцев
Александр Мальцев
Привет! Спасибо за отзыв!
Посмотрите какой ответ возвращает сервер («process.php») на вкладке Network в инструментах разработчика браузера.
eostudio
eostudio
Request URL: https://www.*********.ru/feedback/process/process.php
Request Method: POST
Status Code: 200 
Remote Address: 81.177.141.71:443
Referrer Policy: strict-origin-when-cross-origin
cache-control: no-store, no-cache, must-revalidate
content-length: 192
content-type: application/json
date: Sun, 11 Apr 2021 08:35:59 GMT
expires: Thu, 19 Nov 1981 08:52:00 GMT
pragma: no-cache
server: Jino.ru/mod_pizza
:authority: www.*********.ru
:method: POST
:path: /feedback/process/process.php
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
content-length: 482
content-type: multipart/form-data; boundary=----WebKitFormBoundarynOHzHZFHAHWVF66c
cookie: _ga=GA1.2.43687746.1617347627; _ym_uid=1614690864522862858; _ym_d=1617347629; tmr_lvid=29226f356fca52bf5e57d15c58173199; tmr_lvidTS=1614690864461; BX_USER_ID=af1e963561ac3f6dcc9f14c0ba9459c3; BITRIX_SM_LOGIN=admin; BITRIX_SM_SOUND_LOGIN_PLAYED=Y; BITRIX_SM_LAST_SETTINGS=; PHPSESSID=a5o9dpvHu7p5hvuHM6QmMJXTFlBDkePc; _gid=GA1.2.38619152.1618130093; _ym_isad=2; tmr_detect=0%7C1618130124287; tmr_reqNum=207
origin: https://www.********.ru
referer: https://www.*********.ru/uslugi/ocenka-usczherba/otsenka_uschzerba_posle_zatopleniya_kvartiry/?test=1&clear_cache=Y
sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36
x-requested-with: XMLHttpRequest
и во вкладке response
<b>Warning</b>:  A non-numeric value encountered in <b>/feedback/phpmailer/src/PHPMailer.php</b> on line <b>845</b><br />
{"result":"success"}
Александр Мальцев
Александр Мальцев
Возникает предупреждение в библиотеке phpMailer.
Можно в «process.php» определить с помощью error_reporting ошибки PHP, которые попадут в отчёт:
<?php
error_reporting(E_ERROR | E_PARSE);
...
Либо попробовать обновить библиотеку phpMailer до последней версии. На Github этого проекта уже это выполнил. Можете взять оттуда.
thepreview.ru
thepreview.ru
Здравствуйте,

Споткнулся на этапе получения письма — не доходят письма до адресата. Пытался настроить отправку через Gmail. Пожалуйста, уточните в какое именно место в process.php вставлять блок переменных с данными SMTP Gmail.

И еще один вопрос — какие-то дополнительные настройки нужны, чтобы все это работало на OpenServer?
thepreview.ru
thepreview.ru
Вопрос с получением решен, но возник другой вопрос — отсутствуют вложения в письме. Прикрепляемые файлы не прикрепляются )) В чем может быть проблема?
Александр Мальцев
Александр Мальцев
Привет! За это отвечает следующая константа в «process.php»:
IS_SENS_FILES_AS_ATTACHMENTS = true, // необходимо ли прикреплять файлы к письму
Евгений Николаевич Целиков
Евгений Николаевич Целиков
Здравствуйте Александр!
Большое вам спасибо за ответ по консультации замены расширений файлов.
Как вас можно отблагодарить?
Александр Мальцев
Александр Мальцев
Здравствуйте! Пожалуйста! На сайте имеется эта страничка. На ней приведено несколько способов как это можно сделать. Спасибо за благодарность.
Сергій
Сергій
Добрый день. Вы не подскажете как правильно код поставить на modx. Я так понимаю система не верно ставить путь до файлов и постоянно вылазить ошибка «Исправьте данные и отправьте форму ещё раз.»
Александр Мальцев
Александр Мальцев
Привет! Тут всё как обычно. HTML код формы можно вставить в чанк или шаблон в зависимости от того как у вас это реализовано на сайте. А также подключить к странице JavaScript файл. Работу с сессиями в php файлах можете выполнить через MODX.
Сергій
Сергій
У меня ошибка «Произошла ошибка при отправке данных.»
Как верно подключить php. Все перепробовал, ничего.
Евгений Николаевич Целиков
Евгений Николаевич Целиков
Здравствуйте!
Прошу оказать консультацию по вопросу. Как добавить дополнительные расширение файлов для загружаемых файлов?
ALLOWED_EXTENSIONS = array('jpg', 'jpeg', 'bmp', 'gif', 'png'), // разрешённые расширения файлов.
Изменение только массива выдает ошибку: «Файл имеет не разрешённый тип.»:
array('jpg', 'jpeg', 'png', 'pdf', 'xlsx', 'docx')
Заранее благодарен за ответ!
Александр Мальцев
Александр Мальцев
Здравствуйте!
Кроме как настроить нужные расширения в php, это нужно ещё сделать в JavaScript:
new ProcessForm({
  attachmentsFileExt: ['jpg', 'jpeg', 'bmp', 'gif', 'png']
});
Ольга Атрашкевич
Ольга Атрашкевич
Добрый день!
На PHP 7.4 не хочет почему то отправляться.
Добавила в форму дополнительно поле телефон и компания.
Все прописала, а письма не приходят и форма не перезагружается (скриншот)
Все пункты с зелеными галочками и прокрутка синяя прошла.
Александр Мальцев
Александр Мальцев
Привет! Не так давно проверял на php 7.4, ошибок не было. Посмотрите в консоли, ответе от сервера. Если имеются, то привиде здесь или создайте issue на GitHub.
spr53
spr53
Добрый день!
Повторно сохраняются добавленные файлы при выполнении цепочки действий:
1 — Отправляю сообщение с прикрепленным файлом, в папке update файл сохраняется, в тексте письма есть ссылка на сохраненный файл.
2 — Отправляю еще одно сообщение БЕЗ добавления файлов. В папке update появляется копия предыдущего файла, в тексте письма ссылка на продублированный файл.

Лечится обновлением страницы.

Сайт на виртуальном хостинге.
Проверял в Firefox и Vivaldi.

Какие могут быть варианты решения?

1. Если внести изменения/дополнения в php.ini, то какие?
2. Если проблему может решить только служба сопровождения, то что написать в челобитную?
3. Ваши предложения?
Александр Мальцев
Александр Мальцев
Привет!
Проверю на днях действия в этой последовательности, если ошибка в коде, то поправлю.
spr53
spr53
Добрый день!
Т.к. вопрос перешел из категории «Возможно нужное» в категорию «Нужное», решил проблему неэстетично, зато дешево и практично:
В стартовой странице index.html заменил
<div>Форма успешно отправлена. Нажмите на <a href="#" data-target="#feedback-form">ссылку</a>, чтобы отправить ещё одно сообщение.
</div>
на
<div>Сообщение успешно отправлено. </br><a href="javascript:window.location.reload()">Создать новое сообщение</a>
</div>
Николай
Николай
Здравствуйте.

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

Та же самая Форма обратной связи, но когда вы прикрепляете файл он уже загружается на хостинг с помощью Ajax до нажатия кнопки «Отправить».

Спасибо.
Ольга
Ольга
Добрый день, совсем не знакома с php. Подскажите пожалуйста как сделать, чтобы данные из формы сохранялись не в logs, а в файл, который будут лежать в папке, именем которой будет танслит имени пользователя + номер телефона.
Александр Мальцев
Александр Мальцев
Привет!
Для этого нужно изменить код файла «process.php». Например, так: gist.github.com/itchief/de1703e86c41c89527bd7c3b5e636905
При сохранении формы, данные попадают в файл, имя которого образовывается по следующему шаблону:
Год.Месяц.День-Email-1.txt
Если нужно как-то по-другому, то можете изменить этот момент в файле.
Файлы при этом помещаются в папку forms, которую необходимо создать в каталоге feedback.
Андрей
Андрей
Добрый день. Ввёл телефон, всё замечательно, все отправляет, но как при нажатии кнопки отправить, чтобы на форме было зелёным выделено поле? если правильно ввели.
при отправке поле не подсвечивается.

itchief.ru/assets/uploadify/e/9/f/e9f252fdf3a48ec977dbb7c3d16cbcf9.jpg
Александр Мальцев
Александр Мальцев
Привет! В статье приведено подробное описание того, как можно добавить в форму новое поле «Телефон». Чтобы оно подсвечивалось этому полю нужно добавить pattern и required. Последний нужно указать только в том случае, если это поле должно быть обязательно к заполнению.
Alexander
Alexander
Добрый вечер!
Установил форму, вроде все работает, но есть нюанс — с формы на сервер приходит два письма, был редирект с почты хостинга на яндекс, убрал, но все равно на хостинг приходит два письма. Подскажите, в чём может быть дело?..
Андрей
Андрей
Зарегистрировался, чтобы выразить свою благодарность. Очень выручила статья.
Огромное спасибо добрый человек. Всё ясно и понятно. Хоть и лет 10 назад изучал Веб.
Прикрутил no-replay с почтовика хостинга, без проблем всё. Респект!
Александр Мальцев
Александр Мальцев
Спасибо! Рад, что всё получилось.
Николай
Николай
Здравствуйте.

Можно Вас попросить помочь разобраться!

1. Хотелось бы оставить эту форму обратной связи (стилистика понравилась), но капчию поставить вот эту, itchief.ru/lessons/php/how-to-install-recaptcha-on-website — не разобраться сразу, что и где конкретно менять (подозреваю целые файлы)?

— Пожалуйста подскажите. Или может оставить капчию текущую и по Вашему опыту вы знаете что боты не спамят!

2. Форма по логике должна работать ведь на любом виртуальном хостинге? У меня Beget.

3. Вы вот указали как пример в файле PHP отправку через SMTP Яндекса, для примера прописал свой (правда на корпоративном домене который прикреплен к почте Яндекса), не срабатывает. Возможно для корпоративных доменов почты Яндекса есть ограничения. Возможно кто-то настраивал и поделится опытом!

Спасибо.
Николай
Николай
Не могу понять, в чем распространенная ошибка: «Исправьте данные и отправьте форму ещё раз.»?
Данные по Yandex верные, поставил обычную почту.

В логах записи нет. И файлы не нашел:

/* 2 ЭТАП — ПОДКЛЮЧЕНИЕ PHPMAILER */

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require_once('../phpmailer/src/Exception.php');
require_once('../phpmailer/src/PHPMailer.php');
require_once('../phpmailer/src/SMTP.php');
Александр Мальцев
Александр Мальцев
Здравствуйте.

1. JavaScript код форм отличается, чтобы вставить в эту форму recaptcha её код нужно переделывать. Есть планы доработать форму с рекапчей. Но, когда это будет, пока точно сказать не могу.

Формой с капчей, приведённой на этой странице, пользуются многие пользователи. Отзывов с такой проблемой никто не присылал. Я её тоже использую. Вообще сторонними закрытыми продуктами, в т.ч. recaptcha стараюсь не пользоваться, т.к. не знаю, что там написано. Исходный код этой формы открытый и расположен на Github.

2. Да, версия php должна быть не ниже 5.6.

3. Посмотрите содержимое файла «logs.txt», расположенный в форме. Может там какая-та информация имеется. Проверьте сначала как работает отправка почты с личного аккаунта Яндекса, а потом с аккаунта, привязанного к домену. Мне кажется, что это не должно как-то особенно настраиваться.
Александр Мальцев
Александр Мальцев
Если в качестве ответа сервер присылает {"result":"error"}, то выводится это сообщение.
Эти файлы расположены в папке «phpmailer».
Николай
Николай
Александр, добрый день!

Да, вы были правы у меня версия PHP стояла 5.2, перевел на 7.0. Решил заново скачать, и не редактируя поля установить, мои действия:

1. Скачиваю ZIP github.com/itchief/feedbackForm (зеленая кнопка «Код»).

2. Зарегистрировал для такого дела новый e-mail на Яндексе.

3. Результат: prnt.sc/x70ywc

4. Редактировал только файл «process.php», чтобы проверить в чистом виде работу.

5. Далее смотрю ЛОГ: prnt.sc/x71ejm — пароль от почты верный :(

Александр Мальцев
Александр Мальцев
У вас проблема именно с отправкой. Посмотрите комментарии из этой ветки. Может помогут.
Для детального изучения ошибки при отправке можно установить следующий режим:
$mail->SMTPDebug = 4
Также желательно установить DKIM-подпись.
Максим
Максим
Добрый день, подскажите пожалуйста. Установил форму на сайт версия php 5.6, устанавливал 7.0-7.2. пробовал разные варианты
В консоле ошибки нет, в network на process.php выдает ошибку {«result»:«error»}. Данные smtp верные. Не могу понять по какой причине ошибка. Все данные заполненны, прикрепленный файл по размеру так же. на фронте так же ошибка «Исправьте данные и отправьте форму ещё раз.»
Спасибо!
Александр Мальцев
Александр Мальцев
Здравствуйте! Посмотрите ошибки в «logs.txt».
Максим
Максим
Добрый вечер, пишу же, ошибок никаких, так же в log.txt нет
Александр Мальцев
Александр Мальцев
Файл «logs.txt» расположен в папке «log» самой формы, там должна быть какая-та информация.
Артём
Артём
Здравствуйте!
Скачал форму, подключил её через iframe.
Вроде она выводится, все js файлы подгружаются. Но ни кнопка не реагирует, ни поля красным не светятся…
Не понимаю, что за файл main.js, который нужно настраивать. Его нужно создать или в коде index.html нужно прописать? Прописал в index.html вот это:
<script src="/feedback/vendors/jquery/jquery-3.4.1.min.js"></script>
<script src="/feedback/js/process-forms.js"></script>
<script>
    //после загрузки DOM
    $(function () {
        var form1 = new ProcessForm({
            selector: '#feedback-form'
        });
        form1.init();

    });
</script>
Простите, возможно, я сильно туплю… несколько раз перечитал мануал по настройке фоормы… Не понимаю, что не так.
Александр Мальцев
Александр Мальцев
Здравствуйте! Настройку формы можно в «index.html» прописать. «main.js» — это просто ваш файл с кодом.
Вам необходимо просто поместить на страницу iframe следующим образом:
<iframe src="/feedback/index.html"></iframe>
Артём
Артём
Вроде всё так… Не работает :-(
Александр Мальцев
Александр Мальцев
Тут всё просто. Даже не знаю, что ещё посоветовать.
Наталия24
Наталия24
Здравствуйте. Благодарю за оказанную помощь и поддержку. Подскажите, пожалуйста: скачала двойную форму. Все настроила, работает отлично. Говорит, что сообщение отправлено. Но оно, к сожалению не приходит на почту. Сравнила файл process.php у версии с одной формой и этот же файл у версии с двойной формой на сайте. У двойной отсутствуют строки подключения SMRT. Подскажите, их необходимо добавить? И как это сделать правильно, если да? Заранее благодарю от всей души!
Александр Мальцев
Александр Мальцев
Здравствуйте! Спасибо! Может письма попадают в «Спам».
Наталия24
Наталия24
При отправлении на яндекс почту все работает, как меняю на гугл, строка ожидания появляется и ничего больше не происходит. Меняю:
MAIL_SMTP_HOST = 'ssl://smtp.google.com', // SMTP-хост
MAIL_SMTP_PORT = '465', // SMTP-порт
MAIL_SMTP_USERNAME = 'aaa@gmail.com', // SMTP-пользователь
MAIL_SMTP_PASSWORD = 'aaaaaaaa'; //
MAIL_ADDRESS = 'aaa@gmail.com', //
MAIL_FROM = 'aaa@gmail.com', //
Александр Мальцев
Александр Мальцев
Как настроить через Google Gmail подробно описано в статье.
Наталия24
Наталия24
Здравствуйте. Использую эту форму в своих сайтах. Очень выручает. Благодарю за такую поддержку. Подскажите, пожалуйста, в чем может быть ошибка при отправке данных, так как все галочки отмечает зеленым, но говорит исправить данные? cookingnata.alexapho.ru/feedback/download-cook-book-ru.html
David
David
Данный скрипт выводит ссылку на изображения вида:
E:\\OS\\OSPanel\\domains\\mysite.tm\\feedback\/uploads\/upload_5fc2446f578e84.36623936.jpg
Как добиться, чтобы ссылка была вида
/feedback/uploads/upload_5fc2446f578e84.36623936.jpg
Заранее благодарю!
Александр Мальцев
Александр Мальцев
А куда именно выводит?
David
David
Приветствую. Спасибо большое за форму. Добавил несколько полей для себя все вроде бы работает. Но вот с добавлением записи в БД возникли проблемы:(
David
David
Пробовал способом, который вы ранее кому то рекомендовали, но в тот момент(3 года назад) я так понимаю еще старая версия формы была. Сейчас я использую версию 3.0.1 может нужно по другому делать?
David
David
Методом проб и ошибок разобрался как это с проблемой)
Единственное хотелось бы по подробнее узнать как этот фрагмент кода работает:)
$stmt = $dbh->prepare("INSERT INTO feedback (name, email, message, attachments) VALUES (:name, :email, :message, :attachments)");
    $stmt->bindParam(':name', $name);
    $stmt->bindParam(':email', $email);
    $stmt->bindParam(':message', $message);
    $stmt->bindParam(':attachments', $str_attachments);
Александр Мальцев
Александр Мальцев
Привет! Этот код подготавливает запрос к выполнению (для добавления записи в таблицу базы данных). Псевдопеременные (:name, :email и т.д.) во время его запуска будут замены реальными значениями переменных ($name, $email и т.д.). Связывание псевдопеременной (параметра) с реальной переменной осуществляется через метод bindParam.
Александр Мальцев
Александр Мальцев
Привет! Если нужно, то могу добавить такой функционал в форму (дополнительное сохранение данных формы в базу данных).
ivan
ivan
Здравствуйте. Появилась ошибка при установки
www.screencast.com/t/Db5nMeQ7So
в чем может быть проблема?

*MAIL_SMTP_HOST = 'ssl://smtp.gmail.com'
IS_CHECK_CAPTCHA = false,
все остальное без изменений
Александр Мальцев
Александр Мальцев
Привет! Форму нужно установить на локальный веб-сервер (Apache, Nginx или др.) с поддержкой отправки email сообщений или на хостинг. В таком режиме форма работать не будет.
Илья
Илья
Возник вопрос. Нужно из формы в одном калькуляторе передать значение в форму обратной связи для отправки на почту. Прописываю к примеру код ниже и не получается, что-то мешает. Jquery подключен и код работает, если делать свою форму со своим id, но с id формы обратной связи никак не получается. Может это связано с тем, что в ней есть action и уже происходит какой-то процесс? Подскажите пожалуйста как правильно прописать код и где его вставить, чтобы можно из другой формы (калькулятора) передать значение в форму обратной связи?

<form type="POST" id="forma1">
<input type="text" placeholder="ПОЛЕ1_1" id="pole1_1" name="pole1_1">
</form>


<button type="button" id="fill">заполнить</button>


<form id="feedback-form" action="/feedback/process/process.php" enctype="multipart/form-data" novalidate="">
      <div class="form-row">
<input type="text" placeholder="ПОЛЕ1_2" id="pole1_2" name="pole1_2">

// остальной код формы обратной связи...
</form>

<script type="text/javascript">
$('#fill').click( function(event){
  feedback-form.pole1_2.value = forma1.pole1_1.value;
});
</script>
Александр Мальцев
Александр Мальцев
Если нужно так, то лучше при изменении значения одного поля (#pole1_1) менять второе (#pole1_2). JavaScript код вообще обычно помещают перед закрывающим тегом body. В данном случае лучше так и сделать.
<script>
const inputFrom = document.querySelector('#pole1_1');
inputFrom.addEventListener('input', function () {
  const value = this.value;
  const inputTo = document.querySelector('#pole1_2');
  inputTo.value = value;
});
</script>
Илья
Илья
Здравствуйте! Скачал форму, залил на сайт, удалил капчу и отключил в файле «process.php» её проверку. Поставил там же в настройках гугл почту, но когда ставлю галочку принятия пользовательского соглашения, то кнопка отправить не подсвечивается как у вас и в итоге не получается отправить сообщение. Что это может быть? Для проверки залил ещё раз без изменений и тоже самое с кнопкой отправить, когда ставлю галочку. Ещё не пойму, где искать «main.js».
Александр Мальцев
Александр Мальцев
Здравствуйте! Необходимо указать правильный путь к файлам: «jquery-3.4.1.min.js» и «process-forms.js».
Илья
Илья
Заменил путь в «index.html» просто удалив feedback в его начале. Но ничего не получилось, осталось так же. Попробовал вместо относительного пути поставить полный и тоже ничего не поменялось.
Александр Мальцев
Александр Мальцев
К скриптам путь прописывается в этом месте:
<script src="/order/feedback/vendors/jquery/jquery-3.4.1.min.js"></script>
<script src="/order/feedback/js/process-forms.js"></script>
Илья
Илья
Немного не понял. Я же в коде выше там так и прописал. Относительно файла index.html они лежат здесь и так же указал:

<script src="/vendors/jquery/jquery-3.4.1.min.js"></script>
<script src="/js/process-forms.js"></script>
Илья
Илья
Указываю по-разному путь там, всё равно тоже самое. Так же меняю путь здесь и тоже самое ничего не происходит:
<form id="feedback-form" action="/process/process.php" enctype="multipart/form-data" novalidate>
Александр Мальцев
Александр Мальцев
Если вам нужно относительно текущей страницы, то так:
<script src="vendors/jquery/jquery-3.4.1.min.js"></script>
<script src="js/process-forms.js"></script>
Забыли ещё на странице инициализировать форму:
(new ProcessForm()).init();
Путь к php в этом случае будет:
<form id="feedback-form" action="/order/feedback/process/process.php" enctype="multipart/form-data" novalidate="">
Илья
Илья
А где нужно этот код прописать?
(new ProcessForm()).init();
Александр Мальцев
Александр Мальцев
В теге script после подключения скриптов, приведённых выше.
Т.е. так:
<script src="vendors/jquery/jquery-3.4.1.min.js"></script>
<script src="js/process-forms.js"></script>
<script>
(new ProcessForm()).init();
</script>
Илья
Илья
Добавил, теперь кнопка работает, но выдаёт наверное ошибку как у комментатора ниже, что нужно исправить данные и отправьте форму ещё раз.
Александр Мальцев
Александр Мальцев
Там есть файл logs.txt. В нём содержатся логи.
Александр
Александр
Такая же ошибка, как у пользователя выше.
в консоли пишет следующее:
TypeError: Error in invocation of runtime.sendMessage(optional string extensionId, any message, optional object options, optional function responseCallback): chrome.runtime.sendMessage() called from a webpage must specify an Extension ID (string) for its first argument.
Александр
Александр
Добрый день Александр!
Также вопрос, если я не использую капчу и загрузку файлов (типичная форма обратной связи, где указать надо имя, почту телефон и сообщение) Все ли я правильно заполнил? Там где замазано указана моя почта, это правильно (скриншот)?
Александр Мальцев
Александр Мальцев
Это ошибка относится к какому-то расширению, установленному у вас в браузере. К самой форме это никакого отношения не имеет.
Александр Мальцев
Александр Мальцев
Если вы будете отправлять почту через SMTP, то нужно указать SMTP настройки.
Александр Мальцев
Александр Мальцев
Установите IS_SEND_MAIL = false и проверьте работает ли форма без отправки сообщений на email. Если работает, то переходите к настройке почты.
Илья
Илья
В логах пишет: Ошибка при отправке письма: SMTP connect() failed. github.com/PHPMailer/PHPMailer/wiki/Troubleshooting

Но в настройках для подключения почты в файле вроде всё правильно указал согласно инструкции гугла https://support.google.com/mail/answer/7126229?visit_id=637413861361032597-1221049469&hl=ru&rd=1:

/* 1 ЭТАП - НАСТРОЙКА ПЕРЕМЕННЫХ */

const
IS_CHECK_CAPTCHA = false, // проверять капчу
IS_SEND_MAIL = true, // отправлять письмо получателю
IS_SEND_MAIL_SENDER = false, // отправлять информационное письмо отправителю
IS_WRITE_LOG = true, // записывать данные в лог
UPLOAD_NAME = 'uploads', // имя директории для загрузки файлов
IS_SEND_FILES_IN_BODY = true, // добавить ссылки на файлы в тело письма
IS_SENS_FILES_AS_ATTACHMENTS = false, // необходимо ли прикреплять файлы к письму
MAX_FILE_SIZE = 524288, // максимальный размер файла (в байтах)
ALLOWED_EXTENSIONS = array('jpg', 'jpeg', 'bmp', 'gif', 'png'), // разрешённые расширения файлов
MAIL_FROM = 'x380666231555@gmail.com', // от какого email будет отправляться письмо
MAIL_FROM_NAME = 'Имя_сайта', // от какого имени будет отправляться письмо
MAIL_SUBJECT = 'Сообщение с формы обратной связи', // тема письма
MAIL_ADDRESS = 'x380666231555@gmail.com', // кому необходимо отправить письмо
MAIL_SUBJECT_CLIENT = 'Ваше сообщение доставлено', // настройки mail для информирования пользователя о доставке сообщения
IS_SENDING_MAIL_VIA_SMTP = true, // выполнять отправку писем через SMTP
MAIL_SMTP_HOST = 'smtp.gmail.com', // SMTP-хост
MAIL_SMTP_PORT = '465', // SMTP-порт
MAIL_SMTP_USERNAME = 'x380666231555@gmail.com', // SMTP-пользователь
MAIL_SMTP_PASSWORD = '*********'; // SMTP-пароль
Александр
Александр
Форма работает, вылетело окошко что письмо отправлено и хотите еще отправить одно письмо. Где в 7 этапе искать ошибку?
Александр Мальцев
Александр Мальцев
Точно по гуглу не скажу, тут нужно разворачивать форму на хостинг и смотреть. Немного позже отвечу.
Илья
Илья
Ок, спасибо, очень жду ответа
Илья
Илья
Попробовал сделать отправку не через гугл почту, а через яндекс почту и домена на хостинге и такая же ошибка, значит дело не со стороны почты, а скорее всего что-то в коде
Александр Мальцев
Александр Мальцев
Инструкцию по настройке отправки почты по SMTP через Gmail в PHPMailer добавил в статью.
Илья
Илья
Не нашёл кнопки «Пароли приложений». Может ссылка есть?
Илья
Илья
Всё, я разобрался. Нужно было сначала включить двухфакторную авторизацию и тогда появится кнопка с паролями приложений (думаю допишите это в статью, а то будут как я задавать глупые вопросы по 100 раз одно и тоже). Попробовал отправить через форму письмо, получилось, работает, спасибо! Теперь буду пытаться добавить ячейки, чтобы через эту форму отправляло на почту ещё данные с калькулятора написанного на JS, надеюсь получится
Александр Мальцев
Александр Мальцев
Отлично! Чтобы было меньше вопросов, в статье этот момент более подробно описал.
Сергей
Сергей
Здравствуйте! Форма отличная! Но у меня ошибка, не пойму как исправить. Если отправлять сообщения без прикрепления файлов — все отлично уходит. Ошибок нет.
Стоит прикрепить файл — получаю сообщение: Исправьте данные и отправьте форму ещё раз. При этом, сообщение с прикрепленным файлом успешно отправляется и получается.

Смотрю через консоль:

<b>Notice</b>:  Undefined variable: startPath in <b>/feedback/process/process.php</b> on line <b>181</b><br />
{"result":"success"}
смотрю process.php 181 строку
там (скриншот)

Подскажите, что нужно исправить?
Сергей
Сергей
убрал $startPath в 181 строке, теперь все нормально работает при добавлении файлов
Александр Мальцев
Александр Мальцев
Здравствуйте! Спасибо! Проверьте, объявлена ли у вас переменная $startPath (по умолчанию на 44 строке):
$startPath = 'http' . (isset($_SERVER['HTTPS']) ? 's' : '') . '://' . $_SERVER['HTTP_HOST'] . '/';
Евгений Борисович
Евгений Борисович
Прекрасный скрипт, РЕСПЕКТ, Александр!
Всё работает — письма отправляет
Такая маленькая проблема:
Капча появляетя но кнопкой обновить просто стирается :(

не хочу я гуглевскую капчу использовать…
Сайт на хостинге МАСТЕРХОСТ
PHP 7.1
Скрипт установлен в корень
CMS не используется (чистый HTML)
SSL на сайте не установлен
вот он
emkom-yg.ru/
Александр Мальцев
Александр Мальцев
Спасибо! В атрибуте data-src необходимо указать правильный путь для данного проекта к файлу «captcha.php»:
<!-- замените /feedback/captcha/captcha.php на /captcha/captcha.php -->
<img class="form-captcha__image" src="/captcha/captcha.php" data-src="/feedback/captcha/captcha.php" width="132" height="46" alt="Капча">
Евгений Борисович
Евгений Борисович
старею, блин :(
Спасибки!
stan_karter
stan_karter
Здравствуйте, спс вам за ваш труд. Скажите пожалуйста, как можно заменить маску для телефона и что бы валидация все же работала, так как данный плагин (masked_input) скажем так с багами (тот же курсор при клике становится в любое место). Например inputmask.js? маску подключил, вроде появляется НО, валидации нет. Вставляю:
if (!empty($_POST['phone'])) {
  $phone = preg_replace('/\D/', '', $_POST['phone']); //получить номер телефона (цифры) из строки
  if (!preg_match('/^(8|7)(\d{10})$/', $phone)) {
    $data['phone'] = 'Поле Телефон содержит не корректный номер!';
    $data['result'] = 'error';
  }
}
Вот с этим не работает вообще, если закоментировать if и все что в нем, то валидации нет, но номер собирает и отправляет, подскажите что тут нужно прописывать, заранее благодарен.
Александр Мальцев
Александр Мальцев
Здравствуйте! В этом случае нужно посмотреть в каком виде у вас уходит номер на сервер и подкорректировать этот код. Узнать, что отправляется на сервер можно в инструментах разработчика браузера.
Этот код сначала удаляет из $_POST['phone'] всё кроме цифр. Далее проверят то, что осталось на соответствии шаблону '/^(8|7)(\d{10})$/', т.е. первая цифра должна быть 7 или 8, а за ней ещё 10 цифр. Если это так, то всё хорошо, иначе результат выставляется в 'error'.
Михаил
Михаил
Добрый день, а не планируется ли убирать из формы jquery? Сейчас мода пошла на избавление от этой библиотеки. Слишком ли сложно это сделать?
Александр Мальцев
Александр Мальцев
Привет! Тренд есть такой. Ничего сложно нет. Можно даже переписать с использованием новых возможностей JavaScript (ES6+), а потом перевести его в ES5 (для поддержки старых браузеров).
Михаил
Михаил
Есть ли у вас такое желание? У меня мозгов точно не хватит, а я бы с удовольствием такой формой пользовался.
Михаил
Михаил
я сам использую вот такую форму github.com/Bulkmaker/simple_mail. Преимущества по сравнению с вашей в том, что нужно лишь добавить класс ajaxform к ЛЮБОЙ форме и она уже будет обрабатываться скриптом. Минус в загрузке файлов только в папку на самом сайте, а не прикрепления к почте. Ну и она тоже написана на jquery. Взгляните, вдруг будет интересно.
Александр Мальцев
Александр Мальцев
Желание есть, но сначала просто перепишу без использования jQuery, а потом уже используя новый синтаксис.
Александр Мальцев
Александр Мальцев
Ссылка перебрасывает на страницу 404.
Михаил
Михаил
Сейчас должно быть видно
Александр Мальцев
Александр Мальцев
Да, сейчас открывается.
Михаил
Михаил
ещё не нашли время?
Александр Мальцев
Александр Мальцев
На GitHub добавил файл «process-forms-without-jquery.js». Эта версия скрипта без зависимости от jQuery.
В этой версии после создания экземпляра объекта ProcessForm не нужно вызывать метод init. Т.е.:
// после загрузки DOM
document.addEventListener('DOMContentLoaded', function () {
  // создаём экземпляр объекта ProcessForm (по умолчанию для #feedback-form)
  new ProcessForm();
});
Но скрипт ещё на начальном этапе, поэтому нужно его хорошенько тестировать.
Ekaterina
Ekaterina
Александр, подскажите, пожалуйста, по решению задачи:
Напишите функцию, которая принимает объект с полем id например {id:0} и возвращает значение этого айди — 0
Пример:
1. function test (obj) {
2. /*your code here*/
3.}
Мое решение:
1.function test (obj) {
2. obj { id: 0 }
3. return obj.id
4. }
Выходит ошибка: [2:7] Parsing error: Unexpected token, expected ";".
Не понимаю, зачем и куда ставить кавычки, мы же не строку возвращаем.
Александр Мальцев
Александр Мальцев
Вопросы следует помещать под соответствующей темой.
Можно решить так:
// создаём функцию
function test(obj) {
  return obj.id;
}

// вызываем функцию
const id = test({ id: 0 }); // 0
Ekaterina
Ekaterina
Поняла, спасибо!
Александр
Александр
Спасибо
Александр
Александр
Добрый день!
Хочу поблагодарить за предоставленную форму.
Я устанавливал еще в 2019 году.
Работает отлично.
PHP на хостинге версии 5.6

После изменения версии на 7.4
форма выдает ошибку.
Прошу помочь разобраться
Ошибка в инспекторе кода в следующей строке кода (см.картинку)
itchief.ru/assets/uploadify/0/9/5/09552bd682420cb16a24c34cdf13adce.png
Александр Мальцев
Александр Мальцев
Здравствуйте! Спасибо! На версии 7.4.5 работает. Посмотрите какой response возвращает сервер (process.php) в инструментах разработчика на вкладке Network.
Александр
Александр
Здравствуйте! Да, проверил, форма отрабатывает. Но
при смене версии php на 7.4 выдает ошибку
VM240:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at Object.success (main.js:204)
at c (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at l (jquery.min.js:2)
at XMLHttpRequest.(jquery.min.js:2)

По факту получается, что форма срабатывает, данные отправляются, но
сама форма не закрывается
и не открывается
«Сообщение об успешной отправки формы»

Не могу разобраться

P.S. На версии PHP 7.4 и 7.3 выдает ошибку
на версии PHP 7.0 и 7.2 все работает
(
Александр Мальцев
Александр Мальцев
Это на клиенте. Нужно посмотреть какой ответ присылает сервер, т.е. что приходит от «process.php». Может на PHP 7.4 не подключены какие-нибудь расширения.
stan_karter
stan_karter
Здравствуйте, спс вам за ваш труд.Скажите пожалуйста, как можно заменить маску для телефона и что бы валидация все же работала, так как данный плагин (masked_input) скажем так с багами(тот же курсор при клике становится в любое место).Например inputmask.js? маску подключил, вроде появляется НО, валидации нет. Вставляю if (!empty($_POST['phone'])) { $phone = preg_replace('/\D/', '', $_POST['phone']); //получить номер телефона (цифры) из строки
if (!preg_match('/^(8|7)(\d{10})$/', $phone)) {
$data['phone'] = 'Поле Телефон содержит не корректный номер!';
$data['result'] = 'error';
}
}
Вот с этим не работает вообще, если закоментировать if и все что в нем, то валидации нет, но номер собирает и отправляет, подскажите что тут нужно прописывать, заранее благодарен
alex
alex
Добрый день подскажите что я делаю не так скачал ваш обратный звонок установил на сайт поменял на свою почту itchief.ru/assets/uploadify/0/0/0/000a286819987543e8ab8a6c901f9545.png
перехожу для просмотра что получилось получаю
itchief.ru/assets/uploadify/0/c/8/0c827453d680158073a00cc19ac1dd52.png
обьясните пожалуйста что не так я сделал и почему не работает
Александр Мальцев
Александр Мальцев
Добрый день! Посмотрите, что в логах.
alex
alex
а как посмотреть то я его открываю он пуст
alex
alex
фаил в папке logs/logs.txt пустой
указал так же пути для подлючения phpmailer
require_once('/feedback/phpmailer/src/Exception.php');
require_once('/feedback/phpmailer/src/PHPMailer.php');
require_once('/feedback/phpmailer/src/SMTP.php');
в консоле ошибок нет единственная ошибка которую выдает это сама форма и то все поля он подсвечивает зеленым но при этом не отправляет и выдает ошибку «Исправьте данные и отправьте форму ещё раз.»
Вопрос как посмотреть возможные ошибки? если в логах нечего не записываеться.
скачал ваш обратный звонок с github изменил только в файле process.php почту на свою пароль соответственно ну и указал пути для подключения phpmailer
Александр Мальцев
Александр Мальцев
Тогда следует посмотреть, какой ответ возвращает сервер (скрипт process.php). Это можно выполнить в браузере, используя инструменты разработчика на панели Network.
alex
alex
я честно говоря не силен в этой вкладке вообще но ответ со статусом 302 врядли говорит о чем то хорошем как с этим бороться подскажите пожалуйста… возможно я что то где то не дописал и что может быть еще
itchief.ru/assets/uploadify/5/0/8/50878fc4faf60ac13f9ecfd1f07592e4.png
Александр Мальцев
Александр Мальцев
Вам необходимо убрать редиректы из .htaccess или другого файла в зависимости от используемого веб-сервера. По крайней мере для process.php.
alex
alex
.htaccess убрал все что там было теперь в вкладке Network. ошибка 500
Александр Мальцев
Александр Мальцев
Вам необходимо разобраться в настройках сервера или CMS, если она используется.
Елена
Елена
Добрый день. Подскажите пожалуйста, что я делаю не правильно?
Форма работает корректно. Но на странице, где я ее установила основные стили прописанные для всего сайта съехали…
Александр Мальцев
Александр Мальцев
Здравствуйте! Все стили этой формы находятся в файле «feedback/css/style.css». Их необходимо изменить под дизайн вашего проекта. Если хотите оставить дизайн формы по умолчанию, то в этом случае вам необходимо удалить из этого файла общие стили (такие, как html, body), а к остальным селекторам слева добавить селектор элемента-контейнера («.feedback»), в котором находится эта форма. В этом случае стили будут применяться только к элементам, которые находятся в «.feedback».
Например:
.feedback label {
  display: inline-block;
  margin-bottom: .5rem;
}

.feedback .form-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
Елена
Елена
Спасибо большое за форму и ответы.
Со стилями разобралась.
Теперь не получается сделать поле с телефоном.
Все фрагменты кода по инструкции выше добавила:
в HTML форму:
п.1 с указанным кодом
п.2 маску для ввода телефона
в process.php:
п.3 код для проверки корректности введённого пользователем номера телефона (тоже как указано выше)
п.4 строчку, которая будет заменять плейсхолдер %email.phone% в шаблоне письма
п.5 фрагмент кода, который используется для записывания лога
в email.tpl:
п.6 в шаблон письма: Телефон пользователя: %email.phone%
Но при заполнении телефона:
1. маска ввода не работает,
2. все поля проходят проверку и светятся зеленым, как правильные, но появляется надпись «Исправьте данные и отправьте форму ещё раз.» Письмо на мою почту соответственно не отправляется.
Подскажите пожалуйста, что я делаю не правильно. Без поля телефон все работает замечательно.
Александр Мальцев
Александр Мальцев
Вроде всё правильно делаете. Посмотрите какой ответ (response) приходит от сервера (process.php) на вкладке Network в инструментах разработчика браузера.
Елена
Елена
Скрин экрана с ответом прилагаю itchief.ru/assets/uploadify/a/c/5/ac549b3cf4df196455b660805b10f93a.png
Что с этим делать? Где искать ошибку?
Александр Мальцев
Александр Мальцев
Скорее всего это связано с тем, что вы допустили синтаксическую ошибку при добавлении своего кода в php файл. Вам необходимо это исправить. Попробуйте изменения делать постепенно и после добавления каждого куска кода проверять работает ли форма. Если она работает, то вставлять следующий фрагмент кода и т.д. Вам так легче будет понять из-за какого кода форма перестаёт работать.
Елена
Елена
Александр. Подскажите пожалуйста, можно ли к Вам обратиться за настройкой формы под свой сайт на коммерческой основе?
Александр Мальцев
Александр Мальцев
У вас же почти получилось. Расположите где-нибудь файл (например, на gist.github.com) и укажите ссылку на него. Скорее всего у вас там просто какая-та синтаксическая ошибка.
Елена
Елена
Разместила
Вот ссылка
gist.github.com/Elena0214/1afddd2892ebfc1940ab3699545e4448
Александр Мальцев
Александр Мальцев
Не открывается. Попробуйте открыть в браузере, где вы не выполнили вход на Github или в режиме инкогнито.
Елена
Елена
на Github раньше ничего не размещала.
Попробовала иначе теперь открывается по ссылке
github.com/Elena198102/-/commits/master
Александр Мальцев
Александр Мальцев
У вас в php файле лишняя закрывающаяся скобка:
}
} // <- эту скобку нужно удалить
/* 6 ЭТАП - ОТПРАВКА ПИСЬМА ПОЛУЧАТЕЛЮ */
Елена
Елена
Скобочку удалила… Ничего не изменилось
Маска ввода телефона не работает (курсор становится в любое место поля и при наборе просто сдвигает маску), валидацию поле не проходит, в каких бы вариантах я не записывала телефон (получаю подсвеченное красным поле и надпись «Введите данные в указанном формате»).
Александр Мальцев
Александр Мальцев
Пример формы с телефоном: yadi.sk/d/xaWs0B-HGe3YBA
Антошкин Сергей Иванович
Антошкин Сергей Иванович
Здравствуйте Александр. Прошу Вашей помощи. Приобрел шаблон сайта не у добросовестного продавца. многие проблемы решил у шаблона, ну осталось еще тьма… к примеру не работает форма заявок… я их не хотел бы менять, они меня устраивают, ну вот не могу настроить что бы приходили письма на мою почту.как я понял у меня нету по этому адресу url: "/lib/feedback/mail-form.php", ни какого файла и ни какой папки /feedback/ в папке /lib
Что мне делать? заранее спасибо
Александр Мальцев
Александр Мальцев
Привет! Чтобы форма отправляла сообщения на email, необходимо иметь ещё скрипт на стороне сервера. Если его нет, то необходимо его создать или обратиться к продавцу, чтобы он его предоставил.
Владислав
Владислав
Это лучшая форма которую только можно найти. Но вот проблемка, так и не разобрался как настроить отправку сообщения на свой Email (
Александр Мальцев
Александр Мальцев
Спасибо! Настройки для отправки сообщения на Email находятся в файле process.php.
Maksim
Maksim
Здравствуйте. Не нашёл на сайте как сделать форму «Заказать обратный звонок». Не подскажете как это работает?
Александр Мальцев
Александр Мальцев
Здравствуйте. Тут вроде бы всё просто. Делаете обычную форму обратной связи, например, состоящую из полей имя и телефон. Т.е. вам необходимо, если будете использовать эту форму, убрать из неё всё кроме имени, и добавить к ней телефон.
Эту форму можно вызывать как в сплывающем окне при нажатии, например, на кнопку «Заказать обратный звонок», так и просто разместив её на странице. В эту форму пользователь вводит своё имя и номер телефона и нажимает кнопку «Отправить». Ему после отправки формы на экран придёт ответ от сервера в виде, например некоторого сообщения: «Спасибо, в ближайшее время с вами свяжется наш человек». Человек в вашей компании получает на email письмо, что посетитель сайта запросил обратный звонок. Используя координаты в письме, он ему звонит.
stan_karter
stan_karter
Здравствуйте, спс вам за ваш труд.Скажите пожалуйста, как можно заменить маску для телефона и что бы валидация все же работала, так как данный плагин (masked_input) скажем так с багами(тот же курсор при клике становится в любое место).Например inputmask.js? маску подключил, вроде появляется НО, валидации нет. Вставляю if (!empty($_POST['phone'])) { $phone = preg_replace('/\D/', '', $_POST['phone']); //получить номер телефона (цифры) из строки
if (!preg_match('/^(8|7)(\d{10})$/', $phone)) {
$data['phone'] = 'Поле Телефон содержит не корректный номер!';
$data['result'] = 'error';
}
}
Вот с этим не работает вообще, если закоментировать if и все что в нем, то валидации нет, но номер собирает и отправляет, подскажите что тут нужно прописывать, заранее благодарен
Liuda
Liuda
Здравстуйте! вот эта папка у меня пустая jquery-3.3.1.min.map, как ее наполнить?
Александр Мальцев
Александр Мальцев
Здравствуйте! А зачем вам «jquery-3.3.1.min.map» нужен? При необходимости скачайте его с официального сайта jQuery.
Liuda
Liuda
Здравтуйте! у меня не работает форма обратной связи на сайте, как проверить, что не так?

Александр Мальцев
Александр Мальцев
Здравствуйте! Тут нужно разобраться что конкретно. Ответы на многие вопросы можно найти в комментариях.
Фаниль
Фаниль
Добрый день

А как можно добавить в форму информацию о товаре?
К примеру на лендинге есть несколько товаров. Под товаром кнопка «заказать». После нажатия на кнопку заказать, название товара будет добавлено в форму обратной связи. Чтобы понимать, каким товаром человек интересуется
Александр Мальцев
Александр Мальцев
Добрый день! Это можно выполнить посредством добавления в форму скрытого поля. Для более детальной информации можете поискать ответ в комментариях на этой странице.
Сергей Курилович
Сергей Курилович
Александр приветствую, очень классная форма обратной связи спасибо Вам!!!
Алексакндр помогите разобраться пожалуйста: заметил такой глюк — отправляю форму с вложением файла, он копируется в папку аплоад и все норм отправляется, однако когда я пытаюсь отправить следующую форму но уже без вложения — файлы в аплоаде копитуются и автоматом присоединяются к форме, и уже получается что отправляется форма с 2умя вложениями.
В общем если есть файлы в папке аплоад они полюбому прикрепляются к форме хотя пытаюсь отправлять без вложений!!! что это такое и как с этим разобраться??? За ранее благодарен за ответ!!!
Igor Ullman
Igor Ullman
Здравствуйте, Александр.
Эта форма, пожалуй, лучшая, что нашел на просторах сети. Но сейчас всё большее количество пользователей пользуются интернетом с мобильных устройств, а форма вызываемая, например, со смартфона такая ме-елкая. Как бы добавить ей адаптивный дизайн?
Александр Мальцев
Александр Мальцев
Здравствуйте! Для этого добавьте в раздел <head> следующую строчку:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
stan_karter
stan_karter
Здравствуйте, скажите, если пробовать эту форму на openserver'е форма сработает? при заполнении формы выдает «Исправьте данные и отправьте форму ещё раз.» хотя все поля зеленые, и в папку OpenServer\userdata\temp\email ничего неприходит, в консоле выдает «Failed to load resource: the server responded with a status of 404 (Not Found)»
Александр Мальцев
Александр Мальцев
Здравствуйте!
Для того чтобы использовалась sendmail-заглушка установите в «process.php» для константы IS_SENDING_MAIL_VIA_SMTP значение false:
IS_SENDING_MAIL_VIA_SMTP = true, // выполнять отправку писем через SMTP
Наталия24
Наталия24
Здравствуйте, Александр! Спасибо за вашу работу! Очень полезные статьи и нужные. Подскажите, пожалуйста, чтобы настроить данные получателя, то есть меня, нужно сменить данные только в следующих строках:

MAIL_FROM_NAME = 'Имя_сайта', // от какого имени будет отправляться письмо
MAIL_SMTP_USERNAME = 'alexander@yandex.ru', // SMTP-пользователь
MAIL_SMTP_PASSWORD = '12345678'; // SMTP-пароль
или еще в каких-то? Заранее благодарю за понимание и внимание.
Александр Мальцев
Александр Мальцев
Здравствуйте! Спасибо за отзыв!
Если вы настраиваете отправку писем через SMTP, то необходимо настроить значения всех этих констант:
MAIL_FROM = 'no-reply@mydomain.ru', // здесь ваш email 
MAIL_FROM_NAME = 'Имя_сайта', // от какого имени будет отправляться письмо
MAIL_ADDRESS = 'manager@mydomain.ru', // здесь ваш email (если вы хотите отправить письмо себе)
MAIL_SMTP_HOST = 'ssl://smtp.yandex.ru', // SMTP-хост
MAIL_SMTP_PORT = '465', // SMTP-порт
MAIL_SMTP_USERNAME = 'alexander@yandex.ru', // SMTP-пользователь (ваша учётная запись от почты)
MAIL_SMTP_PASSWORD = '12345678'; // SMTP-пароль (ваш пароль от почты)
Если ваша почта на Яндексе, то тогда MAIL_SMTP_HOST и MAIL_SMTP_PORT изменять не надо. Если вы используете другой SMTP-сервер, например, Google, то тогда в них нужно ввести его значения.
Наталия24
Наталия24
Да, отлично! Благодарю за взаимодействие. Очень помогло. Все работает шикарно!
Наталия24
Наталия24
Добрый день! Столкнулась с не очень приятным моментом. На сайт установила две формы обратной связи на разных страницах. При открытии одной в зависимости от первой вкладки CSS отображаются или слетают. Обе формы по ваши: контакты и отзывы. К тому же при установке формы с отзывами подавляется часть функций на других страницах. Как выйти из этой ситуации, пожалуйста, подскажите? Заранее очень благодарю за поддержку! Вот мой сайт
Александр Мальцев
Александр Мальцев
У вас на странице форма имеет id, равный contactForm. А в файле «main.css» вы почему-то привязываете стили к форме используя селектор #sendform.
stan_karter
stan_karter
Здравствуйте, скажите, если пробовать эту форму на openserver'е форма сработает? при заполнении формы выдает «Исправьте данные и отправьте форму ещё раз.» хотя все поля зеленые, и в папку OpenServer\userdata\temp\email ничего неприходит, в консоле выдает «Failed to load resource: the server responded with a status of 404 (Not Found)»
Наталия24
Наталия24
Поняла. Спасибо. Последний по этой теме вопрос: «Как грамотно отключить обязательное добавление фотографий, чтобы можно было отправлять форму без них, если это требуется?».
Александр Мальцев
Александр Мальцев
Попробуйте воспользоваться этим решением.
Александр Мальцев
Александр Мальцев
Прикреплять файлы в этой форме необязательно. Если их не присоединить, то форма и так отправится.
Если нужно их нужно полностью убрать из формы, то просто удалите из HTML файла этот фрагмент кода:
<div class="form-group form-attachments" data-count="5">...</div>
Александр
Александр
Здравствуйте Александр. Помогите пожалуйста. Добавил 3 поля в HTML
<!-- Номера телефонов-->
    <div class="form-row">
        <!-- Номер телефона для россии-->
        <div class="form-group">
            <label for="phone" class="control-label">Телефон для абонентов РФ</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text">+7</div>
                    </div>
                        <input id="phone" type="phone" name="phone" class="form-control" value="(___)___-__-__" pattern="^\?[0-9]{1}(?[0-9]{3}\)?(\s+)?[0-9]{3}-?[0-9]{2}-?[0-9]{2}$">
                    <div class="invalid-feedback"></div>
                    </div>
                </div>
        <!-- Email пользователя -->
            <div class="form-group">
            <label for="phone" class="control-label">Телефон для абонентов стран СНГ</label>
                <div class="input-group">
                    <input id="phone2" type="phone" name="phone2" class="form-control" value="" placeholder="Телефон для абонентов стран СНГ" minlength="11" maxlength="18">
                <div class="invalid-feedback"></div>
            </div>
        </div>
    </div>
		<!-- Название компании -->
        <div class="form-group">
          <label for="company" class="control-label">Компания</label>
          <input id="company" type="text" name="company" required="required" class="form-control" value=""
                 placeholder="Компания, организация">
          <!-- <div class="invalid-feedback"></div> -->

		<!-- Неисправный блок -->
        <div class="form-group">
          <label for="name" class="control-label">Тип, модель неисправного блока</label>
          <input id="type" type="text" name="type" class="form-control" value="" placeholder="Тип, модель" minlength="2"
                 maxlength="30" required="required">
          <div class="invalid-feedback"></div>
        </div>
внес правки в process.php
// выполняем замену плейсхолдеров реальными значениями
    $bodyMail = str_replace('%email.title%', MAIL_SUBJECT, $bodyMail);
    $bodyMail = str_replace('%email.nameuser%', isset($name) ? $name : '-', $bodyMail);
    $bodyMail = str_replace('%email.phone%', isset($phone) ? $phone : 'не указан', $bodyMail);
    $bodyMail = str_replace('%email.phone2%', isset($phone2) ? $phone2 : 'не указан', $bodyMail);
    $bodyMail = str_replace('%email.company%', isset($company) ? $company : '-', $bodyMail);
    $bodyMail = str_replace('%email.type%', isset($type) ? $type : '-', $bodyMail);
    $bodyMail = str_replace('%email.message%', isset($message) ? $message : '-', $bodyMail);
    $bodyMail = str_replace('%email.emailuser%', isset($email) ? $email : '-', $bodyMail);
    $bodyMail = str_replace('%email.date%', date('d.m.Y H:i'), $bodyMail);
и отредактировал email.tpl
<hr> Телефон Россия:
                <b>%email.phone%</b>
                <hr> Телефон СНГ:
                <b>%email.phone2%</b>
                <hr> Название компании:
                <b>%email.company%</b>
                <hr> Неисправный блок, оборудование:
                <b>%email.type%</b>

но к сожалению в приходящих письмах только пустые поля или надпись «не указан». Подскажите пожалуйста что я не так сделал?
Александр Мальцев
Александр Мальцев
Здравствуйте! В «process.php» также необходимо создать переменные, которые вы затем используете в коде:
if (isset($_POST['company'])) {
  $company = filter_var($_POST['company'], FILTER_SANITIZE_STRING);
}
...
Александр
Александр
С переменной $company заработало а вот с телефоном вообще никак не хочет, вроде и переменная объявлена и прописано все.
<img
src=«https://itchief.ru/assets/uploadify/8/e/9/8e9459ae928182b66e71a03efcc73aeas.jpg» class=«fancybox thumbnail center»>


Вот что приходит на почту.
<img
src=«https://itchief.ru/assets/uploadify/4/5/5/455d99bdc31acc80b8c000ff19003ec5s.jpg» class=«fancybox thumbnail center»>
Александр Мальцев
Александр Мальцев
Внимательно делайте! Нужно переменной $phone присваивать, а не $message.
Александр
Александр
Александр. Огромное спасибо за форму и отдельно за помощь. Подобных людей на просторах интернета я ни когда не встречал. Удачи и процветания!!!
Alexander
Alexander
Добрый день, Александр!
Подскажите пожалуйста нужно данные из формы сохранить в файл JSON.
Я вспомнил что ваша форма сохраняет лог в logs.txt а это значит, что вообще не проблема то же самые данные записать как объект в JSON файл.
Со стороны JavaScript всё готово, а вот PHP вообще не знаком с данным языком.
Помогите с кодом PHP пожалуйста.

document.addEventListener('DOMContentLoaded', () => {

  const ajaxSend = (formData) => {
    fetch('register.php', { // файл-обработчик 
      method: 'POST',
      headers: {
        'Content-Type': 'application/json', // отправляемые данные 
      },
      body: JSON.stringify(formData)
    })
      .then(response => alert('Сообщение отправлено'))
      .catch(error => console.error(error))
  };

  const forms = document.getElementsByTagName('form');
  for (let i = 0; i < forms.length; i++) {
    forms[i].addEventListener('submit', function (e) {
      e.preventDefault();

      let formData = new FormData(this);
      formData = Object.fromEntries(formData);
      console.log(forms);
      ajaxSend(formData);
      this.reset();
    });
  };
});
Александр Мальцев
Александр Мальцев
В PHP сохранить данные в JSON можно так:
<?php
$path = 'forms.json'; // файл, в который нужно сохранить данные
file_put_contents($path, file_get_contents('php://input'), LOCK_EX);
?>
Alexander
Alexander
Спасибо большое!
Александр
Александр
Александр еще раз здравствуйте. Поторопился с выводом. Я прописал checked=«checked» для того чтобы чек бокс по умолчанию был активным, и вроде так и есть, НО кнопка отправки сообщения не активна. Только после того как снимешь и заново поставишь галочку кнопка становится рабочей. Подскажите пожалуйста как сделать чекбокс с политикой конфиденциальности по умолчанию активным?
Александр Мальцев
Александр Мальцев
Здравствуйте. Удалите у кнопки submit атрибут disabled.
NeironYT
NeironYT
Помогите пожалуста, почему не приходят сообщения на почту. вроде ввел все правильно. мне пришло уведомление только на почту
Кто-то хотел войти в Ваш аккаунт из стороннего приложения, используя Ваш пароль, но мы заблокировали эту попытку. Рекомендуем Вам проверить действия в аккаунте и убедиться, что у посторонних нет доступа к нему.
Что мне сделать????
Александр Мальцев
Александр Мальцев
Вы используете почту от Google? Если да, то вам нужно где-то в настройках Google аккаунта включить доступ для сайта, через который вы будете отправлять почту. Посмотрите на странице «Приложения, у которых есть доступ к аккаунту».
NeironYT
NeironYT
Я использую бесплатний хостинг 000webhostapp.com. Может в етом проблема. + еще в логах такая ошибка
Ошибка при отправке письма: SMTP connect() failed. github.com/PHPMailer/PHPMailer/wiki/Troubleshooting. А как именно включить доступ к сайту? Ненадежные приложения, у которых есть доступ к аккаунту? Я его выключил.
Александр Мальцев
Александр Мальцев
По этому хостингу не подскажу, обратитесь в техподдержку. Данная ошибка означает что произошла ошибка соединения с SMTP сервером. Проверьте порт и хост SMTP сервера, который вы используете. Может просто что-то не то указали?
Александр
Александр
Здравствуйте Александр. Помогите пожалуйста разобраться. Добавил поле телефона, добавил в него шаблон, внес проверку. Но это поле отказывается работать правильно, постоянно выдает ошибку валидации.
Файл — index.php —
<!-- Номер телефона -->
        <div class="form-group">
          <label for="phone" class="control-label">Телефон</label>
          <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">+7</div>
            </div>
            <input id="phone" type="phone" name="phone" class="form-control" value="(___)___-__-__" pattern="^\?[0-9]{1}(?[0-9]{3}\)?(\s+)?[0-9]{3}-?[0-9]{2}-?[0-9]{2}$">
            <div class="invalid-feedback"></div>
          </div>
        </div>
-//-//-//-//-//-//-//-
<script>
  // masked_input_1.4.1-min.js
  // angelwatt.com/coding/masked_input.php

(function(a){a.MaskedInput=function(f){if(!f||!f.elm||!f.format){return null}if(!(this instanceof a.MaskedInput)){return new a.MaskedInput(f)}var o=this,d=f.elm,s=f.format,i=f.allowed||"0123456789",h=f.allowedfx||function(){return true},p=f.separator||"/:-",n=f.typeon||"_YMDhms",c=f.onbadkey||function(){},q=f.onfilled||function(){},w=f.badkeywait||0,A=f.hasOwnProperty("preserve")?!!f.preserve:true,l=true,y=false,t=s,j=(function(){if(window.addEventListener){return function(E,C,D,B){E.addEventListener(C,D,(B===undefined)?false:B)}}if(window.attachEvent){return function(D,B,C){D.attachEvent("on"+B,C)}}return function(D,B,C){D["on"+B]=C}}()),u=function(){for(var B=d.value.length-1;B>=0;B--){for(var D=0,C=n.length;D<C;D++){if(d.value[B]===n[D]){return false}}}return true},x=function©{try{C.focus();if(C.selectionStart>=0){return C.selectionStart}if(document.selection){var B=document.selection.createRange();return -B.moveStart("character",-C.value.length)}return -1}catch(D){return -1}},b=function(C,E){try{if(C.selectionStart){C.focus();C.setSelectionRange(E,E)}else{if(C.createTextRange){var B=C.createTextRange();B.move("character",E);B.select()}}}catch(D){return false}return true},m=function(D){D=D||window.event;var C="",E=D.which,B=D.type;if(E===undefined||E===null){E=D.keyCode}if(E===undefined||E===null){return""}switch(E){case 8:C="bksp";break;case 46:C=(B==="keydown")?"del":".";break;case 16:C="shift";break;case 0:case 9:case 13:C="etc";break;case 37:case 38:case 39:case 40:C=(!D.shiftKey&&(D.charCode!==39&&D.charCode!==undefined))?"etc":String.fromCharCode(E);break;default:C=String.fromCharCode(E);break}return C},v=function(B,C){if(B.preventDefault){B.preventDefault()}B.returnValue=C||false},k=function(B){var D=x(d),F=d.value,E="",C=true;switch©{case (i.indexOf(B)!==-1):D=D+1;if(D>s.length){return false}while(p.indexOf(F.charAt(D-1))!==-1&&D<=s.length){D=D+1}if(!h(o,B,D)){c(B);return false}E=F.substr(0,D-1)+B+F.substr(D);if(i.indexOf(F.charAt(D))===-1&&n.indexOf(F.charAt(D))===-1){D=D+1}break;case (B==="bksp"):D=D-1;if(D<0){return false}while(i.indexOf(F.charAt(D))===-1&&n.indexOf(F.charAt(D))===-1&&D>1){D=D-1}E=F.substr(0,D)+s.substr(D,1)+F.substr(D+1);break;case (B==="del"):if(D>=F.length){return false}while(p.indexOf(F.charAt(D))!==-1&&F.charAt(D)!==""){D=D+1}E=F.substr(0,D)+s.substr(D,1)+F.substr(D+1);D=D+1;break;case (B==="etc"):return true;default:return false}d.value="";d.value=E;b(d,D);return false},g=function(B){if(i.indexOf(B)===-1&&B!=="bksp"&&B!=="del"&&B!=="etc"){var C=x(d);y=true;c(B);setTimeout(function(){y=false;b(d,C)},w);return false}return true},z=function©{if(!l){return true}C=C||event;if(y){v©;return false}var B=m©;if((C.metaKey||C.ctrlKey)&&(B==="X"||B==="V")){v©;return false}if(C.metaKey||C.ctrlKey){return true}if(d.value===""){d.value=s;b(d,0)}if(B==="bksp"||B==="del"){k(B);v©;return false}return true},e=function©{if(!l){return true}C=C||event;if(y){v©;return false}var B=m©;if(B==="etc"||C.metaKey||C.ctrlKey||C.altKey){return true}if(B!=="bksp"&&B!=="del"&&B!=="shift"){if(!g(B)){v©;return false}if(k(B)){if(u()){q(o,x(d))}v(C,true);return true}if(u()){q(o,x(d))}v©;return false}return false},r=function(){if(!d.tagName||(d.tagName.toUpperCase()!=="INPUT"&&d.tagName.toUpperCase()!=="TEXTAREA")){return null}o.elm=d;if(!A||d.value===""){d.value=s}j(d,"keydown",function(B){z(B)});j(d,"keypress",function(B){e(B)});j(d,"focus",function(){t=d.value});j(d,"blur",function(){if(d.value!==t&&d.onchange){d.onchange()}});return o};o.resetField=function(){d.value=s};o.setAllowed=function(B){i=B;o.resetField()};o.setCursorPos=function(B){b(d,B)};o.setFormat=function(B){s=B;o.resetField()};o.setSeparator=function(B){p=B;o.resetField()};o.setTypeon=function(B){n=B;o.resetField()};o.setEnabled=function(B){l=B};return r()}}(window));

  MaskedInput({
    elm: document.getElementById('phone'), // select by id
    format: '(___)___-__-__',
    separator: '()-'
  });
</script>
Файл — process.php —
// проверка поля phone
if (isset($_POST['phone'])) {
  $phone = preg_replace('/\D/', '', $_POST['phone']); //получить номер телефона (цифры) из строки
  if (!preg_match('/^(\d{10})$/', $phone)) {
    $data['phone'] = 'Поле Телефон содержит не корректный номер!';
    $data['result'] = 'error';
    }
}
itchief.ru/assets/uploadify/f/c/a/fcace09a71430e332e4501c0b00f3353.jpg
И еще один вопрос. Можноли чек бокс с политикой конфидециальности по умолчанию сделать активным?
Заранее огромое спасибо.
Александр
Александр
Разобрался. Все заработало. Спасибо за форму, очень удобная.
Александр Мальцев
Александр Мальцев
Отлично! Пожалуйста!
Stanislas
Stanislas
Добрый день.
Заметил что форма отправляет сообщения с вложением, но почему-то внизу остается предупреждающее сообщение
о необходимости исправить данные и отправить форму еще раз…
скриншот
какие-то проволочки на стороне Яндеса как понял?
2020-04-21 19:04:22 Connection: opening to ssl://smtp.yandex.ru:465, timeout=300, options=array()
2020-04-21 19:04:23 Connection failed. Error #2: stream_socket_client(): SSL operation failed with code 1. OpenSSL Error messages:error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed [/feedback/phpmailer/src/SMTP.php line 348]
2020-04-21 19:04:23 Connection failed. Error #2: stream_socket_client(): Failed to enable crypto [/feedback/phpmailer/src/SMTP.php line 348]
2020-04-21 19:04:23 Connection failed. Error #2: stream_socket_client(): unable to connect to ssl://smtp.yandex.ru:465 (Unknown error) [/feedback/phpmailer/src/SMTP.php line 348]
2020-04-21 19:04:23 SMTP ERROR: Failed to connect to server:  (0)
SMTP connect() failed. https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting
Александр Мальцев
Александр Мальцев
Здравствуйте! Какая-то проблема с сертификатами. Обратитесь в техподдержку хостинга, которым вы пользуетесь.
gularon
gularon
Здравствуйте, Александр.
Очень хотелось вашу форму обратной связи поместить на сайт, который пытаюсь сделать.
Выбрал простую форму, самую первую, скопировал всю папку feedback к себе, скопировал и вставил куда надо код html формы себе на страницу, никаких настроек вообще не делал. Всё вроде красиво, но когда в браузере заполняю форму и пробую отправить, не получается, пишет «Исправьте данные и отправьте форму ещё раз». Вообще не силён в php и js. Подскажите, надо было всё-таки же что-то прописать… ну хотя-бы на какой e-mail должно это сообщение уйти
Александр Александрович
Александр Александрович
Здравствуйте. Подскажите как вынести кнопку для отправки формы на сервер за пределы атрибута form. Сама форма работает если присвоить к submit идентификатор form=«feedback_form» но пропадает связь с пользовательским соглашением.
Александр Александрович
Александр Александрович
С кнопкой вроде разобрался как-то. Но всё равно не понимаю как осуществляется навигация и поиск по элементам формы.
Я хочу например вставить картинку после успешной отправки. Могу это сделать так:
// при успешной отправки формы
        if (data.result === "success") {
            jQuery(document).trigger('pf_success', {data: this});
            if (_this._settings.isUseDefaultSuccessMessage) 
{
                _this._form.parent().find('.form-result-success')
                    .removeClass('d-none')
                    .addClass('d-flex');
         //картинка
var pc = document.querySelector('.form-result-success');
var pic = document.createElement("IMG");
pic.src = "konvert.gif";
pc.appendChild(pic);
Подскажите как мне вставить её без document.querySelector
Как работает эта строчка
_this._form.parent().find('.form-result-success')
Александр Мальцев
Александр Мальцев
Эта строчка работает так:
_this._form.parent().find('.form-result-success')
1) _this — содержит ссылку на объект, созданный с помощью функции-конструктора ProcessForm.
2) _form — это обращение к свойству «_form» объекта «_this». В нём находится jQuery объект, содержащий ссылку на DOM-элемент формы.
Элемент с классом «form-result-success» находится в том же контейнере что и форма:
<div class="form__wrapper">
  <form id="feedback-form" action="/feedback/process/process.php" enctype="multipart/form-data" novalidate>...</form>
  <div class="form-result-success d-none">...</div>
</div>
Поэтому чтобы на него дойти, нужно подняться к родительскому элементу формы («.parent()»), а затем в нём найти элемент с классом «form-result-success» («find('.form-result-success')»).
3) parent() – выполняет переход к родительскому элементу формы.
4) find('.form-result-success') – осуществляет поиск элемента в родительском элементе формы по классу «form-result-success».

Вставить картинку можно так:
var successMsg = _this._form.parent().find('.form-result-success');
successMsg.append('<img src="konvert.gif" alt="">')
successMsg.removeClass('d-none').addClass('d-flex');
Александр Мальцев
Александр Мальцев
Здравствуйте.
Для этого нужно в функции переписать код для нахождения кнопки submit относительно формы:
// переключить во включенное или выключенное состояние кнопку submit
var _changeStateSubmit = function (_this, state) {
  _this._form.find('[type="submit"]').prop('disabled', state);
};
Александр Александрович
Александр Александрович
Спасибо вам преогромнейшее.
MakcuMyM
MakcuMyM
Александр спасибо за вашу форму.Возник Вопрос прочитал ветку комментариев, но к сожалению на мой вопрос не нашел ответа.Версия 3.0.1.
1. Хотелось бы убрать поля email,name.Выше вы написали что это редактирование файлов index.html,process-forms.js,process.php.Закоментировал что связано с этими полями, но скрипт упорно не хочет реагировать.

2. Добавить поле выбора типа сообщения
<!-- Выбор типа обращения -->
   <div class="form-group">
  <label for="message_type">Поле 1</label>
  <select id="message_type" name="message_type" class="form-control" required="required">
    <option>выбор1</option>
    <option>выбор2</option>
    <option>выбор3</option>    
  </select>
</div>
Я так понимаю надо занести в index.html еще маску для этих полей, добавить в process-forms.js проверку на валидацию этого поля и в файл process.php на примере поля name? Натолкните на статью где можно глянуть как правильно добавить маску для этого поля.
Александр Мальцев
Александр Мальцев
Пожалуйста. Чтобы убрать поля (например, email и name) нужно удалить их HTML код, а также всё что с ними связано в «process.php» (проверку и добавление их в тело письма). В JavaScript ничего менять не нужно.

Добавление маски на клиенте осуществляется через атрибут pattern.
Например:
<input id="phone" type="tel" name="phone" class="form-control" value="(___)___-__-__" pattern="^\(?[0-9]{3}\)?(\s+)?[0-9]{3}-?[0-9]{2}-?[0-9]{2}$">
Вообще любые требования к полям на клиенте через обычные атрибуты для полей ввода: minlength, maxlength, required, pattern и т.д.
Ильгиз
Ильгиз
Добрый день, Александр!

Спасибо вам, за форму!

Всё работает. Только консоль интернет-браузера сообщает о ошибке:
(index):1257 Uncaught ReferenceError: $ is not defined

— возможно, это минус к SEO, так как поисковики учитывают качество кода (в том числе, наличие/отсутствие ошибок).
Ильгиз
Ильгиз
Забыл вчера сформулировать сам вопрос:
Как можно избежать данной ошибки? Ваша форма классная, но при этом и рисковать позициями в поиске не хочется)
Александр Мальцев
Александр Мальцев
Добрый день! Это не относится к форме. Вам необходимо проверить последовательность подключения js-библиотек на вашем сайте. JavaScript этой формы зависит только от jQuery, поэтому «process-forms.js» нужно подключить после неё:
...
<script src="/feedback/vendors/jquery/jquery-3.4.1.min.js"></script>
<script src="/feedback/js/process-forms.js"></script>
...
Проверьте, может вы несколько раз подключаете библиотеку jQuery? Что у вас находиться на 1257 строчке?
Александр Александрович
Александр Александрович
Здравствуйте. Подскажите пожалуйста, как убрать поле email пользователя?
Александр Александрович
Александр Александрович
Здравствуйте. Я пытаюсь сделать в форме чтобы только одно из двух полей были обязательно заполнены или телефон или email. Использую последнюю версию вышей формы. Подскажите пожалуйста как это реализовать.
Александр Александрович
Александр Александрович
Сделать например если поле телефон заполнено и прошло проверку значит отключить проверку email. Помогите.
Александр Мальцев
Александр Мальцев
Для этого можно добавить следующую строчку в «process-form.js»:
...
// отправка формы
var _sendForm = function (_this) {
  // добавляем эту строчку
  $(document).trigger('beforeSubmit', [_this._form]);
    if (!_validateForm(_this)) {
    ...
Она будет генерировать событие «beforeSubmit» перед отправкой формы.

Далее в своём js файле необходимо обработать это событие, а именно установить необходимым элементам input определённое значение свойству required. Если, например, поле email заполнено, а phone нет, то соответственно полю email в качестве значения свойства required установить true, а phone — false.
$(document).on('beforeSubmit', function(e, _this){
  // если форма имеет id не feedback-form, то завершаем работу
  if (_this.attr('id') !== 'feedback-form') {
    return;
  }
  if ((_this.find('[name="phone"]').val().length) > 0 && (_this.find('[name="email"]').val().length === 0)) {
    _this.find('[name="phone"]').prop('required', true);
    _this.find('[name="email"]').prop('required', false);            
  } else if ((_this.find('[name="phone"]').val().length) === 0 && (_this.find('[name="email"]').val().length > 0)) {
    _this.find('[name="phone"]').prop('required', false);
    _this.find('[name="email"]').prop('required', true); 
  } else {
    _this.find('[name="phone"]').prop('required', true);
    _this.find('[name="email"]').prop('required', true); 
  }
});
Но, это только обработка на клиенте.

На сервере (в php) тоже необходимо выполнить валидацию полей phone и email.
Например, это можно сделать так:
// проверка полей email и phone
if (!empty($_POST['email'])) {
  if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { // защита от XSS
    $data['email'] = 'Адрес электронной почты не корректный';
    $data['result'] = 'error';
    log_write('Не пройдена валидация поля: email! Оно имеет не корретное значение!');
  } else {
    $email = $_POST['email'];
  }
} else {
  if (empty($_POST['phone'])) {
    $data['email'] = 'Заполните это поле или телефон';
    $data['result'] = 'error';
    log_write('Не пройдена валидация поля: email! Оно не заполнено!');
  }
}

if (!empty($_POST['phone'])) {
  $phone = preg_replace('/\D/', '', $_POST['phone']);
  // если число состоит не из 10 цифр, то...
  if (!preg_match('/^(\d{10})$/', $phone)) {
    $data['phone'] = 'Поле Телефон содержит не корректный номер!';
    $data['result'] = 'error';
    log_write('Не пройдена валидация поля: phone! Оно имеет не корретное значение!');
  }
} else {
  if (empty($_POST['email'])) {
    $data['email'] = 'Заполните это поле или email';
    $data['result'] = 'error';
    log_write('Не пройдена валидация поля: phone! Оно не заполнено!');
  }
}
Александр Александрович
Александр Александрович
Спасибо. Мне очень нравится что вы не просто помогаете но ещё и объясняете всё довольно подробно. Получается как в школе почти.))) Труд ваш не оценим. Вы или не человек или гений. Спасибо.
Kasper
Kasper
Александр, я настроил вашу форму на тестовом сервере, потом приобрел хостинг на другом сервере и только потом узнал, что там версия php 5.3.3 (native)… а вы пишите, что минимальная нужна 5.6. Что-то можно придумать с версией 5.3.3 или шансов нет, только менять хостинг и искать с версией php выше 5.6.?
Александр Мальцев
Александр Мальцев
Может и можно, но придётся многое переписывать. Кроме этого, в этом проекте используется библиотека PHPMailer, которая требует PHP не ниже 5.5. В этом случае необходимо будет искать более старый релиз, которую имеет поддержку PHP 5.3.3.
Виктор
Виктор
Здравствуйте!
При отправке данных формы на почту файл приходит в виде ссылки, но при переходе по этой ссылке открывается страница с сообщением «Not Found». Я так понимаю, прикрепленный файл должен сохраняться на хостинге в папке uploads, но его там нет. Использую хостинг beget.
Александр Мальцев
Александр Мальцев
Добрый день! Проверьте есть ли права на доступ к этой папке из браузера.
Юрий
Юрий
Здравствуйте. У вас отличная форма. Спасибо, что сделали и поддерживаете. Есть такой момент: валидация формы происходит после нажатия на кнопку Отправить. До этого момента, поля с ошибкой не обнуляются после ввода новых данных. У пользователей это может вызвать ощущения, что они продолдают вводить не вернве данные. Вопрос: как скинуть класс invalid по клику на поле или при вводе текста, а не при нажатии на кнопку?
Александр Мальцев
Александр Мальцев
Здравствуйте! Спасибо!
Для этого просто нужно добавить в JavaScript следующее:
$('input, textarea').on('focus', function () {
  $(this).removeClass('is-valid is-invalid');
});
Юрий
Юрий
Отлично. Всё получилось. Спасибо за быстрый ответ.)
Ахмет Шабакаев
Ахмет Шабакаев
и +7 не могу поставить перед окном ввода (скриншот)
Ахмет Шабакаев
Ахмет Шабакаев
Александр, здравствуйте.
Подскажите, как добавить в форму v2.0.1 (со строкой телефон) кнопку «Открыть форму» как в версии модального окна v1.0? Я пробовал добавлять из одной формы в другую, у меня не получается правильно оформить.
Александр Мальцев
Александр Мальцев
Здравствуйте!
Если вам нужна форма в модальном окне, то тогда лучше возьмите её из этой статьи: Контактная форма во всплывающем окне.
В неё будет проще добавить телефон, чем переделывать форму для отображения её в модальном окне.
Ахмет Шабакаев
Ахмет Шабакаев
Как раз её и взял (версия 1.0 под Bootstrap 3). Просто прикручивая к ней строку с телефоном, обратил внимание, что в другой версии изменена маска и метод её применения и +7 стоит перед строкой в красивом оформлении, поэтому и хотел куски кода из 2.0.1 в версию 1.0 перенести, но увы не получилось. Потом пытался сделать наоборот, как в 1.0 прикрутить кнопку вызова модального окна к 2.0.1, тоже без успехов…
<img
src=«https://itchief.ru/assets/uploadify/5/f/c/5fc69cbe8ecf2ab525e3c76a647eb9bds.jpg» class=«fancybox thumbnail center»>

<img
src=«https://itchief.ru/assets/uploadify/5/f/c/5fc69cbe8ecf2ab525e3c76a647eb9bds.jpg» class=«fancybox thumbnail center»>

<img
src=«https://itchief.ru/assets/uploadify/2/6/b/26b3b5c8e06ebfc5013840825879e6f2s.jpg» class=«fancybox thumbnail center»>
Kasper
Kasper
Александр, уже не знаю куда копать. Использую бесплатный домен на beget.tech для теста. Залил исключительно вашу форму (все файлы: index.html, process… все ваше). Прописал почту и необходимые данные в настройках.

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

При этом, все поля «зеленые», в логе нет ошибок, аналогично нет ошибок при отправки в консоле. По идее она должна написать то же, что в вашем тесте (отчет об успешной отправке). То есть, письмо приходит, ошибок нет, но вот это сообщение выскакивает, с которым я не могу разобраться. Уже пробежался по всем комментариям связанным с этим, попробовал варианты ребят, но тщетно. В чем может быть причина? Может быть причина в хостинге? Если да, то как локализовать проблему?
Kasper
Kasper
Попробовал на другом хостинге. Все аналогично. Хм… ума не приложу в чем дело.
Александр Мальцев
Александр Мальцев
Здравствуйте! Чтобы в этом разобраться необходимо проверить какой ответ приходит от сервера. Посмотрите его в браузере на вкладке Network в инструментах разработчика (process.php). Также можно проверить логи сервера и логи этого компонента (они находятся в папке logs).
Kasper
Kasper
Доброе утро. В папочке logs пишет только об успешной отправке. А вот что пишет в Network:
«Warning: session_start(): Cannot send session cookie — headers already sent by (output started at /home/o/o96197q9/o96197q9.DOMEN.tech/public_html/feedback/process/process.php:1) in /home/o/o96197q9/o96197q9.DOMEN.tech/public_html/feedback/process/process.php on line 71 Warning: session_start(): Cannot send session cache limiter — headers already sent (output started at /home/o/o96197q9/o96197q9.DOMEN.tech/public_html/feedback/process/process.php:1) in /home/o/o96197q9/o96197q9.DOMEN.tech/public_html/feedback/process/process.php on line 71 {»result":«success»}"

Но на 71 строке ничего особенного нет к чему придраться («session_start();»):

/* 3 ЭТАП — ОТКРЫТИЕ СЕССИИ И ИНИЦИАЛИЗАЦИЯ ПЕРЕМЕННОЙ ДЛЯ ХРАНЕНИЯ РЕЗУЛЬТАТОВ ОБРАБОТКИ ФОРМЫ */

session_start();
$data['result'] = 'success';

/* 4 ЭТАП — ВАЛИДАЦИЯ ДАННЫХ (ЗНАЧЕНИЙ ПОЛЕЙ ФОРМЫ) */

Вам это ни о чем не говорит?
Kasper
Kasper
Короче, ребята… у кого будет подобная ошибка:

"«Warning: session_start(): Cannot send session cookie — headers already sent by (output started at /home/o/o96197q9/o96197q9.DOMEN.tech/public_html/feedback/process/process.php:1) in /home/o/o96197q9/o96197q9.DOMEN.tech/public_html/feedback/process/process.php on line 71 Warning: session_start(): Cannot send session cache limiter — headers already sent (output started at /home/o/o96197q9/o96197q9.DOMEN.tech/public_html/feedback/process/process.php:1) in /home/o/o96197q9/o96197q9.DOMEN.tech/public_html/feedback/process/process.php on line 71 {»result":«success»}""

При этом форма отправляется, но пишет «Исправьте данные и отправьте форму ещё раз.»

КОПНИТЕ В СТОРОНУ файла «process.php».

У меня причина была в том, что файл сохранён в верной кодировке UTF-8, но с BOM (Byte Order Mask).

КОГДА ПРАВИТЕ файл «process.php», ОБЯЗАТЕЛЬНО сохраняйте его в кодировке UTF-8 без BOM (в редакторе NotePad++ это называется просто UTF-8).

Александр, спасибо за поддержку. Сейчас буду форму прикручивать к сайту.
Александр Мальцев
Александр Мальцев
Отлично!
Ахмет Шабакаев
Ахмет Шабакаев
Здравствуйте. Подскажите, пожалуйста, по настройкам — куда прописали почту и необходимые настройки на beget.tech?
Kasper
Kasper
Так я на хостинге ничего не прописывал. Он исключительно для теста. Я прописал все настройки почты в файле process.php
Ахмет Шабакаев
Ахмет Шабакаев
А можете продемонстрировать, я несколько дней пытаюсь сделать отправку на почту сообщения, у меня в консоли нет ошибок, но выходит Result — error, я сам файл я редактировал и сохранял как надо.
Kasper
Kasper
укажите в process.php после блока"// обработка данных, посланных только методом POST (при остальных методах завершаем выполнение скрипта)" такую вещь:

ini_set('error_reporting', E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);

ТОгда в файле log информация будет более полная (обратите внимание на этот файл в соответ-ей папке).

А так, в настройках process.php (раздел 1 ЭТАП) у меня вот важные моменты:

MAIL_FROM = 'МОЙ_АДРЕС_ПОЧТЫ@yandex.ru', // от какого email будет отправляться письмо
MAIL_FROM_NAME = 'МОЙ_ДОМЕН… а вообще все равно что здесь будет', // от какого имени будет отправляться письмо
MAIL_ADDRESS = 'МОЙ_АДРЕС_ПОЧТЫ@yandex.ru', // кому необходимо отправить письмо
IS_SENDING_MAIL_VIA_SMTP = true, // выполнять отправку писем через SMTP
MAIL_SMTP_HOST = 'ssl://smtp.yandex.ru', // SMTP-хост
MAIL_SMTP_PORT = '465', // SMTP-порт
MAIL_SMTP_USERNAME = 'МОЙ_АДРЕС_ПОЧТЫ@yandex.ru', // SMTP-пользователь
MAIL_SMTP_PASSWORD = 'МОЙ_ПАРОЛЬ'; // SMTP-пароль

— это настройки для этапа тестирования. Они работают. Но я не уверен, что у вас проблема в них. Но может быть и в них

При данных настройках информация, которую я ввожу в своей форме обратной связи, приходит на 'МОЙ_АДРЕС_ПОЧТЫ@yandex.ru'.

И еще, тест делайте с сервера, где есть php не ниже версии какой-то (см. выше автора), не с локального компа.
Ахмет Шабакаев
Ахмет Шабакаев
А у вас какая версия формы? У меня 1.0, там 2 файла process.php и process_settings, настроек как вы указываете там нет.
Я пробовал использовать версию 2.0.1 с полем телефон, но она на этапе просто верстки вся расползается и я хз что с ней делать…
<img
src=«https://itchief.ru/assets/uploadify/d/0/d/d0dd0c50d099d2d228edf1c99b0ffd82s.jpg» class=«fancybox thumbnail center»>
Kasper
Kasper
получается я брал за основу 2-ю версию, но у меня свой дизайн формы, я использовал базу Александра, подключил её к своим полям обратной связи
1-ю версию даже не смотрел, мне нужны более широкие возможности были.
Александр Мальцев
Александр Мальцев
Если возникает такая ошибка, то значит, что файл «process.php» отрабатывает отлично, т.к. данные отправляются и в файле «log.txt» расположенном в log ошибок нет.
Но данный файл должен возвращать данные в формате JSON. Для этого он должен быть сохранён кодировке UTF-8 без BOM, в нем должны отсутствовать вывод всяких отладок, например таких:
ini_set('error_reporting', E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
Проверить это можно на вкладке Network в инструментах разработчика, для этого выберите файл «process.php» и посмотрите в каком формате он возвращает данные и их сами.
Если здесь всё ОК. То тогда нужно смотреть клиент (файл «process-forms.js»). Может вы как-то изменяли разметку и сейчас он просто не находит нужные элементы, и не может показать это сообщение.
Ахмет Шабакаев
Ахмет Шабакаев
Меня устраивает дизайн Александра, мне нужна как можно более простая форма, имя и телефон, в 2.0.1 все классно, но не могу настроить. буду «курить» дальше.
gularon
gularon
Здравствуйте. Не решили свою проблему? Мне тоже самую ошибку выдают. И ещё вопрос, «Прописал почту и необходимые данные в настройках» куда мне всё это прописывать, в этих формах не силён...))
Александр Александрович
Александр Александрович
В папке process файл называется process.php. В самом начале увидите 1 ЭТАП — НАСТРОЙКА ПЕРЕМЕННЫХ.
Попробуйте для начала отправлять почту pop
В этой строчке
IS_SENDING_MAIL_VIA_SMTP = true, // выполнять отправку писем через SMTP
Вместо true напишите false
И замените везде адрес почты куда отправлять и от какого имени. Письма скорее всего будут попадать в спам, но форма должна заработать
gularon
gularon
Да ладно)) Заработало, глазам своим не верю. Спасибо большое!
Артур
Артур
Добрый день, отличная форма.
Подскажите пожалуйста как сделать что бы поле сообщение можно было оставить пустым.
Редактирование и удаление php валидации результатов не дает, редактирование Index.html тоже не дает.
Единственное что получается это сократить минимальный размер сообщения до 1, но чтобы его можно было оставить пустым не выходит.
Александр Мальцев
Александр Мальцев
Привет! Спасибо!
В HTML у элемента убрать атрибут required, в process.php изменить обработку этого поля.
Т.е. оставить только это:
// проверка поля name 
if (isset($_POST['name'])) {
  $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
}
Александр
Александр
Здравствуйте, Александр. Очень давно искал такую форму. Но пока не справился с ней ))). Я сам от программирования далеко… Общался с тех. поддержкой хостинга. Коротко. Разместил файлы на сервере, выбрал отправку через SMTP. Прописал правильно host, port, пользователя, пароль. Тех поддержка хостинга подтвердила, что я сделал все верно. Но форма не работает (Исправьте данные и отправьте форму ещё раз.) Обратился опять в поддержку. Оказывается использовалась версия PHP 2, в настройках поправили на PHP3. Но и после этого форма не заработала. Последний ответ от поддержки хостинга:

Как можно увидеть в файле лога ошибок, теперь при отправке почты предыдущая ошибка с T_CONST не появляется. Т.е. эту проблему Вы исправили изменением версии PHP.
К сожалению, скрипт не записывает в файл лога error.log новую ошибку. Также ошибки не записываются в файл лога самого скрипта: ~/domains/trial-site.ru/html/feedback/logs/logs.txt
К сожалению, мы не занимаемся веб-разработкой, поэтому затрудняемся сказать, в чём проблема.
Пожалуйста, обратитесь к веб-разработчикам или авторам скрипта для получения дополнительной помощи.


Может вы что-то мне подскажите…
Александр Мальцев
Александр Мальцев
Здравствуйте! Версия PHP необходима не ниже 5.6. Посмотрите в браузере на вкладке Network в инструментах разработчика какой приходит ответ от сервера (process.php).
Александр
Александр
Александр. Спасибо за ответ. В браузере на вкладке Network в инструментах разработчика приходил ответ ошибка сервера. Перенесли сайт на сервер с PHP 5.6. Теперь в инструменте ошибок нет. Но вот что написала поддержка:
Мы изменили версию PHP на 5.6, при отправке формы больше нет ошибки сервера в инструментах разработчика, однако теперь в лог ошибок скрипта ( ~/domains/trial-site.ru/html/feedback/logs/logs.txt ) пишется ошибка соединения с SMTP сервером.
В файле настроек ~/domains/trial-site.ru/html/feedback/process/process.php настройки подключения к почтовому серверу указаны 100% корректно.
Пожалуйста, обратитесь за дальнейшей помощью к разработчику скрипта.


Александр Мальцев
Александр Мальцев
Необходимо проверить предоставляется ли на хостинге доступ к php-функции mail. Если да, то в этом случае нужно включать SMTP отладку и смотреть что возвращает почтовый сервер:
$mail->SMTPDebug = 4;
Александр
Александр
Александр. Форма на сайте заработала, но… Опять же цитирую техническую поддержку и прошу ее прокомментировать. Спасибо заранее.
Здравствуйте.

Выполнили дополнительное тестирование Вашего скрипта. Теперь получили от нашего почтового сервера уведомление, что сообщение было успешно доставлено. Пожалуйста, проверьте почтовый ящик на yandex, на который у Вас стоит перенаправление.

Дополнительно обращаем Ваше внимание, что при отправке отображается уведомление
«Исправьте данные и отправьте форму ещё раз. „
и в ответе в инструментах разработчика сохранилась ошибка
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 5 of the JSON data

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

Александр Мальцев
Александр Мальцев
Добрый день!
После того как вы всё отладили удалите строчку:
$mail->SMTPDebug = 4;
piu
piu
Добрый день, Александр, спасибо большое вам за такое легкое и грамотное решение из коробки, прям не нарадуюсь)) все работает, но осталось пара вопросов один из которых я сам решу, а второй что-то не получается… Нужна возможность подгружать большие файлы разных разрешений потому были правки кода:

___main.js
$(function () {
	var form1 = new ProcessForm({
		validFileExtensions:['jpg', 'jpeg', 'bmp', 'gif', 'png', 'ai', 'pdf', 'indl', 'cdr', 'eps', 'doc', 'docx', 'ppt', 'txt', 'rar', 'zip', 'tiff', 'tif', 'psd'],
		maxSizeFile: 2500,
});
	form1.init();
});
___process-form.js
maxSizeFile: 2500, // максмальный размер файла в мегабайтах
validFileExtensions: ['jpg', 'jpeg', 'bmp', 'gif', 'png', 'ai', 'pdf', 'indl', 'cdr', 'eps', 'doc', 'docx', 'ppt', 'txt', 'rar', 'zip', 'tiff', 'tif', 'psd'],
и____process.php
MAX_FILE_SIZE = 2500000000, // максимальный размер файла (в байтах)
  ALLOWED_EXTENSIONS = array('jpg', 'jpeg', 'bmp', 'gif', 'png', 'ai', 'pdf', 'indl', 'cdr', 'eps', 'doc', 'docx', 'ppt', 'txt', 'rar', 'zip', 'tiff', 'tif', 'psd'), // разрешённые расширения файлов
__________________________________________________________________________
Но скрипт все равно возвращает «неверное расширение» и «слишком большой файл»…
Всю голову сломал, что я не так сделал?
Александр Мальцев
Александр Мальцев
Здравствуйте!
Это ещё нужно разрешить на стороне сервера, например в ".htaccess".
Пример того, что нужно в него добавить есть в этом комментарии.
piu
piu
Спасибо, но с разрешением в .htaccess это понятно…
Не понятно почему он все равно мне возвращает, что расширение не разрешено?
Или я что-то не правильно разрешил?
Александр Мальцев
Александр Мальцев
Почти правильно.
Это достаточно установить в 2 местах:
— в process.php
— в любом месте после подключения файла process-forms.js:
var form1 = new ProcessForm({
  attachmentsMaxFileSize: 102400,
  attachmentsFileExt: ['jpg', 'jpeg', 'bmp', 'gif', 'png', 'ai', 'pdf', 'indl', 'cdr', 'eps', 'doc', 'docx', 'ppt', 'txt', 'rar', 'zip', 'tiff', 'tif', 'psd']
});
form1.init();
Если версия формы новая, то там название полей называются немного по-другому. А ошибки возникают при проверке на клиенте или после отправки формы на сервер?
Александр
Александр
Александр, день добрый.
У PHPMailer есть режим отладки SMTP соединения.
Например устанавливаем
$mail->SMTPDebug = 4
и получаем дам попытки соединения и отправки.
Подскажите, а существует-ли какая-то возможность направить вывод отладочного дампа в переменную, а не зразу «на экран»?
Александр
Александр
Вопрос снят, решил небольшой правкой класса SMTP.
Сергей Горин
Сергей Горин
Приветствую, Александр!
Огромное спасибо за Вашу работу, Вы всегда даёте нам очень ценную информацию!
По данной форме обратной связи есть такой вопрос: можно ли реализовать возможность удаления прикрепленных файлов с помощью дополнительной кнопочки типа ✖ или чего-то в этом роде? Например, я передумал отправлять один или несколько уже прикрепленных файлов. На моём скриншоте показан пример, с помощью CSS это оформить легко, но в JS я, к сожалению, не силён. Покажите, пожалуйста, как это реализовать в Вашей форме.
Заранее спасибо!
Скриншот: /assets/uploadify/8/3/8/838608aac6305a7f3665dae9fc25ddb4.png
Александр Мальцев
Александр Мальцев
Привет! Спасибо за добрые слова.
Отличное дополнение для формы, эту возможность уже добавил. Скачать форму с этими обновлениями можно с GitHub.
Александр
Александр
Александр, приветствую.
Если отправлять форму phpMail на ящики yandex.ru или mail.ru то:
1. Яндекс не пропускает, если $mail->IsHTML(true); (185 строка файла process.php)
2. Мэйл в принципе отбивает с сообщением «550 Sorry, we do not accept mail from hosts with dynamic IP or generic DNS PTR-records. Please get a custom reverse DNS name from your ISP for your host 00.00.00.000 or contact abuse@corp.mail.ru in case of error» (ip хоста изменен).

Яндекс пропускает письмо, если $mail->IsHTML(false);

Соответственно вопросы:
1. Можно-ли как-то на отправлять письмо с $mail->IsHTML(true) яндексу, чтобы он его пропустил.
2. Можно-ли как-то «обмануть» Мэйл?
Александр
Александр
под phpMail я имел в виду отправку функцией php mail() (не пропуская письмо через ящик на почтовом сервере)
Александр Мальцев
Александр Мальцев
Привет!
Если так нужно, то тогда только экспериментировать.
Я не использую такие сценарии. Обычно использую сервис «Почта для домена», который, например предлагает Яндекс или использую возможности хостинга, если он имеет возможность подписывать письма с помощью DKIM-подписи. Отправку писем всегда выполняю через протокол SMTP.
Vit
Vit
Здравствуйте, Александр, с наступающим!
Установил новую Вашу форму
github.com/itchief/feedback-form/archive/v.2.0.2.zip
настройку делал для SMTP (аналогично с
itchief.ru/php/feedback-form-for-website#comment-7318
при этом файлы загружаемые благополучно загружаются (правда их имена в виде крякозябров), но само письмо форма НЕ отсылает. Все поля зеленые (т.е. форма отработала нормально) – только появляется в конце ошибка — Исправьте данные и отправьте форму ещё раз.
В логах единственное, что нашел:
FastCGI sent in stderr: "PHP message: PHP Notice:  Undefined variable: startPath in /feedback/process/process.php on line 174" while reading response header from upstream, client:, server: site.ru, request: "POST /feedback/process/process.php HTTP/1.1", upstream: "fastcgi://unix:/var/run/php-fpm/user.sock:", host: "site.ru", referrer: https://site.ru/feedback/
в строчке 174 файла process.php:
$listFiles .= '<li><a href="' . $startPath . $fileHref . '">' . $fileName . '</a></li>';
Александр Мальцев
Александр Мальцев
Это не ошибка, а предупреждение.
Попробуйте закомментировать следующее и отправить форму ещё раз:
// отправляем письмо
//if (!$mail->send()) {
//  $data['result'] = 'error';
//}
Если в браузере теперь появится сообщение об успешной отправке, значит какая-то ошибка возникает при отправке. В этом случае нужно включать режим отладки при отправке и смотреть почему это происходит.
Vit
Vit
При просмотре в режиме отладки появляется ошибка
SMTP Error: Could not authenticate.
CLIENT -> SERVER: QUIT
SMTP INBOUND: "221 2.0.0 Bye"
SERVER -> CLIENT: 221 2.0.0 Bye
Connection: closed
Эта ошибка похожа на ту, о которой уже сообщалось в комментариях ниже
но решение для моей ошибки не подошло.

Александр Мальцев
Александр Мальцев
У вас другая ошибка. Вам нужно проверить имя пользователя, пароль, SMTP порт и SMTP хост.
Vit
Vit
данные параметры скопировал из дефолтных настроек обратной формы сайта:
  $mail->Host = 'ssl://site.com';
  $mail->Port = 465;
  $mail->Username = 'email@site.com';
  $mail->Password = 'pass';
тут ошибку трудно совершить.
Причем дефолтная обратная связь сайта (на старой jQuery v2.1.1) с данными настройками работает (в ней единственное еще отличие таймаут указывается 5), а новая — не хочет.
Александр Мальцев
Александр Мальцев
Тогда включайте отладку и смотрите что возвращает сервер:
$mail->SMTPDebug = 3;
Vit
Vit
Connection: opening to ssl://smtp.site.com:465, timeout=300, options=array()
Connection: opened
SMTP INBOUND: "220 smtp.site.com ESMTP Postfix"
SERVER -> CLIENT: 220 smtp.site.com ESMTP Postfix
CLIENT -> SERVER: EHLO site.com
SMTP INBOUND: "250-smtp.site.com"
SMTP INBOUND: "250-PIPELINING"
SMTP INBOUND: "250-SIZE 20000000"
SMTP INBOUND: "250-ENHANCEDSTATUSCODES"
SMTP INBOUND: "250-8BITMIME"
SMTP INBOUND: "250 DSN"
SERVER -> CLIENT: 250-smtp.site.com250-PIPELINING250-SIZE 20000000250-ENHANCEDSTATUSCODES250-8BITMIME250 DSN
SMTP Error: Could not authenticate.
CLIENT -> SERVER: QUIT
SMTP INBOUND: "221 2.0.0 Bye"
SERVER -> CLIENT: 221 2.0.0 Bye
Connection: closed
SMTP connect() failed. https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting
{"result":"error","log":["SMTP connect() failed. https:\/\/github.com\/PHPMailer\/PHPMailer\/wiki\/Troubleshooting"]}
Василий
Василий
Здравствуйте уважаемый, Александр Мальцев
Замечательное решение и в тоже время не могу понять по какой причине в рандомном количестве приходят письма из формы! То 2 то 3 то 5 но чаще всего их падает по пять!
В чем может быть причина? подскажите пожалуйста.

с уважением
Александр Мальцев
Александр Мальцев
Добрый день! При отправке письма у вас должен вызываться один раз php скрипт, указанный в JavaScript. Чтобы это проверить, откройте инструменты разработчика в браузере, перейдите на вкладку Network, установите фильтр на XHR и посмотрите сколько раз у вас вызывается php скрипт при отправке формы. Если несколько раз, то смотрите как вы настроили JavaScript, что-то у вас реализовано не так, как нужно.
Тимофей
Тимофей
Здравствуйте, не совсем понял почему при открытие формы высвечивается текст что все отправлено когда форма даже не заполнялась, так сразу из архива. Что то я не увидел-прочел?
Александр Мальцев
Александр Мальцев
Добрый день! Проверьте подключение CSS И JavaScript файлов к странице.
Тимофей
Тимофей
Как именно это сделать? Я не добавлял пока на сайт, решил так проверить, посмотреть. Закинул в Денвер, открыл index.html, и получается шаблон формы а поверх них, данные отправлены успешно нажмите ссылку…
Александр Мальцев
Александр Мальцев
Проверьте, вы должны поместить папку feedback из архива в корень сайта.
После этого в браузере открыть страницу (вместо localhost указать свой хост):
http://localhost/feedback/
AV
AV
Александр доброй ночи! Отличная форма! 2 вопроса:
1. как сделать так, чтобы в начальном состоянии флажок согласия на обработку персональных данных уже стоял и кнопка для отправки была активна?
2. после отправки формы и нажатия на ссылку для повторной отправки, кнопка «отправить сообщение» находится в активном состоянии, а флажок при этом не стоит — как-то не логично. Как сделать так чтобы галочка тоже стояла?
Александр Мальцев
Александр Мальцев
Привет! Спасибо!
Форму можно настроить так как нужно в конкретном случае.
Эти задачи решаются простым редактированием HTML кода формы.
Чтобы флажок согласия на обработку был активен по умолчанию к нему нужно добавить атрибут checked:
<input type="checkbox" name="agree" class="custom-control-input" id="customCheck" checked>
Чтобы кнопка была активна у неё нужно удалить атрибут disabled:
<button type="submit" class="btn btn-primary position-relative">Отправить сообщение</button>
AV
AV
Отлично, спасибо большое!
Accer de Cuba
Accer de Cuba
Добрый день, Александр!
«Исправьте данные и отправьте форму ещё раз» уже замучило. Все поля в зеленой рамке. В консоле XHR process.php Response: {«result»:«error»}
ini_set('error_reporting', E_ALL); ini_set('display_errors', 1); ini_set('display_startup_errors', 1); перед header вставил,
<form id=«feedback-form» action=«feedback/process/process.php» вставил method=«post»…
Помогите разобраться!
Спасибо!
Александр Мальцев
Александр Мальцев
Привет! Если поля зелёные, то значит они проходят проверку на сервере. Тут проблема скорее всего с отправкой email письма.
$mail->send()
Если вы тестируете форму на сервере, то проверьте поддерживает ли хостинг вообще отправку писем. В основном эта возможность предоставляется только на платных тарифах.
Если с этим всё хорошо, то проверьте настройки (значения переменных) связанные с почтой.
Алексей
Алексей
Добрый вечер! Александр, столкнулся со следующей проблемой: на странице форма (1)+ формы обратной связи в мод. окнах(2). Отправляя форму 1 происходит переадресация на страницу «спасибо» В модальном окне почему-то переадресация зависает. Появляется зеленая галочка, пробегает полоса загрузки и все, форма остается. Данные с нее приходят, но на страницу спасибо не перекидывает. Подскажите пожалуйста куда копать?
Александр Мальцев
Александр Мальцев
Привет! А как реализовали? Может где-то что-то упустили.
Алексей
Алексей
Может что-то с переходом на протокол https связано!? Так-как на других сайтах (на http) такая реализация работала. Может на самом деле просто допустил ошибку.
tanya_slimak
tanya_slimak
Добрый день.

Помогите, пожалуйста, правильно составить формулу, хотим добавить защиту от спама, получили ключи от гугл recaptcha, но не получается присоединить к скрипту обратной формы, я если в этом вообще не разбираюсь??

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

Имеем следующий скрипт:
<?php
if (isset ($_POST['contactFF'])) {
$to = «auto@avexcom.ru»;
$from = $_POST['contactFF'];
$subject = «Заполнена контактная форма с ».$_SERVER['HTTP_REFERER'];
$message = «Имя: ».$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
$boundary = md5(date('r', time()));
$filesize = '';
$headers = «MIME-Version: 1.0\r\n»;
$headers .= «From: ». $from. "\r\n";
$headers .= «Reply-To: ». $from. "\r\n";
$headers .= «Content-Type: multipart/mixed; boundary=\»$boundary\"\r\n";
$message="
Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary
Content-Type: text/plain; charset=\«utf-8\»
Content-Transfer-Encoding: 7bit

$message";
for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
$attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
$filename = $_FILES['fileFF']['name'][$i];
$filetype = $_FILES['fileFF']['type'][$i];
$filesize += $_FILES['fileFF']['size'][$i];
$message.="
--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"
$attachment";
}
}
$message.="
--$boundary--";

mail($to, $subject, $message, $headers);
$output = '';

<!DOCTYPE HTML>

Контактная форма


<?php echo $output; ?>
Имя:
Email:
Прикрепить файл: Сообщение:









Вот скрипт для recaptcha:



этот фрагмент как я поняла надо поставить в самый конец после

Но совсем не могу понять куда надо вставить этот файл я впервые это делаю.
$secret=«ххххххххххххххххххххххххххххххххххх»;
$response = null;
$reCaptcha = new ReCaptcha($secret);
if ($_POST[«g-recaptcha-response»]) {
$response = $reCaptcha->verifyResponse(
$_SERVER[«REMOTE_ADDR»],
$_POST[«g-recaptcha-response»]
);
}
if ($response != null && $response->success) {
// Капча проверена!!!
} else {
error(«Не верная капча. Попробуйте ещё раз.»);
}

Как я поняла у меня не происходит проверки на наличие ответа ReCaptcha перед отправкой письма, пробовала так:
<?php
if (isset ($_POST['contactFF'])) {
$to = «auto@avexcom.ru»;
$from = $_POST['contactFF'];
$subject = «Заполнена контактная форма с ».$_SERVER['HTTP_REFERER'];
$message = «Имя: ».$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
$boundary = md5(date('r', time()));
$filesize = '';
$headers = «MIME-Version: 1.0\r\n»;
$headers .= «From: ». $from. "\r\n";
$headers .= «Reply-To: ». $from. "\r\n";
$headers .= «Content-Type: multipart/mixed; boundary=\»$boundary\"\r\n";
$message="
Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary
Content-Type: text/plain; charset=\«utf-8\»
Content-Transfer-Encoding: 7bit

$message";
for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
$attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
$filename = $_FILES['fileFF']['name'][$i];
$filetype = $_FILES['fileFF']['type'][$i];
$filesize += $_FILES['fileFF']['size'][$i];
$secret=«ххххххххххххххххххххххххххх»;
$response = null;
$reCaptcha = new ReCaptcha($secret);

$message.="
--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"
$attachment";
}
}
$message.="
--$boundary--";

mail($to, $subject, $message, $headers);
$output = '';
if ($_POST[«g-recaptcha-response»]) {
$response = $reCaptcha->verifyResponse(
$_SERVER[«REMOTE_ADDR»],
$_POST[«g-recaptcha-response»]
);
}
if ($response != null && $response->success) {
// Капча проверена!!!
} else {
error(«Не верная капча. Попробуйте ещё раз.»);
}

}
?>

<!DOCTYPE HTML>
… И далее, как в скрипте
tanya_slimak
tanya_slimak
Скрипт скопировался не полный avexcom.ru/raschet-ushcherba-avtomobilya-amts/
Александр Мальцев
Александр Мальцев
Если код взят не из этой темы, то этот вопрос лучше поместить в раздел Вопросы, т.к. он не имеет прямого отношения к этой теме.
tanya_slimak
tanya_slimak
Добрый день.

Помогите, пожалуйста, правильно составить формулу, хотим добавить защиту от спама, получили ключи от гугл recaptcha, но неполучается присоединить к скрипту обратной формы, я если в этом вообще не разбираюсь??

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

Имеем следующий скрипт:
<?php
if (isset ($_POST['contactFF'])) {
$to = «хххх@avexcom.ru»;
$from = $_POST['contactFF'];
$subject = «Заполнена контактная форма с ».$_SERVER['HTTP_REFERER'];
$message = «Имя: ».$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
$boundary = md5(date('r', time()));
$filesize = '';
$headers = «MIME-Version: 1.0\r\n»;
$headers .= «From: ». $from. "\r\n";
$headers .= «Reply-To: ». $from. "\r\n";
$headers .= «Content-Type: multipart/mixed; boundary=\»$boundary\"\r\n";
$message="
Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary
Content-Type: text/plain; charset=\«utf-8\»
Content-Transfer-Encoding: 7bit

$message";
for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
$attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
$filename = $_FILES['fileFF']['name'][$i];
$filetype = $_FILES['fileFF']['type'][$i];
$filesize += $_FILES['fileFF']['size'][$i];
$message.="
--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"
$attachment";
}
}
$message.="
--$boundary--";

mail($to, $subject, $message, $headers);
$output = '';

}
?>

<!DOCTYPE HTML>

Контактная форма


<?php echo $output; ?>
Имя:
Email:
Прикрепить файл: Сообщение:









Вот скрипт для recaptcha:



этот фрагмент как я поняла надо поставить в самый конец после



Но совсем не могу понять куда надо вставить этот файл я впервые это делаю.
$secret=«хххххххххххххххххххххххх»;
$response = null;
$reCaptcha = new ReCaptcha($secret);

if ($_POST[«g-recaptcha-response»]) {
$response = $reCaptcha->verifyResponse(
$_SERVER[«REMOTE_ADDR»],
$_POST[«g-recaptcha-response»]
);
}
if ($response != null && $response->success) {
// Капча проверена!!!
} else {
error(«Не верная капча. Попробуйте ещё раз.»);
}

Как я поняла у меня не происходит проверки на наличие ответа ReCaptcha перед отправкой письма:
<?php
if (isset ($_POST['contactFF'])) {
$to = «хххх@avexcom.ru»;
$from = $_POST['contactFF'];
$subject = «Заполнена контактная форма с ».$_SERVER['HTTP_REFERER'];
$message = «Имя: ».$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
$boundary = md5(date('r', time()));
$filesize = '';
$headers = «MIME-Version: 1.0\r\n»;
$headers .= «From: ». $from. "\r\n";
$headers .= «Reply-To: ». $from. "\r\n";
$headers .= «Content-Type: multipart/mixed; boundary=\»$boundary\"\r\n";
$message="
Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary
Content-Type: text/plain; charset=\«utf-8\»
Content-Transfer-Encoding: 7bit

$message";
for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
$attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
$filename = $_FILES['fileFF']['name'][$i];
$filetype = $_FILES['fileFF']['type'][$i];
$filesize += $_FILES['fileFF']['size'][$i];
$secret=«хххххххххххххххххххххххххх»;
$response = null;
$reCaptcha = new ReCaptcha($secret);

$message.="
--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"
$attachment";
}
}
$message.="
--$boundary--";

mail($to, $subject, $message, $headers);
$output = '';
if ($_POST[«g-recaptcha-response»]) {
$response = $reCaptcha->verifyResponse(
$_SERVER[«REMOTE_ADDR»],
$_POST[«g-recaptcha-response»]
);
}
if ($response != null && $response->success) {
// Капча проверена!!!
} else {
error(«Не верная капча. Попробуйте ещё раз.»);
}

}
?>
Александр Мальцев
Александр Мальцев
Если письма попадают в спам, то скорее всего они не имеют DKIM-подпись. Как настроить Google reCaptcha можно посмотреть здесь или тут.

Sergey
Sergey
Александр, добрый день!
Пробую установить форму на свой сайт.
После заполнения полей и нажатию кнопки вываливает сообщение как уже писал тут «Исправьте данные и отправьте форму ещё раз»
Я комментировал отправку почты, коментил проверку капчи. Все не помогло.
В сети в этот момент ошибка 500 xhr
Попробовал с текущего сайта и GitHub
Подскажите, пожалуйста, что еще можно предпринять
Александр Мальцев
Александр Мальцев
Добрый день! Попробуйте проверить настройки конфигурационного файла веб-сервера или убрать его на время (для Apache — это «.htaccess»). Также можно обратиться к «process.php» напрямую и посмотреть, что он возвращает.
Для отладки в «process.php» можно добавить строки:
ini_set('error_reporting', E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
После этого будут выводиться все ошибки.
Кроме этого, нужно проверить права доступа к файлам. Для отладки можно просто выставить папке feedback и всему что там находится 777.
Сергей
Сергей
Здравствуйте, как настроить отправку письма написано Исправьте данные и отправьте форму ещё раз. хост inmotionhosting.com
вот что написали тех поддержка
Username: mail@razvitiesluha.ru
Password: Use the email account’s password.
Incoming Server: razvitiesluha.ru
IMAP Port: 993

POP3 Port: 995
Outgoing Server: razvitiesluha.ru
SMTP Port: 465
IMAP, POP3, and SMTP require authentication.
Евгений
Евгений
Александр, подскажите, форма с коробки 2.0.3, настроили отправку используя smtp, письмо не приходит.
$mail->SMTPDebug = 3; выдало сообщение
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 5 of the JSON data

Форма которая была в комментах ссылка работает корректно!

В форму 2.0.3 поправок не вносили кроме правки smtp
Александр Мальцев
Александр Мальцев
Не знаю, протестировал форму с последними версиями файлов с github, т.к. и 2.0.2 — всё нормально. Проверку выполнял на виртуальном хостинге.
Использовал следующие настройки:
// устанавливаем параметры
$mail = new PHPMailer;
$mail->CharSet = 'UTF-8';

// Настройки SMTP
$mail->isSMTP();
$mail->SMTPAuth = true;
$mail->SMTPDebug = 0;
$mail->Host = 'ssl://smtp.yandex.ru';
$mail->Port = 465;
$mail->Username = 'Логин';
$mail->Password = 'Пароль';

$mail->Encoding = 'base64';
$mail->IsHTML(true);
$mail->setFrom(MAIL_FROM, MAIL_FROM_NAME);
$mail->Subject = MAIL_SUBJECT;
$mail->Body = $bodyMail;
Ну и конечно установил нужные адреса в константах:
MAIL_FROM = '...', // от какого email будет отправляться письмо
MAIL_ADDRESS = '...', // кому необходимо отправить письмо
Евгений
Евгений
С вашими настройками, пишет что сообщение отправлено успешно.
Но на почту оно не приходит(((
Евгений
Евгений
Если $mail->SMTPDebug = 4;
Александр Мальцев
Александр Мальцев
А у тебя какая версия php? Попробуй обновить или изменить на более новую.
Евгений
Евгений
Пробовал на 7.0 и 7.1
Еще раз повторюсь та форма которая была по ссылке в комментах работает корректно не зависимо от версии php. А вот форма которая на гитхабе с настройками smtp не отправляет(((
Евгений
Евгений
Добрый день!
Огромное спасибо за форму, лучшего решения в рунете найти думаю не реально.
Александр, подскажите как реализовать в вашей форме отправку значений выбранных флажками (checkbox)
Заранее, Спасибо!
Александр Мальцев
Александр Мальцев
Добрый! Спасибо!
Вам нужно просто добавить чекбоксы в форму. Скрипт JavaScript самостоятельно собирёт их значения и отправит их на сервер (если они конечно checked). Тут больше никаких действий выполнять не надо.
Например, добавление в форму одиночного чекбокса с именем one:
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="checkbox-one" name="one" value="один">
  <label class="custom-control-label" for="checkbox-one">заголовок чекбокса</label>
</div> 
На сервере (в php) его можно будет получить так:
if (isset($_POST['one'])) {
  // $_POST['one'] - значение чекбокса one
}
Если чекбокс не checked, то на сервер он не отправляется.

Например, добавление в форму нескольких чекбоксов с одним именем multi[] (как массив):
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="multi-1" name="multi[]" value="один">
  <label class="custom-control-label" for="multi-1">multi-1</label>
</div>    
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="multi-2" name="multi[]" value="два">
  <label class="custom-control-label" for="multi-2">multi-2</label>
</div>
На сервере (в php) их можно будет получить так:
if (isset($_POST['multi'])) {
  if (is_array($_POST['multi'])) {
    foreach ($_POST['multi'] as $value) {
      // $value - значение элемента  
    }
  }
}
Владимир
Владимир
Александр, благодарю за огромнейшие труды! Я так понял код вше нужно вставить в process.php и создать в tpl соответствующее место, но на почту всеравно приходять пустые значения. Нужно ли для чекбоксов реализовывать валидацию и как-то еще дорабатывать скрипт?
Александр Мальцев
Александр Мальцев
Спасибо! Вот готовый пример формы с чекбоксами. Посмотрите как там всё реализовано.
Oleksa
Oleksa
Добрый день, Александр!
Большое вам спасибо за вашу работу. Форма и инструкция по ее изменению написаны интуитивно понятно.
Форму поставил себе на сайт и настроил, правда пришлось включать отправку почты через SMTP.
Но нет предела совершенству.
Возникла необходимость добавить детализирующие radio к одному из полей. Пользователь заполняет само поле и по желанию доп. radio.
Поле, которое будет детализироваться:

<div class="form-group border border-dark p-2 rounded bg-light">            
<input type="text" class="form-control" id="Standard" name="Standard" placeholder="Стандарт" value="">            
</div>

Checkbox для скрытия/показа доп. полей:

<div class="custom-control was-validated custom-checkbox mb-3">
 <input type="checkbox" class="custom-control-input" name="Detailed" value="DetailedOn" id="hidediv" novalidate>
 <label class="custom-control-label" for="hidediv">Расширенные параметры:</label> 
</div>

Собственно сам DIV:

<div class="form-group has-feedback" id="myDIV">
  <label for="mmORtpi" class="control-label">Выберите единицу измерения:</label>
  <!-- Выберите единицу измерения: -->
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" name="mmORtpi" value="mm" id="mmORtpi-mm" required>
    <label class="custom-control-label" for="mmORtpi-mm">мм</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" name="mmORtpi" value="tpi" id="mmORtpi-tpi" required>
    <label class="custom-control-label" for="mmORtpi-tpi">tpi</label>
  </div>                         
  <span class="glyphicon form-control-feedback"></span>
  <p class="error"></p>
</div>

JS script, который а) при загрузке страницы скрывает "myDIV" б) Показывает, если включен checkbox "hidediv":

<script>
var btn = document.querySelector('#hidediv');
var x = document.getElementById("myDIV");
document.addEventListener('DOMContentLoaded', function() {
    x.style.display = "none";
}, false);
btn.addEventListener('click',method1);
function method1(){
  if (btn.checked) {
    x.style.display = "block";        
  } else {
    x.style.display = "none";
  }
}
</script>

Собственно проблема в том, что не хватает знаний, как настроить в process.php валидацию radio «mmORtpi», чтобы она зависила от состояния checkbox #hidediv.
Буду признателен за помощь.
Александр Мальцев
Александр Мальцев
Добрый день!
Тут вам сначало нужно проверить установлен ли чекбокс, и если да, то проверить уже «mmORtpi».
if (isset($_POST['Detailed'])) { // если установлен чекбокс "Расширенные параметры"
  if (isset($_POST['mmORtpi'])) {
    $mmORtpi = filter_var($_POST['mmORtpi'], FILTER_SANITIZE_STRING);
    if ($mmORtpi <> 'mm' || $mmORtpi <> 'tpi') {
      $data['mmORtpi'] = 'Единица измерения установлена не корректно';
      $data['result'] = 'error';
    }
  } else {
    $data['mmORtpi'] = 'Заполните это поле.';
    $data['result'] = 'error';
  }
}
Oleksa
Oleksa
Спасибо, Александр!
Все вроде просто, но «не шмогла» :-)))
С вашей помощью все заработало!
Alexander
Alexander
Добрый день, Александр!
Большое вам спасибо за ваш сайт, и работу которую вы для всех нас делаете.
Я давно использую вашу форму обратной связи, на разных сайтах и никогда не было проблем.
Всё идеально работает.
Но сейчас начал использовать:
«Bootstrap 4 — Сборка проекта с помощью Gulp», и столкнулся с проблемой.
Нужна ваша помощь.
Не отображается фоновая картинка «captcha»
<img src="" />
Я выкладывал на хост готовый проект, результат тот же не отображается.
Подскажите в какую сторону смотреть.
Александр Мальцев
Александр Мальцев
Привет! Благодарю за отзыв.
Это скорее связано с тем, что у тебя не подключено или не установлено расширение gd для php. В captcha.php используются функции из этого пакета.
У меня было нечто похожее под WSL в Windows 10. Устранил я это с помощью установки расширения gd:
sudp apt-get install php-gd
Если это у тебя на локальном сервере, то тогда нужно в файле php.ini расскомментировать строчку, отвечающую за подключение этого расширения.
Если на хостинге, то тогда можно обратиться в техподдержку чтобы они подключили это расширения или подсказали как это сделать.

Для дебага файла captcha.php в него можно добавить строчки для вывода всех ошибок, чтобы видеть в каком месте они произошли, а также получить более детальную информацию по ним:
ini_set('error_reporting', E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
После этого открыть в браузере страницу в браузере:
http://localhost/feedback/captcha/captcha.php
Alexander
Alexander
Спасибо вам огромное!
sudp apt-get install php-gd
Решило все проблемы на локальном сервере.
С хостом уверен справлюсь.

P.S. Я видел в каком-то вашем посте, что в знак признательности вам можно перечислить сумму.
Но если я не ошибаюсь там у вас Yandex, к сожалению этот способ для меня не подходит.
Есть ли у вас PayPal.
Александр Мальцев
Александр Мальцев
Пожалуйста. На этой странице.
Константин
Константин
Здравствуйте, у меня такая же проблема как и у предыдущего человека. «Пожалуйста исправьте данные и отправьте форму ещё раз, при это все поля зеленые». Такая ошибка появляется на удаленном сервере (smtp настройки не помогли), а на локальном все работает. на удаленном сервере sendmail, smtp на удаленном сервере установлены. Может какие-то для меня не очевидные настройки есть? (в сайтостроении новичок).

Может где нужно указать только 1 файл для отправки…
Александр Мальцев
Александр Мальцев
Здравствуйте!
Скорее что-то с отправкой. Попробуйте закомментировать отправку почты:
/*
if (!$mail->send()) {
  $data['result'] = 'error';
}
*/
Если у вас после этого появится сообщение об успешной отправке, то значит у вас происходит ошибка при отправке сообщения на email.
В этом случае вам необходимо проверить правильность своих настроек почты или написать хостеру.

Количество файлов для отправки настраивается с помощью атрибута data-counts:
<div class="attachments" data-counts="5">
Роман
Роман
Еще можно вместо комментирования (или вместе с ним) добавить
if(!$mail->send()) {
echo 'Message could not be sent.';
echo 'Mailer Error: '. $mail->ErrorInfo;
} else {
echo 'Message has been sent';
}
выведется какая-то человеческая ошибка в консоль, я для себя так и смог и правильно задать вопрос гуглу)
Константин
Константин
Да, отправка не работает, а на какие настройки почты мне нужно обратить внимание?
Александр Мальцев
Александр Мальцев
Воспользуйтесь советом Романа, который он предложил в этом комментарии.
Константин
Константин
Ура, ошибки были у меня: не указал в настройках procces.php почтовый адрес — куда отправляется почта. Теперь все работает!!!

Форма обратной связи — действительно зачетная!
Роман
Роман
Здравствуйте! Получаю ошибку Пожалуйста исправьте данные и отправьте форму ещё раз, при это все поля зеленые. На двух разных конфигурациях web server-ов, подскажите пожалуйста как можно отловить что не так? В dev tools — network вижу такой результат:

Request Method: POST
Status Code: 200 OK
Remote Address: — (тут данные удалил специально)
Referrer Policy: no-referrer-when-downgrade

В response соответственно error. Пробовал как и свою доработанную версию (удалил там каптчу, приложение файлов), так и чистую версию с сайта без каких-то доработок(добавил в корень сайта папку feedback, в process.php поменял почту получателя только).
Роман
Роман
Решил для себя проблему добавлением smtp в функцию отправки по формату
$mail->IsSMTP(); // telling the class to use SMTP
$mail->SMTPAuth = true; // enable SMTP authentication
$mail->Host = «mail.yourdomain.com»; // set the SMTP server
$mail->Port = 26; // set the SMTP port
$mail->Username = «yourname@yourdomain»; // SMTP account username
$mail->Password = «yourpassword»; // SMTP account password
Самое парадоксальное что на одном из трех веб-серверов все отправлялось и так, причем два сервера по идею имеют одинаковый конфиг (MAMP для Windows и для MacOS), а работают со скриптом по-разному.
Александр Мальцев
Александр Мальцев
Отлично! Конечно, лучше использовать SMTP.
Wird
Wird
Добрый день Александр! Не перестаю хвалить ваш скрипт формы )
Но мне кажется у меня она как-то не правильно работает. Я уже писал вам с просьбой написать как сделать появление валидации до нажатия на галочку согласия с условиями. Но сейчас у меня ошибки валидации не исчезают совсем. Даже после нажатия на кнопку обновить. Если не сложно — подскажите где кроется этот код и где что поправить. Хотелось бы чтобы после повторного нажатия на кнопку отправить при правильной валидации исчезали ошибки.
yadi.sk/i/WugtzvpVx9ZuGA
Заранее огромное спасибо
Александр Мальцев
Александр Мальцев
Добрый день. Очистка формы осуществляется посредством функции _showForm, находящейся в файле «process-form.js».
Wird
Wird
Хорошо, спасибо, рассмотрю функцию поближе
Архаил
Архаил
Добрый день. Подскажите пожалуйста. Я отправляю файл на сервер для записи данных в БД, методом Ajax, указываю dataType: 'text', в место dataType: 'json' обратно мне надо вернуть массив с сервера для вывода на страницу. Мне приходит от сервера строка в другой кодировке \u0418\u0432\. Как мне нормально можно получить и обработать массив отправленный с сервера?
Александр Мальцев
Александр Мальцев
Добрый! Лучше использовать JSON. Массив, который нужно вернуть, просто назначьте в качестве значения одному из ключей JSON.
Wird
Wird
Добрый день Александр! Подскажите пожалуйста, как можно исправить…
drive.google.com/file/d/14Smb0u0eQsZlPLxher5omE7V813MP86t/view?usp=sharing

Тело в том что валидация запускается, только если согласиться с условиями, а пока галочка отжата — при нажатии на отправку ничего не происходит… как можно иницировать валидацию до нажатия на галочку?

Заранее спасибо
Александр Мальцев
Александр Мальцев
Добрый день!
Основные действия:
1. Убрать в HTML коде у кнопки «Отправить сообщение» атрибут disabled.
2. Добавить к checkbox с name=«agree» атрибут required.
3. Закомментировать следующие строчки в файле «process-forms.js»:
 // переключить во включенное или выключенное состояние кнопку submit
 var _changeStateSubmit = function (form, state) {
   //$(form).find('[type="submit"]').prop('disabled', state);
 };
// изменение состояния кнопки submit в зависимости от состояния checkbox agree
var _changeAgreement = function (form, state) {
  //_changeStateSubmit(form, state);
};
4. Удалить [name=«agree»] из строчки:
$(form).find('input, textarea').not('[type="file"]').each(function () {
Wird
Wird
Спасибо большое Александр!
Олег
Олег
Добрый день Александр! Давно пользуюсь формой обратной связью очень доволен, большое спасибо! Но есть некоторые нюансы. Хочу отключить Капчу но всё без успешно, форма не последней версии у меня установлен, если не ошибаюсь (версия 1.0.0.0) для Bootstrap 3, сетка сайта у меня так и есть стоит Bootstrap 3. Пробовал поставить версию (формы версия 2.0.2) где легко отключается Капчу, но к сожалению не хочет работать точней работает но на половину, т.е. при отправке писем уходит и приходит по назначению, а вот на сайте не появляются всплывающие окна с сообщениями например как (Ваше сообщение отправлено и т.д.) при этом форма не обновляется, скажем зависает. По этому я остановился на (версия 1.0.0.0) поскольку прекрасно работает. Александр если не сложно помогите пожалуйста, как можно отключить Капчу в форме версии 1.0.0.0?
Александр Мальцев
Александр Мальцев
Добрый! Новая версия работает с использованием Bootstrap 4. Поэтому у вас что-то может не работать на Bootstrap 3. Укажите ссылку на эту версию?
Denis
Denis
Добрый день!
Александр подскажи как к форме правильно подключить Чекбоксы и кнопки «радио» (особенно радио кнопки), с проверкой в файле php. За ранее спасибо.
Denis
Denis
С помощью знаний которые освоил с вашими уроками, я смог сам реализовать данную возможность. Но хотелось бы посмотреть ваш вариант. Спасибо большое за ваши труды. Жизнь стала еще интересней.
Александр Мальцев
Александр Мальцев
Пример, как можно вставить радиокнопки в форму.
1. Добавляем их в HTML форму:
<div class="form-group">
  Выберите цвет:
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" name="color" value="green" id="color-green" required>
    <label class="custom-control-label" for="color-green">
      Зеленый
    </label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" name="color" value="red" id="color-red" required>
    <label class="custom-control-label" for="color-red">
      Красный
    </label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" name="color" value="yellow" id="color-yellow" required>
    <label class="custom-control-label" for="color-yellow">
      Желтый
    </label>
    <div class="invalid-feedback"></div>
  </div>
</div>
2. Выполняем обработку значения радиокнопки в process.php:
const ALLOWED_COLORS = array('green' => 'Зеленый', 'red' => 'Красный', 'yellow' => 'Желтый');
...
// проверка поля color
if (isset($_POST['color'])) {
  $color = filter_var($_POST['color'], FILTER_SANITIZE_STRING);
  if (!array_key_exists($color, ALLOWED_COLORS)) {
    $data['color'] = 'Указан не правильный цвет.';
    $data['result'] = 'error';
  }
} else {
  $data['color'] = 'Заполните это поле.';
  $data['result'] = 'error';
}
...  
$bodyMail = str_replace('%email.color%', ALLOWED_COLORS[$color], $bodyMail);
Архив формы можно загрузить отсюда.
Denis
Denis
Спасибо! У вашей формы PHP реализован по другому. Буду пробовать ваш вариант.
Denis
Denis
Добрый день!
Александр, подскажите как с помощью вашей формы реализовать функционал отправки письма в формате pdf?
За ранее спасибо!
Александр Мальцев
Александр Мальцев
Добрый!
Это можно реализовать, например, с помощью php библиотеки Dompdf. С помощью неё можно преобразовать подготовленный HTML код в pdf-файл, а затем прикрепить его к письму в качестве вложения.

Для этого необходимо скачать архив Dompdf со страницы «Релизы».
Распаковать его, например, в каталог "/feedback/dompdf".
Далее в «process.php» добавить следующий код:

require_once '../dompdf/autoload.inc.php';
use Dompdf\Dompdf;

// прикрепление текста письма как pdf-вложение
$dompdf = new Dompdf();

$bodyMail = ''. $bodyMail. '';
$dompdf->loadHtml($bodyMail);
$dompdf->setPaper('A4', 'landscape');
$dompdf->render();
$output = $dompdf->output();
$pdfPath = '../pdf/'. uniqid('pdf_', true). '.pdf';
file_put_contents($pdfPath, $output);
// прикрепление сформированного pdf-файла к письму
$mail->addAttachment($pdfPath);


Создать каталог "/feedback/pdf" для хранения файлов.

Готовый пример формы обратной связи, текст письма которого дополнительно оформляется в виде pdf и прикрепляется к нему можно скачать по этой ссылке.
Denis
Denis
Большое спасибо!
Denis
Denis
Здравствуйте,
У меня возникает ошибка при отправке формы: Parse error: syntax error, unexpected T_CONST in /home/koncer/public_html/feedback/process/process.php on line 19
подскажите в какой стороне копать, все что мог перепробовал.
За ранее спасибо!
Denis
Denis
Разобрался, на сайте PHP 5.2 стоял. Поставил 5.6.
Denis
Denis
Добрый день!
Александр, подскажите ка к вашей форме добавить маски с помощью (masked_input_1.4.1-min.js):
для даты
для номера паспорта
За ранее спасибо!
Александр Мальцев
Александр Мальцев
Добрый!
Сейчас все современные браузеры уже поддерживают input с типом, равным «date».
<div class="form-group">
  <label for="date" class="control-label">Дата</label>
  <input id="date" type="date" name="date" required="required" class="form-control" value="" placeholder="">
  <div class="invalid-feedback"></div>
</div>
Если не хотите использовать стандартные средства встроенные в браузеры, то в этом случае для даты лучше использовать плагин datepicker или datetimepicker.
В случае с «masked_input_1.4.1-min.js» это решается так (в этом варианте полю input, необходимо установить type, равный text):
$('#date').mask('99.99.9999');
Номер и серия паспорта:
<div class="form-group">
  <label for="passport" class="control-label">Номер и серия паспорта:</label>
  <input id="passport" type="text" name="passport" required="required" class="form-control" value="" placeholder="" pattern="^\d{4} \d{6}$">
  <div class="invalid-feedback"></div>
</div>

<script>
$("#passport").mask("9999 999999");
</script>
Denis
Denis
Большое спасибо. Очень полезная информация. Буду экспериментировать.
Denis
Denis
Добрый день!
Александр, подскажите как к вашей форме добавить функционал динамического добавления поля. За ранее спасибо. P.S У вас лучшая форма интернета.
Александр Мальцев
Александр Мальцев
Добрый! Спасибо за отзыв!
Динамическое добавление полей в форму можно, например, осуществить следующим образом.
1. Необходимо в HTML добавить кнопку и поле:
<!-- Поле 1 (при необходимости) -->
<div class="opt-fields">
  <div class="form-group">
    <label for="opt1" class="control-label">Поле 1</label>
      <input id="opt1" type="text" name="opt1" class="form-control" value="" placeholder="">
      <div class="invalid-feedback"></div>
    </div>
  </div>

   <!-- Кнопка для отправки формы -->
   <div class="form-group">
     <button id="add-opt" type="button" class="btn btn-primary">Добавить поле</button>
   </div>
2. Добавить на страницу JavaScript код, который будет при клике по кнопке добавлять ещё одно поле:
<script> 
var index = 2;

$('#add-opt').click(function () {
  var input = '<div class="form-group">' +
    '<label for="opt' + index + '" class="control-label">Поле ' + index + '</label>' +
    '<input id="opt' + index + '" type="text" name="opt' + index + '" class="form-control" value="" placeholder="">' +
    '<div class="invalid-feedback"></div>' +
    '</div>';
  $('.opt-fields').append(input);
  index++;
});
</script>
3. В process.php добавить код:
//...
$opt = array();
$i = 1;
$res = true;
while ($res) {
  if (isset($_POST['opt' . $i])) {
    $opt[] = filter_var($_POST['opt' . $i], FILTER_SANITIZE_STRING);
  } else {
    $res = false;
  }
  $i++;
}
//...
$out = '<ul>';
foreach ($opt as $key => $value) {
  $out .= '</li>' . ($key + 1) . ': ' . $value . '</li>';
}
$out .= '</ul>';

$bodyMail = str_replace('%opt%', $out, $bodyMail); 
4. В «emal.tpl» добавить код:
Opt:
%opt%
Посмотреть пример можно в этом архиве.
Denis
Denis
Супер! Большое спасибо.
Denis
Denis
Все работает, безотказно.
Замечена опечатка:
$out .= '</li>' . ($key + 1) . ': ' . $value . '</li>';  - у 1-го <li> лишний "/".
Denis
Denis
Добрый день!
Александр, подскажите как модифицировать данный код. Использовать не одно поле, а 3 (три)(например: фамилия, имя, отчество.). Динамически добавлять по 3(три) поля.
За ранее спасибо, вы очень помогаете и грамотно описываете изложенный материал.
Александр Мальцев
Александр Мальцев
Привет!
Для этого можно использовать массив, в котором описать что нужно добавить. После этого с помощью цикла добавить эти поля в форму:
var arrFields = [
  { name: 'surname', text: 'Фамилия' },
  { name: 'name', text: 'Имя' },
  { name: 'fathername', text: 'Отчество' },
];
$('#add-opt').click(function () {
  arrFields.forEach(function (item) {
    var input = '<div class="form-group">' +
      '<label for="' + item.name + '" class="control-label">' + item.text + '</label>' +
      '<input id="' + item.name + '" type="text" name="' + item.name + '" class="form-control" value="" placeholder="">' +
      '<div class="invalid-feedback"></div>' +
      '</div>';
    $('.opt-fields').append(input);
  });
});
Denis
Denis
Большое спасибо!
Подскажи пожалуйста, а в обработчике, что нужно в таком случае добавлять (process.php)?
Александр Мальцев
Александр Мальцев
Этот процесс описан в разделе статьи «Как добавить в форму новое поле». Т.е. это стандартные действия. Сначала нужно получить поле, используя суперглобальный массив POST. Например, получение поля surname выполняется так $_POST['surname'], поля name так $_POST['name'] и т.д. Далее нужно выполнить фильтрацию данных, после этого вставить его куда нужно.
Denis
Denis
Спасибо.
нат
нат
Помогите, пожалуйста, может у вас есть вариант проверки формы без документов и капчи? Просто имя, телефон и емейл? А то начинаю удалять лишнее и понимаю, что могу накосячить и удалить не то, что надо…
Александр Мальцев
Александр Мальцев
Подобная просьба уже была. Попробуйте найти форму, которую вы ищите в этой папке.
Александр
Александр
Добрый день! Форма обратной связи просто шикарная. Но не во всем разобрался. Подскажите пожалуйста как сделать поле для ввода сообщения (где минимум требуется ввести 20 символов) не обязательным. То есть что бы в форме оно присутствовало, но не было обязательным для заполнения.
Александр
Александр
Прошу прощения! Ответ нашел в ветке комментариев.

itchief.ru/php/feedback-form-for-website#comment-2810
Nikita
Nikita
Все работает, но есть маленькая проблема, форма во всплывающем окне работает странно: ничего не заполнил, нажал на кнопку — не отправилось, сообщение об ошибке, все как надо; а когда заполнил имя, но не заполнил телефон, то при нажатии на кнопку окно просто закрывается — сообщение не отправляется, но все же лучше было бы, если б оно не закрывалось, а просто писало ЗАПОЛНИТЕ ПОЛЕ С ТЕЛЕФОНОМ ПРАВИЛЬНО. В чем может быть проблема? В обычной форме (не всплывающей) такой проблемы нет. (хотя там же не в окне, поэтому логично)

P.S. Вашу новую форму я скачал, глянул, но пока не стал устанавливать, дабы не переделывать все. Просто доделал старую, с Вашей помощью.
Александр Мальцев
Александр Мальцев
Не знаю, сложно что посоветовать, надо смотреть код.
Nikita
Nikita
А еще, если не сложно, подскажите, пожалуйста, а как мне для формы, которая без всплывающего окна, сделать, чтобы оно там всплывало по нажатию? Но чтобы и остальные формы тоже работали. Может есть возможность как-то js отдельный под нее создать?
Nikita
Nikita
Решил дублировав код
Nikita
Nikita
Желательно, конечно, узнать как это правильно делается. А то у меня за раз приходят по 2 письма с одной формы.
Александр Мальцев
Александр Мальцев
Да, конечно можно. Добавьте в CSS стили, с помощью которых спозиционируйте форму абсолютно.
.popup-form {
  posution: absolute;
  ...
}
А потом с помощью JavaScript при клике по нужному элементу просто добавьте этот класс форме.
Kvarcus
Kvarcus
Здравствуйте.
Форма отличная все работает исправно использую без капчи.
Возник вопрос можно ли поменять index.html на index.php
хотелось бы оформить input type=«file» в своем стиле.
Я пробовал менять расширение, почта перестает доставляться, точнее
приходит только если добавить картинку без загрузки на почте пусто хотя и пишет спасибо все отправлено.
Спасибо
Александр Мальцев
Александр Мальцев
Здравствуйте! Конечно, можно. Проверяйте настройки сервера, скорее всего что-то не достроено.
Для оформления input type=«file» нужен только CSS, расширение тут ни на что не может повлиять.
Kvarcus
Kvarcus
Знать бы что не достроено или хотя бы в какую сторону смотреть…

Не совсем так, я хотел для оформления использовать bootstrap-fileinput для этого и пришлось менять расширение.
Nikita
Nikita
Добрый день! Александр, подскажите пожалуйста, я поставил вашу форму, и работает она у меня через модальное окно. Но я хотел бы поменять одну деталь. После нажатия кнопки submit вызывается alert, который очень некрасиво смотрится в модальном окне и на мобильных устройствах с маленьким экраном это вызывает проблемы с функциональностью. Скажите, как мне заместо вызова alerta, прописать все так, чтобы мое модальное окно с формой обратной связи после нажатия на кнопку submit и проверки закрывалось, и после, открывалось новое модальное окно, в котором написано «Ваше сообщение отправлено!»?
Заранее, спасибо!
Александр Мальцев
Александр Мальцев
Добрый день! Нужно всё сделать так, как вы написали.
1. Закрыть модальное окно с id равным, например, myModal:
$('#myModal').modal('hide');
2. В обработчике, который выполняется после закрытия модального окна, написать код, который будет в зависимости от результата открывать или нет новое модальное окно:
$('#myModal').on('hidden.bs.modal', function (e) {
  if (data.result === "success") {
    $('#myModal2').modal('show');
  }
})
Nikita
Nikita
Если я правильно понял, то второе нужно вставить заместо этого?
// при успешной отправки формы
if (data.result === «success») {
$(this).parent().find('.form-result-success')
.removeClass('d-none')
.addClass('d-flex');
return;
А куда в таком случае первое?
Nikita
Nikita
И что можно сделать, чтобы это сработало и на других модальных формах (id) (просто у меня их 5 всплывающих форм)
Александр Мальцев
Александр Мальцев
Первое нужно добавить до второго.
Александр Мальцев
Александр Мальцев
В зависимости от того как у вас это реализовано.
Можно, например, написать, поиск элемента относительно текущего:
$(this).closest('.modal').modal('hide');
...
$(this).closest('.modal').on('hidden.bs.modal', function (e) {
Nikita
Nikita
Ну вот я пока еще ничего не менял в process-forms.js, как считаете лучше сделать?
А в main.js у меня вот что:
$(function () {

var form1 = new ProcessForm();
form1.init();

var form3 = new ProcessForm({
selector: '#feedback-form-3'
});
form3.init();

var form2 = new ProcessForm({
selector: '#feedback-form-2'
});
form2.init();

var form4 = new ProcessForm({
selector: '#feedback-form-4'
});
form4.init();

var form5 = new ProcessForm({
selector: '#feedback-form-5'
});
form5.init();

var form6 = new ProcessForm({
selector: '#feedback-form-6'
});
form6.init();

});
Nikita
Nikita
Вставил код таким образом:
// при успешной отправки формы
$('#modal-1').modal('hide');
$('#modal-1').on('hidden.bs.modal', function (e) {
if (data.result === «success») {
$('#modal-12').modal('show');
}
})

Открыл форму modal-1, нажал на кнопку «отправить», но все глухо — данное окно не закрывается, да и окно modal-12 не открывается, просто кнопка становится нажатой и все.
Nikita
Nikita
Сделал как вы сказали, все работает, вот только, если окно снова открыть, не обновляя страницу и самому закрыть, то тоже вылезает окошко с УСПЕШНОЙ ОТПРАВКОЙ.
Nikita
Nikita
Хотелось бы узнать еще, как отменить повторную отправку одним человеком.
Александр Мальцев
Александр Мальцев
Пример как это выполнить можно посмотреть в этом файле.
Александр Мальцев
Александр Мальцев
В зависимости от того, что вы хотите. А как определить повторная отправка эта или нет? Можно конечно записывать в базу все отправляемые сообщения, а затем сравнивать её с уже существующими. Или если есть, например, система авторизации, то можно написать вывод всех отправленных сообщений в личном кабинете и сделать, например, кнопку удалить или отменить с помощью которой пользователь сможет сам отменить дубль.
Александр Мальцев
Александр Мальцев
Как это корректно выполнить можете посмотреть в этом комментарии.
Nikita
Nikita
Починил, вроде все шоколадно. Спасибо большое за помощь!
Александр Мальцев
Александр Мальцев
Не знаю, наверно не стал бы использовать столько форм обратной связи на сайте.
Алексей
Алексей
Прошу прощения, что оставляю комментарий под своим. Но возникла проблема с темой сообщения.
В программе mozilla thunderbird выглядит тема вот так.



Хотя в другом мобильном приложении почты все отлично.