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

Форма обратной связи с возможностью отправки файлов без плагинов.

Вот казалось бы, уже столько написано про форму обратной связи, необозримое множество её вариантов выложено в Сети - что ещё об этом говорить? Ан нет, стоит в Яндекс Wordstat набрать запрос - Форма обратной связи, как мы увидим более 100 тысяч страждущих по этой теме...

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

Большинство использует очень популярный плагин Contact Form 7. Действительно, всем хорош плагин, масса возможностей, но уж больно он громоздкий. По нагрузке на блог среди всех плагинов он почти всегда в топе. В первой тройке уж точно. Зато бесплатный. Есть другие плагины - и легче, и гибче, и даже красивее - но платные. Желая избавиться от такого тяжёлого плагина, я реализовал форму обратной связи кодом, о чём и написал несколько статей, например Улучшенная форма обратной связи без плагина. Эту форму я когда-то считал просто супер замечательной, а внедрение такой реализации, позволило благополучно избавиться от плагина Contact Form 7.

Но не всё оказалось таким гладким - форма тянула за собой jQuery, что в некоторых случаях мешало работе других скриптов. Не всегда, не у всех, кто внедрял эту форму обратной связи, но было. У меня вот с этим конкретным шаблоном конфликт возникал и в конце-концов, перепробовав несколько других плагинов и даже сторонних сервисов, в частности JotForm, я опять вернулся к тяжеловесу Contact Form 7.

Но было совершенно очевидно, что:

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

Поэтому искал иное решение и оно нашлось в виде скрипта, показанного на каком-то сайте. Взяв его за основу, слегка подправил и получил то, что меня полностью устраивает - форму обратной связи с возможностью отправки файлов без плагинов.

Форма обратной связи с возможностью отправки файлов без плагинов

Форма обратной связи - характеристики

Форма обратной связи - код

<form id="feedback-form" action="http://ваш-сайт/myform/contacts.php" enctype="multipart/form-data" method="post">
<h2>Письмо автору</h2>
<input id="nameFF" class="w100 border" name="nameFF" required="" type="text" placeholder="Ваше имя" />
<input id="contactFF" class="w100 border" name="contactFF" required="" type="email" placeholder="Ваш email" />
<input id="fileFF" class="w100" multiple="multiple" name="fileFF[]" type="file" />
<textarea id="messageFF" class="w100 border" name="messageFF" required="" rows="5" placeholder="Ваше сообщение"></textarea>
<div class="w0"><textarea id="message" class="w100 border" name="message" rows="5"></textarea>
<input id="check" name="check" type="text" value="" /></div>
<input id="submitFF" type="submit" value="Отправить" onclick="document.getElementById('check').value = 'stopSpam';" /></form>
<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "http://ваш-сайт/myform/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>

/* Контактная форма */
#feedback-form { /* вся форма */
  max-width: 400px;
  padding: 2%;
  border-radius: 3px;
  background: #f1f1f1;
}
#feedback-form h2 {
margin-bottom: 10px;    
padding-left: 40px;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color=#a29e9e)";/*IE 8*/
text-shadow: 1px 1px 1px #a29e9e;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color=#a29e9e); /*IE 5.5-7*/
background: url('http://ваш-сайт/myform/xfmail.png') no-repeat center left; 
line-height: 40px; 
}

#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 .w0 { /* скрытые поля */   display: none; }
#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);
}
#nameFF {
  background: #fff url('http://ваш-сайт/myform/name.png') no-repeat center right;
}
#contactFF {
  background: #fff url('http://ваш-сайт/myform/email.png') no-repeat center right;    
}
#messageFF {
  background: #fff url('http://ваш-сайт/myform/comment_edit.png') no-repeat 100% 4%;    
}
/* /Контактная форма */

<?php
if (isset ($_POST['contactFF'])) {
    $spam = trim($_POST['check']);
    $spammsg = trim($_POST['message']);
    if ($spam == 'stopSpam' && $spammsg == '') /* Проверка скрытого поля */
{
  $to = "ваша-почта@mail.ru"; // поменять на свой электронный адрес
  $from = $_POST['contactFF'];
  $subject = "Письмо с блога ";
  $sender = "admin@mydomain.com"; // поменять на адрес с которого ваш сервер отправляет почту
  $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: " . $sender . "\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 МБ.';
  }
} else { echo 'Ошибка, письмо не отправлено.'; }
    
}
?>

Что надо поменять в коде

Блок HTML - строки № 1 и 14, фразу «ваш-сайт» на реальный адрес Вашего сайта.

Блок CSS - строки № 14, 73, 76 и 79, фразу «ваш-сайт» на реальный адрес Вашего сайта.

Блок PHP - в строке № 7 прописать электронный адрес, на который Вы будете получать письма, а в строке № 10 прописать электронный адрес, с которого Ваш сервер отправляет почту. При желании, в строке № 9 можно изменить тему получаемого письма.

Это всё. Вот такая получилась форма:

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

1. Создаём папку в корне сайта с произвольным именем, в моём варианте это папка myform. Если Вы захотите изменить имя, то в этом случае произведите соответствующие замены в HTML и CSS, в тех же строках, где Вы меняли фразу «ваш-сайт».
2. В папку myform выкладываем файл contacts.php, который содержит код PHP блока и четыре картинки, которые я подобрал для этой формы. Ниже я дам ссылку на скачивание архива с исходниками.
3. Блок HTML размещаете там, где Вам необходимо - на любой странице, статье или под ней, в коде модального окна, как у меня, например... Где угодно.
4. Блок CSS размещаете в соответствии с рекомендациями статьи CSS в WordPress - как правильно, либо как Вы посчитаете нужным сами...

Это всё. Форма обратной связи работает.

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

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

Что делать? Ставить капчу? Фи, какая вульгарщина! И тогда я использовал старый проверенный способ - добавил к форме скрытое поле...

<input style="display: none;" name="spam" type="text" value="" />

Весь расчёт на то, что человек это поле не увидит, а значит и не заполнит, а вот робот постарается заполнить все поля, в том числе и это... В php-блоке добавил проверку и если поле пустое, то письмо отправлялось, если нет, то нет.

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

<div class="w0"><textarea id="message" class="w100 border" name="message" rows="5"></textarea>
<input id="check" name="check" type="text" value="" /></div>
<input id="submitFF" type="submit" value="Отправить" onclick="document.getElementById('check').value = 'stopSpam';" />

 Добавлено два скрытых поля - текст и область текста. Расчёт тот же - роботы будут писать что-то в эти поля. Но! Роботы не понимают JS и не кликают по кнопке. А на клик кнопки навешен JS, который в одно из полей пишет определённый текст, другое поле остаётся пустым. Таким образом, ловушка получилась двойная. Как раз для двух типов наиболее распространённых роботов. Если робот, то он не кликнет по кнопке, а значит поле не получит значения валидного при проверке. А второе поле скорее всего будет заполнено роботом. И даже при клике - письмо в этом случае не пройдёт.

Так или иначе - спама нет уже давно.

Постскриптум или вариант № 2

Меня вполне правомерно можно упрекнуть в том, что я не использую в этой форме новомодный font-awesome, а вместо этого всё ещё картирнки вставляю в поля. Справедливо. Тем более, что font-awesome в моём шаблоне присутствует изначально.

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

Так я рассуждал, однако написав предыдущий абзац, решил всё-же попробовать, не откладывая в долгий ящик. Здесь я не буду рассказывать, как установить и подключить font-awesome к сайту - во многих шаблонах WordPress и не только он уже включён по умолчанию. Для тех сайтов, где этого нет - вот здесь всё расписано с пимерами. Скажу лишь, что небольшую кастомизацию CSS я всё-же произвёл, для адаптации к своему блогу. Честно говоря, мне было просто интересно поиграться с Font Awesome, до этого я никогда его не использовал...

Форма обратной связи - код № 2

Функционал формы остался прежний, изменился лишь код html и css. Вот вариант кода:

<form id="feedback-form" action="http://ваш-сайт/myform/contacts.php" enctype="multipart/form-data" method="post">
<div class="input-group margin-bottom-sm">
<i class="fa fa-at fa-lg" style="color:#3C74D5; font-weight:bold; font-size: 1.6em;"></i>
<span class="sag">Письмо автору</span><br><hr>
</div>
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
  <input class="form-control" name="nameFF" required="" type="text" placeholder="Ваше имя">
</div>
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope fa-fw"></i></span>
  <input class="form-control" name="contactFF" required="" type="email" placeholder="Ваш Email">
</div>
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-comments fa-fw"></i></span>
<textarea id="messageFF" class="form-control" name="messageFF" required="" rows="5" placeholder="Ваше сообщение"></textarea>
</div>
<div class="w0"><textarea id="message" class="w100 border" name="message" rows="5"></textarea>
<input id="check" name="check" type="text" value="" /></div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-upload"></i></span>
<input id="fileFF" class="form-control" multiple="multiple" name="fileFF[]" type="file" />
</div>
<input id="submitFF" type="submit" value="Отправить" onclick="document.getElementById('check').value = 'stopSpam';" /></form>
<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "http://ваш-сайт/myform/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>
</form>

/* Контактная форма */
#feedback-form { /* вся форма */
  max-width: 400px;
  padding: 2%;
  border-radius: 3px;
  background: #f1f1f1;
}
#feedback-form .sag {
margin-bottom: 15px;	
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color=#a29e9e)";
text-shadow: 1px 1px 1px #a29e9e;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color=#a29e9e);
margin-top: 0px;
display: inline;
font-size: 1.3em;
font-family: 'Droid Sans', Arial, Verdana, sans-serif;
font-weight: normal;
}
#feedback-form hr { border: 2px ridge #3C74D5; }
#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 .w0 { /* скрытые поля */   display: none; }
#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: #3C74D5;
  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);
}
#nameFF {
  background: #fff;
}
#contactFF {
  background: #fff;    
}
#messageFF {
height:120px;
border-radius: 1px;
}
#fileFF {padding: 0px;
border-width: 0;}
/* /Контактная форма */
/* Awesome */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
	padding-bottom: 8px;
}
.input-group-addon:first-child {
    border-right: 0;
}
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #3C74D5;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
	border-left-width: 0;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
input {
    line-height: normal;
}
/* / Awesome */

Замену, аналогично первому варианту - «ваш сайт» на реальный адрес сайта, надо произвести только в коде HTML (1 и 29 строки) и PHP - указать свои адреса, как в первом варианте, больше нигде ничего менять не надо.

В итоге получилась вот такая форма обратной связи: Именно этот вариант работает у меня сейчас - он мне понравился больше. Хотя, как говорится, на вкус и цвет...

Вот обе формы для сравнения:

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

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

Ну и напоследок даю ссылки на скачивние исходников.

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

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

Распакуйте архив, увидите 2 папки - myform и myform-awesome. Думаю - по названию папок понятно где какая форма. В каждой папке есть файл myform.html - его можно запустить прямо на компьютере, чтобы посмотреть как выглядит форма, что-то подредактировать и т.д. Ну а потом уже внедрять на сайт либо способом описанным в данной статье, либо как вам заблагорассудится самим.

Удачи...

Материалы по теме:

CSS в WordPress – как правильно?

Меняем сервис подписки на блог

Виртуальные путешествия при помощи Яндекс карт

Переезд на новый хостинг

Adware, как удалить с компьютера

Переход с Joomla на WordPress