ДЕЛАЕМ ФОРМУ ОБРАТНОЙ СВЯЗИ WORD PRESS ПЛАГИН CONTACT FORM 7 ФУНКЦИИ В ТЕМАХ И САМОПИСНЫИ КОД

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

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

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

В стандартном исполнении она включает в себя:

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

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

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

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

Поиск по плагинам
CF7 в поиске
Модуль рекапчи

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

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

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

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

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

Кнопка запуска интеграции
Интеграция
Вставляем доступ
Сохранение настроек

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Посмотрел в интернет и ужаснулся, сколько манипуляций делают. Настроить полностью оформление не покажу, это тема ни одного большого мануала. Заходим в редактирование формы и оборачиваем поля, которые хотим выстроить горизонтально в 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оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

feedback в сайдбаре
Форма в виджете

Обратная связь без плагина

Если предпочитаете способы без плагина, то есть отличная инструкция с сайта Финты WordPress.

Открываем файл 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 и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.

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

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

Перейдя на сайт увидим не сформированную форму, поля работают, но письмо отправляться не будет, потому что не привязан 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, мы воспользуемся плагином Contact Form 7, который я устанавливал много раз на свои блоги. Я думаю, что и у вас не возникнет проблем с его установкой и настройкой.

Итак, переходим в раздел «Плагины — Добавить новый» и пишем в поиск название «Contact Form 7». Как обычно, первый плагин в результатах поиска — это тот, который нам нужен. Устанавливаем плагин на блог и активируем его.

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

Как сделать форму обратной связи на WordPress: плагин Contact Form 7
Далее переходим к созданию формы обратной связи WordPress. У нас в левом меню
появился раздел, созданный плагином, под названием «Контакты (CF7)», в него и переходим. Теперь можно сделать новую форму контактов, благодаря которой посетители смогут написать вам на почту прямо со страниц вашего сайта или блога.

По умолчанию уже существует одна форма обратной связи, которая появляется сразу после установки плагина Contact Form 7. Мы не будем ее трогать, а сделаем новую с нуля, поэтому сразу жмем кнопку «Добавить новую».

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

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

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

Что из себя представляет создание формы обратной связи WordPress при помощи плагина Contact Form 7, вы можете увидеть на скриншоте
ниже.

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

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

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

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

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

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

Итак, начинаем сверху. В первую очередь мы вводим название нашей формы обратной связи для удобства ее нахождения (в том случае, если форм будет несколько). Свою я назову «Форма страницы контактов».

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

Список тегов, которые вы можете сгенерировать:

  • текстовое поле;
  • e-mail;
  • URL;
  • номер телефона;
  • число (spinbox или slider);
  • дата;
  • текстовое поле (еще одно);
  • выпадающее меню;
  • checkboxes;
  • radio buttons;
  • acceptance;
  • вопрос;
  • CAPTCHA;
  • отправка файла;
  • кнопка отправки письма.

Добавим в нашу форму обратной связи, к примеру, поле ввода URL сайта. Для этого нажимаем «Сгенерировать тэг» и выбираем из выпадающего списка пункт «URL». У нас откроется следующее окошко настроек:

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

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

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

Я открываю страницу «Контакты» своего блога и дописываю в нее текст о возможности отправки письма мне на почту с этой страницы.

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

Сохраняем страницу и открываем ее на нашем сайте. У меня всё отобразилось с первого раза, поэтому я незамедлительно отправляю тестовое письмо себе на почту. Заполняю все необходимые поля и нажимаю кнопку «Отправить».

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

В случае успешной отправки письма мы видим вот такое сообщение:

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

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

Как сделать форму обратной связи на WordPress: плагин Contact Form 7

Как бы то ни было, плагин Contact Form 7 для WordPress — это один из популярнейших плагинов как среди плагинов для создания формы обратной связи WordPress, так среди любых других. И действительно, более миллиона установок — цифра говорит сама за себя. Оценка плагина достаточно высока — 4,5 звезды, что отметает все сомнения по его использованию. К тому же плагин уже русифицирован, поэтому вам не придется переводить поля формы и сообщения на русский язык.

УСТАНОВКА ПЛАГИНА CONTACT FORM 7 ДЛЯ WORDPRESS

