RigWEB

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

Здравствуйте! Сегодня я поделюсь с Вами как можно легко и быстро создать простую в установке и удобную в использовании форму обратной связи на WordPress без плагинов, используя простые средствами HTML, CSS и PHP.

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

Преимущества такой формы очевидны — она универсальна и может быть установлена на любой сайт, включая популярные CMS, такие как WordPress, Joomla и даже на простые HTML сайты. Если в качестве примера рассматривать ВордПресс, то отсутствие дополнительных плагинов снизит потенциальную нагрузку сервер.

Отправка сообщений происходит без перезагрузки страницы! По порядку следуя инструкции в итоге мы должны получить такой результат:

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

Что для этого требуется? Чуточку внимания, чтобы дочитать статью до конца и немного свободного времени для воплощения идеи в жизнь) В конце статьи есть ссылки на онлайн-демонстрацию и загрузку архива с исходниками.

Вставка формы обратной связи на блог

Для размещения формы обратной связи можно выбрать как отдельную запись, так и статическую страницу. Целесообразно ее использовать на специально отведенной странице для контактов. Итак, предлагаю использовать вот такой код, которой необходимо вставить в HTML-режиме редактора:

1
2
3
4
5
6
7
8
9
10
11
<form id="contact" action="/wp-content/themes/lime/mail.php" method="post">
<H3>Форма обратной связи</H3>
<div id="note"></div>
<div id="fields">
	<p><input type="text" name="name" id="author" placeholder="Имя" required> <label for="author">Как вас зовут</label></p>
	<p><input type="email" name="email" id="email" placeholder="E-mail" required> <label for="email">Электронная почта</label></p>
	<p><input type="text" name="sub" id="url" placeholder="Тема" required> <label for="url">Тема сообщения</label></p>
	<p><textarea name="message" cols="1" rows="10" id="comment" style="width:98%" placeholder="Введите сюда текст сообщения" required></textarea></p>
	<p><button type="submit" id="submit" class="go">Отправить сообщение</button></p>
</div>
</form>

В первой строке Вам придется немного подкорректировать и указать свой путь к файлу-обработчику (mail.php), о котором расскажу ниже. Содержание тега label (текстовая метка поля ввода) и атрибута placeholder (подсказка внутри текстового поля, исчезающая при вводе) измените при желании.

Для того чтобы заменить текстовое поле с темой сообщения на раскрывающийся список необходимо заменить строку 7, применяя тег select с вариантами выбора option:

7
<p><select name="sub" id="url" required><option value="" disabled selected>Выберите тему</option><option value="1">Пункт 1</option><option value="2">Пункт 2</option></select></p>

Атрибут required появился в HTML5 и указывает браузеру, что поле является обязательным для заполнения. Таким образом на стороне пользователя проводится проверка полей до отправки запроса на сервер. Атрибут работает не во всех браузерах, поэтому добавим в обработчике свою проверку.

Создаем обработчик формы обратной связи

Файл-обработчик с именем mail.php я поместил в папку с темой шаблона, в таком случае он будет доступен для редактирования прямо из админки блога, в меню Внешний вид/Редактор. Создаем файл, открываем его и вставляем туда следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$post = (!empty($_POST)) ? true : false;
if($post) {
	$email = $_POST['email'];
	$name = $_POST['name'];
	$email = $_POST['email'];
	$sub = $_POST["sub"];
	$message = $_POST['message'];
	$error = '';
	if(!$name) {$error .= 'Укажите свое имя. ';}
	if(!$email) {$error .= 'Укажите электронную почту. ';}
	if(!$sub) {$error .= 'Укажите тему обращения. ';}
	if(!$message || strlen($message) < 1) {$error .= 'Введите сообщение. ';}
	if(!$error) {
		$address = "primer@example.ru";
		$mes = "Имя: ".$name."\n\nТема: " .$sub."\n\nСообщение: ".$message."\n\n";
		$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
		if($send) {echo 'OK';}
	}
	else {echo '<div class="err">'.$error.'</div>';}
}
?>

Здесь мы повторно проводим проверку заполненности полей перед отправкой на почту. Если одно или несколько полей останутся пустыми — появится сообщение об ошибке, текст этого сообщения Вы можете изменить в параметре $error для каждого поля.

Для использования формы обратной связи на своих блогах Вам потребуется обязательно изменить строку 15, т.к. параметр $address отвечает за то, на какой адрес будет приходить отправленное сообщение.

На этом настройка файла mail.php заканчивается и можно переходить к следующему этапу — подключению необходимых скриптов и стилевому оформлению.

Подключение необходимых библиотек и скриптов

Отправка сообщений происходит на AJAX без перезагрузки страницы, поэтому в первую очередь нам необходимо подключить библиотеку jQuery. Большинство современных тем и шаблонов уже используют библиотеку jQuery и подключать ее повторно не требуется. В противном случае она подключается в заголовке до закрывающего тега </head> следующим образом:

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Еще один способ подключить jQuery на WordPress с помощью файла functions.php, в который необходимо вставить:

1
2
3
4
5
function my_jquery() {
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}

Преимущество второго способа заключается в том, что если какой либо плагин подключает свою версию библиотеки, то она отключается и загрузка происходит с CDN Google, исключая дублирование скриптов и предотвращая возможные конфликты.

Теперь нам необходимо подключить свой скрипт, который будет работать в паре с обработчиком mail.php и отправлять сообщения, а также выводить информационные сообщения без перезагрузки страницы. Для этого создаем файл contact.js со следующим содержимым:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery(document).ready(function($) {
	$("#contact").submit(function() {
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "/wp-content/themes/lime/mail.php",
			data: str,
			success: function(msg) {
				if(msg == 'OK') {
					result = '<div class="ok">Сообщение отправлено</div>';
					$("#fields").hide();
				}
				else {result = msg;}
				$('#note').html(result);
			}
		});
		return false;
	});
});
В 6 строке Вам необходимо изменить путь к файлу-обработчику mail.php.

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

1
<script src="/wp-content/themes/lime/contact.js"></script>

Основная работа завершена и наша форма на данном этапе уже полностью работоспособна, остался последний штрих — придать ей форму.

Оформление внешнего вида с помощью CSS

В этом примере я приведу фрагмент своего 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
form#contact  {
	border:1px solid #e5e5e5;
	padding:10px;
	background:#e9ffd0;
	border-radius:5px;
}
#contact label {
	font-size: 14px;
}
#contact input:required:valid {
	box-shadow: 0 0 3px #BCEF89;
	border-color: #BCEF89!important;
	background: #fff url(images/valid.png) no-repeat 98% center;
}
#contact textarea:required:valid {
	box-shadow: 0 0 3px #BCEF89;
	border-color: #BCEF89!important;
}
#contact input:focus:invalid {
	box-shadow: 0 0 3px #FFDF97;
	border-color: #FFDF97!important;
	background: #fff url(images/invalid.png) no-repeat 98% center;
}
#contact textarea:focus:invalid {
	box-shadow: 0 0 3px #FFDF97;
	border-color: #FFDF97!important;
}
.err {
	border: 1px solid #ff8c00;
	padding: 10px;
	background: #FFDF97;
	text-align: left;
	border-radius: 3px;
}
.ok {
	border: 1px #BCEF89 solid;
	margin-bottom: 15px;
	padding: 10px;
	background: #f5f9fd;
	text-align: center;
	border-radius: 3px;
}
#author, #email, #url {
	width: 30%;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #e5e5e5;
}
#comment {
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #e5e5e5;
	overflow: auto;
}
#submit {
	font-weight: 400;
	background: #393;
	font-size: 15px;
	color: #fff;
	padding: 10px 50px;
	border: none;
	cursor: pointer;
}

Вам потребуется два изображения, которые доступны в архиве с исходниками или сохраните их с этой страницы через контекстное меню по изображению «Сохранить картинку как…» и не забудьте в CSS изменить путь к этим файлам, если загружаете в иную папку.

valid — появляется в поле input при валидации формы;
invalid — появляется в поле input когда форма не заполнена или заполнена неверно.

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

Есть конечно и более функциональные плагины для CMS, например Contact Form 7 для WP, но зачем загружать блог? Данный код успешно справляется с возложенными на него функциями, к тому же не все плагины идеально работают и порой конфликтуют с шаблоном. На своей странице с контактами я использую именно эту форму)

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

А у Вас есть форма обратной связи на сайте или предпочитаете использовать электронную почту, Skype и прочие средства коммуникации с пользователями?

Рубрика: Кодекс
  1. ahawks

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

    Ответить

  2. Наталия

    Ммм, люблю работать без плагинов — поэтому попытаюсь реализовать все это счастье у себя)

    А насчет формы обратной связи — считаю, что она таки должна быть… И не очень люблю (в последнее время) общаться в аськах/скайпах, не смотря на то, что они у меня указаны в контактах…

    Ответить

  3. Webliberty

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

    Наталия, солидарен с Вами, тоже люблю без плагинов, не знаю откуда эта привычка берет начало… Как то раз пробовал установить один из плагинов, а он у меня наотрез отказался работать, поспрашивал у народа, никто ничего не подсказал, вот тогда и начал искать альтернативы — наверно вот где корни берут свое начало)

    Ответить

  4. Наталия

    Понятно) Не, у меня успешно работает контактная форма — но вот только меня бесит, что плагины грузят страницы… Вот поэтому я «за коды». Кстати, большинство контактных форм у меня тоже не работало — только плагин «контакт форм 7» прижился :smile:

    * а у меня эта привычка берет свое начало от нехорошей моды совать свой «умный» нос в код блога и что-то там ломать :twisted:

    Ответить

  5. Роман

    Пока что использую плагины. Не замечал особой перегрузки… Может быть у меня еще мало посетителей?

    Ответить

  6. Webliberty

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

    Ответить

  7. Тёма

    Подскажите а как сделать, чтобы после отправки письма и надписи «Сообщение отправлено, теперь Вы можете вернуться обратно и продолжить чтение Блога Свободного Вебмастера» человек снова возращался автоматом на страничку

    Ответить

  8. Webliberty

    Здравствуйте, Артем! Да конечно можно сделать такое и очень просто! Для этого в самое начало кода, который я привел в качестве примера для вставки в файл mail.php нужно вставить вот такую строку:

    1
    
    <meta http-equiv='refresh' content='5; url=http://webliberty.ru/'></meta>

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

    Опять таки предлагаю протестировать как это будет происходить на моем блоге, если понравиться, то применяйте у себя ;-)

    Ответить

  9. Анатолий

    Здравствуйте Я воспользовался Вашим уроком. И как не странно у меня все получилось. Подскажите я бы хотел установить защиту от спама и изменить цвет формы как это можно сделать. И еще что бы можно было файл прикрепить. Заранее спасибо.

    Ответить

  10. Webliberty

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

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

    К данной форме можно применить различные стили оформления, внешний вид настраивается через CSS, путем редактирования файла style.css Вашей темы.

    Ответить

  11. Андрей

    Здравствуйте, уважаемый автор блога :smile:
    У меня при отправке сообщения вместо нормального текста появляется вот такое — «��������� �� ���������», и, как видите, написано почему-то «сообщение не отправлено», но все поля заполнены, не могу понять в чём проблема… Какую кодировку мне поставить чтобы отображался нормальный текст, и подскажите, в чём может быть проблема с отправкой сообщения? :sad:

    Ответить

  12. Webliberty

    Андрей, еще раз все проверьте, правильно ли следовали указаниям инструкции, проблем с отправкой быть не должно, единственная причина может быть как раз эти знаки вопроса — потому и не уходит письмо. Проблемы с кодировкой возникли. В файле mail.php за кодировку отвечает строка

    1
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

    Ответить

  13. Артём

    Привет, всё настроил — делал по инструкции, одно но письма не приходят((
    Сообщение появляется, что письмо отправлено, мыло подставлял и яндекса и гугла один хрен не пашет, в чём может быть причина?
    Когда жму отправить сообщение — долго долго грузит- пишет доставлено, но письма нет((

    Ответить

  14. Webliberty

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

    Ответить

  15. Елена

    Здорово придумано, я сейчас же попробую это воплотить, а то плагин Contact Form 7 не идёт у меня ни как, ошибка выходит.

    Ответить

  16. Андрей

    Все отлично работает. Спасибо :cool:
    Только есть вопросик. Как сделать поля обязательными для заполнения? А то в данный момент можно отправить пустую форму.

    Ответить

  17. Webliberty

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

    Ответить

  18. Вера

    Здравствуйте, Денис! У меня вот какой вопрос. В заметке пишется «Для использования формы обратной связи на своих блогах Вам потребуется изменить строку 11 (обязательно, т.к. параметр $address отвечает за то, на какой адрес будет приходить отправленное сообщение)».
    А где взять этот адрес, я пробовала подставить адрес своего ящика на gmail — не отправляется…

    Ответить

  19. Webliberty

    Вера, безусловно это должен быть Ваш адрес, например:

    1
    
    $address = "shurygin4@gmail.com";

    Ответить

  20. Роман

    Андрей, у меня была такая же проблема. Я с ней разобрался. Нужно открыть mail.php из админки вордпресса в нем на том месте где должен быть текст со словами «все успешно отправлено» или как там у вас, я не знаю, у меня вместо текста стояли такие же карказяблики. Я их просто удалил и заново ввел нужный текст — заработало.

    Ответить

  21. Евгения

    Спасибо большое! Пара элементарных действий и форма обратной связи у меня уже на сайте! Единственное но: при смене шаблона все доработки шаблона уходят вместе со старым:))) это грустно. И вопрос, а как вставить каптчу?
    С Новым Годом!

    Ответить

  22. Webliberty

    Евгения, если настраиваете внешний вид формы, то при смене шаблона ничто не мешает скопировать код оформления из CSS в новую тему. Капчу к форме не прикрутить, а если имеете в виду капчу к комментариям, то для этого существуют специальные плагины. С наступающим!

    Ответить

  23. Дмитрий

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

    А код я оставил вот такой «/wp-content/themes/fives/mail.php». Объясните пожалуйста, что не так делаю?

    Ответить

  24. Webliberty

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

    Ответить

  25. Людмила

    Спасибо за статью. Наткнулась на нее случайно. Я на форуме wordpress.org оставила сообщение. Хотела узнать, как сделать чтобы комментарии отображались не только на главной странице. Никто так мне ответа и не дал. Вспомнила про твой блог, стала писать письмо и случайно зашла на страницу «Контактов» и увидела обратную связь. Хотела умыкнуть код, но на ткнулась на ссылку на эту статью. Это прямо таки для меня подарок.

    А как подогнать по размеру страницы. Я на своем сайте обратную форму поставила в “Гостевой”.

    Ответить

  26. Webliberty

    Людмила, редактируйте строки, содержащие

    1
    
    style="width: X%"

    где Х — ширина блока в процентах.

    Ответить

  27. Дмитий

    Здравствуйте Денис! Предложение замечательное, т.к. я тоже стараюсь использовать минимум плагинов, но у меня почему-то при отправке сообщения открывается страница 404, вроде сделал все как Вы указали. Не могли бы Вы мне помочь? спасибо!

    Ответить

  28. Webliberty

    Дмитий, добрый день! Дело в том, что 404 ошибка появляется не только после отправки сообщения, но даже при простом доступе к файлу, по адресу wp-chance.ru/wp-content/themes/fives/mail.php его просто не существует. Проверьте, загрузили ли файл mail.php на сервер в указанную папку и под таким ли он именем находится.

    Вордпресс такая интересная система, что учитывает регистр символов :smile: Ваша тема на сервере находится в папке /Fives/ — с большой буквы. Измените в файле mail.php путь к папке с темой в соответствии с ее реальным названием:

    <form name="MyForm" action="/wp-content/themes/Fives/mail.php" method="post"></form>

    и все заработает)

    Ответить

  29. Дмитий

    Спасибо Денис! Все получилось, только вот письма почему то не приходят? Тех. поддержка хостинга мне ответила, что поддерживает функцию отправки сообщения. Теперь вот только не могу понять почему сообщения не поступают, не подскажите Денис, может у Вас есть какое нибудь предположение? Спасибо!

    Ответить

  30. Webliberty

    Дмитий, может в спам ушли письма, не смотрели?

    Ответить

  31. Дмитий

    Смотрел Денис! Я тоже так думал, 2 дня тестировал, но письма так на gmail не поступали, зато на yandex почту и mail.ru все работает. Спасибо Тебе Денис, мне эта форма очень понравилась, буду пользоваться ею.

    Ответить

  32. DivaDii

    Просто, как всё гениальное! СПАСИБО Вам огромное. Всё прекрасно работает. Настроила очень-очень просто и быстро. А то с плагинами иногда бывают глюки — то с хостингом проблемы, то конфликты с другими плагинами, то версия не подходит, то что-нибудь устарело, то просто плохая погода за окном. :(

    Дополнение. Этот способ спокойно, без никаких проблем работает на бесплатном хостинге. Проверила. Свободному Вебмастеру — ещё раз огромная благодарность!

    Ответить

  33. Владимир Жданов

    Ты просто спас!!! Эпопея с заменой плагинов продолжается! ;-)

    Ответить

  34. Webliberty

    DivaDii, пожалуйста) Рад слышать приятные отзывы) Многие используют плагины для этих целей, особенной популярностью пользуется Contact Form 7, но ради такого небольшого действия ставить мощный плагин нецелесообразно… Во-первых редко кто из посетителей пользуется ею, т.е. процент использования очень мал, а ресурсов сервера потребляет много. А во-вторых, действительно, очень часто возникают проблемы с совместимостью.

    Владимир, главное не переусердствовать) Конечно, под каждую мелочь не нужно ставить плагины, некоторые умудряются даже кнопку вверх с их помощью делать :twisted: Да и если вдруг возникнет желание сменить тему, придется все переделывать вручную, а если использовать плагины, то тему можно менять спокойно)

    Ответить

  35. Владимир Жданов

    Я за бессонную ночь поменял на код почти половину плагинов. Из 41 плагина осталось 26. Просто не осилил остальные…срубило. Желания менять тему пока нет, да и врядле возникнет. Над шаблоном я корпел 2 недели. Ну а если и возникнет необходимость, то переставить код пара пустяков. :smile:

    Ответить

  36. Webliberty

    Ого! Многовато было! У меня сейчас 10 плагинов установлено, самых необходимых)

    Ответить

  37. Владимир Жданов

    Я вот считал что 41 самых необходимых. Я понаставил самые необходимые, как считал, а теперь, смотрю, а они и не такие уж и нужные. Со временем статистика покажет какие не нужны. Кстати, очень нравится твой блог, аккуратный!

    Ответить

  38. Webliberty

    Да, со временем все прояснится. Спасибо, я стараюсь) У тебя тоже хороший блог, выглядит свежо и стильно :smile:

    Ответить

  39. Ольга

    Здравствуйте! Вроде бы все сделала, как вы написали, но при отправке выходит «Сообщение не отправлено, проверьте правильность заполнения полей и попробуйте снова» хотя я заполняю все поля. Что не так?

    Ответить

  40. Елена

    Денис, здравствуйте, опять обращаюсь к Вам за советом. Я все сделала по Вашей инструкции, но ни на локалке, ни на живом сервере сообщения не отправляются, хостинг тот же, что и у вас Reg.ru
    Система пишет такой ответ: Firefox не может определить, как открыть данный адрес, так как протокол (d) не связан ни с одним приложением.

    Подозреваю, что дело а какой-то ерунде, но боюсь залезать в базу данных, я с таким трудом перенесла блог… Может я не все пути изменила в базе данных перед переносом. У меня там фигурирует диск Z:,правильно ли это? Помогите, пожалуйста.

    Еще вопрос появился. Как можно сделать, чтобы не было запроса Блог или Тема. Я убрала из кода nТема: $sub , но это не помогло. P.S Очень рассчитываю на Ваш совет по предыдущему посту.

    Ответить

  41. Webliberty

    Ольга, проверьте еще раз, все должно работать если делали по инструкции.

    Елена, у Вас проблемы с переносом блога — это 100%, никаких дисков Z быть не должно, какие могут быть диске на хостинге? Он остался еще от локального сервера — там как раз создается виртуальный диск. Даже проблема не в том что форма у Вас не работает, проблемы могут возникать и в других ситуациях. Я все же рекомендую найти в сети подробную инструкцию по переносу и повторно ее провести. По второму вопросу — исключайте $sub из всех строк в коде.

    Ответить

  42. Роман

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

    Ответить

  43. Елена

    Ура! Я все исправила, САМА! Просто в адресе диск D: надо было поменять на http//
    Важно! При переносе с локалки САМО НИЧЕГО НЕ ИСПРАВИТЬСЯ, если не изменить адрес mail.php, письма отправляться не будут! Денис, заходите в гости, адрес своего блога я написала выше :smile:

    Ответить

  44. Webliberty

    Елена, очень рад что все получилось, наверное вдвойне приятнее если проблема была решена самостоятельно)))

    Ответить

  45. Иван

    Добрый день! Спасибо за статью. Не подскажите как можно форму немного усложнить следующим способом: допустим на странице сайта не одна такая форма, а несколько, которые пользователь может заполнить, но хотелось бы, чтобы кроме кнопки отправить, была кнопка добавить, чтобы при заполнении нескольких форм можно было добавить их все в 1 письмо, которое и отправлялось на нужный адрес. Надеюсь понятно объяснил:) Если есть такой плагин, буду благодарен узнать название:)

    Ответить

  46. Webliberty

    Добрый день, Иван! Как объединить несколько форм в одну не знаю, но можно добавить новые поля в форму, по аналогии с предложенными, путем добавления строк. Примерно понял о чем говорите, чем то напоминает корзину в интернет-магазине :?:

    Ответить

  47. Иван

    Да, на корзину похоже. Просто такой формой удобно пользоваться при составлении определенных заявок. Заполнил одну, добавил, заполнил еще одну, добавил, затем отправил всё одним письмом. Если каждый раз отправлять отдельно, при большом количестве заявок будет огромная гора писем и куча лишней работы:)

    Ответить

  48. seogrot

    Сделал у себя на блоге форму контактов по Вашему примеру, всё работает. Спасибо!

    Ответить

  49. Анатолий

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

    Ответить

  50. Светлана

    Все поняла, установила форму. Только после отправки письма появляется сообщение с вопросами. Как изменить кодировку? Помогите пожалуйста!

    Ответить

  51. Tester

    Предлагаю конец кода поменять на такой:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    if ($send == 'true') {
    	echo  header ('Location: https://example.com/web/yes/');
    	//Спасибо, Ваше сообщение доставлено
    }
    else {
    	echo header ('Location: https://example.com/web/no/')
    	// Сообщение не отправлено, проверьте заполнение полей
    exit(); 
    // прерываем работу скрипта, чтобы забыл о прошлом 
    }
    ?>

    Где example.com/web/yes/ и example.com/web/no/ заранее созданые страницы с текстовками про успех или неудачу.

    Ответить

  52. Webliberty

    Анатолий, Светлана, проверяйте кодировку в которой сохраняете файл, она должна быть UTF8 и конечно же читайте комментарии выше — там обсуждалась подобная проблема.

    Tester, вариант рабочий? Проверяли? :?: В скором времени протестирую как появится время, благодарю за идею!

    Ответить

  53. Новичок

    Анатолий, Светлана, чтобы отображалось все правильно надо те файлы, в которые вы вносили изменения, через notepad++ преобразовать в UTF8 без BOM. Там во вкладке «кодировки» так и написано «преобразовать в UTF8 без BOM»

    Ответить

  54. asers

    Как сделать, чтобы поля были над друг другом а не в одну строку?

    Ответить

  55. Webliberty

    asers, добавить между строками переносы:

    1
    
    <br />

    Ответить

  56. Nurlan

    Здравствуйте. Хоть статья и написана 2011 году, а она до сих пор актуальна и помогает многим в вопросе с контактной формой. Вот и я воспользовался вашим методом. Спасибо! Как говорится: «Респект и уважуха». Все гениальное — просто! :cool:

    Ответить

  57. Виктор

    Замечательная статья! Все делается довольно просто! ;-)

    Ответить

  58. Сергей

    Добрый день, Денис. Всё делал по инструкции. Перечитывал комментарии.

    В mail.php изменил почтовый адрес на свой майл, сохранил в utf-8, в сингл (мне так надо) вставил второй код где изменил путь к файлу mail.php
    После отправки — пишет: По вашему запросу ничего не найдено.

    На другом сайте тоже самое… Подскажите куда смотреть, плагин Contact Form 7 у меня почему то не работает, поэтому решил пробовать Ваш метод, помогите побороть…

    Ответить

  59. Юрий

    Здравствуйте! У меня возникло 2 вопроса:

    1.Зачем в файле mail.php операторы сравнения заполненности форм, если они всегда будут заполненными; надпись, что письмо не отправлено, если оно всегда будет «отправлено», даже если это не так?
    2.Зачем ставить mail.php в папку с темой, если можно поставить в корневую сайта и при смене тем не заморачиваться с закачкой нового файла?

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

    Ответить

  60. Nurlan

    Можно ли сделать, чтобы нельзя было отправлять пустое сообщение? В данном варианте при нажатии на «Отправить сообщение» порожнее письмо уходит без проблем.

    Ответить

  61. Webliberty

    Сергей, это может означать только одно: не правильно указан путь к файлу, других вариантов нет. Учтите, что WP одно и тоже слово но с маленькой и заглавной буквы воспринимает по-разному.

    Ответить

  62. Дмитрий

    Спасибо!!! За отличную форму, но у меня есть несколько вопросов:

    1. Подскажите как сделать поле «текст сообщения» меньше по высоте?
    2. При отправке одного сообщения приходит сразу 2 письма: одно нормальное, а другое от имени NO ADRESS
    3. Я сделал после отправки редирект на главную страничку. Скажите а как сделать видимый обратный отсчет по секундам?

    Ответить

  63. Евгений

    Спасибо. Только недавно начал заменять плагины различным кодом. «Припёрло» так сказать. Поставил Ваш код. Деинсталлировал Contact Form 7. Всё отлично!

    Ответить

  64. Webliberty

    Дмитрий, по первому вопросу все очень просто: в строке начинающейся на

    1
    
    <textarea name="body" cols="1" rows="5"

    Отредактируйте число строк в текстовом поле, а именно rows="5". Почему приходит два письма для меня загадка, никогда такого не было и от других людей тоже ничего подобного не слышал ранее. Про таймер не знаю)))

    Ответить

  65. Оксана

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

    Были у меня и кракозябры и сообщения не приходили, но тут я сама виновата, в емэйле лишнюю букву впечатала. Кракозябры исправила как был совет выше, все работает. Вот только я тоже хочу, чтобы после отправки сообщения, человека возвращало обратно. Я поняла, какой код надо вставить, но объясните мне буквально, вместо какой части первой строки это вставить? До каких пор стирать код?
    Не судите строго, я цветовод и в программировании не понимаю ничего. Итак два дня соображала, что файл надо залить на сервер. Пришлось освоить filezilla.

    Ответить

  66. Webliberty

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

    Ответить

  67. Оксана

    Webliberty, идеально! Только я уменьшила время до 3сек и дописала текст. Теперь после отправки сообщения пишет: Ваше сообщение отправлено, спасибо. Через 3 секунды Вы вернетесь на главную страницу. Спасибо. :)

    Ответить

  68. Алексей

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

    Ой, извиняюсь за невнимательность, кнопочка есть :twisted:

    Ответить

  69. Баскак

    Действительно отлично работает! У меня стоял CF7, который оказывается непонятно когда перестал работать. Теперь всё отлично отправляется. Спасибо!

    Ответить

  70. Андрей

    Здравствуйте, я к вам за помощью. У меня данная форма не работает, я пробовал брать ее с других блогов, думал может где то косяк в коде, но результата нет. Начал я с вашего блога и к вам вернулся. Пишет не правильно заполнены поля, проверял все тысячу раз. У моего блога движок вордпресс, хостинг Таймвеб. Поможете? :cry:

    Ответить

  71. Webliberty

    Андрей, попробуйте пожалуйста еще раз все выполнить по пунктам, проблем быть не должно, большинство из них возникает из-за невнимательности… Желаю удачи!

    Ответить

  72. Денис

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

    Ответить

  73. Роза

    Добрый день! Я новичок по веб-программированию, поэтому может мой вопрос вам покажется абсолютно глупым)) Если что не судите строго)) Сделала все как написано, но у меня когда нажимаешь на ОТПРАВИТЬ выскакивает php файл в браузере. С чем это связано? Путь к нему вроде указала правильно… Денвер у меня включен при этом. Как вообще проверить работоспособность формы?

    Ответить

  74. Webliberty

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

    Роза, при установке на Денвер есть некоторые нюансы, попробуйте на реальном проекте. Страницу на которой ее разместите не обязательно публиковать для пользователей, пометьте ее как личную или оставьте в черновиках — это не помешает тестированию.

    Ответить

  75. Вадим

    Как раз то, что и искал! Огромное спасибо Денис! Легко, просто и ни какой нагрузки, ещё бы найти чем Акисмет заменить, а то судя по тому,что нарыл о нём в инете, жрёт зараза ресурсы немерено((( Правда мне он пока и без надобности, на блоге всего пяток статей — зелёный :twisted:

    Ответить

  76. Webliberty

    Вадим, пожалуйста) Я у себя уже давно убрал Акисмет, он не только плохо справляется со спамом (пропускает его), но и как выяснилось позже серьезно увеличивает в размере базу данных. Заменил плагином Antispam Bee.

    Ответить

  77. Вадим

    Webliberty, спасибо за наводку на плагин))) уж очень не лежала душа к Акисмету. Зашёл к Вам на блог и день моментом пролетел… :twisted:

    Ответить

  78. Школа Бостон

    А вы не подскажете, как отредактировать Php файл, чтобы в письме отправки присутствовала страница с которой было отправлено сообщение. Сейчас на почту приходят просто комментарии с контактными данными отправителя, но не ясно, с какой страницы он их отправил.

    Ответить

  79. Webliberty

    В параметре $mes для разных страниц с формой можно задать свои уникальные имена, в зависимости от содержания страниц на которых размещена форма. Т.е. использовать не Тема, а что-то другое…

    Ответить

  80. Vasilionis

    Второй раз делаю форму обратной связи по вашему примеру! Для своих целей форма работает превосходно! Раньше использовал некорректный код, который позволял отправлять пустые сообщения при незаполненных полях, но с этой формой все хорошо работает. Спасибо за пример!

    Ответить

  81. Александр

    Почти все плагины отправляют формы без перезагрузки страницы с помощью ajax и jquery. Подскажите как такую создать?

    Ответить

  82. Лилия

    Webliberty,спасибо огромное за форму! Все работает.

    Подскажите, как сделать так, чтобы сообщение об успешной отправке открывалось не на отдельной странице, а на странице самой формы в сплывающем окне?

    Ответить

  83. Webliberty

    Александр, используйте те самые плагины ;-)

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

    Ответить

  84. Оксана

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

    Ответить

  85. Webliberty

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

    Ответить

  86. Оксана

    Webliberty, я прочитала все ваши комментарии. Отключила все плагины вообще — все что есть — результат неизменный :( Даже пробовала дать полный доступ пользователям к сайту — ничего…

    Ответить

  87. Webliberty

    Оксана, однако текст на этой странице выделить невозможно ;-) Проверяйте тщательнее, это может быть не обязательно плагин, а просто код, вставленный в шаблон страницы. Можете посмотреть в шапке и подвале или functions.php

    Ответить

  88. Оксана

    Просмотрела через браузер код страницы и нашла там возле текста скрипт. Удалила и все заработало. Еще раз всем большое спасибо за вашу помощь и подсказки :)

    Ответить

  89. Vladimir Vladimirovich

    Огромное человеческое спасибо за форму обратной связи. Все работает и сайт без плагина CF7 на много стал быстрее грузиться :cool:

    Ответить

  90. Ирина

    Огромное спасибо за форму! Я по возможности стараюсь устанавливать поменьше плагинов — только самые необходимые и проверенные.

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

    * — поля, обязательные для заполнения

    Чтобы народ лишний раз пустую форму не пытался отправить.

    Ответить

  91. Виталий

    Спасибо, избавился от плагина) У кого выдает квадратики вместо букв, откройте блокнот++ и сохраните код который нужно загрузить в папку с темой, в кодировке utf-8. Мне помогло.

    Ответить

  92. Ольга

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

    Оказалось, что письма приходили в виде сообщения об ошибке доставки сообщения, а я не сразу поняла. Проблема же ошибки была в том, что на хостинге, в панели управления сервером в настройках PHP надо было прописать е-мейл, который будет использоваться для отправки почты скриптом. Огромное спасибо за скрипт! :cool:

    Ответить

  93. Надежда

    Спасибо. У меня тоже все получилось. Теперь удалила один плагин :razz:

    Ответить

  94. Виктор

    Спасибо, всё очень подробно написано :) Поставлю себе такую.

    Ответить

  95. Жанна

    Спасибо огромное, после нескольких доработок все работает просто замечательно

    Ответить

  96. Janik

    День добрый. Благодарю за подрбоное описание. Реализовал предложенную форму у себя на блоге, очень доволен. Еще раз спасибо ;-)

    Ответить

  97. Игорь

    Так и не получилось с кодировкой. Письма приходят с иероглифами. Все, что написано в Графе «Текст сообщений» приходит на Gmail иероглифами. А «Тема», — нормальными буквами. Подскажите, пожалуйста, что сделать. Только подробно — для чайника.

    Ответить

  98. Webliberty

    Игорь, никаких секретов нет и все достаточно просто. Открыть файл mail.php в текстовом редакторе Notepad++ и через верхнее меню найти и выбрать пункт «Преобразовать в UTF8 без BOM», после чего сохранить файл и сохранить на сервере.

    Ответить

  99. Владимир

    Добрый день. У меня в форме не видно полей ввода (белое на белом), как изменить цвет?

    Ответить

  100. Webliberty

    Владимир, задайте фон через CSS, например так:

    1
    2
    3
    
    form {
    	background: #e9ffd0;
    }

    Ответить

  101. Артур

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

    Подскажите, пожалуйста. Что нужно изменить в коде, чтобы сообщения типа «Вы заполнили не все поля, необходимо вернуться назад!» появлялись во всплывающем окошке alert?

    Ответить

  102. Webliberty

    Артур, здравствуйте! Приведу пример с окошком когда сообщение не отправлено. В файле mail.php найдите строки:

    1
    2
    3
    4
    
    else
    {
    echo "Вы заполнили не все поля, необходимо вернуться назад!";
    }

    и замените их на такие:

    1
    2
    3
    4
    5
    
    else
    {
    $err = 'Сообщение не отправлено, проверьте заполнение полей';
    }
    echo "<script>alert( \"$err\");</script> \n";

    И если используете редирект на главную страницу после отправки, то замените ссылку на страницу с контактами, а время ожидания установите равным нолю. Часть строки:

    1
    
    meta http-equiv='refresh' content='0;

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

    Ответить

  103. Олег

    Доброго времени суток.
    Мне понравился ваш метод установки «Обратной связи». Всё сделал по пунктам, всё легко и просто, проблем нигде не было, всё понятно. Но по каким-то причинам не работает. Всё перепроверил, и кодировку, и название темы своей и ошибки по внимательности, но увы так и не нашёл причину. Даже в комментариях не нашёл подсказку.

    Сама форма установилась, графы заполняются, но когда нажимаешь отправить высвечивается весь код и потом идёт редирект на главную страницу. Письма не приходят на почту. Буду признателен, за помощь, что же не так сделано… Заранее благоДарю!

    Ответить

  104. Webliberty

    Олег, добрый день. Не вижу где может таиться проблема. Форма работает даже после обновления WP до версии 4.0

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

    Ответить

  105. Олег

    Всё работает! Спасибо за код. Другой вопрос: как добавить к этой форме возможность прикрепления файла?

    Олег, Может быть на хостинге отключена функция php mail(). Проверьте, т.к. у меня было отключено по умолчанию. Может поможет

    Ответить

  106. Евгений

    Здравствуйте, большое спасибо за форму но у меня возникли проблемы при заполнение ее с планшета. Суть проблемы в следующим: если при заполнение оставить строки пустыми и отправить, то сначала будет сообщение об ошибке, а потом перекинет на главную страницу сайта. Проверял на планшетах с андройдом и IOS, файл PHP был на двух хостингах результат такой же. При отключенной проверки на пустые поля все работает хорошо.

    Ответить

  107. Webliberty

    Евгений, здравствуйте. Только что проверил на планшете Samsung Galaxy Note 10.1 — форма работает без ошибок. Возможно конфликт плагинов.

    Ответить

  108. Федор

    Автор, спасибо огромное. Очень. Большое. Спасибо. От души. Спас.

    Я перепробовал штук 10 плагинов WP, они все не настраиваются под нужный мне дизайн, точнее уже под готовую верстку, решил загуглить как сделать такой плагин самому, а тут такая 2-ух шаговая инструкция, простая как табуретка и работающая как Автомат Калашникова.

    Правда при удалении поля «Тема» форма начинает ругаться, что не все поля заполнены, но я вспомнил, что нынешняя форма не содержит номера телефона, и теперь все сообщения приходят с темой — номером телефона, что кстати очень удобно : )

    Еще раз спасибо, огромное!

    Ответить

  109. Михаил

    Здравствуйте, сделал всё как у Вас написано, но письма не доходят!
    Спросил у хостера Поддерживает ли хостинг отправку сообщений? Он написал что поддерживает. Помогите, пожалуйста, разобраться!

    Ответить

  110. Webliberty

    Михаил, на странице с формой откройте консоль разработчика в браузере и посмотрите, есть ли ошибки на странице.

    Ответить

  111. GladWeb

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

    Ответить

  112. Alex

    Спасибо большое! Не люблю плагины.Очень простая, а главное рабочая форма :cool:

    Ответить

  113. Сергей

    Огромное спасибо, всё работает идеально!!! Не знаю только, как в присылаемое мне на почту письмо добавить адрес страницы, с которой писали. Помогите пожалуйста.

    Ответить

  114. Webliberty

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

    Для того чтобы в тексте письма получатель видел с какой страницы отправлено сообщение давайте подредактируем код обработчика mail.php. Найдите строку:

    11
    
    $address = "webliberty@yandex.ru";

    и перед ней вставьте:

    10
    
    $ref = $_SERVER['HTTP_REFERER'];

    Затем замените строку:

    12
    
    $mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body";

    на такую:

    12
    
    $mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body \nИсточник:$ref";

    Я использовал реферер для определения страницы, а не переменные WordPress, потому что функция the_permalink(); должна работать в цикле, которого здесь нет. В тексте письма я назвал страницу отправки Источник, можете заменить слово на другое.

    Ответить

  115. Сергей

    Спасибо большое, помогло здорово!!!!

    Ответить

  116. Елена

    Денис, привет! Сегодня получила письмо от посетителя блога, что не уходят комментарии. Система выдает фатальную ошибку. Я проверила, действительно, причиной этого стал плагин Akismet Версия 3.1.1. Я его деактивировала, комментарии стали уходить.

    Выше прочитала, что Вы используете Antispam Bee. Как он работает, не конфликтует с отправкой комментариев? Спасибо.

    Ответить

  117. Webliberty

    Елена, добрый день! Да, я использую Antispam Bee уже достаточно давно, никаких проблем не возникало на данный момент.

    Ответить

  118. Елена

    Спасибо, Денис! Пошла устанавливать. :smile:

    Ответить

  119. Сергей

    После отправки почты, происходит переход по адресу, указанному в первой строке файла mail.php. Что надо прописать в моём случае, чтоб перенаправление было на страницу, с которой отправлена почта?

    Ответить

  120. Webliberty

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

    Ответить

  121. Sergei

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

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

    Ответить

  122. Игорь

    Я так понимаю что если в корне темы вставить файл mail.php, то при установки новой темы данная форма работать не будет, если конечно удалить старую.
    Может лучше в корень сайта вставлять?

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

    Ответить

  123. Webliberty

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

    Для тех кто ищет старый вариант кода — в архиве есть его исходники в файле old.zip.

    Ответить

  124. Игорь

    У меня пару вопросов:
    1. Я забыл подключить библиотеку jQuery, но у меня всё работает и так. Может и не надо ничего делать в файле functions.php?
    2. В CSS написано в двух строчках images/valid.png, что это такое?

    Ответить

  125. Webliberty

    Игорь, верно, форму допустимо размещать на нескольких страницах, задавать различные id и менять оформление, в то время как обработчик остается один. Под определенные нужды можно использовать несколько обработчиков с различными полями — в этом и заключается универсальность решения, оно достаточно гибкое.

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

    1. Если все работает без перезагрузки, значит jQuery уже подключен или в самой теме, или в плагине.
    2. На самом деле используется 2 изображения — valid.png и invalid.png — это те изображения, о которых я упоминал в статье. Они появляются в текстовом поле input при вводе и визуально подсказывают правильно заполнено поле или нет.

    Ответить

  126. Сергей

    В IE 11 отображается неправильно

    Ответить

  127. Елена

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

    Ответить

  128. Webliberty

    osfaunus, тестировал на IE11 в Windows 10 и Windows 7 — форма со страницы с примером отображается корректно. Проверьте у себя, может что-то неправильно сделали, когда меняли стили.

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

    Ответить

  129. Дэн

    При нажатии на кнопку отправляет на белоснежную страницу с надписью «ОК» в верхнем левом. Письма приходят. Редирект через 5 сек работает. Вставил код в functions. Что у меня не так? Хочу отправку с той же страницы!

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

    Ответить

  130. Webliberty

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

    Ответить

  131. Ян Збаразкий

    Здравствуйте. У меня возникли вопросы, так как я не очень хорошо разбираюсь в кодах. Файл mail.php залил на хостинг, по пути, указанном в статье. Отредактировал его-указал свою почту. Код «Форма обратной связи» разместил на Странице в редакторе «Текст» в админпанеле блога. Она появилась на Странице в формате «Визуально». Дело дошло до Скрипта (contact.js).

    Строку №6 отредактировал, а вот куда его помещать, не могу понять. Пробовал расположить в редакторе «Текст» на Странице, где «Форма обратной связи» находится — но весь этот код отображается и в формате «Визуально». А я так понимаю, что он не должен быть виден на Странице с «Формой обратной связи». Помещал его ПОСЛЕ кода «Формы».

    Поэтому прошу Вас рассказать мне более подробно, 1) куда, что, и за чем или перед чем прописывать, имею ввиду файл contact.js. 2) И ещё прошу, скажите куда помещать библиотеку jQuery, 3) и код «Оформления внешнего вида». Вы написали, что его нужно прописать в файл style.css, но куда именно (вниз, вверх…), я не совсем понял.
    Извините, что так много вопросов, но я только начинающий блогер. Спасибо. Жду ответ.

    Ответить

  132. Webliberty

    Ян, здравствуйте. Скрипт подключается в заголовке, разместите строку перед закрывающим тегом </head> (на WordPress это файл header.php), чтобы получилось так:

    1
    2
    
    <script src="/wp-content/themes/lime/contact.js"></script>
    </head>

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

    jQuery можете подключить аналогичным образом, а если будете использовать второй вариант, то после <?php в начале файла functions.php. Стили оформления — в самый конец файла style.css

    Ответить

  133. imya

    Афтору спасибо! Самый лучший скрипт! Былобы совсем идеально если после надписи «сообщение отправлено» — раскрывалась заново пустая форма. :cool:

    Ответить

  134. Павел

    Подскажите пожалуйста, а как сделать чтобы к форме обратной связи можно было крепить файлы, картинки например. Если не трудно, можно пожалуйста код
    обратной связи с выпадающим списком тем письма, как у вас на сайте. Очень понравилось, спасибо заранее :)

    Ответить

  135. Webliberty

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

    Ответить

  136. Антон

    Добрый день! Спасибо за простое решение!

    Форма работает, но почему-то не появляются картинки invalid valid.png при заполнении формы.

    Выгрузил и настроил в папке темы файлы mail.php и contact.js
    Папку contact, которая содержит image тоже выгрузил в папку с шаблоном.
    Потом попробовал файлы invalid и valid.png выгрузить в папку с темой — тоже не работают.

    Что сделал не так? Подскажите, пожалуйста.

    Ответить

  137. Webliberty

    Антон, откройте консоль разработчика в браузере и посмотрите есть ли 404 ошибки, наверняка не правильно указан путь к файлам изображений. Они должны располагаться по адресу: /папка с темой/images/valid.png

    Ответить

  138. Антон

    Webliberty, благодарю вас за оперативность ответа и подсказку! :cool:

    Ответить

  139. Алексей

    Здравствуйте. Форма работает отлично. Спасибо. Пришлось допилить кое что, но в целом отлично. Вопрос: как убрать надпись с названием?

    Ответить

  140. Webliberty

    Алексей, удалите вторую строку:

    2
    
    <H3>Форма обратной связи</H3>

    Ответить

  141. Дмитрий

    Привет, отличный урок, но возник один вопрос: будет ли форма работать на локальном сервере (denwer) ?

    Ответить

  142. Webliberty

    Дмитрий, привет. На Денвере не тестировал. Если локальный сервер настроен должным образом, то должно работать как положено. Проверьте)

    Ответить

  143. evgeniy

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

    Ответить

  144. Webliberty

    Евгений, в обработчике, например, после 8 строки добавить переменную:

    $from = "$name <$email>";

    А в 17 строке заменить $email на $from таким образом:

    17
    
    $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$from");

    Ответить

  145. Юрий

    Приветствую! Прочитал почти все комментарии, но ни у кого такой проблемы нет, как у меня. Создал форму, но нет поля для ввода текста. Все вроде делал по инструкции, но вот беда. Что это может быть, не подскажите? Заранее спасибо

    Ответить

  146. Роман

    Перепробовал все, не хочет отправлять письма без перезагрузки страницы, все пути проверил на 100 раз, уже и полные пути прописывал и с бубном танцевал, 4 часа времени — толку ноль !

    Ответить

  147. Webliberty

    Юрий, действительно, с таким еще никто не обращался. Тег textarea в коде имеет id="comment", проверьте, быть может он еще где либо используется и имеет свойство

    1
    
    diaplay: none;

    Роман, jQuery подключен? Заодно проверьте консоль разработчика в браузере на наличие ошибок.

    Ответить

  148. Евгений

    Webliberty, присоединяюсь к вопросу от Дэна про «…При нажатии на кнопку отправляет на белоснежную страницу с надписью «ОК» в верхнем левом..»

    Подскажите, пожалуйста, что не так?

    Спасибо.

    Ответить

  149. Евгений

    Удалось разобраться, почему после отправки появлялась белая страница с ОК в левом верхнем углу: был неправильно указан путь к папке со скриптом contact.js.

    Эта форма от Webliberty — отличное решение!

    Совет всем: ВНИМАТЕЛЬНО проверяйте пути к файлам во всех кодах!

    Спасибо, Webliberty

    Ответить

  150. Миша

    Здравствуйте. Хорошо работает форма, за исключением одного но — вместо надписи, что сообщение отправлено, вылазят квадратики. Как я понимаю, какие-то проблемы с кодировкой.

    Ответить

  151. Webliberty

    Миша, преобразуйте файл с помощью программы Notepad++ в UTF8 без BOM — должно решить проблемы с кодировкой.

    Ответить

  152. Павел

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

    Не могли бы Вы встроить в Вашу форму встроить эту простенькую защиту от спама, сам не могу, боюсь сломать что то, да и как и куда правильно вписать не знаю, везде по разному пишут. Спасибо большое заранее ;)

    Ответить

  153. Евгений

    Установил форму, используя файлы из архива.
    1. Сообщения не приходят на указанный адрес.
    2. После отправки сообщения открывается пустой экран, но нет надписи «ОК».
    3. По истечение 5 с осуществляется переход на главную страницу сайта.
    4. И еще, если поле в форме не заполнено, появляется надпись «Заполните это поле», непонятно кто ее формирует, ведь в ваших файлах нет такого сообщения.

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

    Ответить

  154. Webliberty

    Евгений, при установке используйте новые файлы из архива. Редирект через 5 секунд подсказывает мне, что Вы вязли файлы из старой версии old.zip.

    Сообщение «Заполните это поле» формируется атрибутом required — это встроенная в браузере валидация форм на HTML5.

    Ответить

  155. Вячеслав

    Здравствуйте, не понял в каком файле перед тегом </head> нужно подключить скрипт? В index.php или в каком?

    И ещё один вопрос, в каком месте файла functions.php вставить код для подключения jQuery?

    Ответить

  156. Webliberty

    Вячеслав, тег </head> есть только в одном файле — header.php. jQuery вставьте в самом начале или конце, здесь без разницы, главное чтобы не внутри другой функции.

    Ответить

  157. Руслан

    Добрый день! подскажите пожалуйста, столкнулся с такой ситуацией:

    Всё делал точь в точь как в описании, всё получилось за исключением одного — появлением в отдельном окне «Сообщение отправлено». Перепроверял все пути по 20 раз, всё всё всё, подключал contact.js перед тегом всё сделал как писалось в комментариях ранее, ничего не помогает. После отправки собщения. Вверху формы появляется надпись(ОК) Помогитеееее :cry: Ничего страшного впринципе нет, но хочется чтобы было как у Вас.

    Второй момент:
    Хотелось для другого раздела немного сократить форму до 3-х полей. Имя + email + телефон + Отправить. Думал, что справлюсь Сам, но после удаления полей в редакторе html, кнопка отправить не работает :sad: Подскажите, пожалуйста, какой порядок действий мне необходимо сделать чтобы всё работало. Спасибо !!!

    Ответить

  158. Webliberty

    Руслан, здравствуйте! В новой версии формы никаких новых окон открываться не должно, все сообщения об отправке или ошибках появляются без перезагрузки страницы. Быть может путаете со старой версией, которая в дополнительном архиве (для пользователей, которые устанавливали старую версию)? В любом случае проверьте работу формы на демо-странице, у Вас все должно происходить точно также, инструкция и демонстрация выполнены аналогично.

    По второй части вопроса: Вы хотите убрать текстовое поле для набора сообщения?

    Ответить

  159. Руслан

    Добрый день! Спасибо за оперативный ответ!
    Да, хотелось бы сократить форму, я пытался просто убрать поле из HTML кода на странице, но сообщение не отправляются. Кнопка submit не активна(не нажимается) :cry:
    Хотел сделать в ряд три поля( имя + телефон + выбор из раскрывающегося списка + кнопку)
    Подскажите, пожалуйста, как правильно это сделать?

    Ответить

  160. Webliberty

    Руслан, в HTML-части кода удалите 8 строку с textarea. В коде обработчика удалите 8 и 13 строку, а из 16 уберите часть кода:

    16
    
    Сообщение: ".$message."\n\n

    Ответить

  161. Руслан

    Webliberty, Спасибо! Отлично теперь всё работает! Правда почему-то перестало появляться «сообщение отправлено» :mrgreen:

    Ответить

  162. reFactorPro

    Приветствую! А как можно сделать так, чтобы e-mail на который отправляются данные с формы можно было задать из админки WordPress?

    Ответить

  163. Webliberty

    Если файл-обработчик mail.php расположить в папке с темой оформления, то его можно отредактировать из админки в меню Внешний вид — Редактор.

    Ответить

  164. reFactorPro

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

    Ответить

  165. Webliberty

    Конечно есть такой вариант — все оформить в виде плагина, что в корне перечеркивает саму суть статьи и универсальность для всех платформ :smile:

    Ответить

  166. Андрей Зенков

    Конечно же лучше создавать форму без плагина. Но если нужна не одна форма, а несколько, и если их необходимо изменять время от времени. А сам в коде соображаю слабо. Поэтому приходится жертвовать доп нагрузкой на сайт и ставить плагин. По мне сегодня самый лучший из бесплатных Contact Form 7. И понятен, и функционален.

    Ответить

  167. Игорь

    Вовремя я посетил ваш сайт.
    Вспомнил что поменял тему больше года назад, а изменения не сделал. К тому же получил анализ своего сайта не давно, где было указано: «ошибка Javascript файлов (script src)» (ОПТИМИЗМ РУ делает бесплатно)
    Теперь думаю, может ну его, установить обычную форму контактов!? :arrow:

    Ответить

  168. Дмитрий

    Приветствую! Спасибо за статью!!! Подскажите пожалуйста, как сделать в WordPress, чтобы теме сообщения присваивалось название страницы или статьи с которой отправлен отзыв?

    Ответить

  169. Николай

    Кнопка «Отправить сообщение» не работает. Сообщение не отправляется. Подскажите причину.

    Ответить

  170. Алекс

    Приветствую. Установил вашу форму. Всё встало нормально и стили, и форма, и все изменения внес. Протестировал форму, но письма не приходят даже в спам. Проверял и на яндекс и маил ру и gmail. Нет писем. В чем может быть причина?

    Ответить

  171. Webliberty

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

    Николай, проверяйте правильность установки, внимательно следуйте инструкции и повторно выполните все действия. Откройте консоль браузера (F12) — возможно там есть ошибки.

    Алекс, обратитесь в техническую поддержку хостинга и уточните, включен ли модуль отправки писем. Если он установлен и работает, тогда обратите внимание на мой ответ Николаю.

    Ответить

  172. Александр

    Webliberty, присоединяюсь к вопросу.

    Дополнение: есть 2 сайта. На 1-ом все работает как надо: после отправки без перезагрузки появляется сообщение об успешной отправке (как у Вас в демо). На 2-ом — какая-то чехарда. После отправки — чистая страница с ОК в левом верхнем углу, урл wp-content/themes/theme/mail.php

    Ничего не пойму. На обоих сайтах сделано один в один, но второй глючит. Что может быть не так? Спасибо.

    Ответить

  173. Webliberty

    Александр, у Вас скрипт contact.js подключен выше jQuery, который необходим для его работы. Попробуйте подключить его после загрузки библиотеки.

    Ответить

Ваш комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: