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

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

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

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

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

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

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

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

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

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

Введите имя для вашей формы, например «Форма обратной связи». При этом значение можно удалить полностью.

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

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

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

Чтобы добавить текстовое поле в редактор, кликните по опции «текст», и на экране откроется всплывающее меню с параметрами настройки.

This is a required field — это поле должно быть заполнено. Поле для ввода имени не является обязательным, поэтому галочку не ставим.

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

Значение по умолчанию — это то, что будет автоматически указано в поле.

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

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

Атрибут class предоставляет возможность управлять элементами. В данном примере эти поля оставим незаполненными.

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

Для того чтобы включить поле для ввода e-mail, кликните по соответствующей кнопке. Убедитесь, что установлен флажок This is a required field, чтобы сделать заполнение этого поля обязательным, а название поля должно быть – email.

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

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

И самое главное. Для того чтобы форма могла быть отправлена, необходимо вставить кнопку. Нажмите на . В параметре Этикетка укажите текст, который будет отображаться на кнопке.

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

• Форма завершена! Сохраните изменения.

Настройка отправки электронного письма

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

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

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

Тема – укажите тему письма, которая будет видна в вашем почтовом ящике.

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

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

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

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

После завершения всех настроек сохраните изменения.

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

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

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

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

1. Скопируйте шорткод.

1. Выберите страницу, на которую добавите форму, и откройте её в редакторе.
2. Поместите шорткод на страницу и сохраните все изменения.

1. Откройте страницу и проверьте корректность работы формы.

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

Стилизация полей 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

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

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

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

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

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

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

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

HTML-разметка и отображение формы

Форма будет включать 4 поля:

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

Код для формы выглядит следующим образом:

add_shortcode('contactform', 'output_shortcode_contactform'); function output_shortcode_contactform() < ob_start(); ?> 

Этот код нужно вставить в файл functions.php. Откройте файл и добавьте код в конце. После этого сохраните изменения.

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

[contactform]

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

Стилизация формы

.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

(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]$/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);

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' ) ] ) ); >

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' ) . ' ', 'Reply-To: ' . get_option( 'admin_email' ) ]; $message = '
Сообщение с сайта ' . get_bloginfo( 'name' ) . '
'; if( ! empty( $_POST['name'] ) ) < $message .= '
Имя: ' . $_POST['name'] . '
'; > if( ! empty( $_POST['email'] ) ) < $message .= '
E-mail: ' . $_POST['email'] . '
'; > if( ! empty( $_POST['phone'] ) ) < $message .= '
Телефон: ' . $_POST['phone'] . '
'; > if( ! empty( $_POST['message'] ) ) < $message .= '
Сообщение: ' . $_POST['message'] . '
'; > /** Отправляем письмо на e-mail */ wp_mail( $email, $subject, $message, $headers ); wp_send_json_success( 'Сообщение успешно отправлено!' ); >

$email = get_option( 'admin_email' );