Ну что же, давайте пройдем стандартный процесс установки. Кстати, если вы никогда еще не устанавливали плагины, тогда обязательно ознакомьтесь со статьей «WordPress. Установка плагинов», в которой найдете все возможные способы установки плагинов.

В админке сайта переходим в раздел Плагины — Добавить новый и в строку поиска вводим название плагина — «contact form 7». Первый найденный плагин формы обратной связи — нужный нам вариант.

Жмем кнопку Установить и активируем плагин. После установки в меню появится новый раздел Contact Form 7 с несколькими пунктами.

Первый пункт Формы содержит список текущих форм на вашем сайте и позволяет управлять ими: редактировать или удалить. Готовая форма представляет из себя ни что иное, как шорткод (короткий код), который можно вставить в запись, страницу или даже виджет. Этот шорткод будет развернут на странице в полноценный код формы. В плагине уже предустановлен пример формы обратной связи, давайте скопируем ее шорткод и вставим его, к примеру, на страницу контактов. После этого перейдем на страницу и увидим на ней уже готовую рабочую форму обратной связи WordPress.

Можем попробовать заполнить форму и отправить ее, письмо будет доставлено на адрес email, указанный в настройках профиля администратора. Обратите внимание, плагин Contact Form 7 не просто предлагает обычную стандартную форму обратной связи. Нет, плагин позволяет гибко ее настраивать. К тому же, форма отправляется без перезагрузки страницы, что является дополнительным плюсом. Ну и, конечно же, валидация полей формы, возможность указать обязательные для заполнения поля — это еще один огромный плюс.

НАСТРОЙКА ФОРМЫ ОБРАТНОЙ СВЯЗИ ДЛЯ WORDPRESS

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

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

Ну а если все же возникнут сложности, тогда вам поможет документация к плагину, где можно найти множество примеров.

Итак, давайте в качестве примера удалим тему сообщения и добавим список с вариантами выбора темы сообщения. Для создания выпадающего списка кликнем по кнопке drop-down menu. В открывшемся модальном окне заполняем форму. Ключевым является поле Options, в которое мы вводим варианты для выпадающего списка. Каждый вариант с новой строки. Прочие поля формы должны быть интуитивно понятны. Например, если мы отметим чекбокс в поле Field type (Required field), то тем самым сделаем создаваемое поле формы обязательным для заполнения. Чекбокс Allow multiple selections позволяет создать список с возможностью выбора нескольких вариантов, а чекбокс Insert a blank item as the first option создаст первым пустой вариант в списке. Поля Id и Class говорят сами за себя — это поля для добавления атрибутов id и class, позволяющих в дальнейшем оформить поле.

После создания списка с необходимыми вариантами в шаблоне формы появится новое поле.

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

Сохраняем изменения и пробуем отправить повторно письмо. Теперь форма обратной связи работает, как и положено, — на email приходит письмо с выбранной темой.

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

ЗАЩИТА ФОРМЫ ОБРАТНОЙ СВЯЗИ

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

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

Как видим, сделать форму обратной связи на WordPress — проще простого. Плагин Contact Form 7 позволяет построить форму практически для любых целей. Это может быть и форма обратной связи, и форма какой-нибудь заявки и т.д. Да, как я и говорил выше, форму можно вставить не только в запись или страницу, но и в виджет сайдбара. Для этого достаточно создать виджет Текст и вставить в него шорткод нужной формы. Ну а новые формы, как вы догадались, можно создавать в меню плагина Добавить новую.

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

  1. Установка
  2. Вывод на сайте
  3. Как создавать формы
  4. Настройка письма
  5. Настройка уведомлений
  6. Интеграция reCaptcha
  7. Установка целей метрики
  8. Готовые шаблоны
  9. Решение проблем и исправление ошибок

Как создавать формы

Перейдите Contact Form 7 > Добавить новую.

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

CF предлагает стартовый шаблон, который можно удалить или изменять. Этот простой пример сделан для того, чтобы было легче разобраться. Чтобы вставить новое поле, нажмите кнопку нужного элемента.

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

  • элементы HTML (позволяют создать произвольную HTML-структуру),
  • шорткоды плагина (добавляют элементы формы).

Символом «*» отмечены обязательные к заполнению поля.

элементы формы contact form 7
Элементы формы в Contact Form 7

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

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

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

contact form 7 письмо
Настройка формата письма

В поле Кому вписывайте рабочий e-mail. На этот адрес будут приходить все уведомления.

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

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

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

