Форма обратной связи с вложением (прикрепляется файл) | HTML и PHP

11.02.15 NMitra

Это результат объединения статей:

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

Особенности:

Внешний вид:
- форма по прежнему резиновая, но теперь наименования пунктов располагаются слева (см. свойство float),
- при нажатии на label фокус получает соответствующий input,
- при наведении курсора мышки на поле, его границы становятся голубыми, при фокусе — бледно-голубыми,
- правильно заполненные поля будут темнеть.
Если нужен вид из предыдущей формы, то следует заменить содержимое тега style: <style>содержимое</style>.
Поддержка от IE10 включительно.
Проверка на правильность заполнения полей осуществляется не на стороне сервера.

Ниже представлены два варианта скрипта отправки данных с сайта на почту: с Javascript (Ajax) и без.

1. Форма связи позволяет отправить несколько изображений и др.файлов без перезагрузки страницы

PHP вынесен в отдельный файл
при нажатии клавиши F5 форма не будет отправлена снова
после отправки формы страница не будет перезагружена

Файл contacts.html

<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Контактная форма</title>
<style>
#feedback-form { /* вся форма */
  max-width: 550px;
  padding: 2%;
  border-radius: 3px;
  background: #f1f1f1;
}
#feedback-form label { /* наименование полей */
  float: left;
  display: block;
  clear: right;
}
#feedback-form .w100 { /* поля */
  float: right;
  max-width: 400px;
  width: 97%;
  margin-bottom: 1em;
  padding: 1.5%;
}
#feedback-form .border { /* граница полей */
  border-radius: 1px;
  border-width: 1px;
  border-style: solid;
  border-color: #C0C0C0 #D9D9D9 #D9D9D9;
  box-shadow: 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.1) inset;
}
#feedback-form .border:focus {
  outline: none;
  border-color: #abd9f1 #bfe3f7 #bfe3f7;
}
#feedback-form .border:hover {
  border-color: #7eb4ea #97cdea #97cdea;
}
#feedback-form .border:focus::-moz-placeholder { /* убрать при фокусе первоначальный текст поля */
  color: transparent;
}
#feedback-form .border:focus::-webkit-input-placeholder {
  color: transparent;
}
#feedback-form .border:not(:focus):not(:hover):valid { /* правильно заполненные поля */
  opacity: .8;
}
#submitFF { /* кнопка "Отправить" */
  padding: 2%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
  background: #669acc;
  color: #fff;
}
#feedback-form br {
  height: 0;
  clear: both;
}
#submitFF:hover {
  background: #5c90c2;
}
#submitFF:focus {
  box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
</style>

<form enctype="multipart/form-data" method="post" id="feedback-form">
<label for="nameFF">Имя:</label>
<input type="text" name="nameFF" id="nameFF" required placeholder="например, Иван Иванович Иванов" x-autocompletetype="name" class="w100 border">
<label for="contactFF">Email:</label>
<input type="email" name="contactFF" id="contactFF" required placeholder="например, ivan@yandex.ru" x-autocompletetype="email" class="w100 border">
<label for="fileFF">Прикрепить файл:</label>
<input type="file" name="fileFF[]" multiple id="fileFF" class="w100">
<label for="messageFF">Сообщение:</label>
<textarea name="messageFF" id="messageFF" required rows="5" placeholder="Детали заявки…" class="w100 border"></textarea>
<br>
<input value="Отправить" type="submit" id="submitFF">
</form>

<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "contacts.php", true);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText);
      if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя
        f.messageFF.removeAttribute('value');
        f.messageFF.value='';
      }
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
  http.send(new FormData(f));
}, false);
</script>

Файл contacts.php

<?php
if (isset ($_POST['contactFF'])) {
  $to = "name@yandex.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--";

  if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ
    mail($to, $subject, $message, $headers);
    echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!';
  } else {
    echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
  }
}
?>

2. Форма связи в одном файле

загрузка...

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

