Часто после того, как пользователь отправил форму с помощью Contact Form 7, хочется не просто поблагодарить его стандартным сообщением, а показать отзывы других пользователей, чтобы повысить доверие и конверсию. В этой статье подробно разберём, как добавить вывод отзывов именно после успешной отправки формы Contact Form 7 на сайте WordPress. Такой подход помогает не только улучшить UX, но и мотивирует посетителей к дальнейшему взаимодействию.
Почему важно показывать отзывы после отправки формы
Показывать отзывы после отправки формы — это классический приём повышения доверия. Когда посетитель видит, что другие люди уже оставили свои комментарии или оценки, он чувствует себя увереннее и с большей вероятностью выполнит целевое действие. Особенно это важно для сайтов с формами обратной связи, заявок, заказов и опросов.
Вместо традиционного простого сообщения "Спасибо за ваш запрос", мы предлагаем показывать блок с реальными отзывами или рейтингом. Это можно сделать с помощью JavaScript, который срабатывает после успешной отправки формы.
Как реализовать показ отзывов после отправки формы в Contact Form 7
Шаг 1. Подготовка отзывов на странице
Для начала нужно подготовить блок с отзывами в HTML, который будет изначально скрыт. Например, добавим в шаблон страницы или в виджет следующий код:
<div id="cf7-reviews" style="display:none; margin-top:20px; padding:15px; background:#f9f9f9; border:1px solid #ddd;">
<h3>Отзывы наших клиентов</h3>
<ul>
<li>"Отличный сервис, быстро и удобно!" — Иван П.</li>
<li>"Спасибо за помощь, всё сработало идеально." — Мария С.</li>
<li>"Рекомендую всем, кто ищет качественную обратную связь." — Алексей К.</li>
</ul>
</div>Этот блок будет показываться пользователям после успешной отправки формы.
Шаг 2. Добавление скрипта для показа отзывов
Contact Form 7 генерирует событие wpcf7mailsent, которое срабатывает после успешной отправки формы. Используя это событие, мы можем показать блок с отзывами.
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
var reviews = document.getElementById('cf7-reviews');
if (reviews) {
reviews.style.display = 'block';
}
}, false );
</script>Добавьте этот скрипт в футер сайта или через специальный плагин для вставки кода, например, Insert Headers and Footers.
Шаг 3. Улучшение пользовательского опыта с помощью анимации
Чтобы появление блока отзывов выглядело более плавно и привлекательно, можно добавить CSS-анимацию:
#cf7-reviews {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
#cf7-reviews.show {
opacity: 1;
}И изменить JS так, чтобы добавлять класс show:
document.addEventListener( 'wpcf7mailsent', function( event ) {
var reviews = document.getElementById('cf7-reviews');
if (reviews) {
reviews.style.display = 'block';
setTimeout(function() {
reviews.classList.add('show');
}, 10);
}
}, false );Как интегрировать отзывы с плагинами WordPress
Использование плагина для отзывов
Если на сайте уже есть плагин для управления отзывами, например Expert Review, можно динамически подгружать отзывы через AJAX и показывать их после отправки формы.
Для этого потребуется создать AJAX-обработчик в functions.php, который будет возвращать HTML с отзывами, и в обработчике wpcf7mailsent делать запрос к нему и вставлять результат в блок.
Пример AJAX-запроса для загрузки отзывов
jQuery(document).on('wpcf7mailsent', function(event) {
jQuery.ajax({
url: myAjax.ajaxurl,
type: 'POST',
data: {
action: 'contactform7ru_load_reviews'
},
success: function(response) {
jQuery('#cf7-reviews').html(response).fadeIn();
}
});
});В functions.php добавить:
add_action('wp_ajax_contactform7ru_load_reviews', 'contactform7ru_load_reviews_callback');
add_action('wp_ajax_nopriv_contactform7ru_load_reviews', 'contactform7ru_load_reviews_callback');
function contactform7ru_load_reviews_callback() {
// Здесь получить отзывы, например, из базы или плагина Expert Review
echo '<h3>Отзывы клиентов</h3><ul><li>Отличный сервис!</li><li>Очень удобно.</li></ul>';
wp_die();
}Дополнительные советы по улучшению форм с отзывами
Показывайте разные отзывы по типу формы
Если на сайте несколько форм Contact Form 7, можно показывать разные отзывы для каждой, используя ID формы из события event.detail.contactFormId. Это увеличит релевантность отзывов для пользователя.
Добавьте кнопку для отправки нового отзыва
После того как пользователь увидел отзывы, можно сразу предложить ему оставить свой отзыв. Для этого можно показывать кнопку, которая открывает отдельную форму или модальное окно с формой отзыва.
Используйте рейтинги и визуальные элементы
Отзывы с рейтингами (звёздочки, лайки) воспринимаются лучше. Можно добавить небольшой скрипт для визуализации рейтинга рядом с текстом отзыва.
Таким образом, показывая отзывы после отправки формы Contact Form 7, вы улучшаете взаимодействие с пользователем и повышаете лояльность к вашему сайту.