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

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

В этой статье вы узнаете:

• Форма обратной связи для wordpress плагином CF7
• Создать форму обратной связи без плагина
• Оформление формы с помощью css-стилей

Плагин обратной связи для WordPress

Наиболее простым вариантом использовать обратную связь на сайте, является установка плагина. Лично я выбрала для себя этого вариант, хоть и не приветствую плагины. Для начала нужно скачать плагин Contact Form 7 с официального сайта WordPress. Он достаточно прост в использовании.

После скачивания распакуйте архив и скопируйте файлы на сервер в папку /wp-content/plugins/. После активации плагина переходите к его настройкам в панели администратора. Справа в меню появится пункт «Contact». Значит, плагин обратной связи WordPress установлен и запущен. Для установки стандартной формы CF7 на сайт достаточно скопировать код «форма для контакта», который вы увидите в меню Contact. Если вы хотите настроить форму по своему усмотрению, перейдите по ссылке «Добавить новую».

В результате появится несколько полей:

1. Название формы;
2. Форма обратной связи;
3. Почтовые настройки;
4. Дополнительная форма обратной связи;
5. Сервисные сообщения;
6. Дополнительные настройки.

Пункты 2 и 4 позволяют воспользоваться конструктором для разных видов форм. Например, так вы можете создать всплывающую форму обратной связи WordPress. После заполнения всех полей, можно получить готовый код для страницы контактов. Настройка доп. формы (№4) помогает получать не только письма на почту, но и, например, смс-сообщения на указанный телефон.

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

Как вариант, можете еще испробовать плагин Cforms, он более сложен, но и функций у него больше.

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

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

Для начала нужно создать отдельный файл *.php (например, contact.php или mail.php). После создания лучше поместить его в папку с темой шаблона, тогда можно будет его редактировать из админки.

Вот код, который нужно вставить в созданный вами файл php:

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

<meta http-equiv='refresh' content='5; url=https://pro-wordpress.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['subject'])) {$subject = $_POST['subject']; if ($subject == '') {unset($subject);}}
if (isset($_POST['body'])) {$body = $_POST['body']; if ($body == '') {unset($body);}}
if (isset($name) && isset($email) && isset($subject) && isset($body)){
$address = "pro-wp@yandex.ru";
$message = "Имя: $name \nE-mail: $email \nТема: $subject \nТекст: $body";
$send = mail ($address,$subject,$ message,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
if ($send == 'true')
{echo "Спасибо, ваше сообщение успешно отправлено!";}
else {echo "Ошибка, сообщение не отправлено!";}
}
else
{
echo "Вы заполнили не все поля, необходимо вернуться назад!";
}
?>

Для своего блога вам нужно будет изменить url в первой строке и в строке address, и по желанию название полей Имя, Тема, Текст. Также по своему усмотрению вы можете изменить текстовые сообщения, которые будет видеть пользователь после отправки, либо если сообщение не отправлено.

После того, как вы создали необходимый файл, его нужно вставить на страницу контактов.

Для этого можно использовать такой код:

1
2
3
4

<h2>Форма обратной связи</h2>
<form name="Form1" action="/wp-content/themes/lime/contact.php" method="post"><input class="input" name="name" type="text" style="width:31%" value="Ваше имя" /> Ф.И.О.<input class="input" name="email" type="text" style="width:31%" /> E-mail<input class="input" name="subject" type="text" style="width:31%" /> ТемаТекст сообщения:
<textarea name="body" cols="1" rows="5" style="width:98%" /></textarea><input value="Отправить" type="submit" />
</form>

Здесь самое важное указать правильный путь к тому файлу php, который вы создали (в нашем случае, это contact.php). В данном коде по своему желанию и вкусу можете менять названия полей, и их ширину.

Если вы захотите придать форме без плагина особый вид, можете использовать разные стили оформления с помощью файла style.css.

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

Большой популярностью на моем блоге пользуются статьи, в которых я рассказываю, как сделать оформление элементов блога с помощью css-кода:

• Красивая форма подписки
• Оформление цитат

Сейчас я покажу, как оформить красиво форму обратной связи для WordPress.

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

.wpcf7-form input[type="submit"] {
background: #63c6ae; /* цвет фона кнопки Отправить*/
border: 0;
width: 120px; /* ширина кнопки Отправить*/
color: #fff; /* цвет текста кнопки Отправить*/
height:30px; /* высота кнопки Отправить*/
}
.wpcf7-form textarea {
display: block;
margin-top: 5px; /* верхний отступ от поля Текст сообщения*/
background: #fff;
border: 1px solid #63c6ae; /* граница поля Текст сообщения*/
width: 400px;
color: #222;
padding: 10px 10px;
}
.wpcf7-form input[type="email"], .wpcf7-form input[type="text"] {
background:#fff ;
border: 1px solid #63c6ae; /* граница текстовых полей*/
width: 400px;
color: #222;
height:30px; /* высота текстовых полей*/
padding: 0 10px; /* внутренние границы текстовых полей*/
}

В результате у меня получилось вот так:

Рассмотрим вариант с использованием плагина Contact Form 7. После того, как плагин установлен и настроен, вам потребуется открыть файл style.css вашей активной темы и вставить в конце следующий код:

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

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

Успехов!