нужно заменить свой@yandex.ru
нужно заменить contacts.php на полный адрес, например, http://сайт.ru/папка/папка/contacts.php
серые заголовки лучше убрать. Они меняют адрес хостинга на тот, что посетитель указывает в форме. Но некоторые почтовые сервисы (например, Яндекс.Почта) при их наличии не присылают письма вовсе
для того, чтобы добавить новое поле, нужно внести изменение в HTML и PHP код. Другими словами, добавить те же участки, что и для messageFF
для того, чтобы настроить прикрепление только одного файла, следует убрать всё выделенное. По умолчанию прикреплять можно несколько файлов
для того, чтобы можно было прикреплять только определённый тип файлов, в input прописывается атрибут accept. По умолчанию неважно что прикреплять: картинки, видео или документы
```
<input type="file" name="fileFF[]" multiple id="fileFF" class="w100" accept="image/*">
```

Скорее всего письма будут падать в СПАМ папку, поэтому для них нужно создать правило. Скажем, так это делается в Яндекс.Почте: Создать правило в Яндекс.Почте, чтобы письма не уходили в СПАМ

Если на хостингах выключена функция mail() (галка может именоваться "sendmail_from"), то скрпт работать не будет. Так как по факту email отправляется с электронного ящика хостинга.

в f t

наверх ↑

127 комментариев:

Виталий: Здравствуйте, подскажите пожалуйста как поставить эту форму на сайт (wordpress). Просто скопировать код и вставить на страницу? Форма отображается, но и первая часть кода, где нужно изменить емаил на свой тоже отображается. Или первую часть кода нужно разместить в файле на сервере?
Виталий: Положил первую часть кода в файл mail.php и поместил его в папку с темой шаблона, чтобы можно было редактировать из админки.. изменил емаил на свой, но сообщения не приходят..:(
Виталий: И еще бы хотелось чтобы после отправки сообщения внизу или где нибудь писалось"ваше сообщение отправлено. спасибо" чтобы человек был уверен в отправке..как такое реализовать?
NMitra: Здравствуйте, я далека от WP. Попробуйте посмотреть папку wp-content/themes/ваша_тема, а именно файл page.php. Сообщение есть и оно появляется, если верно код разместить.
Вячеслав: Спасибо! Хорошая форма.
NMitra: Рада слышать!
Владимир Телевной: Здравствуйте. Ваш сайт безусловно хорош. Форма данная тоже. Но только вот вопрос можно ли реализовать прикрепление нескольких файлов. И желательно чтоб это делалось путем перетаскивания файла на форму. Что то типа этого http://www.manhunter.ru/demo/upload.html (это демонстрация), источник http://www.manhunter.ru/webmaster/712_zagruzka_faylov_peretaskivaniem_v_okno_brauzera.html

Спасибо заранее =)
Владимир Телевной: P.S.
Желательно чтоб было реализовано все на столько же просто как данная форма. Т.к. я не просто ноль, а ноль с большим минусом. И мои знания ограничиваются копировал-вставил.
NMitra: Здравствуйте, я боялась этого вопроса )) Пока нет времени написать полноценное решение и толком разобраться. Нужно объединить:

http://habrahabr.ru/post/120370/
http://www.emanueleferonato.com/2008/07/22/sending-email-with-multiple-attachments-with-php/
http://www.w3schools.com/html/html5_draganddrop.asp
Владимир Телевной: Будем ждать полноценного решения. Спасибо за ответ.
Александр: Как бы ещё его заставить вызываться в модальном окне? :)
NMitra: Как содержимое любого модального окна можно сделать, например, этого http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html
Александр: А как бы подправить форму, чтобы сообщение об успешной отправке было отдельно? дело в том, что при такой форме достаточно нажать F5 и письмо сваливается снова. Так можно и весь ящик замусорить. Ну или проверку какую-нибудь защитную добавить?
NMitra: Здесь http://shpargalkablog.ru/2014/01/feedback-form.html пример с XMLHttpRequest()
Или посмотрите тут http://shpargalkablog.ru/2013/08/bell-site.html

