Домой / WordPress / Полезное / Форма обратной связи
Форма обратной связи http://obg.kz

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

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

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

Форма обратной связи http://obg.kz
Яндекс wordstat

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

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

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

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

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

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

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

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

  • лёгкость - вообще никак не грузит блог, скриптов практически нет, один маленький js для вывода сообщений об отправке и один мизерный php, который срабатывает в момент нажатия кнопки отправки письма;
    Форма обратной связи http://obg.kz
    Скриншот смартфона
  • адаптивность - ну вот фото со смартфона (увеличение по клику)... Комментарии не нужны;
  • простота установки - в данном случае проще не бывает, наверное, но об установке формы ниже...
  • универсальность - форма обратной связи никак не привязана ни к шаблону, ни к движку WordPress - её можно устанавливать на любой сайт;
  • возможность отправки файлов - для меня это очень важный момент, из-за отсутствия такой возможности я отверг многие другие решения. Причём можно отправить не один, а сразу несколько файлов - тоже фишка! Отправка файлов - очень полезный элемент, посетитель сайта может отправить скриншот, документ и т.д, а не просто рассказывать о проблеме и пытаться объяснить всё на пальцах;
  • элегантность - весь дизайн легко изменить в css и совместить с дизайном любого сайта;
  • антиспам - этот момент оказался очень востребованным и тут пришлось его изобретать специально для этой формы.

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

<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 можно изменить тему получаемого письма.

Это всё. Вот такая получилась форма: Форма обратной связи http://obg.kz

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

  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 - указать свои адреса, как в первом варианте, больше нигде ничего менять не надо.

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

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

Форма обратной связи http://obg.kz
Форма обратной связи с картинками
Форма обратной связи http://obg.kz
Форма обратной связи с font awesome

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

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

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

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

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

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

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

Удачи...

aleksandr_karataev1_cr

Смотрите также

Огни большого города http://obg.kz

Как по клику на кнопке открыть страницу в новой вкладке

Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут target="_blank" …

Огни большого города http://obg.kz Автосерфинг

Как привлечь посетителей на сайт бесплатно

Извечный вопрос всех владельцев сайтов - как привлечь посетителей на сайт? В этой статье расскажу …