Интеграция reCaptcha

В плагин уже встроена система спам-защиты от Google. Установим последнюю версию — v.3. Чтобы ее добавить, следуйте простой инструкции.

contact form 7 капча
Добавление reCAPTCHA на сайте Google

3. Скопируйте ключи.

защита от спама

4. В админ-панели перейдите Contact Form 7 > Интеграция
и кликните Настройки интеграции
.

Настройки интеграции в плагине

5. Добавьте скопированные ключи, сохраните изменения.

contact form 7 recaptcha

Для Капчи v.2 нужно вставить тег [recaptcha]
. В последней версии нет дополнительных полей.

Установка целей метрики

В CF можно отслеживать конверсии для анализа поведенческих факторов. Рассмотрим как это сделать для Яндекс. Метрики.

1. В Метрике зайдите Настройка > Цели > Добавить цель.

contact form 7 метрика
Настройка цели в Яндекс-Метрике

2. Придумайте название цели, отметьте JavaScript-событие, укажите Идентификатор цели. Последний нужен для отслеживания действий.

contact form 7 цели
Настройка цели в Яндекс-Метрике

3. Добавьте в файл functions.php активной Ворпресс-темы код

add_action( 'wp_head', 'add_yandex_target' );
function add_yandex_target() {
    ?>
    <script type="text/javascript">
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            if ( '999' == event.detail.contactFormId ) {
                ym(555, 'reachGoal', 'wptest_form'); return true;
            }
        });
    </script>
    <?php
}

 

ID формы можно посмотреть, если открыть ее на редактирование.

Редактирование формы

Готовые шаблоны

Оформление в CF7 одинаковое для всех форм. Каждую из них можно видоизменить.

Плагин Contact Form 7 Style

Вы сможете применить к выбранной форме один из нескольких готовых шаблонов. Установка стандартная.

Чтобы задать внешний вид форме:

  • выберите форму;
  • перейдите на вкладку Contact Form 7 Style Template;
  • используя стрелки, выберите дизайн.
Применение шаблона к выбранной форме в Contact Form 7

Решение проблем и исправление ошибок

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

Не отправляются письма

Тут может быть несколько проблем:

  • электронные письма не отправляются вообще;
  • попадают в СПАМ.
  • неправильные настройки сайта;
  • ограничения на хостинге.

Как исправить?

Чтобы заставить работать почту, есть несколько способов.

1. Стандартные настройки

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

2. W P Mail SMTP

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

Рассмотрим универсальный вариант — бесплатный WP-плагин, который использует внешний SMTP-сервер. Работать будем с почтовым ящиком от Gmail. На него будут приходить письма из формы.

  1. Создайте ящик на Gmail.com.
  2. Установите WP Mail SMTP.
  3. Откройте Настройки > WP Mail SMTP.
  4. Заполните поля От (email) и От имени.
    Настройка плагина WP Mail SMTP
  5. В опции Метод отправки почты отметьте Прочие SMTP.
  6. Заполните: SMTP сервер — smtp.gmail.com Шифрование
    — TLS SMTP порт
    — 587

    Авторизация
    — ВКЛ

    Имя пользователя SMTP
    — контактный email

    Пароль SMTP
    — пароль к ящику

  7. Чтобы проверить работу почты, откройте вкладку Проверка почты и нажмите Отправить email. В ящике должно быть тестовое письмо.
    Отправка тестового письма в плагине WP Mail SMTP

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

Использовать SMTP можно без плагина, с помощью кода в functions.php.

function cf7_setup_phpmailer_init( PHPMailer $phpmailer ) {
    // Хост почтового сервера
    $phpmailer->Host = 'smtp.gmail.com';
    // Номер порта 
    $phpmailer->Port = 465;
    // Имя пользователя для SMTP авторизации 
    $phpmailer->Username = 'wptester54@gmail.com';
    // Пароль пользователя для SMTP авторизации 
    $phpmailer->Password = 'password'; 
    // Включение/отключение шифрования
    $phpmailer->SMTPAuth = true; 
    // Тип шифиования (ssl или tls)
    $phpmailer->SMTPSecure = 'ssl'; 
    // Обратный Email
    $phpmailer->From = 'wptester54@gmail.com'; 
    // Название сайта в поле От
    $phpmailer->FromName = get_bloginfo( 'name' ); 
    $phpmailer->IsSMTP();
}
add_action( 'phpmailer_init', 'cf7_setup_phpmailer_init' );

