Делаем форму обратной связи WordPress: плагин Contact Form 7, функции в темах и самописный код

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

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

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

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

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

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

Добавить капчу reCaptcha

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

Поиск по плагинам
CF7 в поиске

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

Модуль рекапчи
Ссылка на рекапчу

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

Настройки в Google reCaptcha
Привязка captcha к сайту

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

копируем ключи
Ключи доступа

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

Кнопка запуска интеграции
Интеграция

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

Вставляем доступ
Сохранение настроек

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

Заходим в настройки и создаем новую форму. Стираем стандартную разметку.

Удаляем стандартные строки
Стираем стандартные надписи

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

Инструмент Текст
Поле текст

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

Настройка каждого раздела
Генератор тегов
  1. Тип определяет обязательно ли посетителю заполнять поле, я поставил да
  2. Имя не меняем это уникальный идентификатор
  3. Значение по умолчанию, ввел фразу, которую увижу внутри
  4. Использовать вместо заполнителя, то есть пока ничего не будет введено надпись будет отображаться
  5. Не советую пользоваться полем Akismet
  6. Для добавления стилей вводим class или id, сделал pole-imya
  7. Вставляем тег в общее поле

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

Вставка e-mail
Генератор почты

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

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

Инструменты текстовой области и телефона
Кнопки телефон и текстовая область

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

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

Button отправить
Кнопка отправить

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

Что должно получиться
Финальный код CF7

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

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

Настраиваем отправку
Изменение параметров письма
  1. Теги полей созданные ранее
  2. Адрес почты куда будут приходить письма
  3. От кого и тема, заполняйте по желанию
  4. Дополнительные заголовки, полностью очищаем
  5. Прописываем в теле письма, что желаем получать на почту после отправки. Например, набрал Почта и вставил, соответствующий тег напротив этого слова.
  6. Внизу нажимаем Сохранить
Сохраняем настройки
Сохранение

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

Вставка формы на сайт

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

Копируем шорткод
Шорткод

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

Прописываем вывод в запись
Помещаем shortecode в страницу

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

отображение на сайте
Финальный вариант

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

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

Сделать поля горизонтально в строчку

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

<div class="flex-form">
[text* your-name]
[email* your-email]
[text your-subject]
</div>
[textarea your-message]
[submit "Отправить"]

Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

Помещаем теги в div
Оборачиваем в div

Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

.flex-form{display:flex;}
@media only screen and (max-width: 655px){.flex-form{display:block;}}
Помещаем css в style
Прописываем стили

Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

Вторая запись показывает когда разрешение экрана достигло 655 пикселей, форма меняет свойство с flex на block и форма начнет отображаться как раньше с полями друг под другом. Этот предел в 655 меняется индивидуально, стиль сделан чтобы на мобильных устройствах обратная связь выглядела нормально.

Всплывающая форма обратной связи

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

Как добавить в elementor

Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

Ищем элемент shortcode
Поиск элемента в elementor

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

Показ на блоге
Элементор обработал запрос

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

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

Функция формы обратной связи в теме ROOT
Надстройка в ROOT
  • Прописываем текст [ contactform ] (без пробелов внутри скобок)
  • Жмем предпросмотр

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

Как работает обратная связь в ROOT
ROOT работа встроенной функции

Feedback через виджеты

Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.

Применяем виджет текст
Используем виджет текст

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

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], нажимаем на просмотреть.

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

Проверяем работу
Вносим вывод в запись

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

Сломанная верстка
Плохой внешний вид

Теперь настроим внешний вид, вставляем данный код в файл 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);
});
Входим или создаем каталог js
Папка js на сервере

Теперь загружаем вторую часть кода в 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, тремя разными методами, если будут вопросы то задавайте, будем разбираться. Успехов!

Пожалуйста, оцените материал:

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

Ntrcn