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

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

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<meta https-equiv='refresh' content='5; url=https://адрес сайта.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='https://адрес сайта.ru/'>текст ссылки (анкор)</a>";}
else {echo "Произошла ошибка, сообщение не отправлено! Проверьте правильность заполнения всех полей";}
}
else
{
echo "Вы заполнили не все поля, необходимо вернуться назад и повторить попытку!";
}
?>


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

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

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

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

1
2
3
4
5
6
7

<form name="MyForm" action="https://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 (вместо https://blogiseo.ru/wp-content/themes/modxblog/form.php, укажите свой путь до файла). Также в строках № 2, 3, 4 и 5, в поле «width» вы можете изменить проценты, что позволит вам увеличить или уменьшить ширину полей для ввода данных в самой форме обратной связи, подстроив тем самым их под свой ресурс.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

#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 закончена и теперь вы можете смело принимать сообщения от своей аудитории. Я же на этом с вами прощаюсь. Надеюсь, что моя статья окажется для многих полезной. Желаю всем отличного настроения. Пока и до новых встреч.

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

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

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