55 комментариев

  1. небольшую кастомизацию CSS я всё-же произвёл, для адаптации

    Это ты сейчас с кем разговаривал?! cheeky

    Классная форма, но скачивать пока не стану, чтоб не пылилась в папке. Я надеюсь, в ближайшие лет 10-20 твой блог (эта статья) никуда не исчезнет! Саша, просто лень такая напала, что хоть кричи, ничего не хочется делать, так устал от всего этого оффлайна, что на онлайн пока глаза и руки никак не настроятся.

  2. Спасибо, Саша! Для меня это тоже актуальная тема. Я убрала с блога плагин обратной связи. Ни чем его не заменяла. Теперь можно будет установить твои скрипты. Мне понравились обе формы, но я установлю себе второй вариант.

    У тебя так всё подробно расписано, что думаю трудностей с установкой не возникнет. Ещё раз спасибо! Отдельное спасибо за защиту от спама!

    wink

    • Попробуй, Ирина… Мне нравится… Слушай, а что это у тебя статей новых давно не было? Или не туда смотрю?

      • Всё туда, Саша. Давно не писала, работаю на другом блоге за деньги. Пишу статьи, делаю лендинги. Заработок не большой, но без него не прожить пока. Партнёрки летом плохо шли. Вот с сентября думаю вернусь на свой блог. Много накопилось информации, есть чем поделиться с читателями. 

        • Я, кстати, твои рассылки с книгами регулярно получаю… Честно говоря, не пользуюсь, просто нет нужды. Но ведь как знать, что будет завтра?

          • Тоже верно, я тоже не знала, что такое время наступит. Если не пользуешься, то лучше и не скачивать. А я хочу трейдинг изучить. Правда не факт, что смогу разобраться. Аналитический склад ума нужен. А у меня с шахматами проблема, не умею шаги просчитывать. cool

          • Я тоже Саша от Иринки получаю полезные материалы, но за всем не успеть. Я выбрала себе кое — что и тихой сапой двигаюсь. Статей собралось много и под каждую статью хотела видео сделать, но я простыла и пропал голос. Ходила шептала, сейчас вроде нормализуется, но с переменным успехом: то шепчу, то пищу…. И сплю по многу — никотин выходит однако, 28 в полночь месяц, как я сказала — куреву отбой)))

          • Я бросал… 2 года не курил. Потом ни с того, ни с сего начал. Сколько той жизни осталось? Зачем себя лишать того, что нравится… Нет, ну я знаю, что типа это плохо и всё такое… Однако организм уже привык за столько-то лет. А бросить — для него это шок.

            Но если ты решилась, тогда уж держись, не начинай. Кстати, на днях слушал по радио, что последствия курения выводятся полностью через 5 лет. За исключением 19 клеток, модифицированных на генном уровне. Они отвечают за образование лимфом и не восстанавливаются уже никогда. Вот как-то так.

  3. Саша, привет! Интересная форма, вот теперь буду думать, ставить себе или нет.  Писем вроде как с блога пишут мало, два за три года. Да же не знаю, есть ли смысл заморачиваться.

    Шучу конечно, спасибо за урок. 

  4. Добрый вечер Александр установил код по вашей инструкции, но форма обратной связи как у вас не получилась подскажите что надо сделать? http://klyshko.ru/obratnaya-svyaz/

  5. Александр, спасибо за вариант такой формы! Интересное предложение, надо будет подумать, поставить на свой блог? Сейчас у меня стоит плагин обратной формы Subscribe to Comments Reloaded не знаю насколько этот плагин тяжелый. может подскажете, Александр. Стоит, менять или нет?

    • Александр, спасибо за отзыв. Subscribe to Comments Reloaded — это совершенно другое, он позволяет Вашим комментаторам получать уведомления об ответе на свои комментарии. Так, что менять его не надо. У меня он тоже установлен. А я предложил вариант формы, посредством которой посетитель может написать Вам письмо прямо с блога. Лично у меня это востребовано.

      Да, кстати, по ссылке с https так и не могу перейти на Ваш блог. Приходится в адресной строке вручную менять на http… Может и у других так-же? Или другие спокойно к Вам заходят?

      • Александр, вы пока первый кто написал, что не моете зайти на мой блог по ссылке с  https://  … У меня просьба ко всем комментирующим, ребята, если не трудно проверьте а вы попадаете на мой блог? Напишите в комментарии, ( если Александр, будет не против? ) 

        Спасибо!

        • Вот лично у меня по клику пытается открыться вот эта ссылка: http://www.https.com//workdoma.ru/

          Поэтому и не получается войти. Другие https-сайты открываются нормально.

          • Александр, вот и проблемка видна сразу.. посмотри вначале ссылки что подставляется http://www. а потом уже идет сама ссылка которая правильная, теперь я понял тут нужно разбираться в настройка формы обратной связи почему она подставляет  http://www. Такое уже было на одном блоге у девушки, она этот вопрос решила, а вот как не знаю..

          • А есть кто из ваших комментирующих у кого ссылка на сайт в https ??? Одно дело заходить с браузера на сайт с такой ссылкой а другое тут в комментарии указав ссылку свою.. вы не можете кликнув на нее зайти на блог.

        • Александр, я понял в чём проблема. Это мой плагин ark-hidecommentlinks так преобразовывает. Там явно вставлялось http в скрипте, вот и получалась проблема. У себя на блоге я уже проверил, решение есть. Заодно появился повод обновить плагин в репозитории.

        • Да, Александр, если бы не Вы, я бы и не подозревал о такой проблеме. Но сейчас уже всё решил, плагин обновил — всё работает. Спасибо, что заострили на этом внимание…

        • Саша, я нормально попадаю и по моему блог стал грузиться быстрее.

          • Надежда, да все уже окей! А блог, да постарался чтоб быстрее грузился. было 2.56 сек, сейчас 1.313 +))))

          • На скорость загрузки блога влияет, кроме всей этой оптимизации, ещё и географическое расположения сервера. Например, мой блог из Казахстана открывается влёт, а из России уже подольше. Аналогично и ваши блоги — вы там у себя летаете, но от меня они открываются не так шустро. А откуда-нибудь из Лос-Анжелеса (некоторые анализаторы почему-то от него пляшут) вообще долговато… Маршрутизация, однако…

            Всё относительно…

  6. Галина Нагорная

    Нужное дело! Вот на месяц бы раньше, а то мне уже сделали и плагином, правда, я не знаю каким… А так бы, может, и сама справилась! толково и чётко объяснил в статье — благодарю!

    • Честно говоря, мне больше нравится, когда форма всплывает и не надо переходить на другую страницу. Хотя, по большому счёту, наверное это просто моя "хотелка", а так, как сделано у тебя — это стандартный вариант.

      • Мне тоже больше нравится всплывающая форма связи! Лишних телодвижений не надо делать. Возможно и переделаю… Трусиха я!

        • Стоп, стоп, стоп… Я показал просто код формы. Сама по себе она не всплывает в модальном окне. Если этот код разместить на странице, то будет точно, как у тебя, только в моём оформлении и с моим функционалом. Для того, чтобы она всплывала в модальном окне я использую плагин SBModal

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

    Что касается WP, на моём сайте стоит форма обратной связи contact-form-7 с капчёй, только понять какой он "тяжести"  для сайта? 

    То есть, ваша форма и contact-form-7 соотношение в смысле нагрузки на работу сайта.

    Громадная фишка  Александра, что эту форму можно устанавливать на любой сайт и любую его страницу.

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

    • Спасибо, Андрей! На самом деле статья написана ещё до отпуска, как резерв, я то планировал в отпуске писать другие статьи. Только на поверку оказалось, что вообще не до блога, вот и опубликовал свой резерв. А сама форма работала у меня достаточно давно уже… Так, что в отпуске я лишь кликнул по кнопке "Опубликовать"… Это чтобы ПС про меня не забыли вообще…

      Что касается тяжести плагинов… Есть такой плагин — P3 (Plugin Performance Profiler) — он как раз и предназначен для того, чтобы показывать какие плагины какую нагрузку дают на блог. Я его активирую, запускаю проверку, смотрю что да как, затем деактивирую. Постоянно активированным его держать не надо.

      Аватарка… Пожалуй Вы единственный, кто обратил на неё внимание… Да, это недавнее фото (обрезал с большой фотографии) этого отпуска. Прежней аватарке было лет 10, наверное…

      • Понял, скачаю эти весы, пригодятся.

        А что касается ПС, за время вашего отпуска, так они не плохо информированы, если задать в поиске такие запросы:

        Описания плагинов для WP на русском языке от  А. Каратаева

        Современные плагины для WP от А. Каратаева

        Полезные плагины  для WP от  А. Каратаева

        Бесплатные плагины для WP на русском языке от А. Каратаева

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

        • Это всё касается Яндекса, в Google  не проверял.

          • Андрей, спасибо за такой мощный пиар. Только такие запросы вряд-ли кто-то будет вбивать в поисковик.

          • Вы себя не дооцениваете, Ваше ФИО стало брендом, а раз так, это доверие.  Посещение хотя бы одного раза вашего блога  хватит, чтобы  ещё возвращаться  не раз.

            Кроме того, эти ссылки вечные, Потихоньку они тиражируются и через ещё месяц ожидаю пополнение ваших посетителей. 

             

  8. Очень симпатичный вариант. Равно, как и подписка на обновления Вашего блога. Забираю в закладки. Позже попробую поиграться с кодом. 

  9. Александр, а при обновлении или смены темы эту форму нужно заново устанавливать?

  10. Вот это полезная штука, возьму себе. Как раз сегодня для нового сайта мне нужна форма, которая бы открывалась как модальное окно, без загрузки новой страницы.

  11. Хорошая работа, Саша!

     

    • Юра, спасибо! Твоя оценка дорогого стоит! Пытался зайти к тебе по ссылке, но там выдаёт, что сайт в стадии строительства. Что это будет?

      • Привет, Саша! ASP.Net, Windows servers administration, WEB in common, PowerShell и С#. И, разумеется, рыбалка и путешествия. Пока не закончил оформление, просто было некогда. 

        А ты смотрел карту? http://www.jurishutenko.eu/maps.aspx Очень простая реализация. К каждому месту будет добавлена галерея и описание. Просто понравились возможности библиотеки. Вся информация на MS SQL Server. Если интересно — могу сделать подробную статью об использовании GMap.

         

        • Юра, приветствую! Карту посмотрел только после твоей наводки. Впечатлила! Честно говоря, сначала подумал, что там отмечены места, где ты побывал и все панорамы тоже твои…   Зная твои возможности — вполне реально. Но потом всё-же пришёл к выводу, что это скорее всего уже свойства и возможности библиотеки. Хотя до сих пор полностью не уверен.

          В любом случае подробная статья была бы очень интересна.

  12. Здравствуйте! Поставил Вашу форму обратной связи.

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

    А так работает всё супер, мне очень понравилось. Спасибо!

  13. Привет Александр. Воспользовался твоей инструкцией и установил на блоге эту форму обратной связи. Всё работает на УРА. Вопрос такой…

    Как можно добавить в форму ещё одно поле для указания темы сообщения?

    • Игорь, привет. Я об этом в статье писал:

      …несложно добавить ещё какие-нибудь поля — для этого надо лишь отредактировать html (код формы) и php (обработчик формы)

       В HTML, добавь по аналогии с другими полями, что-то типа такого:

       <input class="form-control" name="themeFF" required="" type="text" placeholder="Тема письма">
      

      Это только голый код поля. У тебя формы этой вообще не увидел, поэтому не знаю какой вариант ты собираешься использовать. Если с awesome, то посмотри по аналогии — там div и span ещё надо указать, если с картинками, то картинку прикрутить, хотя можно и без…

      В PHP добавь обработку своего поля в этот блок:

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

      Примерно так:

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

      Вот и всё…

      • Конечно же ты не увидел новую форму на сайте, ведь она установлена на новом моём блоге  Что за новый блог? А не скажу   Единственное что могу сказать это то, что я уже создал новый блог. Осталось только его оптимизировать, настроить и самое главное — написать статьи. Пока что статей вообще нет. Надеюсь, что до конца этого года похвастаюсь моей новой идеей.

        По поводу добавки поля в форме…попробую сделать как ты написал. Будут проблемы, прибегу к тебе снова 

        • Уверен — справишься. Делай по аналогии с другими полями, разберись, что за что отвечает. Там несложно…

          А я буду ждать когда ты уже покажешь свой новый проект. Заинтриговал…

          • Так и да, справился! Всё работает, но…

            После отправки сообщения, я получаю его в таком виде — смотри 

            То есть, там пишет тема письма и к нему прилеплено имя, а ниже прописан email отправителя. Я хотел бы чтобы все пункты были с новой строки. То есть так:

            Тема письма:….

            Имя:…

            Email:…

            Сообщение:..

            На данный момент, тема и имя на одной строке! 

            Я тебя не запутал? 

          • Посылаю снова скрин. В предыдущем комменте неправильно вставил 

        • Игорь, посмотри как в строке прописано, например, сообщение. "\nСообщение: ". Обрати внимание на слеш и буковку n… Это и есть перенос строки. В PHP, где ты вставлял тему, пропиши точно также и имя. "\nИмя: ".

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *