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

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

Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.

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

Запомните навсегда – мы никогда не можем полагаться на валидацию атрибутами required или через JavaScript.

Валидация на JS формы обратной связи – это классно, но валидация на PHP всё равно должна у вас быть.

Почему плагины – плохо?

Фраза «плагины – плохо» это конечно преувеличение, однако устанавливая любой плагин на свой сайт, вам следует помнить о двух вещах:

1. Каждый установленный и активный плагин (не все вообще, но большинство) – это минус, возможно даже и небольшой, к производительности вашего сайта. Безусловно, есть плагины, которые дают большой минус, и плагины, которые вообще не влияют на производительность.
2. Каждый установленный и даже не активный плагин (!) – это небольшой процентик к шансу того, что ваш сайт можно взломать. Вполне возможно, что в одном из используемых вами плагинов есть какая-то уязвимость. Может её и нет, но вероятность тем не менее есть.

Я не отговариваю вас использовать Contact Form 7 для создания форм обратной связи (это самый популярный плагин для этих целей), я лишь прошу подходить осознанно к выбору и решению о необходимости использования плагинов на своём сайте.

Создание формы обратной связи по шагам

1. Код формы

Тут по сути мы будем использовать HTML из нашей вёрстки, главная задача – в параметре action указать URL файла обработчика формы, можем ссылаться и на ту же самую страницу, на которой находимся при помощи функции get_permalink().

echo '<form action="' . get_permalink() . '" method="POST">
	<input type="text" name="name" required="true" placeholder="Имя *" />
	<input type="text" name="email" required="true" placeholder="Email *" />
	<textarea name="soobschenie" required="true" placeholder="Сообщение *"></textarea>
	<button>Отправить</button>
</form>';

Также в одном из следующих уроков я покажу, как добавить антиспам на эту форму без использования каких-либо плагинов.

Сам код мы можем вставить либо в шаблон страницы, либо в шорткод – тут нет какого-либо правила, зависит только от ваших задач и от вёрстки.

2. Обработка формы

Тут такой момент – если в качестве файла-обработчика вы используете отдельный файл, то вам также нужно подключить среду WordPress (хотя конечно можно отправлять форму на чистом PHP, нам это никто делать не мешает, разница лишь в том, что мало ли вам захочется сохранять лиды в базу данных тоже).

require( __DIR__ . '/../../../wp-load.php' );

Дальше – уже непосредственно обработка формы.

// сначала валидация полей и редирект на сообщение об ошибки в этом случае
if( 
   empty( $_POST[ 'name' ] )
   || empty( $_POST[ 'email' ] )
   || ! is_email( $_POST[ 'email' ] )
   || empty( $_POST[ 'soobschenie' ] )
) { 
	wp_safe_redirect( add_query_arg( 'msg', 'error', site_url( 'contact' ) ) );
	exit;
}
 
// затем уже отправка формы
$headers = array(
	"Content-type: text/html; charset=utf-8",
	"From: " . $_POST[ 'name' ] . " <no-reply@ваш-домен>",
	"Reply-To: " . $_POST[ 'name' ] . " <" . $_POST[ 'email' ] . ">"
);
 
wp_mail( get_option( 'admin_email' ), 'Сообщение с сайта', wpautop( $_POST[ 'soobschenie' ] ), $headers ) );
 
wp_safe_redirect( add_query_arg( 'msg', 'success', site_url( 'contact' ) ) );
exit;

Подробно объясняю этот код на видео.

3. Вывод сообщений успешной/неуспешной отправки

Это можно вставить где-то перед самой формы.

if( isset( $_GET[ 'msg' ] ) ) {
	// в случае успеха
	if( 'success' == $_GET[ 'msg' ] ) {
		echo '<p class="msg-success">Сообщение успешно отправлено</p>';
	}
 
	// в случае ошибки
	if( 'error' == $_GET[ 'msg' ] ) {
		echo '<p class="msg-error"><strong>Ошибка:<strong> Проверьте правильность введённых вами данных.</p>';
	}
	// вы сами можете добавить различные другие сообщения об ошибках
}

Список уроков

• Вступление06:43
• Начинаем создавать тему22:36
• Подключение CSS и JS28:01
• Меню38:35
• Иерархия файлов темы29:46
• Основной цикл26:10
• Прилепленные посты14:47
• Поиск на сайте08:54
• Изображения19:56
• Дополнительные циклы15:43
• Конфигурируем Gutenberg23:48
• Форма обратной связи27:21
• Виджеты / Сайдбары15:43
• Пользователи13:24
• Комментарии26:12
• Антиспам без плагинов10:19
• Произвольные поля25:36
• Настройки темы34:23
• Типы постов33:18