В коде нужно вписать свой email-адрес и пароль.

Добавь в закладки и поделись с друзьями:

В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.

Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи
автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:

  • Они постоянно обновляются
  • Профессиональные разработчики
  • У инструментов есть интеграция друг с другом
  • На русском языке

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

В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.

CF7 в поиске по плагинам
Contact form 7 в поиске

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

Стандартная конфигурация

Стандартный код

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Если обязательно для заполнения то отмечаем галочкой

Уникальный идентификатор, оставляем без изменения

 

Значение, которое отображается по умолчанию, что нужно ввести

Если отметить чекбокс, то название поля будет внутри

Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления

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

  • Код поле добавления имени
  • Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.
  • Панель инструментов

Готовый код

Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.

Обновляем настройки

Сохранение настроек

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

Исправляем параметры отправки
Вкладка Письмо
  1. Вкладка письмо
  2. Те шорткоды с номерами, которые создавали в разделе Шаблоны, их копируем в область Тело письма, это будет приходить при заполнении формы вам на почту. Дописал напротив каждого фразы Имя, чтобы обозначить какая информация будет мне поступать на почту.
  3. Тема отображается когда письмо придёт на почту
  4. Дополнительные заголовки советую стереть, никакой помощи не добавляют, а лишь ошибки при отправке
  5. В разделе Кому указываем почту, на которую получать письма с формы, по умолчанию берется из аккаунта WordPress

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

shortcode вывода формы
Копируем шорткод

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

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

Popup Maker в выдаче по плагинам
Popup Maker

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

Вводим название и shortcod CF7
Название и добавление кода

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

Таб с тригером
Триггер

Обычно обратная связь появляется по нажатию кнопки, поэтому из списка выбираем параметр Открыть и на Добавить. Можете выставить при наведении или через промежуток времени, но нужно настроить куки, а то модальное окно надоест посетителю.

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

class для всплывающей формы
Прописываем класс

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

Изменение других параметров
Остальные параметры

Не забываем нажать на опубликовать.

Публикация попапа
Публикуем

После публикации проверим работу всплывающей формы в WordPress. Осталось добавить класс .osnova к любому элементу на сайте. Создадим новую статью, и вставим всплывающую обратную связь по нажатию картинки.

В запись загрузил изображение с помощью медиафалов.

Старый редактор WP
Редактор WordPress

Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.

Прописываем класс к объекту
Добавляем class к элементу

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

Переходим обратно в Визуально и нажимаем предварительный просмотр.

Таб визуально
Вкладка визуально

Открывается новая страница в браузере.

Предварительный просмотр
Предварительный просмотр

Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.

Проверка всплывающей формы обратной связи на сайте
Рабочая всплывающая форма

Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.

В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать «Редактировать как HTML», а дальше по старой схеме.

Вставка класса в гутенберге
Редактирование HTML в Gutenberg

 

Fancybox в админке вордпресса
Fancy box

Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.

Убираем не нужные элементы
Настройки fancybox

Берем код прописанный ниже, в разделе Внешний вид > Виджеты добавляем новый типа HTML–код, вписываем в него скопированную конфигурацию обратной связи.

<a href="#form_popup1" class="fancybox-inline">Отправить сообщение</a>
<div style="display:none" class="fancy-box">
<div id="form_popup1">
[contact-form-7 id="246" title="Всплывающая форма"]
</div>
</div>
Прописываем модальное окно в виджете
Вставка кода в виджет

По логике заменяем мой шорткод от Contact Form 7 на свой. Переходим на блог и проверяем работу, в примере действие происходит нажатием по ссылке.

Пример вывода формы в сайдбаре
Пример исполнения

Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Записываем id
Вносим ID в тригеры

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

Параметры кнопки элементоре
Выводим параметры элемента в elementor

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

Отображение popup на сайте
Показ формы связи через elementor

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

Итог

На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:

  • Устанавливаем оба плагина WordPress
  • В Contact form 7 создаем новую форму, настраиваем ее по инструкции
  • Добавляем шорткод в новый попап Popupmaker
  • Настраиваем отображение окна
  • Привязываем класс к любому элементы на сайте
  • Проверяем работу

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

Оцените статью
NaWordpress.ru
Добавить комментарий