» » » Готовая форма обратной связи на PHP без плагинов
logotip

Готовая форма обратной связи на PHP без плагинов

Здравствуйте уважаемые читатели блога seo-mayak.com. Хотел у Вас спросить, на Вашем сайте есть форма обратной связи? Глупый вопрос наверное, но я не зря его задал.

Ведь на львиной доли WordPress-блогов, форма обратной связи установлена с помощью очень популярного плагина Contact Form 7 или с помощью различными сервисов, коих в сети предостаточно.

Я же хочу предложить Вам готовую форму обратной связи на PHP без использования каких-либо плагинов и сервисов. Чисто «ручная» работа.

forma obratnaya svyazi

Я понимаю, что у многих веб-мастеров при слове PHP, поднимается давление, а в памяте всплывают моменты неприятного знакомства с этим языком программирования.

Ребята, не стоит боятся! Не такой он страшный этот PHP, как кажется!

Не так давно я понятия не имел, что это за «зверь» такой и как многие опасался иметь с ним дело. Ведь он при малейшей оплошности, «рушит» WordPress без всякого сожаления.

Но со временем пришло понимание, что без знания азов php, мне будет трудно управлять своими проектами. Есть такое понятие, как Юзабилити сайта, которое напрямую влияет на поведенческие факторы и соответственно на продвижение ресурса в поисковой выдаче.

Так вот, без применения php, о качественном Юзабилити можно забыть. Конечно, многого можно добиться средствами HTML и CSS, но основной функционал WordPress строиться все-таки на php. Ведь не зря большинство файлов шаблона имеют соответствующее расширение.

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

Процесс внедрения формы связи, для удобства восприятия, я разделил на 5 этапов. Поехали!

Этап №1. PHP обработчик сообщений и его функции

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

Первое, что нам надо будет сделать — это создать новый php файл. Для выполнеия сей задачи, запускаем текстовый редактор Notepad++, жмем на вкладку «Файл» и выбираем пункт «Новый»:

obratnaya svyaz'1

Далее, копируем в созданный файл код обработчика сообщений.

Вот сам код:

<title>Сообщение успешно отправлено</title>
<?php
/*** Функция проверки переменных, введенных в форму. Если таких нет, то они создаются.
   Если формой были переданы пустые значения, то функция их удаляет ***/
if (isset($_POST['MayakSend'])){
if (isset($_POST['from_whom'])) {$from_whom = $_POST['from_whom']; if ($from_whom == '') {unset($from_whom);}}
if (isset($_POST['postal_address'])) {$postal_address = $_POST['postal_address']; if ($postal_address == '') {unset($postal_address);}}
if (isset($_POST['topic'])) {$topic = $_POST['topic']; if ($topic == '') {unset($topic);}}
if (isset($_POST['the_message'])) {$the_message = $_POST['the_message']; if ($the_message == '') {unset($the_message);}}

/*** Сбор дополнительной информации об отправителе сообщения ***/
$date=date("d.m.Y"); // число.месяц.год
$time=date("H:i"); // часы:минуты:секунды

/*** Функция проверки заполнения полей ***/
if (isset($from_whom) && isset($postal_address) && isset($topic) && isset($the_message))
{

/*** Данная функция удаляет все пробелы и преобразует HTML теги в символы ***/
$from_whom = htmlspecialchars(trim($from_whom));
$postal_address = htmlspecialchars(trim($postal_address));
$topic = htmlspecialchars(trim($topic));
$the_message = htmlspecialchars(trim($the_message));

/*** Формирование сообщения ***/
$address = "Ваш email-адрес"; // Сюда вписываем свой е-mail!!!!
$sub = "Сообщение с блога";
$message = "Автор назвался: $from_whom \nОставил такой E-mail: $postal_address \nIP автора: \nБраузер отправителя: \nДата отправки: $date \nВремя отправки:$time \nIP адрес отправителя:\nСообщение на тему: $topic \nТекст сообщения: \n $the_message";

/*** Отправка сообщения ***/
$verify = mail ($address,$sub,$message,"Content-type:text/plain; charset = UTF-8\r\nFrom:$from_whom");
      if ($verify == true)
    {
       echo "<body bgcolor='609df9'>
<div style='margin-top: 30px'><table border='1' width='450' align='center' cellpadding='20' cellspacing='6' bgcolor='white'>
<tr>
<td>
<div style='margin'><div align='center'>Ваше сообщение успешно отправлено! <p>Вернуться на <a href='URL Вашего сайта'><font size='+1'>Название Вашего сайта</font></a></div>
<img src='http://img-fotki.yandex.ru/get/6408/135756646.0/0_636aa_9c2e9632_L.jpg'>
<p><div align='center'>Я обязательно прочту Ваше сообщение, и постараюсь ответить как можно быстрей!</div>
<p><div align='right'><i><b>C уважением, Ваше Имя</b></i></div>
</tr>
</td>
</table></div>";
      }
      else
      {
      echo "Сообщение не отправлено!";
      }
      }
     else
{
echo "Вы заполнили не все поля!";
}
}
?>

Далее, в редакторе Notepad++ выбираем «файл» -> «Сохранить как»:

obratnaya svyaz'2

Называем файл contacts.php и сохраняем в любое удобное место на своем компьютере, например в специально созданной папке «Форма обратной связи»:

obratnaya svyaz'3

В пояснениях к коду многое уже было объяснено и я уже не буду повторятся, но на кое-какие строчки все же обращу Ваше внимание.

Строчка №26. Вписываем email-адрес, на который будут доставляться сообщения.

Строчка №38. В местах, где я написал «URL Вашего сайта» и «Название Вашего сайта», вписываем соответственно URL и название Вашего проекта.

Строчка №39. Я уже подготовил для Вас изображение, не если Вы хотите вставить свое, то пропишите путь до картинки с расширением .png,.png,.gif, максимальная ширина которого не должна превышать 400px. Высота может быть любой.

Строчка №40. Если не нравиться мой вариант обращения к автору сообщения, придумайте что-то свое и замените текст.

Далее, сохраняем изменения и запускаем FTP клиент FileZilla. В левом окне программы находим сохраненный файл contacts.php, а в правом окне отрываем папку с названием своего шаблона (темы).

Выделяем сохраненный файл и правой кнопкой мыши вызываем меню, где выбираем пункт «Закачать на сервер»:

obratnaya svyaz'4

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

Этап №2 Функция формы обратной связи с математической капчей

На втором этапе нам не надо будет совершать столько действий, но внимательности потребуется не меньше, так как редактировать мы будет файл functions.php.

Внимание! Во избежание неприятностей, перед началом внесения изменений, обязательно сделайте резервную копию файла functions.php!

Итак, открываем для редактирования файл funttions.php и в самый конец, перед знаком ?> вставляем такую функцию:

function mayak_form($attr, $content = null){
return
'<div class="contact">
<form  action="Путь до файла contacts.php" method="post" >
<h4>Форма связи с администратором</h4>
<table>
<body>
<tr>
<td><input type="text" name="from_whom" title="Введите Имя" placeholder=" Имя"/></td>
<td><input type="text" name="postal_address" id="postal_address" pattern="|^[-0-9A-Za-z_\.]+@[-0-9A-Za-z^\.]+\.[a-z]{2,6}$|i" title="Введите правильный email-адрес" placeholder=" E-mail"/></td>
<td><input type="text" name="topic" title="Введите тему" placeholder=" Тема" /></td>
</tr>
</body>
</table>
<input type="text" name="MayakSend" style="display:none;" value="1" />
<textarea  cols="60" rows="15" name="the_message" title="Введите текст сообщения"  placeholder=" Введите текст"></textarea><br />
<p><label for="text"></p>Сколько будет 20 - 10 ?</label>
<input class="capcha" type="text" name="example" id="example" style="width:80px;" title="Введите число"  onchange="mayak_example_cap()();" /><input type="button" style="background:#FFD39B;" value=" Проверить " onclick="mayak_example_cap()();" />
<div id="resultcap"></div>
<p><input style="display:none; margin: 5px auto; background:#9F79EE;" type="submit" value="Отправить" id="submit" class="submit" /></p>
</form>
</div>';
}
add_shortcode('contact-form', 'mayak_form');

Вставляем функцию в самое начало файла после знака <?php.

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

Строчка №4. Здесь надо прописать путь до файла contacts.php.

Строчка №16. Здесь прописаны html атрибуты для текстового поля:

cols="60" — Данный атрибут задает ширину текстового поля. Значение 60 рассчитывается относительно числа символов одинаковой ширины, помещающихся в одну строчку. Изменяя данное значение, мы можем регулировать ширину текстового поля.

rows="15" — Задает высоту текстового поля. Его значения рассчитывается также, как для атрибута сols.

Строчка №17. В данной строчке нет стилей, но там прописан пример для капчи:

Сколько будет 20 — 10 ?

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

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

Строчка №18. Ближе к концу строчки вы найдете такой стиль:

style="background:#FFD39B;"

Это не что иное, как цвет кнопки «Проверить». Если потребуется, то его можно поменять на любой другой.

Строчка №20. В этой строчке прописаны такие стили:

style="display:none; margin: 5px auto; background:#9F79EE;"

Селектор display со значением none скрывает кнопку «Отправить» до того момента, пока пример не будет решен правильно.

Селектор margin и его значения, устанавливают внешние отступы от копки «Отправить».

background:#9F79EE; — это цвет кнопки, который также можно изменить

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

Сохраняем изменения и переходим к следующему этапу установки.

Этап №3. Подключение скрипта-обработчика капчи к форме обратной связи

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

В текстовом редакторе Notepad++ открываем для редактирования файл footer.php и в самый конец, после закрывающего тега:

</body>

Вставляем следующее:

<script>function mayak_example_cap() {var TitleResuly = document.getElementById("resultcap");var number =
document.getElementById("example").value;var submity = document.getElementById("submit");if (number != "10")
{TitleResuly.innerHTML = "Вы не верно решили пример";submity.style.display = "none";} else {TitleResuly.innerHTML =
"";submity.style.display = "block";}};</script>

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

Хочу обратить Ваше внимание на две строчки данного обработчика:

Строчка №3. Ищем участок кода, что находиться в самом конце строки:

if (number != "10")

Где цифра 10 — правильный ответ на математический пример. Понятно, если изменить сам пример, то и правильный ответ указать надо будет соответствующий.

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

Идем дальше.

Этап №4. Подключение стилей к форме обратной связи

Опять же, с помощью Notapad++ открываем для редактирования файл style.css и в самый конец вставляем следующее:

.contact form{              /* Общие стили */
   width: 530px;            /* Длина формы */
   margin: 10px auto;       /* Внешние отступы до краев таблицы */
   text-align: center;      /* Положение по-центру */
   border-radius: 10px;     /* Закругленные края */
   border: 1px solid #ccc;  /* Рамка */
   background: #F5F5DC      /* Общий цвет фона */
}
.contact td {               /* Стили для полей ввода "Имя", E-mail, "Тема" */
   width: 165px;            /* Длина полей */
   margin: 10px 1px;        /* Внешние отступы */
   float: left;             /* Обтекание элементов по левому краю */
}
.contact input {
   height:25px;             /* Высота полей */
   border-radius: 6px;      /* Закругленные края */
   border: 1px solid #ccc;  /* Рамка */
}
.contact textarea{          /* Стили для текстового поля */
   border-radius: 6px;      /* Закругление краев*/
   border: 1px solid #ccc;  /* Рамка */
}
.contact table{             /* Стили для таблицы */
  margin: 0 auto;           /* Выравнивание по центру */
}
.contact h4{                /* Стили для заголовка формы */
  margin: 10px auto 0;      /* Выравнивание по центру с верхним отступом*/
}
input.capcha{               /* Стили для поля ввода ответа*/
  margin-right: 5px;        /* Внешний отступ справа*/
}
.submit input  {            /* Стили для  */
  text-align: center;       /* Положение по центру */
}

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

Теперь осталось вставить форму непосредственно на страницу.

Этап №5. Установка формы обратной свази

Создаем страницу под названием «Контакты» или «Обратная связь» и неважно в каком режиме редактора WordPress, вставляем такой шорткод:

[contact-form]

Опубликовываем страницу и вуаля, вот наша форма:

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


Сколько будет 20 - 10 ?  

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

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

Просматривается аналогия с плагином Contact Form 7, о котором я упоминал в начале статьи.

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

Внимание! Можно расширить функцию сбора дополнительной информации об отправителе сообщения! Чтобы узнать, как это сделать, надо стать подписчиком блога seo-mayak.com и написать мне через вышеприведенную форму обратной связи.

На сегодня у меня все!

До новых встреч!

С уважением, Виталий Кириллов

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

  1. Анна Вечеря:

    Классно! Сделаю себе такую, а то у меня просто адрес почты записан для обратной связи)

    Ответить
    • Виталий Кириллов:

      Анна, конечно надо сделать! Просто адрес почты это не куда не годится.

      Ответить
  2. Sasha:

    А я пока онлайн-сервисом пользуюсь, в код лезть времени нет, да и не горит. Но многим очень пригодится, особенно тем, кто только начинает корпеть над шаблоном и вообще работать над блогом.

    Ответить
    • Виталий Кириллов:

      Я бы Саша добавил еще нисколько причин, исходя из которых надо ставить свою форму обратной связи.
      Причина №1. Скорость загрузки страниц. Любая переадресация нагружает сервер.
      Причина №2. Конфиденциальность информации. Если это конечно важно.
      Причина №3. Независимость от третей стороны. Мало ли, вдруг сервис прекратит работу или даст сбой и важное сообщение не дойдет.
      На а так, хозяин-барин, конечно…

      Ответить
      • Иван:

        И я использую онлайн сервис, пока проблем не было. Стоит сказать, что формы созданные через онлайн конструктор куда более юзабильнее, чем ваша. Данные отправляются без перезагрузки страницы, при ошибках, пользователь не переходит на отдельную страницу, а остается на той же, где и выводятся ошибки. Ну и у меня, кроме email-сообщения, приходит еще и смс. Плюс можно настроить автоответчик, для пользователя. Вообщем много различных возможностей. Если интересно, то вот адрес сервиса — formdesigner.ru

        Ответить
        • Едиге:

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

          А не могли бы вы поделиться по поводу онлайн сервиса, где можно такой сервис? Буду очень благодарен! Можете отправить на почту?

          Едиге

          Ответить
          • Виктор:

            Так вроде в комментарии Иван написал адрес такого сервиса — formdesigner.ru.
            К слову, я сам им пользуюсь и пока проблем не было, всем доволен ))

            Ответить
  3. Анна Вечеря:

    Здравствуйте, Виталий! Все сделала, как вы описали, но на страничке «Контакты» у меня просто шорткод [contact-form], а форма не появилась. Не подскажите, где я ошиблась?

    Ответить
    • Виталий Кириллов:

      Анна, я что-то у Вас даже такой страницы не нашел

      Ответить
    • Анна Вечеря:

      Ой, так я же ее удалила! Что же она будет мелькать некрасивая! 🙂 сейчас добавлю!

      Ответить
      • Виталий Кириллов:

        К сожаления Анна, мне это нечего не дало. Напишите мне через форму обратной связи.

        Ответить
  4. Андрей:

    Виталий, добрый день!
    Спасибо за форму. Все получилось, за исключением маленького нюанса. Письмо, которое приходит мне на почту не содержит русских названий полей: автор назвался, Оставил такой E-mail и т.д. (строка 34 основного файла). Письмо приходит в таком виде:
    : Андрей
    E-mail: lemur@pupkin.ua
    IP :
    :
    : 14.02.2014
    :08:51 \IP :
    :
    :
    Не подскажите, где подкрутить?
    Спасибо.

    Ответить
    • Виталий Кириллов:

      Андрей, возможно вы не установили кодировку для файла contacts.php

      Ответить
  5. Андрей:

    А какая должна быть кодировка у файла? Дело в том, что я сразу сохранил файл contacts.php в кодировке UTF-8 без BOM, но при этом после отправки сообщения, страница подтверждения была вся в кракозябрах. Я удивился, вернул файлу кодировку ANSI и страница подтверждения стала отображаться нормально. Удивился, потому что база у меня в UTF-8.

    Ответить
    • Виталий Кириллов:

      Андрей, кодировка правильная. Я даже не знаю, почему у Вас не прошла кодировка UTF-8 без BOM. Попробуйте преобразовать просто в UTF-8.

      Ответить
  6. Андрей:

    Попробовал сохранить contacts.php в UTF-8. Страница подтверждения отображается корректно. Письмо на почту приходит с полными данными. Т.е. все работает как положено. Не знаю, почему сразу не заработало в UTF-8 без BOM. Большое спасибо.

    Ответить
  7. Галина:

    А я так и не сделал форму обратной связи, надо срочно сделать!

    Ответить
  8. Игорь:

    Все очень хорошо описано. Но не получилось ее поставить. Кодировка сайта полетела. По всему сайту абракадабра.

    Ответить
    • Виталий Кириллов:

      Игорь, Вы в какой кодировке создали файл contacts.php?

      Ответить
  9. Artem:

    Здравствуйте, а как вставит эту форму просто в php файл шаблона без шоткода?

    Ответить
    • Виталий Кириллов:

      В файл шаблона форму можно вставить следующим образом:

      <?php echo do_shortcode('[contact-form]');?>
      
      Ответить
      • Artem:

        спасибо, попробую

        Ответить
  10. Андрей:

    Спасибо, Виталий! У Вас очень полезный блог, уже много ваших фишек применил у себя на сайте. Хочу поделиться, может кому то поможет. Я, со своим дилетантским подходом, установил все скрипты и форма обратной связи появилась, но почта не отправлялась. Мучился часа два. А дело было в том, что я не правильно прописал путь до файла contacts.php. Вот как было: http://мой сайт//public_html/wp-content/themes/тема/contacts.php. А, оказывается, надо было писать так: /wp-content/themes/тема/contacts.php
    Потом все благополучно отправилось. Еще раз спасибо и жду от Вас что нибудь новенькое!!!

    Ответить
  11. Гагик:

    Здравствуйте, Виталий!
    Прочитав Вашу статью, решил отказаться от плагина CF-7 и установил подобную PHP форму обратной связи у себя на сайте. В ней также, как в Вашей, предусмотрена CAPCHA.
    Если некоторые в формах комментариев ее устанавливают дабы защититься от спам-комментариев (к неудовольствию многих нормальных комментаторов), то здесь она на кой?
    С Уважением!

    Ответить
    • Виталий Кириллов:

      Здравствуйте Гагик!
      Обратная связь и комментарии совсем не одно и тоже. Если комментарии нужны блогу как воздух, то письма на почту не имеют такой важности. Капча в форме обратной связи нужна для борьбы со спамом.

      Ответить
      • Гагик:

        Спасибо за ответ,Виталий!
        Виталий, а можно каким-либо способом с формой обратной связи проделать такой же трюк с внедрением невидимого поля, как Вы представили для формы с комментариями и тогда со спокойной душой отказаться от капчи?
        И еще один вопрос касательно внедрения невидимого поля в форму комментария:
        Не могу понять, какой код вызова формы комментария использует моя тема — comment_template() или comment_form(). Дело в том, что в файле single.php присутствует строка , а в файле comments.php
        ID); ?>. Вот теперь сижу и гадаю, будет ли работать предложенный Вами метод у меня в теме или нет?
        С Уважением!

        Ответить
        • Гагик:

          т.е <?php comments_template(); ?> в файле single.php, <?php do_action('comment_form', $post->ID); ?> в comments.php

          Ответить
          • Гагик:

            Здравствуйте, Виталий!
            Пока ждал ответа, сам разобрался со вторым вопросом.
            Но отсюда другой вопрос — разве не нужно такую же подмену имен «author»,
            «email» и «url» проделать в фале wp-comments-post.php?
            С Уважением!

            Ответить
            • Виталий Кириллов:

              Здравствуйте Гагик!
              Файл wp-comments-post.php не является обязательным для всех швблонов и был создан разработчиком Вашей темы. Структура шаблонов у всех разная. Поэтому надо в каждом случаи разбираться в отдельности.

              Ответить
              • Гагик:

                Здравствуйте, Виталий!
                Речь идет о файле wp-comments-post.php, находящемся в корне сайта у меня на локальном сервере. Дело в том, что некоторые блогеры в качестве превентивной меры против спама ограничиваются подменой имен в comments.php, а для обеспечения работоспособности предлагаемого метода советуют подмену этих имен сделать и в файле wp-comments-post.php в корне сайта. Ваш метод мне больше по душе, т.к. он обеспечивает 2 уровня защиты. Но будет ли действенным второй уровень предлагаемой Вами защиты, без внесения таких же изменений в файл wp-comments-post.php, находящемся в корне сайта, как советуют другие?

                Ответить
                • Виталий Кириллов:

                  Здравствуйте Гагик!
                  Я Вас понял, все изменения, которые советуют вносить в файл wp-comments-post.php, продержатся до ближайшего обновления WordPress, поэтому я пошел глубже и осуществил переименование с помощью функции, которую надо вставить в файл functions.php, что расположен в папке с темой.

                  Ответить
        • Виталий Кириллов:

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

          Ответить
          • Гагик:

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

            Ответить
            • Виталий Кириллов:

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

              Ответить
              • Гагик:

                Спасибо за разъяснения, Виталий!

                Ответить
              • Евгений:

                Добрый вечер! Вместо капчи можно поставить невидимое поле.
                За год использования пришло только 2 спам письма.

                Ответить
  12. Юрий:

    Виталий, хочу поставить Вашу форму на сайт mirknit.com
    Все вроде как работает, но когда нажимаю отправить, то выбрасывает на страницу 404.
    я предполагаю что не правильно ввожу адрес расположения contact.php
    Ввожу так —
    /contacts.php
    /mirknit.com/www/wp-content/themes/greenlife/contacts.php
    mirknit.com/www/wp-content/themes/greenlife/contacts.php
    Вот испробовал такие варианты.
    Файл contacts.php лежит там же где и fuction.php и styles.css.
    Подскажите в чем причина. Может вы знаете.
    За ранее спасибо.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Юрий! Попробуйте убрать из пути до файла «www».

      Ответить
  13. Юрий:

    Спасибо, все получилось

    Вот так работает.

    Ответить
  14. Марина:

    Добрый вечер! Есть такая проблема))). Как сделать так, чтобы в обратном письме админу данные выводились в виде таблицы желательно с оформлением. т е не просто в строчку или столбик
    дата — 12 июня
    заказ на — 13 00
    доставка — пнедельник ну и т д
    А именно в виде таблицы.
    Спасибо!

    Ответить
  15. олег:

    можно ли вопрос по подключению к wallst?

    Ответить
  16. Эдакс:

    мне нравится эта форма! установил ее на сайт.

    Но столкнулся с недоработкой.

    при вводе неправильного эмейла форма все равно пересылает мне сообщение, при этом на открывшейся странице-извещения об отправки письма у пользователя появляется надпись «Неправильный формат e-mail адреса!»

    Согласитесь, не логично. Раз формат неправильный, зачем письмо вообще отправлять?

    Можно ли сделать как-то, чтобы при вводе неправильного мейла отправка письма не осуществлялась?

    Ответить
    • Виталий Кириллов:

      Наверное можно, надо разбираться. К сожаление пока совсем нет на это времени.

      Ответить
      • Эдакс:

        очень жаль. но буду ждать =) если сам не допетрю, конечно =)

        Ответить
  17. Анастасия:

    Здравствуйте! А Вы не могли бы подсказать, можно ли аналогичным способом вставить форму связи на сайт на основе Джумлы? И в чем отличия?

    Ответить
  18. Пиполанка:

    Давно уже установила вашу форму, все налажено и прекрасно работает. Как вы и говорите, если дать правильный ответ и нажать на «проверить», вылезает кнопка «отправить», в противном случае вылезет надпись о неправильности решения. Однако когда я ставлю в нижнее поле заведомо неправильную цифру и, при условии заполненности всех полей, нажимаю на Enter, сообщение все равно отправляется даже без кнопки «Отправить». Назревает вопрос: если правильный ответ становится ненужным, не пробьются ли через эту защиту боты, вдруг для отправки спама в их скрипте используется технология вроде обычного «Enter»?

    Ответить
    • Виталий Кириллов:

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

      Ответить
      • Пиполанка:

        Совершенно не сужу, она мне очень нравится — всяко лучше утяжеляющего плагина. Просто когда я замечаю какую-то интересную мелочь, то начинаю ставить эксперименты и выяснять, что да как. Я заметила, что комментаторы-спамщики атакуют только уже проиндексированные поисковиками страницы. Страница обратной связи у меня пока не в индексе, и мне интересно, если ее убрать из индекса, будут ли мне на почтовый ящик отправлять сообщения боты. И как они для регистрации в качестве подписчиков находят страницу входа в админ-панель (wp-admin). У вас вроде нет статей про запрет регистрации ботов в качестве подписчиков (вдруг они контент «тырят»!). Искала инфу в интернете и нашла два выхода: 1) привязать панель к ограниченному числу IP-адресов (совсем мне не подходит); 2)добавить новое текстовое поле для ввода логина, а старое сделать невидимым — оно будет ловушкой для ботов (я именно так попробую сделать). Но вот интересно, а можно ли эту страничку запретить индексировать (и не повлияет ли это на индексацию главной страницы), и удержит ли это ботов.

        Ответить
        • Виталий Кириллов:

          Пиполанка, бот ищет поля для ввода чего либо, и ищет он: form, name, textarea, e-mail и т.д. Второе поле отсеивает много ботов, но не всех. Вы наверное читали мою статью Антиспам, где я рассуждал на эту тему.

          Ответить
  19. Евгений:

    Виталий, помощь опять нужна! Форму контактную поставил на сайт, работает нормально, на почту ответы приходят, вот только кодировка ответов, на почте, в коде windows-1251, всякая абра кадабра! Потому как если я оставлю файл в кодировке utf-8, тогда описание в картинке успешной регистрации будет в абре-кадабре! Как решить проблему, подскажите? Пробовал декодировать текст из windows-1251 в utf-8 все равно бурда выходит…

    Ответить
    • Виталий Кириллов:

      Евгений, какую именно кодировку Вы ставите utf-8 без ВОМ?

      Ответить
      • Евгений:

        у меня просто utf-8 присутствует, без всяких модификаций, при сохранении файла

        Ответить
        • Виталий Кириллов:

          Евгений попробуйте сохранить в кодироке utf-8 без ВОМ, потом отпишитесь.

          Ответить
          • Евгений:

            Так я и говорю, что я в такой кодировке и сохраняю, а что такое ВОМ — я не знаю…

            Ответить
            • Виталий Кириллов:

              Вы каким редактором пользуетесь для работы с файлами на сервере?

              Ответить
              • Евгений:

                У меня файловый менеджер на хостинге beget через него и редактирую файлы, когда изменения не значительные

                Ответить
              • Евгений:

                а если спрашиваете каким редактором на компьютере пользуюсь — то gedit называется…у меня ОС Линукс

                Ответить
                • Виталий Кириллов:

                  Евгений, установите редактор Notepad++. В статье описано как менять кодировки в данном редакторе.

                  Ответить
                  • Иван:

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

                    Ответить
                  • Иван:

                    Пока собирался внедрять форму уже разобрался) в данной форме защита от возможного внесения вредоносного кода реализована.

                    Ответить
                  • Иван:

                    Функция проверки правильности ввода емейла в данном примере не работает

                    Ответить
                    • Виталий Кириллов:

                      Иван, я знаю, что функция проверки e-mail не работает. Как только дойдут руки обязательно исправлю.

                    • Виталий Кириллов:

                      Иван, я поправил функцию, теперь email проходит проверку.

  20. Алена:

    Являюсь постоянным читателем Вашего блога. Эту статью я уже прочитала несколько раз и наконец решилась добавить и себе «Форму обратной связи».
    Не сразу все получилось, но вроде заработало. Радости нет предела, но ((( Решила опробовать форму- отправила сообщение с сайта, и….. в ответ тишина,, сообщения не приходят((
    Я так понимаю, что главная ошибка не правильно указанный адрес?

    Вот кусочек кода
    /*** Формирование сообщения ***/
    $address = «numberl@gmail.com»;//
    $sub = «Сообщение с блога Все о котах»;

    Ответить
    • Алена:

      Ой спасибо, рано подняла панику, разобралась сама. gmail.com их в спам загонял, изменила почтовый ящик.
      Еще раз огромное Вам спасибо за Ваш труд. Форму добавила, убрала лишний плагин, Notepad++ установила, изучаю.
      Наверное я у вас тут пропишусь на время, не помешаю))))

      Ответить
      • Виталий Кириллов:

        Алена, я рад, что у Вас все получилось! Заходите, всегда буду рад)

        Ответить
  21. Андрей:

    Здравствуйте Виталий!
    Спасибо Вам за столь удачное решение. Я приспособил эту форму для страницы «Подбор тура» сайта небольшой турфирмы. Вместо «Тема» вводится телефон для обратной связи. Но ещё хотелось бы либо добавить полей для заполнения типа «Тема», либо сделать в поле для ввода текста список уже готовых вопросов, например:
    Город отправления:
    Страна:
    Дата вылета:
    чтобы человек только дописал необходимое.
    Подскажите, пожалуйста, как это можно реализовать.

    Ответить
    • Виталий Кириллов:

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

      Ответить
      • Андрей:

        Я уже это понял…
        Пошёл более простым путём. В текстовом поле убрал атрибут исчезающей надписи «Введите текст» и сделал вместо него список вопросов. Теперь клиенту достаточно вписать ответы после двоеточия.
        Спасибо Вам ещё раз за полезный материал.

        Ответить
  22. Alexa Antonova:

    Форма достаточно проста в экплуатации и установке. Автору выражаю большую благодарность!

    Ответить
  23. Анна:

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

    Ответить
  24. Юрий:

    Заранее спасибо1

    Ответить
  25. Александр:

    Хорошая форма обратной связи, мне понравилось. Только вот эта капча…. Многих она почему-то отпугивает. Она же вроде нужна как защита от спам-ботов, так можно же просто сделать не видимое поле для глаз человека, а робот его видит и при заполнении этого поля сообщение не отправляется. Вот только в РНР это надо прописать. Хотя кому как, кто как хочет так и делает.

    Ответить
  26. Александр:

    Евгений
    2016-01-05 — 10:06
    Спасибо Александру за качественно выполненую работу по отделке оконных проемов!

    Юлия
    2015-11-13 — 22:22
    Для меня плюс то, что мастер объяснил что нужно и сам поехал купил расходный материал(ремонт унитаза), теперь слив работает без нареканий

    Семен
    2015-11-13 — 22:20
    Приехал мастер, снял старый замок, уехал , через пол часа привез такой же только новый, Монтаж произвел качественно очень доволен!

    Дмитрий
    2015-11-13 — 22:18
    Ремонт ванной комнаты. Монтаж Панелей ПВХ на клей, получилось качественно и красиво, для небольшого бюджета рекомендую

    Александр
    2015-10-17 — 23:07
    Произвели замену картриджа смесителя! Быстро и аккуратно! Очень доволен!

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

    Имя
    Марат
    E-mail

    Отправить

    Выберите изображение для вашего комментария (GIF, PNG, JPG, JPEG):
    Выберите файл

    Добрый день, подскажите как форму для комментариев поставить перед самими коментариями, чтоб человек не листал все комментарии для отправки своего? CMS вордпресс,

    Ответить
  27. Павел:

    Доброе Утро Виталий!

    Форма обротной связи мне очень понравилась и я решил внедрить ее блог жены. Но произошла небольшая проблема. У меня на сайте форма обратной связи открываеться в модальном окне.
    Если в ставлять код модального окна в страничку все безупречно работает. А вот если его в ставить в модальное окно которое находиться в сайтбаре то оно просто открываеться как текст в такой форме [contact-form]. Не моглибы вы мне помочь советом что может быть. Заранее огромное спасибо.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Павел!
      Вывод шоткода через виджет.
      В том случаи, если Ваша тема не поддерживает вывод шорткода через виджеты, то в файл funtions.php надо добавить такой код:

      add_filter('widget_text', 'do_shortcode');
      

      После чего в виджеты можно будет вставлять любые шоткоды.
      Вставка шорткода в php файл:

      <?php echo do_shortcode('[Шорткод]');?>
      
      Ответить
      • Павел:

        Вся заработало Огромное СПАСИБО. Очень много с вашего сайта взял себе на вооружение. Еще раз ОГРОМНОЕ СПАСИБО. Блог супер так держать.

        Ответить
  28. Анна:

    Здравствуйте, Виталий! Недавно поменяла дизайн на своем блоге, и многое сломалось, в том числе и форма обратной связи.
    Поставила ее заново при помощи вашей статьи, большое вам спасибо еще раз! но вот в чем проблема, при проверке формы выяснилось, что после отправки сообщения, страница (на которой еще фото) на каком-то непонятном языке (Ваше сообщение успешно отправлено! ), contacts.php сохраняла в utf8 без bom не могу понять, в чем дело?

    Ответить
    • Виталий Кириллов:

      Анна здравствуйте! Измените кодировку на просто utf8.

      Ответить
  29. Святослав:

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

    Ответить
    • Виталий Кириллов:

      Святослав, Вы правильно указали путь до файла contacts.php в самой форме?

      Ответить
  30. Владимир:

    Спасибо за хороший урок. Виталий!

    Ответить
  31. Павел:

    Здравствуйте! У меня такой вопрос, есть форма обратной связи с кнопкой «очистить форму», если заполнить все поля и нажать эту кнопку-всё отлично, кнопка работает и всё удаляет. А вот если, например, ввести не все данные или неправильно заполнить какое-либо поле (в форме будет оповещение, что поле не заполнено,при этом страница обновляется) то кнопка «очистить форму» уже не срабатывает. Не удаляет данные, а если удалить их вручную, то наоборот заполняет все поля. Подскажите пожалуйста, как сделать, чтобы эта кнопка всегда удаляла информацию?

    Ответить
  32. Антон:

    Огромное спасибо за форму! Все стало четко, т.к. объяснил умело!

    Ответить
  33. Михаил:

    ip и браузер в форме работать не будут! так как автор забыл про такой Суперглобальный массив $_SERVER

    Ответить
  34. Александр:

    Хочу $address получить email с помощью get_option(admin_email); но при отправке выдается 200 ошибка, в чем может быть загвостка!?

    Ответить
  35. Николай:

    А если у меня дочерняя тема, вставлять стили в style.css в дочерней после @import url(‘../sydney/style.css’); или в style.css родительской темы?

    Ответить
  36. Едиге:

    Здравствуйте Виталий!

    Очень полезная статься, за что огромная БЛАГОДАРНОСТЬ за труд, успехов вам всегда чтобы вы дальше радовали нас!!
    Есть маленькая проблемка, кнопка «проверить» и «отправить» с колеи съехались. Как исправить?

    Ответить
  37. Едиге:

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

    Я тут Функцию под номером 2, не понял куда вставить, в самом начале после знака . У меня в файле function.php в конце нет знака ?>, только endif;
    Помогите, пожалуйста разобраться.

    Заранее благодарю!

    Ответить
    • Виталий Кириллов:

      Можно вставить функцию в начало файла после

      Ответить
  38. Едиге:

    У меня после отправки выходит страница ошибки, хотя я в url набрал свой сайт
    в чем ошибка у меня может быть?

    Ответить
    • Виталий Кириллов:

      Проверьте путь до файла обработчика в функции:

      <form  action="Путь до файла contacts.php" method="post" >
      Ответить
  39. Евгений:

    Отличная статья. Единственное замечание!
    Тема письма в почтовых программах отображается кракозябрами (не так кодировка)
    так что если сделать вот так:
    $sub = '=?utf-8?B?'.base64_encode($sub).'?='; // обратить внимание!
    То заголовки содержащие не ACSII символы будут закодированы с помощью base64
    и тогда просто великолепно!

    Ответить
  40. Евгений:

    Виталий! Через эту форму ломают блог. Сегодня почту засыпало письмами типа savepic.org/8460936.jpg. В итоге все записи у меня оказались отредактированы сегодняшним числом. Пока что сделал так: задачку в форме не надписью, а картинкой в виде капчи. Автоматом её точно не разгадать. Но человек, однажды решив её, может настроить скрипт и «долбить» сайт до бесконечности. Очевидно надо прикручивать Капчу от Гугла.

    Ответить
  41. Лариса:

    Здравствуйте! С эксплорера почему-то не отправляются сообщения через форму. Выделяет поле с е-мейлом красным цветом и пишет: «Необходимо использовать этот формат: Введите правильный е-мейл адрес». С других браузеров письма отправляются. В чем может быть проблема?

    Ответить
    • Виталий Кириллов:

      Лариса, здравствуйте!
      Эксплорер видимо не правильно понимает регулярные выражения.
      Можете убрать проверку е-mail(а), удалив это кусок кода из функции (строчка №10):

      pattern="|^[-0-9A-Za-z_\.]+@[-0-9A-Za-z^\.]+\.[a-z]{2,6}$|i"
      Ответить
  42. Виталий:

    Доброго времени суток!

    Тезка как прилепить строку телефон и три кнопки отправить изображения

    Ответить
  43. Алексей Вершинин:

    Спасибо. Отличное решение, без наворотов, быстрое, простое.

    Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS