Полезное        19 августа 2013        654         40

Красивая HTML форма обратной связи для wordpress!

Всем здравствуйте!

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

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

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

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

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

HTML форма обратной связи для wordpress

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

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

Вам потребуется создать файл с расширением PHP, я обозвал его form.php, вы же можете дать ему любое другое имя. Не знаете, как это сделать? Для этого существует отличный текстовый редактор, который является незаменимым помощником блоггера,  notepad  plus plus. После создания файла, скопируете в него вот этот код:

<meta http-equiv='refresh' content='5; url=http://адрес сайта.ru'>
<meta charset="UTF-8" />
<?php
if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') {unset($name);}}
if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == '') {unset($email);}}
if (isset($_POST['sub'])) {$sub = $_POST['sub']; if ($sub == '') {unset($sub);}}
if (isset($_POST['body'])) {$body = $_POST['body']; if ($body == '') {unset($body);}}
if (isset($name) && isset($email) && isset($sub) && isset($body)){
$address = "адрес электронной почты";
$mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body";
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
if ($send == 'true')
{echo "Ваше сообщение успешно отправлено! Через 5 секунд Вы будете направлены на главную страницу
блога <a href='http://адрес сайта.ru/'>текст ссылки (анкор)</a>";}
else {echo "Произошла ошибка, сообщение не отправлено! Проверьте правильность заполнения всех полей";}
}
else
{
echo "Вы заполнили не все поля, необходимо вернуться назад и повторить попытку!";
}
?>


Следующим шагом вам необходимо отредактировать несколько строк кода.

  1. В первой строке, вместо «адрес сайта» впишите доменное имя своего ресурса. Content=’5 означает время в секундах, через которое посетитель будет перенаправлен на главную страницу сайта. Можете изменить его по своему желанию.
  2. В строке № 9, вместо «адрес электронной почты» впишите e-mail адрес, на который вам будут приходить оставленные сообщения от посетителей.
  3. В строке № 14, как и в первой строке, вместо «адрес сайта» впишите доменное имя своего блога, а вместо «текст ссылки (анкор)», желаемый анкор, который будет виден посетителям после оставления сообщения. Кто не знаком с анкорами, изучите этот пост.
  4. В строках № 13, 15 и 19 при желании можете изменить текст.

После редактирования файла, загрузите его в папку с темой вашего ресурса при помощи бесплатного ftp — клиента filezilla. В моем случае путь до файла выглядит следующим образом: httpdocs/wp-content/themes/modxblog/form.php. После чего перейдите в административную панель своего блога, во вкладку «Страницы» и создайте новую страницу «Обратная связь» (название можете придумать любое другое).

Далее перейдите в режим HTML или в последних версиях wordpress он называется «Текст» и скопируйте в пустое поле вот этот код:

<form name="MyForm" action="http://blogiseo.ru/wp-content/themes/modxblog/form.php" method="post">
<p><input class="input" name="name" type="text" style="width:35%" /> Ваше имя*</p>
<p><input class="input" name="email" type="text" style="width:35%" /> Электронная почта*</p>
<p><input class="input" name="sub" type="text" style="width:35%" /> Тема сообщения</p>
<p>Текст сообщения:<br /><textarea name="body" cols="1" rows="5" style="width:57%" /></textarea></p>
<p><input  id="submit" value="Отправить" type="submit" /></p>
</form>


Ну и здесь вам необходимо отредактировать строку № 1, указав свой путь до файла form.php (вместо http://blogiseo.ru/wp-content/themes/modxblog/form.php, укажите свой путь до файла). Также в строках № 2, 3, 4 и 5, в поле «width» вы можете изменить проценты, что позволит вам увеличить или уменьшить ширину полей для ввода данных в самой форме обратной связи, подстроив тем самым их под свой ресурс.

После сохранения страницы, красивая форма обратной связи начнет функционировать, но чтобы сделать ее вид еще привлекательнее вам потребуется привязать к ней стили, добавив в файл темы вашего блога style.css (в самом конце) несколько строк кода:

#submit {
font-family: sans-serif;
color: #ffffff;
font-size: 18px;
padding: 0px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ce1515), to(#8b0d0d));
background: -moz-linear-gradient(top, #ce1515, #8b0d0d);
}
#submit:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#8b0d0d), to(#ce1515));
  background: -moz-linear-gradient(top, #8b0d0d, #ce1515)
}
#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
#respond input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);


На этом установка html формы обратной связи для wordpress закончена и теперь вы можете смело принимать сообщения от своей аудитории. Я же на этом с вами прощаюсь. Надеюсь, что моя статья окажется для многих полезной. Желаю всем отличного настроения. Пока и до новых встреч.

—>Подписаться на обновления блога<—

Как вам статья? Понравилась ли вам форма обратной связи? Жду ваших комментариев!

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

Обсуждение: 40 комментариев
  1. Денис:

    Красивая необычная HTML форма обратной связи привлекает гораздо больше посетителей, чем стандартная!

    [Ответить]

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

    Кстати, Николай…У вас такая форма обратной связи стоит или плагин? Никак не могу разобраться?

    [Ответить]

    Николай Коротков

    Александр
    У меня установлена форма обратной связи при помощи кода, о котором идет речь в этой статье. Просто я немного отредактировал файл style.css, поменяв цвет кнопки «Отправить» под свой блог.

    [Ответить]

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

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

    [Ответить]

    Николай Коротков

    Александр
    Это происходит из-за неправильной кодировки файла form.php. Сохраните файл в кодировке UTF-8 без BOM и все будет отображаться правильно. А ваш файл, наверняка имеет кодировку ANSI

    [Ответить]

    Ответить
  4. Николай!
    Конечно же хочется иметь красивую форму обратной связи.
    Поэтому и статью и комментарии к ней возьму на заметку.

    [Ответить]

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

    Подскажите пожалуйста, а где задается фон(цвет) формы обратной связи?

    [Ответить]

    Николай Коротков

    Игорь
    Цвет фона можно изменить в файле style.css.

    [Ответить]

    Ответить
  6. Creeper:

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

    [Ответить]

    Ответить
  7. Здравствуйте Николай!

    «вместо blogiseo.ru/wp-content/themes/modxblog/form.php, укажите свой путь до файла»
    Подскажите, а где свой путь до файла взять, чтобы его указать?
    Заранее спасибо.

    [Ответить]

    Николай Коротков

    Здравствуйте Александр Иванович!
    В статье речь идет о файле form.php, который содержит в себе код самой формы обратной связи. Вам нужно сохранить файл form.php в какой-нибудь папке на сервера (хостинге) и указать до него путь. Я в пример привел путь до своего файла, он у меня лежит в папке с темой блога modxblog (название темы).

    [Ответить]

    Александр Иванович

    Николай!
    Спасибо за быстрый ответ.
    Решился, наконец, заиметь красивую форму обратной связи.
    Ну и как обычно есть непонятки. Вы меня уж простите за такие вопросы.

    [Ответить]

    Николай Коротков

    Александр Иванович!
    Да ничего страшного, если что не понятно, спрашивайте. Все что в моих силах, помогу.

    [Ответить]

    Ответить
  8. P.S.
    Прошу прощения, ещё вопрос.

    Я не умею пользоваться FTP — клиентом filezilla. Как загрузить код в папку с темой моего ресурса при помощи обычного файлового менеджера WordPress?
    Спасибо!

    [Ответить]

    Николай Коротков

    Александр Иванович
    1. Создайте в любом текстовом редакторе (блокнот, akelpad, notepad++) файл и назовите его form.php (php — это расширение файла).
    2. Скопируйте и сохраните приведенный в статье код в файл form.php.
    3. Перейдите в папку с вашей темой (делается это на сервере вашего хостера).
    4. Загрузите файл form.php

    [Ответить]

    Ответить
  9. Николай!
    Огромнейшее спасибо за чёткие разъяснения.
    Сегодня делать ничего не буду — чуток подустал, а завтра, утро вечера мудренее, буду устанавливать.

    [Ответить]

    Creeper

    Да Николай действительно отзывчивый блогер, он всегда поможет своим читателем решить их проблему и всё объяснит грамотно разложив всё по полочкам

    [Ответить]

    Ответить
  10. Борис:

    Николай, здравствуйте!
    спасайте! у меня почему-то письма приходят на китайском языке.
    кодировку указывал ANSI, потому что если другую, сообщение о переходе на страницу через 5 сек в виде ромбов с ?.
    заранее спасибо!

    [Ответить]

    Николай Коротков

    Здравствуйте Борис!
    Вы не правильно указали кодировку! Кодировка должна быть UTF-8 без BOM. Измените кодировку и все будет отображаться как надо!

    [Ответить]

    Ответить
  11. Пробовал делать по инструкции из других источников и не шло. Сравнил у код с Вашим, оказалось допущены ошибки были.
    Благодарю.

    [Ответить]

    Ответить
  12. Большое вам спасибо. С вашей помощью сделал у себя на сайте форму «Стола заказов» и «Вопрос менеджеру». Вот только если бы мне подсказали как сделать некоторые поля не обязательными для заполнения. Заранее спасибо.

    [Ответить]

    Николай Коротков

    Дмитрий
    Я не знаю, как это сделать. Для этого нужно разбираться в кодах.

    [Ответить]

    Дмитрий

    Ладно покопаемся.

    [Ответить]

    Ответить
  13. Юлия:

    Николай, а как вы думаете, можно файл form.php положить не в файлы темы, а куда-нибудь повыше вплоть до корневой папки? Естественно и путь прописать соответствующий.
    Будет форма тогда работать?

    [Ответить]

    Ответить
  14. Юлия:

    Форма заработала!
    только надо было ставить вот такую строку на страницу «контакты»

    строку по типу такой:
    «http://blogiseo.ru/wp-content/themes/modxblog/form.php»
    почему-то у меня WP не обрабатывает. Пишу на случай, если у кого-то тоже надо будет чуть по-другому строки прописать.

    Спасибо!
    Уже даже плагин установила, но теперь можно его удалять.

    [Ответить]

    Николай Коротков

    Пожалуйста, Юлия!
    Рад, что вы со всем разобрались и все заработало!

    [Ответить]

    Ответить
  15. Юлия:

    Ой, строка не прописалась в предыдущем комментарии. У меня вот такая работает:

    [Ответить]

    Николай Коротков

    Юлия
    В этом комментарии она так же не видна. Не проще ли вам показать название своего ресурса, где все смогут посмотреть, что у вас получилось?

    [Ответить]

    Ответить
  16. Юлия:

    Название сайта msfo-dipifr.ru
    только там код вы все равно не увидите..
    Но работает!
    Спасибо!

    [Ответить]

    Ответить
  17. Юлия:

    Николай, а у вас поле «тема сообщения» является обязательным. Я по своей форме (они у нас одинаково кодируются) это заметила. Это не совсем хорошо. Надо разбираться в коде.

    Мне еще не нравится, что после заполнения формы идет переадресация на главную страницу. Как пользователю мне это не нравится на других сайтах, поэтому думаю, как исправить код. В принципе, наверное, достаточно будет убрать первую строку в файле form.php, именно она отвечает за переадресацию.

    [Ответить]

    Ответить
  18. Юлия:

    У себя сделала поле «тема» необязательным. А в первой строке в файле form.php прописала адрес не главной страницы, а адрес страницы с формой обратной связи. Теперь пользователь останется на ней и сам решит, куда ему дальше идти.

    [Ответить]

    Николай Коротков

    Юлия
    Вы просто молодец! Разбираетесь со всем самостоятельно, еще и дельные советы и подсказки даете. Спасибо вам за это!

    [Ответить]

    Ответить
  19. Юлия:

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

    [Ответить]

    Николай Коротков

    Юлия, задавайте вопросы, когда считаете нужным! Чем смогу, всегда помогу.
    У меня данная функция реализована при помощи двух плагинов. Я об этом даже писал целый пост. Ознакомиться с ним можно по этой ссылке. Надеюсь, после прочтения статьи, все ваши вопросы отпадут сами собой.

    [Ответить]

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

    Николай, день добрый! Спасибо за статью, сделал все как написано, страница с формой отображается, но при отправке выдает сообщение » Ошибка 404: страница не найдена.» в чем может быть ошибка? В браузере отображается полный путь к файлу form.

    [Ответить]

    Николай Коротков

    Добрый день, Андрей!
    Возможно при указании пути до файла form вы пропустили одну из директорий или допустили ошибку в имени файла, попробуйте еще раз внимательно проверить каждый шаг.

    [Ответить]

    Ответить
  21. артем:

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

    [Ответить]

    Николай Коротков

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

    [Ответить]

    Ответить
  22. Здравствуйте, Николай!
    У меня ничего не получается с формой обратной связи на сайте. Пробовала плагины, но не смогла в настройках разобраться. На вашем сайте мне понравилась форма.Думала, смогу понять, но тоже что-то не так. Зашла на хостинг(с программой Filezilla у меня не всегда получается), закачала через панель управления файл в папку с темой, как вы говорите. А дальше — в файле, который копирую в админку блога — что означает «my form»? Или вместо этих слов мне написать «обратная страница»? Или все дело в том, что у меня на сервере не подключена почта? Подскажите, если можете, пожалуйста.

    [Ответить]

    Наталья

    Пишу вслед за своим предыдущим сообщением. Ура! У меня заработала форма обратной связи! Я переименовала файл form.php в mail.php и положила его в корневую папку на сервере, но не в папку с темой, а отдельным файлом. И у меня все заработало! Спасибо за материал! Стили я пока не трогала, не успела. 😮

    [Ответить]

    Ответить

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

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

Поиск по блогу
Подписка на обновления

Введите Ваш e-mail:

rss

twitter

 google

Интересная информация
Хостинг от Макхост

ВОСПОЛЬЗУЙТЕСЬ ПРИ РЕГИСТРАЦИИ КУПОНОМ "blogiseo" И ПОЛУЧИТЕ 3 МЕС. БЕСПЛАТНОГО ИСПОЛЬЗОВАНИЯ ХОСТИНГА ПО ТАРИФУ МАК-10.