• Главная
  • Блог
  • Форма обратной связи WordPress: плагин и самописный код

Форма обратной связи WordPress: плагин и самописный код

Александр Писклов
Александр Писклов
Разрабатываю сайты на WordPress с 2011 года.
248
13 минут на чтение

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

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

Если вы уже работали с WordPress, то наверняка слышали про Contact Form 7. Это один из самых популярных плагинов в репозитории WordPress. На текущий момент количество активных установок превышает 10 млн. Почему он так популярен? Потому что очень простой и интуитивный. Создание и редактирование форм происходит в привычном для пользователей WordPress визуальном редакторе. На страницах сайта формы выводится через шорткод. Никакого программирования!

Шаг 1.

Установка плагина Contact Form 7

Зайдите в админку и перейдите в раздел Плагины. Нажмите Добавить плагин, в поисковой строке введите Contact Form 7. 

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

Шаг 2.

Создание формы

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

По-умолчанию уже добавлена одна форма «Контактная форма 1». Она нас не интересует, мы будем создавать свою с нуля. Для этого в заголовке страницы нажмите кнопку Добавить новую.

Укажите название формы, например «Форма обратной связи». Содержимое можно полностью удалить.  

Шаг 3.

Настройка полей формы

Рассмотрим синтаксис редактора формы. Он поддерживает html-код и form-tag (теги формы). На языке WordPress form-tag – это шорткод. При выводе шорткод автоматически преобразуются в соответствующий html код. Над редактором указаны все возможные теги формы.

Мы сделаем форму, которая будет состоять из 4 полей: Имя, E-mail (обязательное), Телефон и Сообщение (обязательное).

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

This is a required field – обязательное к заполнению поле. Поле с именем в нашей форме – не обязательное поле, поэтому чекбокс не ставим.

Field name – название поля. Плагин автоматически проставляет значение. Рекомендую использовать более понятные значения, в нашем случае укажем your-name.

Значение по умолчанию – значение, которое уже будет указано в поле.

Используйте этот текст в качестве заполнителя поля — placeholder поля. Пока поле не заполнено, будет отображаться этот текст.

Атрибут class — класс html-элемента.

Атрибут class нужны для манипуляций с элементами. В текущем примере эти поля не заполняем.

Нажмите Вставить тег. В редактор добавится тег text.

Чтобы добавить поле e-mail, нажмите . Установите чекбокс This is a required field, для обязательного заполнения поля, значение Field name – email. 

Аналогично добавляются другие поля. Поле телефона добавляется по клику на

Чтобы добавить поле Сообщение нажмите кнопку , поставьте чекбокс This is a required field.

И самое важное. Чтобы форму можно было отправлять, добавим кнопку. Нажмите на . Параметр Этикетка – это текст кнопки.

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

  • Форма готова! Сохраните ее.

Шаг 4.

Настройка отправки письма

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

Кому – ваш e-mail на который будут приходить письма с этой формы.

От кого – в поле необходимо указать адрес электронной почты, который принадлежит вашему домену, например, no-reply@site.ru. Не указывайте почту пользователя, которую он указал в форме, плагин выдаст ошибку конфигурации.

Тема – тема письма. То, как будет называться письмо у вас на почте.

Дополнительные заголовки – техническая информация письма, можно оставить как есть.

Тело письма – содержимое письма. То что вы получите на почту. Здесь важно указать все поля, которые вы создали на предыдущем шаге. Для наглядности, разработчики плагина вывели эти поля под заголовок. Поля, которые уже есть в теле письма, отмечены серым цветом, неиспользованные поля выделены черным. 

Чтобы указывать в письме html теги, например для выделения текста жирным шрифтом, можно поставить чекбокс Использовать HTML-формат письма.

Если нужно отправить дубль письма на еще один почтовый ящик, активируйте чекбокс Использовать почту (2) и заполните аналогичные поля.

Когда все заполнено сохраните настройки.

Шаг 5.

Настройка уведомлений

Этот шаг можно пропустить, так как все уведомления уже установлены по умолчанию. Но, если дефолтный текст вам не нравится, можете перезаписать его во вкладке «Уведомления при отправке формы».

Шаг 6.

Добавление формы на сайт

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

  1. Скопируйте шорткод.
  1. Определитесь, куда будете добавлять форму и откройте редактор этой страницы.
  2. Вставьте шорткод на страницу и сохраните изменения.
  1. Откройте страницу и проверьте форму. 
  • Готово, форма добавлена на сайт и теперь посетители смогут написать вам.

Дополнительно

Оформление полей Contact Form 7

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

Если вы знакомы с CSS и знаете как редактировать стили в WordPress, то добавить оформление элементам формы будет очень просто.

Каждая форма плагина Contact Form 7 имеет div обертку с классом .wpcf7. Чтобы стилизовать поля текст, e-mail, телефон нужно указать стили.

/* Оформление input */
.wpcf7 .wpcf7-text {
    height: 46px;
    border: 1px solid #ccc;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    padding: 0 1em 0 1em;
}

/* Оформление textarea */
.wpcf7 .wpcf7-textarea {
    min-height: 110px;
    border: 1px solid #ccc;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    padding: 1em;
    resize: none;
}

/* Оформление кнопки Отправить */
.wpcf7 .wpcf7-submit{
    height: 46px;
    padding: 1em;
    box-sizing: border-box;
    background-color: coral;
    color: #fff;
    box-shadow: none;
    outline: none;
}

Подробнее о стилизации элементов формы Contact Form 7 можно почитать на официальном сайте плагина. (англ. язык)

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

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

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

Все действия по редактированию файлов выполняйте осторожно и строго по инструкции.

Для редактирования и создания файлов необходимо FTP подключение к серверу сайта.

В этом примере сделаем AJAX форму, т.е. отправка без перезагрузки страницы. Для удобства вывода добавим шорткод формы.

Шаг 1.

HTML-разметка и вывод формы

Форма будет состоять из 4 полей:

  • Имя
  • E-mail (обязательное)
  • Телефон (обязательное)
  • Сообщение

Код формы выглядит так

add_shortcode('contactform', 'output_shortcode_contactform');

function output_shortcode_contactform()
{
	ob_start();
?>
	<form class="contactform" id="contactform">
		<div class="contactform__field">
			<div class="contactform__label">Ваше имя</div>
			<input type="text" name="name" class="contactform__input">
		</div>
		<div class="contactform__field">
			<div class="contactform__label">Ваш e-mail</div>
			<input type="text" name="email" class="contactform__input" data-required="email">
		</div>
		<div class="contactform__field">
			<div class="contactform__label">Ваше телефон</div>
			<input type="text" name="phone" class="contactform__input" data-required>
		</div>
		<div class="contactform__field">
			<div class="contactform__label">Сообщение</div>
			<textarea name="message" class="contactform__textarea"></textarea>
		</div>
		<div class="contactform__action">
			<button class="contactform__button">Отправить</button>
		</div>
		<div class="contactform__message"></div>
	</form>
<?php
	return ob_get_clean();
}

Этот код необходимо добавить в functions.php. Откройте файл и в конце вставьте код. Сохраните файл.

Теперь форму можно вывести на странице. Откройте редактор страницы Контакты и добавьте шорткод contactform. 

[contactform]

 Пока форма выглядит не особо красиво.

Шаг 2.

Оформление формы

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

.contactform{
    width: 100%;
    font-size: 16px;
}

.contactform__field{
    width: 100%;
    margin: 16px 0;
}

.contactform__field input.error, 
.contactform__field textarea.error{
    border-color: #eb4d4b;
}

.contactform__label{
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 1.125;
}

.contactform__input,
.contactform__textarea{
    height: 38px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    outline: none;
    padding: 0 16px;
    border-radius: 4px;
    font-family: inherit;
}

.contactform__input:focus{
    border-color: #bebebe;
}

.contactform__textarea{
    height: 110px;
    max-width: 100%;
    padding: 16px;
}

.contactform__input:focus,
.contactform__textarea:focus{
    border-color: #bebebe;
}

.contactform__button{
    height: 44px;
    width: auto;
    box-sizing: border-box;
    padding: 8px 24px;
    font-family: inherit;
    cursor: pointer;
    background-color: #D73301;
    font-weight: 600;
    color: #fff;
    border-radius: 4px;
    border: none;
    outline: none;
}

.contactform__button:hover{
    background-color: #000;
}

.contactform__message{
    padding: 24px;
    border-radius: 4px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    display: none;
    margin-top: 24px;
}

.contactform__message.success{
    color: #4AA785;
    background-color: #DEF8EE;
    border-color: #4AA785;
}

.contactform__message.error{
    color: #A74A4A;
    background-color: #F8DEDE;
    border-color: #A74A4A;
}

Скопируйте весь этот css-код и добавьте его в файл style.css вашего текущего шаблона. Сохраните файл и можно смотреть результат.

  • Теперь форма выглядит симпатично!

Шаг 3.

AJAX отправка формы

Создайте новый файл contactform.js в папке js вашего шаблона. Добавьте в него следующий код:

(function ($) {

    // Обработчик отправки формы
    $('#contactform').submit(function (e) {
        e.preventDefault();

        let errorCount = 0,
            errorText = 'Заполните обязательные поля.',
            $form = $(this),
            $button = $form.find('button:submit'),
            $message = $form.children( '.contactform__message' ),
            patternEmail = /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i;

        // Валидация обязательных полей.
        $form.find('[data-required]').each(function () {
            let error = false,
                $field = $(this),
                value = $field.val(),
                type = $field.data('required');

            // Проверка на пустоту.
            if (value == '') {
                errorCount++;
                error = true;
            }

            // Проверка правильности заполнения e-mail.
            if (type == 'email') {
                if (!patternEmail.test(value)) {
                    errorCount++;
                    error = true;

                    if( errorCount == 1 ) {
                        errorText = 'Правильно заполните обязательные поля.';
                    }
                }
            }

            if (error) {
                $field.addClass('error');
            }
        });

        // Если в форме нет ошибок, то отправляем. 
        if (!errorCount) {
            $message.hide().removeClass('error success');
            $button.prop('disabled', true).text('Отправка...');

            let formData = new FormData($form[0]);
            formData.append( 'action', 'send_contactform' );
            formData.append( 'nonce', contactform.nonce );

            $.ajax({
                url: contactform.ajaxurl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false
            })
            .done( function( response ) {
                if( response.data != 'undefined' ) {
                    $message.text(response.data)
                }

                if( response.success ) {
                    $message.addClass('success');
                } else {
                    $message.addClass('error')
                }

                $message.slideDown(250);
            } )
            .always( function() {
                $button.prop('disabled', false).text('Отправить');
            } )
            .fail( function() {
                $message.text('Ошибка при отправке формы. Попробуйте снова...').addClass('error').slideDown(250);
            } );

        } else {
            $message.hide().removeClass('error success');
            $message.text(errorText).addClass('error').slideDown(250);
        }
    });

    // При вводе в поле с ошибкой удаляем класс error
    $('[data-required]').on('input paste', function () {
        if ($(this).hasClass('error')) {
            $(this).removeClass('error');
        }
    });
})(jQuery);

Краткий комментарий, что делает этот код:

  1. Валидирует обязательные поля формы [15:42]
  2. Проверяет правильность заполнения e-mail [28:37]
  3. Поля, которые не прошли валидацию, будут подсвечены красной обводкой [40]
  4. Если есть ошибки заполнения полей, форма не отправится. Под формой появится соответствующее сообщение. [81:82]
  5. Во время отправки формы блокируется кнопка, чтобы предотвратить бесконечные нажатия. [47]
  6. В случае успешной отправки, под формой появится сообщение. [71]

Теперь необходимо подключить этот js файл, чтобы код заработал на сайте. Откройте файл functions.php и в самом конце добавьте код:

add_action( 'wp_enqueue_scripts', 'enqueue_scripts_contactform' );

function enqueue_scripts_contactform() {
	wp_enqueue_script( 
		'contactform',
		get_stylesheet_directory_uri( ) . '/js/contactform.js',
		[ 'jquery' ],
		null,
		[
			'in_footer' => true
		]
	);

	wp_add_inline_script( 
		'contactform',
		'var contactform = ' . json_encode( [
			'ajaxurl' => admin_url( 'admin-ajax.php' ),
			'nonce'   => wp_create_nonce( 'contactform' )
		] )
	);
}

Шаг 4.

PHP-обработчик формы

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

Для обработки AJAX запросов в WordPress есть специальные хуки wp_ajax_{$action} и wp_ajax_nopriv_{$action}. Будем использовать их в этом примере.

Полный код обработчика:

add_action( 'wp_ajax_send_contactform', 'send_contactform' );
add_action( 'wp_ajax_nopriv_send_contactform', 'send_contactform' );

function send_contactform() {
	$errors = [];

	/**	Проверка nonce */
	if( ! check_ajax_referer( 'contactform', 'nonce' ) ) {
		wp_send_json_error( 'Запрос не прошел проверку.' );
	}

	/**	Проверка обязательных полей */
	if( empty( $_POST['email'] ) || ( isset( $_POST['email'] ) && is_email( $_POST['email'] ) === false ) ) {
		$errors[] = 'E-mail';
	}

	if( empty( $_POST['message'] ) ) {
		$errors[] = 'Сообщение';
	}
	
	/**	Если есть ошибки, отправляем ответ с ошибками */
	if( ! empty( $errors ) ) {
		wp_send_json_error( 'Сообщение не отправлено. В этих полях есть ошибки: ' . implode(', ', $errors) );
	}

	/**	Если никаких ошибок, отправляем сообщение на почту */
	$email = get_option( 'admin_email' );
	$subject = 'Сообщение с сайта ' . get_bloginfo( 'name' ); // Тема письма
	$headers = [
		'Content-type: text/html; charset=utf-8',
		'From: ' . get_bloginfo( 'name' ) . ' <' . get_option( 'admin_email' ) . '>',
		'Reply-To: ' . get_option( 'admin_email' )
	];
	$message = '<h3>Сообщение с сайта ' . get_bloginfo( 'name' ) . '</h3>';

	if( ! empty( $_POST['name'] ) ) {
		$message .= '<p><strong>Имя: </strong>' . $_POST['name'] . '</p>';
	}

	if( ! empty( $_POST['email'] ) ) {
		$message .= '<p><strong>E-mail: </strong>' . $_POST['email'] . '</p>';
	}

	if( ! empty( $_POST['phone'] ) ) {
		$message .= '<p><strong>Телефон: </strong>' . $_POST['phone'] . '</p>';
	}

	if( ! empty( $_POST['message'] ) ) {
		$message .= '<p><strong>Сообщение: </strong>' . $_POST['message'] . '</p>';
	}

	/** Отправляем письмо на e-mail */
	wp_mail( $email, $subject, $message, $headers );

	wp_send_json_success( 'Сообщение успешно отправлено!' );
}

Что делает код?

  1. Выполняет проверку nonce. Для текущего функционала формы это не особо важно, но, если вы захотите, к примеру, добавлять сообщения в базу данных, проверять nonce нужно обязательно. [8:10]
  2. Проверяет обязательные поля на пустоту, а e-mail на правильность заполнения. [13:15]
  3. Возвращает сообщение с ошибками заполнения полей. [22:24]
  4. Отправляет сообщение на ваш e-mail. [53]

Сообщения будут приходить на административный e-mail сайта, который указан в настройках (Настройки — Общие).

Если нужно указать другой e-mail, измените код на 27 строке.

$email = get_option( 'admin_email' );

Весь код обработчика добавьте в конец файла functions.php.

Шаг 5.

Тестируем

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

  • Отправка пустой формы

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

  • Отправка формы с неверным e-mail

Форма не отправилась. Сообщение об ошибке содержит уточнение, что поле e-mail заполнено неверно.

  • Отправка заполненной формы

Форма отправилась. Сообщение об успешной отправке. На почту пришло письмо.

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

Содержание:
Нет комментариев

Похожие материалы