php практически везде одинаковый, работает благодаря функции mail
Владимир Электрик: как сделать чтобы отправлять сразу 6 файлов подряд
???????
NMitra: Владимир, помню, уже спрашивали, но никак не могу с собой бороться. Есть либо знания (ответ на комментарий на автомате, требует малое время), либо большой интерес к теме (пишется новая статья-ответ), либо финансовый стимул. Ссылки на материал по теме в комментарии 9.
Sfera: Не хватает обязательного поля Телефон
Анонимный: Подскажите, если отправляю письмо без прикрепленного файла выходит ошибка:
"Warning: file_get_contents() [function.file-get-contents]: Filename cannot be empty in.........
Warning: Cannot modify header information - headers already sent by (output started at........"
Как разрешить отправлять без прикрепленного файла?
NMitra: Посмотрю на следующей недели.
Анонимный: NMitra, все еще актуально, Как разрешить отправлять без прикрепленного файла?
Спасибо
NMitra: Хм, а у меня все отправляется... http://img.shpargalkablog.ru/1.html
NMitra: Поэтому подсказывайте, что выдает у вас, если сделать так:

<?php
if (isset ($_POST['contactFF'])) {

$output = '<p style="color: green">Ваше сообщение получено, спасибо!</p>';

$to = $_POST['mycontactFF'];
$from = $_POST['contactFF'];
$subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER'];
$message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nСообщение: ".$_POST['messageFF'];
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: " . $from . "\r\n";

if (isset($_FILES['fileFF']['tmp_name'])) {

$attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'])));
$filename = $_FILES['fileFF']['name'];
$filetype = $_FILES['fileFF']['type'];

$boundary = md5(date('r', time()));

$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: multipart/mixed; boundary=\"_1_$boundary\"";

$message="
--_1_$boundary
Content-Type: multipart/alternative; boundary=\"_2_$boundary\"

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

$message

--_2_$boundary--
--_1_$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment

$attachment
--_1_$boundary--";
}

mail($to, $subject, $message, $headers);

}
?>
Анонимный: Подскажите как сделать чтобы можно было прикрепить несколько файлов?
Анонимный: Подскажите как добавить защиту от спама?
NMitra: Фильтра по IP в большинстве случаев хватает. Чтобы его узнать, следует строку

$message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nСообщение: ".$_POST['messageFF'];

заменить на

$message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nСообщение: ".$_POST['messageFF']."\nIP: ".$_SERVER['REMOTE_ADDR'];

Затем при обнаружении IP, рассылающего спам

mail($to, $subject, $message, $headers);

ограничить условием

if($_SERVER["REMOTE_ADDR"] != 0.000.000.000) {
mail($to, $subject, $message, $headers);
}
Анонимный: Отличная, красивая форма, понятный код, очень помогло, спасибо!
NMitra: Благодарю за отзыв!
Анонимный: Как это работает? Куда все это вставлять? В примере с обычной обратной связью был отдельный файл contcts.php, а тут все вместе. Делают также с этим примером, но почему-то при отправке выдает ошибку Method Not Allowed
The requested method POST is not allowed for the URL /demo/index.html
Анонимный: Вроде разобрался. Задал форме action, письма приходят. Но почему-то вместе диалоговго окна об ошибке или успехе переводит на пустую страницу.
NMitra: Будет время тоже переделаю на XMLHttpRequest
Вам нужно создать страницу с расширением .php и весь код в неё добавить или подключить php на HTML страницах (служба поддержки хостера должна подсказать как, чаще добавляется строка в .htaccess)
Анонимный: Если приложить 2 файла общим весом менее 10 мб, то письмо не отправляется, типо, превышен лимит в 10 мб.
NMitra: Вместо

if ($filesize < 10000000) {
mail($to, $subject, $message, $headers);
$output = '<script>alert("Ваше сообщение получено, спасибо!");</script>';
} else {
$output = '<script>alert("Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.");</script>';
}

напишите только

mail($to, $subject, $message, $headers);
$output = '<script>alert("Ваше сообщение получено, спасибо!");</script>';
Анонимный: Спасибо. Только функцию по проверке веса все-таки тоже хотелось бы иметь.
NMitra: if ($filesize < 10000000) {}
Анонимный: Здравствуйте, письма приходят, но картинки не отображаются, вместо них набор букв-цифр
NMitra: Здравствуйте, попробуйте упрощённый вариант http://shpargalkablog.ru/2014/05/email-file-php.html Но скорее всего и он не будет работать: проблема или в хостере (именно с его ящика приходят письма), или в почтовом клиенте. У вас где находится почтовый ящик (программа/сервис)?
Анонимный: весьма полезный блог, спасибо за подробный разбор этой темы, форму с прикреплением файла именно с вашего блога использовала много раз.
NMitra: Спасибо за отклик!
Анонимный: Странно, но никто не нашел ошибку скрипта!
NMitra: Поделитесь, пожалуйста
Анонимный: Она уже была замечена. Но не донесена должным образом. К сути, если крепишь файл объемом до 1Мб и более 2-х тогда считается сумма файлов в байтах, т.е. она превысит 10000000 если закрепить их по 1-му килобайту. От 1Мб вроде норм. Как обойти этот недочет?
Анонимный: Так что вы скажите? Каков ваш будет положительный ответ?
NMitra: Плаваю я в этих байтах. Итак,

килобайт (КБ) = 1024 байта
мегабайт(МБ) = 1024 килобайта

10 МБ = 10485760 байт (тут всё сравнительно верно)

А дальше не поняла. Прикрепляются два файла по 1 МБ, в итоге сумма получается 2МБ. Но форма выдаёт ошибку, что превышен размер?
Анонимный: Хорошо, для пущей продуктивности беседы. Уже предметнее приложу скрин, вот значение http://s017.radikal.ru/i419/1505/57/bde886d658a0.jpg которые будет в результате прикрепления 2-ух файлов общим весом 176Кб
Анонимный: А это уже если файл весит 6Мб http://s013.radikal.ru/i323/1505/5e/43ee22f10e0d.jpg - теперь понимаете о чем я?
Анонимный: Ну и чтоб уж исчерпывающая инфо. - это результат 2-ух файлов более 1-го Мб в сумме 7Мб http://s019.radikal.ru/i619/1505/34/fa139891d090.jpg
NMitra: Поняла, $_FILES['fileFF']['size'] передаёт строку, а нужно число.
NMitra: Попробуйте, поправила
Анонимный: Можно вашу почту, аську или скайп?
NMitra: n.mitra@yandex.ru
Анонимный: Приходят знаки вопросов вместо имени. Где то надо указать кодировку?
NMitra: Попробуйте вместо

$subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER'];

написать

$subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];
$subject = "=?utf-8?b?". base64_encode($subject) ."?=";
Анонимный: Спасибо за код, очень полезен. но вот возникла загвоздка.

Письма отправляются без проблем, но вложений нет, подскажите в чем загвоздка, или это проблема в хостинге и нужно настроить разрешение на запись?
NMitra: Извините, не назову причины
NMitra: Попробуйте потестировать более простые вариант
1) http://shpargalkablog.ru/2015/02/multiple-files-php.html
2) http://shpargalkablog.ru/2014/05/email-file-php.html
Анонимный: А не может быть проблемы в скрипте? Я взял его из темы об отправке письма без вложения, так как в этой статье скрипта по отправке нет после формы, не нужно ли что то в скрипт отправки что нибудь добавить из-заа добавления отправки файла?
NMitra: Угу, скрипт PHP разный, также в той форме я использовала XMLHttpRequest(), а в этой нет. Не стала разбираться как через XMLHttpRequest() передать данные о файле.
Анонимный: поработал на стороне хостинга, файлы стали оправляться, но они не читаемы, можете подсказать как это поправить?
NMitra: Честно говоря, не могу. Какой почтовый сервис? Попробуйте отправить на Яндекс.Почту.
Анонимный: Спасибо. В итоге проблема была в почте на хостинге, которая на основе нашего домена, на яндекс почте открылся файл без проблем, как и на туже почту но не в веб браузере а полученные через почтовую программу. Большое спасибо Вам за помощь и за скрипт.
sergey: как сделать только html код такой формы и добавить свой mail
NMitra: "как сделать только html код такой формы" - Уберите всё до

<!DOCTYPE HTML>

email нужно добавлять в php
Анонимный: Как реализовать такую же форму, но с записью данных полей в файл doc(rtf) и отправкой этого файла на почту?
NMitra: Извините, не подскажу ответа - не было необходимости разбирать ваш вопрос ранее :(
Анонимный: подскажите как добавить еще строки, телефон,
адрес
Анонимный: Все работает, но почему-то вложение не приходит на мобильный телефон...В чем может быть проблема?
NMitra: Проблема может быть в почтовом клиенте. Для увеличения скорости работы он может отключить показ изображения. Если на компьютере показывается письмо полностью, а на мобильном в том же почтовом клиенте без изображения, то я бы написала письмо в службу поддержке почтового клиента.
Анонимный: Извините, если тема актуальна еще. Ставлю на joomla 2.5. Нажимаю отправить - открывается пустое окно ,а точнее выкидывает на страницу с названием файла php, куда скопировала код. При этом на почту приходит сообщение.
NMitra: Угу, POST выполняется. Данный пример предполагает, что php и html должны быть в одном файле. Иначе нужно делать через XMLHttpRequest() как тут http://shpargalkablog.ru/2014/01/feedback-form.html только с другой кодировкой
Анонимный: Спасибо! Попробую. А то очень хочется, чтобы заработало, хорошая и удобная форма.
Анонимный: К сожалению не получится, joomla режет код в редакторе, а как по файлам правильно разнести, я не поняла.
Анонимный: И вариант с другой формой не пройдет. Joomla режет любой код скрипта в редакторе.
NMitra: Тогда делайте редирект с php файла как тут http://shpargalkablog.ru/2013/08/bell-site.html
NMitra: Если делать без задержки, то посетитель лишь увидит что страница перезагрузилась
Александр Стрельченко: Доброй ночи!
Подскажите, пожулайста, в какую сторону "копать" ?
С PHP не имел дела ранее, но знания js помогли правильно разобраться во внедрении Вашего обработчика.
В итоге письмо после submit пришло всего два раза (причем, на разные адреса по одному разу... менял, думал беда в почтовиках).
Alert срабатывает каждый раз "успешно".
Заранее благодарю за помощь! Возможно, исходник нужно прикрепить, чтобы Вы смогли понять..?
С уважением, Александр.
NMitra: Доброе утро!
Попробуйте удалить заголовки:

$headers .= "From: " . $from . "\r\n";
$headers .= "Reply-To: " . $from . "\r\n";

У меня с ними тоже Яндекс режет письма.
Александр Стрельченко: Здравствуйте еще раз.
Заголовки эти сразу удалил и не использовал.

Оставил только эти два:

$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";

Возможно, еще в где-то проблема может быть?
NMitra: Это нужно.
Попробуйте второй вариант, тоже самое, но почему-то лучше срабатывает.
А форма без файлов нормально работает http://shpargalkablog.ru/2014/01/feedback-form.html ?
Александр Стрельченко: Второй вариант, это тот, в котором "Форма связи в одном файле"? Не пробовал его..
Без файлов пробовал до этого, но не по вашему шаблону. Срабатывала каждый раз.
Александр Стрельченко: Кстати, код для "Формы связи в одном файле" сразу при загрузке странички выдает алерт "Размер файлов превышает 10мб". Скопировал Ваш код один в один и проверил)
Александр Стрельченко: Доброй ночи еще раз.
Нашел логи с сервера и заметил ошибку наконец-то свою. Может кто-то когда-то столкнется с такой же ситуацией.
Конкретные строчки из лога:

PHP Warning: is_uploaded_file() expects parameter 1 to be string, array given in /путь/к/файлу/contacts.php on line 19, referer: http://ваш.сайт

Я делал прикрепление одного файла, а в html мой инпут имел такой вид:

<"input type="file" name="fileOfClient[]">

Убрав скобки массива "[]" все заработало, при этом письма доходят моментально и с вложением.

В Вашей статье все грамотно отмечено цветом, что обязательно удалить нужно их, но я зря поторопился)))
Благодарю за Ваше решение!
NMitra: Доброго утра, Александр. Большое спасибо, что написали! А то я бы гадала что да как.
Кирилл: Спасибо огромное Вам за данную форму. Установил. Все работает.
Но... Прошу помочь разобраться в одном недочете.
Ввели все данные, нажали отправить, получаем сообщение:"размер файлов превышает 10 мб".
В этой ситуации из поля "сообщение" пропадает ранее написанный текст. Это нехорошо. В остальных полях информация сохраняется.
Можно с этим что-то сделать?
Александр Стрельченко: Кирилл, чтобы ранее написанный текст не пропадал, удали эти события:

f.messageFF.removeAttribute('value'); // очистить поле сообщения
f.messageFF.value=''; // очистить поле сообщения
NMitra: Добавила дополнительное условие, попробуйте, при возможности, отпишитесь о результатах, сама не успела потестировать.

Александр, еще раз спасибо за активное участие!
Кирилл Москвитин: Спасибо.
Но можно как-то сделать, чтобы успешной отправке сообщения текст пропадал, а при ошибке оставался?
Сейчас остается и так, и так.
В принципе я и так доволен))
И еще вопрос..
Для работы формы без ошибок пришлось удалить .htaccess
А без него вроде как нельзя. Можете помочь?
Кирилл: А! И еще..)
При вынесении скрипта в отдельный файл страница перезагружается и форма не работает.
Это решаемо?
NMitra: Кирилл, я скрипт поправила (см. статью) при успешной отправке поле очистится, при ошибке - останется.

.htaccess удалять не стоит. Смотрите какое именно правило не даёт работать форме. Его (правило) можно ограничить одной страницей, расширением файла и т.п.

Вы имеете ввиду JS?
NMitra: "При вынесении скрипта в отдельный файл страница перезагружается и форма не работает." - проверила, у меня работает. Вы верно указываете путь к файлу contacts.php?
Виктор Загоруйко: Подскажите, как после отправки письма и выдачи сообщения что все нормально отправилось сделать переход на главную или другую страницу сайта? Что и где нужно прописать?
Александр Стрельченко: Виктор, попробуй добавить в конце этих строк "location.href = "URL"; (как пример):

if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя
f.messageFF.removeAttribute('value');
f.messageFF.value='';
location.href = "/articles/blog/"; // это как пример ссылки - можешь указать в любом виде (http://google.com) или любую другую
}

Не тестировал, поэкспериментируй.
Возможно есть решения с помощью PHP, конечно.
Кирилл Москвитин: Спасибо огромное Вам за работу и поддержку!
Работает! Однако, поля имя и e-mail все равно остаются при успешной отправке. Но я в восторге)))
"При вынесении скрипта....." - сам файл .js забыл вынести на сервер)
В .htaccess я вообще не буль-буль..( Буду пыхтеть..
Виктор Загоруйко: Александр, я уже перепробывал много вариантов, но почему то не получается. Как вы пишите - получается что выводит весь html код страницы))) в окне. Бился и по другим вариантам - никак не выходит.
Кирилл: В общем чего-то наделал с .htaccess и все заработало))) Надеюсь, надолго)
Еще раз спасибо за помощь!)
Виктор Загоруйко: NMitra, спасибо! Но не помогло. Вот страница сайта http://modulpicture.com/index.php?route=nnews/article&ncat=59&nnews_id=34, форма во всплывающем окне при нажатии на красную кнопку внизу. Ничего не происходит после того что вы подсказали)))ю Сейчас буду курить вашу ссылку
Виктор Загоруйко: Проблема решилась! Всем спасибо.

P.S. Может кому понадобится - location.href = "ваш-сайт"; надо вставлять не вместо if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя
f.messageFF.removeAttribute('value');
f.messageFF.value=''; или за этими строчками, а вот так if (http.responseText.indexOf(f.nameFF.value) == 0) {
f.messageFF.removeAttribute('value');
f.messageFF.value='';
}
}
}
location.href = "http://ваш_сайт";
Дмитрий: Все замечательно работает, но прикрепить можно только один файл. Хоть и написано, что по умолчанию прикреплять можно несколько файлов. Помогите, пжл, мне обязательно нужна возможность прикреплять несколько фото.
NMitra: Можно прикреплять несколько файлов:
1) нажать кнопку
2) нажать на файл
3) нажать кнопку CTRL (или SHift, чтобы выделить идущие подряд файлы или нажатой правой кнопкой мышки выделить область из группы файлов)
4) нажать на другой файл

Это стандартная процедура. Можно как в Яндекс.Почте сделать, чтобы при добавлении файлов они суммировались, но это более трудоёмко и не всем может подходить.
Дмитрий: Спасибо за быстрый ответ, разобрался.
Но появилась новая проблема: выходит сообщение "Извините, данные не были переданы" и все формы остаются заполненными , хотя на самом деле на почту все приходит моментально.
Дмитрий: Пока вопрос снимается. Не знаю причину сбоя. Заново отписал код, загрузил на сайт - вроде опять работает.
Анонимный: Господа, поставил форму по второму варианту. На самом сайте перед формой выходит alert("Ваше сообщение получено, спасибо!");'; } ?> . В чем дело?
NMitra: Ставьте по первому, у вас PHP не поддерживается на HTML страницах
Unknown: Когда сообщение отправлено или не отправлено. Вместо русских букв Появляются знаки вопроса. Как это можно исправить?
Если вместо русс. букв написать англ - тогда выводит нормально англ. буквы.
Анонимный: Повторю вопрос:
Когда сообщение отправлено или не отправлено. Вместо русских букв Появляются знаки вопроса. Как это можно исправить?
Если вместо русс. букв написать англ - тогда выводит нормально англ. буквы.
NMitra: У вас кодировка utf-8?

Перед </head> добавьте
<meta charset='utf-8'/>
Анонимный: Если вы про файл индекс - не помогло. возможно что то с кодировкой в самом файле contact.php?
ПО типу:
--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit

Может здесь нестыковка
Вобщем не помогло, может еще есть идеи?
NMitra: Дело в том, что если у вас проблемы с HTML, CSS, JS, то я могу увидеть код. PHP код можно увидеть только на сервере, там же и протестировать. У вас проблема с кодировкой. Посмотрите в поиске: "php кириллица". Потом посмотреть windows-1251 или utf-8.
Роман Забиржевский: Спасибо. Через Notepad++ исправил кодировку.
NMitra: Благодарю, что написали, как поправили!
Катя: Здравствуйте! Подскажите, пожалуйста, возможно ли реализовать форму с вложениями у себя в блоге? И как это можно сделать? В PHP я не разбираюсь, но пробовала загрузить подобные файлы через сайты google, и ничего не получилось. Никак не могу найти решение.
NMitra: Здравствуйте, что за блог?
Катя: На блоггере. Он пока что в разработке. Мне не нужно готовых решений :) Если бы вы могли подсказать в каком направлении двигаться, я была бы вам очень благодарна. Я пробовала добавить кнопку "загрузить файл" к стандартной форме обратной связи, но и здесь ничего не вышло. Обязательно ли использовать PHP? Если да, то куда его нужно загружать?
NMitra: Словом, есть сервисы, предоставляющие бесплатный хостинг, например, http://api.hostinger.ru/redir/1142276 Для простых задач его хватает. Там делаете в файловом менеджере страницу "contacts.php" и внесите на неё PHP, только добавьте строку
header('Access-Control-Allow-Origin: http://блог.ru');
вот так
<?php
header('Access-Control-Allow-Origin: http://блог.ru');
if (isset ($_POST['contactFF'])) {

Соответственно,
http.open("POST", "http://сайт.ru/contacts.php", true);

Словом, для блога, по-моему, слишком много телодвижений, проще оставить данные email.
Катя: Спасибо большое! Попробую вариант, который вы предложили. Если не получится, придется оставить только email
Анонимный: Подключите пожалуйста эту форму к recaptcha https://www.google.com/recaptcha/api2/demo
Mariya Lamers: Спасибо большое. Код работает.
Mariya Lamers: только большие файлы не отпрвляет, при уменьшении работает. Например файл весом 3MB не отправляется, хотя текстовое сообщение приходит
Mariya Lamers: Как бы так сделать чтобы файл проверялся и просить клиента уменьшить файл??
Mariya Lamers: хотя вижу проверка есть, но для 10МБ, а у меня 3МБ не отправляется
NMitra: Видимо есть ограничения либо у хостинга, либо у вашего почтового сервиса. Измените 10000000 на своё значение
NMitra: Комментарий 115: это маловероятно, чтобы разбираться в документации другого сервиса мне нужен большой стимул :)
Unknown: Как к этой форме прикрутить капчу..?
NMitra: Блокируйте через IP. Для сайтов с большим потоком посетителей можно посмотреть в каких случаях капчу показывает Яндекс.Вордстат, на что проверяет посетителей.

Можно сделать примитивный текст "Сколько будет 2+2" и рядом поле. В PHP добавить условие: "если поле такое-то имеет value 4, то отправлять сообщение на почту". Можно прикрутить recaptcha Гугл. У Яндекса вроде похожий IP есть.
Андрюха: Добрый день, такая проблема - при добавление к форме выпадающих списков они чуть короче, чем поля с текстом, смотрел CSS, но ничего не помогает... как выровнять?
NMitra: Добрый день, добавьте box-sizing: border-box;
Теория http://shpargalkablog.ru/2014/05/box-sizing.html
Пример формы https://jsfiddle.net/NMitra/hw29Ld5z/
Unknown: Добрый день. А отправленные через форму файлы складируются в какую-то папку папку на хостинге или только пересылаются на почту и на хостинге не оставляют никаких следов?
NMitra: Добрый день, нет не сохраняются на хостинге