Лайки, посетители и подписчики на сайт!Подробнее

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

Здравствуйте! Сегодня я поделюсь с Вами как можно легко и быстро создать простую в установке и удобную в использовании форму обратной связи на 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" 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
<?php
$post = (!empty($_POST)) ? true : false;
if($post) {
	$email = htmlspecialchars(trim($_POST['email']));
	$name = htmlspecialchars(trim($_POST['name']));
	$sub = htmlspecialchars(trim($_POST["sub"]));
	$message = htmlspecialchars(trim($_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 = "Почта: ".$email."\n\nИмя: ".$name."\n\nТема: " .$sub."\n\nСообщение: ".$message."\n\n";
		$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nReply-To:$email\r\nFrom:$name <contact>");
		if($send) {echo 'OK';}
	}
	else {echo '<div class="err">'.$error.'</div>';}
}
?>

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

Для использования формы обратной связи на своих блогах Вам потребуется обязательно изменить строку 14, т.к. параметр $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
64
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 {
	width: 100%;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #e5e5e5;
	box-sizing: border-box;
}
#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. На свое усмотрение Вы имеете возможность менять внешний вид формы или ее отдельных элементов, применять различные стили оформления и тем самым вписать ее в любой дизайн так, чтобы смотрелось гармонично.

Подключение Google ReCaptcha для защиты от спама

По многочисленным просьбам дополняю статью. Для тех, кому требуется защита формы связи от спама, рекомендую подключить Google ReCaptcha. Для этого нужно вернуться к HTML основе формы и после строки с тегом textarea добавить новую, которая содержит ключ ReCaptcha:

1
<div class="g-recaptcha" data-sitekey="6w1LdB0TAAAAAMXQinyLbR7iBknC1guI"></div>

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

Recaptcha

Переходим к обработчику mail.php и дополним файл сразу после <?php такими строками:

1
2
3
4
5
6
7
8
9
10
11
require_once __DIR__ . '/recaptcha.php';
$secret = "6w1LdB0TAAAAAPoB8GKdbG-XOqq8QaZ-ft2VGQ3n";$response = null;
 
$reCaptcha = new ReCaptcha($secret);
	if ($_POST["g-recaptcha-response"]) {
		$response = $reCaptcha->verifyResponse(
		$_SERVER["REMOTE_ADDR"],
		$_POST["g-recaptcha-response"]
	);
}

Обратите внимание на 2 строку — она содержит секретный ключ. Замените секретный ключ на свой, который получите вместе с публичным ключом. Файл recaptcha.php Вы найдете в архиве, загрузите его в папку с темой WordPress.

На завершающем этапе подключаем API — скрипт ReCaptcha в секции head своего сайта:

1
<script src='https://www.google.com/recaptcha/api.js'></script>

Те, кому защита от спама не нужна, могут пропустить шаги, описанные в этом разделе.

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

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

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

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

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

    Ответить

  2. Наталия

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

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

    Ответить

  3. Webliberty

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

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

    Ответить

  4. Наталия

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

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

    Ответить

  5. Роман

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

    Ответить

  6. Webliberty

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

    Ответить

  7. Тёма

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

    Ответить

  8. Webliberty

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

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

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

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

    Ответить

  9. Анатолий

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

    Ответить

  10. Webliberty

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

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

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

    Ответить

  11. Андрей

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

    Ответить

  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. Андрей

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

    Ответить

  17. Webliberty

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

    Ответить

  18. Роман

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

    Ответить

  19. Евгения

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

    Ответить

  20. Webliberty

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

    Ответить

  21. Людмила

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

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

    Ответить

  22. Webliberty

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

    1
    
    style="width: X%"

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

    Ответить

  23. Дмитий

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

    Ответить

  24. Webliberty

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

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

    Ответить

  25. Дмитий

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

    Ответить

  26. Webliberty

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

    Ответить

  27. Дмитий

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

    Ответить

  28. DivaDii

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

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

    Ответить

  29. Webliberty

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

    Ответить

  30. Ольга

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

    Ответить

  31. Елена

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

    Система пишет такой ответ: Firefox не может определить, как открыть данный адрес, так как протокол (d) не связан ни с одним приложением.

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

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

    Ответить

  32. Webliberty

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

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

    Ответить

  33. Роман

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

    Ответить

  34. Елена

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

    Ответить

  35. Webliberty

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

    Ответить

  36. seogrot

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

    Ответить

  37. Анатолий

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

    Ответить

  38. Новичок

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

    Ответить

  39. Nurlan

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

    Ответить

  40. Виктор

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

    Ответить

  41. Юрий

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

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

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

    Ответить

  42. Дмитрий

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

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

    Ответить

  43. Евгений

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

    Ответить

  44. Webliberty

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

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

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

    Ответить

  45. Оксана

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

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

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

    Ответить

  46. Webliberty

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

    Ответить

  47. Оксана

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

    Ответить

  48. Алексей

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

    Ответить

  49. Баскак

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

    Ответить

  50. Денис

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

    Ответить

  51. Роза

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

    Ответить

  52. Webliberty

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

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

    Ответить

  53. Вадим

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

    Ответить

  54. Webliberty

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

    Ответить

  55. Вадим

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

    Ответить

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

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

    Ответить

  57. Webliberty

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

    Ответить

  58. Vasilionis

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

    Ответить

  59. Оксана

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

    Ответить

  60. Webliberty

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

    Ответить

  61. Оксана

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

    Ответить

  62. Webliberty

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

    Ответить

  63. Оксана

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

    Ответить

  64. Ольга

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

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

    Ответить

  65. Надежда

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

    Ответить

  66. Виктор

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

    Ответить

  67. Игорь

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

    Ответить

  68. Webliberty

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

    Ответить

  69. Владимир

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

    Ответить

  70. Webliberty

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

    1
    2
    3
    
    form {
    	background: #e9ffd0;
    }

    Ответить

  71. Артур

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

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

    Ответить

  72. Webliberty

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

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

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

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

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

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

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

    Ответить

  73. Олег

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

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

    Ответить

  74. Webliberty

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

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

    Ответить

  75. Олег

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

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

    Ответить

  76. Евгений

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

    Ответить

  77. Webliberty

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

    Ответить

  78. Федор

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

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

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

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

    Ответить

  79. Сергей

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

    Ответить

  80. Webliberty

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

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

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

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

    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(); должна работать в цикле, которого здесь нет. В тексте письма я назвал страницу отправки Источник, можете заменить слово на другое.

    Ответить

  81. Сергей

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

    Ответить

  82. Sergei

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

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

    Ответить

  83. Игорь

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

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

    Ответить

  84. Webliberty

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

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

    Ответить

  85. Игорь

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

    Ответить

  86. Webliberty

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

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

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

    Ответить

  87. Елена

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

    Ответить

  88. Webliberty

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

    Ответить

  89. Дэн

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

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

    Ответить

  90. Webliberty

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

    Ответить

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

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

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

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

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

    Ответить

  92. Webliberty

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

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

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

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

    Ответить

  93. Павел

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

    Ответить

  94. Webliberty

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

    Ответить

  95. Алексей

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

    Ответить

  96. Webliberty

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

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

    Ответить

  97. Дмитрий

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

    Ответить

  98. Webliberty

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

    Ответить

  99. evgeniy

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

    Ответить

  100. Webliberty

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

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

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

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

    Ответить

  101. Юрий

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

    Ответить

  102. Роман

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

    Ответить

  103. Webliberty

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

    1
    
    diaplay: none;

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

    Ответить

  104. Миша

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

    Ответить

  105. Webliberty

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

    Ответить

  106. Павел

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

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

    Ответить

  107. Евгений

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

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

    Ответить

  108. Webliberty

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

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

    Ответить

  109. Руслан

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

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

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

    Ответить

  110. Webliberty

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

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

    Ответить

  111. Руслан

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

    Хотел сделать в ряд три поля (имя + телефон + выбор из раскрывающегося списка + кнопку). Подскажите, пожалуйста, как правильно это сделать?

    Ответить

  112. Webliberty

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

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

    Ответить

  113. Руслан

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

    Ответить

  114. reFactorPro

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

    Ответить

  115. Webliberty

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

    Ответить

  116. reFactorPro

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

    Ответить

  117. Webliberty

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

    Ответить

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

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

    Ответить

  119. Игорь

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

    Теперь думаю, может ну его, установить обычную форму контактов!?

    Ответить

  120. Дмитрий

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

    Ответить

  121. Николай

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

    Ответить

  122. Алекс

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

    Ответить

  123. Webliberty

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

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

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

    Ответить

  124. Александр

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

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

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

    Ответить

  125. Webliberty

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

    Ответить

  126. Константин

    Александр, может url в contact.js неверно прописан или id у формы не правильно задан.

    Ответить

  127. Александр

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

    Ответить

  128. Алексей

    Здравствуйте. Подскажите пожалуйста, как поменять поле «E-mail» на поле «Номер телефона». в HTML сменил, теперь показывает «Номер телефона» но вот при отправке сервер проверяет синтаксис электронного адреса, а не номера телефона и сообщает об ошибке синтаксиса. Как сменить чтобы он проверял синтаксис мобильного телефона?

    Или вообще чтобы не проверял синтаксис? И можно ли протестировать файл на локальном сервере?

    Ответить

  129. Webliberty

    Александр, следите за обновлениями, скоро добавлю Google ReCaptcha к этой форме для защиты от спама.

    Алексей, в HTML форме нужно заменить тип type="email" на type="tel", но при этом нужно использовать дополнительный атрибут:

    pattern="8-[0-9]{3}-[0-9]{2}-[0-9]{2}-[0-9]{3}"

    Это шаблон, в котором допустимо указывать телефон в таком формате:

    • цифра 8
    • тире
    • любые три числа от 0 до 9
    • тире
    • любые 2 числа от 0 до 9
    • тире
    • любые 2 числа от 0 до 9
    • тире
    • любые 3 числа от 0 до 9

    В теге label нужно дать пояснение, что телефон указывать в формате 8-800-00-00-000
    Таким образом, строка 6 должна принять вид:

    pattern="8-[0-9]{3}-[0-9]{2}-[0-9]{2}-[0-9]{3}"

    Можно удалить проверку на тип данных, удалив из этой строки type="email". Тестировать можно на локальном сервере.

    Ответить

  130. Алексей

    Артём, извините, что вмешиваюсь, но у меня была похожая ситуация. Некоторые хостеры ревностно относятся к «левым» емайлам. Т.е., если у вас сайт site.ru то почту они пропустят только с именем типа name@site.ru, т.е. только вашего домена.

    Ответить

  131. Сергей

    А как встроить recaptch’у от Google в Вашу форму? Где можно прочитать?

    Ответить

  132. Webliberty

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

    Ответить

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

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea: