Всплывающая форма обратной связи

Добрый день! На PHP 5.6 и 7 точно должно работать. А какие ошибки в log файле?

А в каком? Может лучше в вацап или телегу перейдем? Мои контакты на www.r22.ru/?n=2 а по ссылке www.r22.ru/call мне можно позвонить ;-)

Новый баг: теперь feedback-form-in-modal-v.2.0.1 при попытке отправки выдает "Заполните это поле." под e-mail. И какой бы адрес не писался, все равно. Причем на разных хостах.

Посмотрите что сервер отдаёт. А также какие ошибки имеются в консоли браузера.

После долгого перерыва вернулся... Ну не кажет мой браузер консоль, глянь сам http://rubtsovsk.tk/feedback/ может уже к старости тупею ;-)

Кстати, в капче есть косячек: ноль не перечеркнутый и непонятка это ноль или О

Вах! Версия 2.0 сообщение отправителю о доставке прислала, а вот само сообщение фигвам ;-)

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

Если будет время, то сделаю чтобы эта форма шла с собственными стилями (без Bootstrap).

Вот,вот! И у меня ругается, какое бы мыло ему не писалось.

<!-- Изображения -->
<!--div class="form-group attachments" data-maxfiles="5" data-maxsize="512" data-validext="jpg, png, gif">
  <div>При необходимости прикрепите к сообщению изображения (максимум 5):</div>
  <div class="custom-file">
    <input type="file" name="attachment[]" class="custom-file-input">
    <label class="custom-file-label">Выберите файл...</label>
    <div class="invalid-feedback"></div>
  </div>
</div-->

$(function () {
    let emailform = $(".feedbackForm");
    for (let i = 0; i < emailform.length; i++) {
	form1= feedbackForm();
	form1.init({
	    id: '#'+$(emailform[i]).attr("id"),
	    isHideForm: $(emailform[i]).parents(".modal").attr("aria-hidden"),
	    maxFiles: $(emailform[i]).children(".attachments").attr("data-maxfiles"),
	    maxFileSize: $(emailform[i]).children(".attachments").attr("data-maxsize"),
	    validExtFiles: ['jpg', 'jpeg', 'gif', 'png']
        });
    }
});

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

const
IS_SENDING_MAIL_VIA_SMTP = true, // выполнять отправку писем через SMTP
// Если IS_SENDING_MAIL_VIA_SMTP установлен равным true
MAIL_SMTP_HOST = 'ssl://smtp.yandex.ru', // SMTP-хост
MAIL_SMTP_PORT = '465', // SMTP-порт
MAIL_SMTP_USERNAME = 'alex@yandex.ru', // здесь нужно указать email пользователя с которого будет отправлять письмо (SMTP-пользователь)
MAIL_SMTP_PASSWORD = 'пароль_от_почты_alex@yandex.ru'; // здесь нужно указать пароль от почты (SMTP-пароль)

...
$mail = new PHPMailer;
$mail->CharSet = 'UTF-8';

/* добавить этот код (для отправки письма по SMTP) */
if (IS_SENDING_MAIL_VIA_SMTP === true) {
  $mail->isSMTP();
  $mail->SMTPAuth = true;
  $mail->Host = MAIL_SMTP_HOST;
  $mail->Port = MAIL_SMTP_PORT;
  $mail->Username = MAIL_SMTP_USERNAME;
  $mail->Password = MAIL_SMTP_PASSWORD;
}
...

// от какого email будет отправляться письмо
const MAIL_FROM = 'no-reply@mydomain.ru';
// от какого имени будет отправляться письмо
const MAIL_FROM_NAME = 'Имя_сайта';
// кому необходимо отправить письмо
const MAIL_ADDRESS = 'manager@mydomain.ru';

input::placeholder,
textarea::placeholder {
  color: #bdbdbd !important; 
}

              <!-- Сообщение об успешной отправки формы -->
              <div class="form-result-success d-none text-center justify-content-center align-items-center">
                <div class="alert alert-success rounded-0" style="z-index: 1001;">Форма успешно отправлена. Нажмите на<a class="alert-link" href="#" data-reloadform="#feedback-form">ссылку</a>, чтобы отправить ещё одно сообщение.</div>
              </div>

var form1 = new ProcessForm({
  isShowSuccessMessage: false
});
form1.init();

$(document).on('pf_success', function (e, data) {
  if (data.data.id === 'feedback-form') {
    // открываем модальное окно с нужным сообщением
    $('#pf_success').modal('show');
  }
});

// сбрасываем состояние формы после закрытия модального окна
$('#pf_success').on('hidden.bs.modal', function () {
  form1.reset();
});

$(_defaults.id).on('clearSuccessMessage', function () {
  _showForm(_$form);
});

$('#feedbackFormModal').on('hidden.bs.modal', function () {
    $('#feedbackForm').trigger('clearSuccessMessage');
});

$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);

if ($lang == 'ru') {
  // сообщение на русском языке
} else {
  // сообщение на английском языке
}

<input type="hidden" name="captcha">

// если значение не пустое, то значит это спам
if (!empty($_POST['captcha'])) {
    $data['result'] = 'error';
}

foreach ($_FILES['attachment']['name'] as $key => $attachment) {
  // временное имя файла на сервере
  $fileTmp = $_FILES['attachment']['tmp_name'][$key];
    $mail->addAttachment($fileTmp);
  }
}

...
var _success = function (data) {
  // если сервер вернул ответ success, то значит данные отправлены
  if (data.result === "success") {
    /* начало изменения */
    location.href = 'URL_страницы_спасибо';
    return;
    /* конец изменения */
  }
  ...

$('[name="phone"]').mask("+375 00 000 00 00", {
  placeholder: "+375 __ ___ __ __"
});

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#feedbackFormModal" data-title="Название заголовка">
  Открыть форму
</button>

$('[data-toggle="modal"]').click(function (e) {
  e.preventDefault();
  var idSelector = $(this).attr('data-target');
  var title = $(this).attr('data-title');
  $(idSelector).find('.modal-title').text(title);
});

var ModalForm = new ModalApp.ModalProcess({ id: 'modal-form' }); //Форма в modal
    ModalForm.init();
    $('.modal-form').click(function(){
        var _this = this;
        $.get('/modules_my/feedback/modalForm.php', {content:$(this).attr('data-form')},function(data){
          if (data) {
            ModalForm.changeTitle($(this).attr('data-title'));
            ModalForm.changeBody(data);
            switch ($(_this).attr('data-form')) {
              case 'Form_1':
                var form_1 = new ProcessForm({ idForm: 'Form_1', hideForm: true });
                form_1.init();
                break;
              case 'Form_2':
                var form_2 = new ProcessForm({ idForm: 'Form_2', hideForm: true }); 
                form_2.init();
                break;
            }
            ModalForm.showModal();      
          }
        });
        return false;
    });

<a href="#" class="btn_green button button-borderless modal-form" data-title="Basic Linux Access Control" data-form="Form_2"><i class="i-comment-z"></i></a>

ModalForm.changeTitle($(_this).attr('data-title'));

var myModal1 = new ModalApp.ModalProcess({ id: 'myModal1' });
myModal1.init();
myModal1.changeBody('Содержимое модальное окна 1...');
myModal1.hideFooter(); // скрываем футер

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

<textarea>

<input>

style="display: none;"

const MAX_FILE_SIZE = 524288;

var formFeedback = new ProcessForm({idForm: 'feedbackForm', maxSizeFile: 524288});

php_value upload_max_filesize 10M
php_value post_max_size 10M

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

от какого email ($mail-From)

    $mail->From      = 'email@mysite.ru'; // я же не могу сам себе написать в магазин.ru
    $mail->FromName  = 'Магазин'; // сообщение пришедшее с магазина
    $mail->Subject   = 'Тема сообщения';
    $mail->Body      = $output;
    $mail->AddAddress( 'магазин.ru' );

<iframe src="myform.html" width="100%" height="500">
</iframe>

<input type="hidden" id="subject" name="subject" value="Книга">

<div class="form-group">
  <input type="phone" id="phone" name="phone" required="required" class="form-control" placeholder="Ваш Телефон*">
</div>

// добавить в formData значение 'email'=значение_поля_email
formData.append('phone', phone);

//получить phone, который ввёл пользователь
if (!empty($_POST['phone'])) {
  $phone = $_POST['phone'];
} else {
  $data['result']='error';
}

$output .= "Телефон: " . $phone;

//получить phone если есть
if (isset($_POST['phone'])) {
  $phone = $_POST['phone'];
}

if (isset($phone)) {
  $output .= "Телефон: " . $phone;
}

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

<!-- INPUTS -->
<div class="form-group">
  <p style="font-weight: 700;">INPUTS (максимум <span id="countInputs"></span>):</p>
  <input type="text" name="inputs[]">
</div>

// максимальное количество inputs 
var countInputs = 5;
// выводим максимальное количество элементов
$('#countInputs').text(countInputs);
// после ввода значения в input добавляем новый
$(document).on('change','input[name="inputs[]"]',function(e){
  // если выбран файл, то добавить ещё элемент "Выбрать файл"
  if ((e.target.value.length>0)&&($(this).next('input[name="inputs[]"]').length==0) && ($('input[name="inputs[]"]').length<countInputs)) {
    $(this).after('<input type="text" name="inputs[]">');
  }
});

// добавить в FormData INPUTS
var inputs = document.getElementsByName("inputs[]");
for (var i = 0; i < inputs.length; i++) {
  formData.append('inputs[]', inputs[i].value);
}

if(isset($_POST["inputs"])) {
  $inputs = $_POST["inputs"];
  // переберём все inputs
  foreach ($inputs as $input) {
    $output .= "Значение INPUT: " . "\n" . $input . "\n";
  }
}

<textarea id="message" class="form-control" rows="3" placeholder="Введите сообщение..." required="required"></textarea>

// messageForm - id формы
data: new FormData(document.getElementById('messageForm')),

//после загрузки веб-страницы
$(function () {
  // переменная, которая будет содержать название страны
  var country;
  // при открытии модального окна с формой получаем текст ссылки (страну)
  $('#feedbackForm').on('show.bs.modal', function (e) {
    country = e.relatedTarget.innerText;
  });
  ...
  // добавляем эту информацию в объект FormData (для отправки на сервер)
  formData.append('country', country);	

$_POST['country']

<script src="/feedback/script.js"></script>

$mail->AddAddress('myemail@mail.ru');

if (isset($_POST['message'])) {
  $message = $_POST['message'];
}

if (isset($message)) {
  // что-то делаем с переменной $meassage
}

$('#feedbackForm').on('show.bs.modal', function (e) {
  if ($(e.relatedTarget).attr('data-argument')) {
    $('#product').val($(e.relatedTarget).attr('data-argument'));
    $('#product').prop('disabled',true);
  }   
});

$('#feedbackForm').on('show.bs.modal', function (e) {
  if ($(e.relatedTarget).attr('data-argument')) {
    $('#product').val($(e.relatedTarget).attr('data-argument'));
    $('#product').prop('disabled',true);
  } else {
    $('#product').prop('disabled',false);  
    $('#product').prop('selectedIndex',-1);
  }
});

$('#feedbackForm').on('show.bs.modal', function (e) {
  if ($(e.relatedTarget).attr('data-argument')) {
    $('#product').val($(e.relatedTarget).attr('data-argument'));
    $('#product').prop('disabled',true);
  } else {
    $('#product').prop('disabled',false);  
    $('#product').prop('selectedIndex',-1);
  }
});

jQuery(function($) {

});

<!-- Кнопки, для открытия модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#feedbackForm" data-argument="Телевизор">
  Телевизор
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#feedbackForm" data-argument="Пылесос">
  Пылесос
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#feedbackForm" data-argument="Утюг">
  Утюг
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#feedbackForm" data-argument="Чайник">
  Чайник
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#feedbackForm">
  Выбрать
</button>

<div class="col-sm-6">
  <!-- Продукт -->
  <div class="form-group has-feedback">
    <label for="product" class="control-label">Товар:</label>
    <select id="product" name="product" class="form-control">
    </select>
    <span class="glyphicon form-control-feedback"></span>
  </div>
</div>

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

$('button[data-target="#feedbackForm"]').each(function(){
  if ($(this).attr('data-argument')) {
    $('#product').append('<option>'+$(this).attr('data-argument')+'</option>');
  }
});

$('#feedbackForm').on('show.bs.modal', function (e) {
  if ($(e.relatedTarget).attr('data-argument')) {
    $('#product').val($(e.relatedTarget).attr('data-argument'));
    $('#product').prop('disabled',true);
  }   
});

// получаем выбранный продукт
var product = $("#product").val();
// добавить в formData значение 'product'=значение_поля_product
formData.append('product', product);

$('#feedbackForm').on('show.bs.modal', function (e) {
  if ($(e.relatedTarget).attr('data-argument')) {
    $(e.target).find('.modal-title').text($(e.relatedTarget).attr('data-argument')); // <- необходимо добавить эту строчку
    $('#product').val($(e.relatedTarget).attr('data-argument'));
    $('#product').prop('disabled',true);
  }   
});

.<h4 class="modal-title" id="myModalLabel">Форма обратной связи</h4>

<script>
    $('[data-toggle="modal"]').click(function (e) {
      e.preventDefault();
      var idSelector = $(this).attr('data-target');
      var title = $(this).attr('data-title');
      $(idSelector).find('.modal-title').text(title);
    });
  </script>

// создаём экземпляр класса PHPMailer
$mail = new PHPMailer;
$mail->CharSet = 'UTF-8';