Форма обратной связи WordPress: пошаговая инструкция и 3 метода

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

Содержание

Форма обратной связи WordPress с помощью плагина Contact Form 7
Используем настройку темы
Прописываем код для feedback

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

Не стану оригинальным и разберу Contact Form 7, лучшего решения не знаю. В стандартном исполнении она включает в себя:

Имя
Адрес почты
По желанию телефон
Текст сообщения
Капча

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

Устанавливаем плагин стандартно через админку WordPress, так выглядит он в панели.

Сразу настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Вы должны иметь аккаунт в Google.

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

В следующем окне копируем данные для капчи, оба ключа.

Переходим обратно в плагин и нажимаем кнопку Настройки интеграции.

Вводим ключи скопированные на сервисе reCaptcha, вставляем в соответствующие разделы и сохраняем.

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

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

Появиться всплывающее окно, настраиваем по своему вкусу.

Тип определяет обязательно ли посетителю заполнять поле, я поставил да
Имя не меняем это уникальный идентификатор
Значение по умолчанию, ввел фразу, которую хочу видеть внутри
Использовать вместо заполнителя, то есть пока ничего не будет введено, именно эта надпись будет отображаться
Не советую пользоваться полем Akismet
Если хотим менять внешний вид, то вводим class или id, я сделал pole-imya, в дальнейшем будем настраивать через CSS
Вставляем тег в общее поле

Теперь по аналогии нажимаем кнопку e-mail, видим тот же интерфейс.

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

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

Ранее настраивали интеграцию капчи, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод [recaptcha] вставляем его под остальными элементами.

Осталось добавить кнопку отправки, выбираем соответствующую из списка и настраиваем ее вывод.

В результате получился такой код.

Можем нажать сохранить, переходим во вкладку Письмо.

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

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

Идем в любую запись и вставляем.

После нажатия кнопки Посмотреть, перекинет на сайт с отображением проделанной работы.

Хорошая черта у разработчиков тем на WordPress это заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне симпатичный внешний вид. Если вас не устраивает, то к каждому полю прописывали свой class, используйте его для изменения оформления.

Проверил работу темы, письма приходят быстро как я настроил.

Используем настройку темы

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

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

Прописываем текст
Жмем предпросмотр

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

Прописываем код для feedback

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

Открываем файл function.php для редактирования и вставляем в самый низ такой код, как пользоваться FTP и изменять PHP разбирали тут.

/*код обратной связи*/
add_shortcode( 'art_feedback', 'art_feedback' );
function art_feedback() {

	ob_start();
	?>
	<form id="add_feedback">
		<input type="text" name="art_name" id="art_name" class="required art_name" placeholder="Имя" value=""/>

		<input type="Почта" name="art_email" id="art_email" class="required art_email" placeholder="Ваш E-Mail" value=""/>

		<input type="text" name="art_subject" id="art_subject" class="art_subject" placeholder="Тема" value=""/>

		<textarea name="art_comments" id="art_comments" placeholder="Введите ваше обращение" rows="10" cols="30" class="required art_comments"></textarea>

		<input type="checkbox" name="art_anticheck" id="art_anticheck" class="art_anticheck" style="display: none !important;" value="true" checked="checked"/>

		<input type="text" name="art_submitted" id="art_submitted" value="" style="display: none !important;"/>

		<input type="submit" id="submit-feedback" class="button" value="Отправить"/>
	</form>
	<?php

	return ob_get_clean();
}

Сейчас мы создали саму форму в HTML разметке WordPress и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.

Заходим в создание страницы в панели WordPress, вставляем такой шорткод [art_feedback] и нажимаем на просмотреть.

В гутенберге, тоже самое в любой текстовый блок вставляете такую строку.

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

Теперь настроим внешний вид, вставляем данный код в файл style.css активной темы.

#add_feedback {
    margin: 20px 0 0;
    position: relative;
}

#art_name, #art_email, #art_subject, #art_comments {
    padding: 10px 5px;
    display: inline-block;
    width: 49.548%;
    border-radius: 3px;
    border: 1px solid #ddd;
    font-size: 0.9em;
}

#art_subject {
    width: 100%;
    margin: 5px 0;
}

#art_comments {
    width: 100%;
}

#add_feedback .button {
    border: none;
    padding: 10px 20px;
    color: #fff;
    font-size: 1em;
    display: inherit;
    margin: 10px 0 0 0;
    border-radius: 3px;
    background-color: #2f94ce;
}

#add_feedback input[type="text"]:focus, #add_feedback input[type="password"]:focus, #add_feedback input[type="email"]:focus, #add_feedback textarea:focus {
    color: #444;
    box-shadow: 0 0 3px rgba(68, 68, 68, 0.2);
}

.error-text {
    background: #F59E9E;
    padding: 15px 0px;
    text-align: center;
    color: #fff;
}

.error-name, .error-email, .error-comments {
    display: inline-block;
    font-size: 11px;
    position: absolute;
    top: -30px;
    color: white;
    border: 1px solid red;
    padding: 5px 10px;
    line-height: 1.1;
    background: red;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3);
}

.error-name:after, .error-email:after, .error-comments:after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -10px;
    border: 5px solid transparent;
    border-top: 5px solid red;
}

.error-comments {
    top: 16%;
    left: 0;
}

.error-name {

    left: 0;
}

.error-email {
    right: 4%;
}

.message-success {
    background: rgba(0, 128, 0, 0.5);
    color: #fff;
    padding: 20px;
    text-align: center;
    margin: 20px auto;
    border-radius: 3px;
}

#add_feedback .error {
    border: 1px solid red;

}

#add_feedback .required:after {
    content: '*';
    position: absolute;
    left: 20px;
    bottom: -10px;
}

#art_name:focus::-moz-placeholder,
#art_name:focus:-moz-placeholder,
#art_name:focus:-ms-input-placeholder,
#art_email:focus::-webkit-input-placeholder,
#art_email:focus::-moz-placeholder,
#art_email:focus:-moz-placeholder,
#art_email:focus:-ms-input-placeholder,
#art_comments:focus::-webkit-input-placeholder,
#art_comments:focus::-moz-placeholder,
#art_comments:focus:-moz-placeholder,
#art_comments:focus:-ms-input-placeholder,
#art_subject:focus::-webkit-input-placeholder,
#art_subject:focus::-moz-placeholder,
#art_subject:focus:-moz-placeholder,
#art_subject:focus:-ms-input-placeholder {
    color: transparent
}

Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.

Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.

jQuery(document).ready(function ($) {
    var add_form = $('#add_feedback');

    // Сброс значений полей
    $('#add_feedback input, #add_feedback textarea').on('blur', function () {
        $('#add_feedback input, #add_feedback textarea').removeClass('error');
        $('.error-name,.error-email,.error-comments,.message-success').remove();
        $('#submit-feedback').val('Отправить сообщение');
    });

    // Отправка значений полей
    var options = {
        url: feedback_object.url,
        data: {
            action: 'feedback_action',
            nonce: feedback_object.nonce
        },
        type: 'POST',
        dataType: 'json',
        beforeSubmit: function (xhr) {
            // При отправке меняем надпись на кнопке
            $('#submit-feedback').val('Отправляем...');
        },
        success: function (request, xhr, status, error) {
            
            if (request.success === true) {
                // Если все поля заполнены, отправляем данные и меняем надпись на кнопке
                add_form.after('<div class="message-success">' + request.data + '</div>').slideDown();
                $('#submit-feedback').val('Отправить сообщение');
            } else {
                // Если поля не заполнены, выводим сообщения и меняем надпись на кнопке
                $.each(request.data, function (key, val) {
                    $('.art_' + key).addClass('error');
                    $('.art_' + key).before('<span class="error-' + key + '">' + val + '</span>');
                });
                $('#submit-feedback').val('Что-то пошло не так...');

            }
            // При успешной отправке сбрасываем значения полей
            $('#add_feedback')[0].reset();
        },
        error: function (request, status, error) {
            $('#submit-feedback').val('Что-то пошло не так...');
        }
    };
    // Отправка
    add_form.ajaxForm(options);
});

Теперь загружаем вторую часть кода в function.php.

/*вторая часть код*/
add_action( 'wp_enqueue_scripts', 'art_feedback_scripts' );
function art_feedback_scripts() {

	// Обработка полей
	wp_enqueue_script( 'jquery-form' );

	// Подключаем файл скрипта
	wp_enqueue_script(
		'feedback',
		get_stylesheet_directory_uri() . '/js/feedback.js',
		array( 'jquery' ),
		1.0,
		true
	);

	// Задаем данные объекта ajax
	wp_localize_script(
		'feedback',
		'feedback_object',
		array(
			'url'   => admin_url( 'admin-ajax.php' ),
			'nonce' => wp_create_nonce( 'feedback-nonce' ),
		)
	);

}

add_action( 'wp_ajax_feedback_action', 'ajax_action_callback' );
add_action( 'wp_ajax_nopriv_feedback_action', 'ajax_action_callback' );

function ajax_action_callback() {

	// Массив ошибок
	$err_message = array();

	// Проверяем nonce. Если проверка не прошла, то блокируем отправку
	if ( ! wp_verify_nonce( $_POST['nonce'], 'feedback-nonce' ) ) {
		wp_die( 'Данные отправлены с неправильного адреса' );
	}

	// Проверяем на спам. Если скрытое поле заполнено или снят чек, то блокируем отправку
	if ( false === $_POST['art_anticheck'] || ! empty( $_POST['art_submitted'] ) ) {
		wp_die( 'Это спам' );
	}

	// Проверяем полей имени, если пустое, то пишем сообщение в массив ошибок
	if ( empty( $_POST['art_name'] ) || ! isset( $_POST['art_name'] ) ) {
		$err_message['name'] = 'Пожалуйста, введите ваше имя.';
	} else {
		$art_name = sanitize_text_field( $_POST['art_name'] );
	}

	// Проверяем полей почты, если пустое, то пишем сообщение в массив ошибок
	if ( empty( $_POST['art_email'] ) || ! isset( $_POST['art_email'] ) ) {
		$err_message['email'] = 'Пожалуйста, введите адрес вашей электронной почты.';
	} elseif ( ! preg_match( '/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i', $_POST['art_email'] ) ) {
		$err_message['email'] = 'Адрес электронной почты некорректный.';
	} else {
		$art_email = sanitize_email( $_POST['art_email'] );

	}
	// Проверяем полей темы письма, если пустое, то пишем сообщение по умолчанию
	if ( empty( $_POST['art_subject'] ) || ! isset( $_POST['art_subject'] ) ) {
		$art_subject = 'Сообщение с сайта';
	} else {
		$art_subject = sanitize_text_field( $_POST['art_subject'] );
	}

	// Проверяем полей сообщения, если пустое, то пишем сообщение в массив ошибок
	if ( empty( $_POST['art_comments'] ) || ! isset( $_POST['art_comments'] ) ) {
		$err_message['comments'] = 'Пожалуйста, введите ваше сообщение.';
	} else {
		$art_comments = sanitize_textarea_field( $_POST['art_comments'] );
	}

	// Проверяем массив ошибок, если не пустой, то передаем сообщение. Иначе отправляем письмо
	if ( $err_message ) {

		wp_send_json_error( $err_message );

	} else {

		// Указываем адресата
		$email_to = '';

		// Если адресат не указан, то берем данные из настроек сайта
		if ( ! $email_to ) {
			$email_to = get_option( 'admin_email' );
		}

		$body    = "Имя: $art_name \nEmail: $art_email \n\nСообщение: $art_comments";
		$headers = 'From: ' . $art_name . ' <' . $email_to . '>' . "\r\n" . 'Reply-To: ' . $email_to;

		// Отправляем письмо
		wp_mail( $email_to, $art_subject, $body, $headers );

		// Отправляем сообщение об успешной отправке
		$message_success = 'Сообщение отправлено. В ближайшее время я свяжусь с вами.';
		wp_send_json_success( $message_success );
	}

	// На всякий случай убиваем еще раз процесс ajax
	wp_die();

}

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

Вот такое письмо приходит на почту с обратной связи.

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