Сообщение об успешной отправке формы в модальном окне CF 7

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

Сообщение об успешной отправке формы в модальном окне CF 7

Для создания popup окна понадобится:

  1. Созданная форма контактов плагина Contact Form 7 и ее настройка.
  2. Подключенная библиотека SweetAlert 2 — независимый JavaScript плагин модальных окон с гибкими опциями под любой дизайн.

Подключаем сообщение об успешной отправке формы в модальном окне CF 7

Чтобы подключить popup окно нужно вставить нижеприведенный отрывок кода в файл functions.php, либо использовать альтернативный вариант добавления сниппетов.

<?php
/**
 * Вспл. окно при успешной отправке сообщения Sweet Alert Contact Form 7.
 * Документация Sweet Alert https://sweetalert2.github.io
 */

// Подключаем библиотеку 
function sweetalert_javascript_footer() {
	wp_enqueue_script( 'sweetalert-js', '//cdn.jsdelivr.net/npm/sweetalert2@9' );
}
add_action( 'wp_enqueue_scripts', 'sweetalert_javascript_footer', 991 );

// Вспл. окно при успешной отправке сообщения Sweet Alert Contact Form 7
function sweetalert_settings_javascript_footer() {
	?>
	<script>
		// Ваше сообщение отправлено Sweet Alert CF_7.
		document.addEventListener('wpcf7mailsent', function (response) {
			Swal.fire({
				title: 'Отправлено!',
				text: response.detail.apiResponse.message,
				icon: 'success',
				confirmButtonText: 'OK',
				customClass: {
					confirmButton: 'confirm-button-class',
				}
			})
		}, false);
	</script>
	<?php
}
add_action('wp_footer', 'sweetalert_settings_javascript_footer', 992);

В этом отрывке кода подключается библиотека SweetAlert 2 и ее настройки в footer сайта. Более подробную информацию о подключению скриптов в WordPress можно найти в статье Подключение скриптов JS и JQuery к WordPress.

Само сообщение в модальном окне берется из уведомления успешной отправки сообщения в настройках СF 7. Что впишете это поле, то и отобразится в popup окне.

уведомления успешной отправки сообщения в настройках СF 7

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

Дефолтное уведомление скрываем стилями — display: none.

.wpcf7-mail-sent-ok {
	display: none !important;
}

Добавляем сообщения об ошибках формы

Таким же способом я добавил пару подобных отрывков кода соединив все вместе:

  1. Уведомление об ошибке заполнения полей (ошибки валидации формы).
  2. Уведомление об ошибке отправки Contact Form 7.

Сообщение об успешной отправке формы в модальном окне CF 7

В итоге, полностью у меня получился такой плагин, который я добавил в файл functions.php.

<?php
/**
 * Вспл. окно при успешной отправке сообщения Sweet Alert Contact Form 7.
 * Документация Sweet Alert https://sweetalert2.github.io
 */
function sweetalert_javascript_footer() {
	wp_enqueue_script( 'sweetalert-js', '//cdn.jsdelivr.net/npm/sweetalert2@9' );
}
add_action( 'wp_enqueue_scripts', 'sweetalert_javascript_footer', 991 );

function sweetalert_settings_javascript_footer() {
	?>
	<script>
		// Ваше сообщение отправлено Sweet Alert CF_7.
		document.addEventListener('wpcf7mailsent', function (response) {
			Swal.fire({
				title: 'Отправлено!',
				text: response.detail.apiResponse.message,
				icon: 'success',
				confirmButtonText: 'OK',
				customClass: {
					confirmButton: 'confirm-button-class',
				}
			})
		}, false);

		// Ошибка заполнения полей Sweet Alert CF_7.
		document.addEventListener('wpcf7invalid', function (response) {
			Swal.fire({
				title: 'Ошибка!',
				text: response.detail.apiResponse.message,
				icon: 'error',
				confirmButtonText: 'OK',
				customClass: {
					confirmButton: 'confirm-button-class',
				}
			})
		}, false);

		// Ошибка отправки Sweet Alert CF_7.
		document.addEventListener('wpcf7mailfailed', function (response) {
			Swal.fire({
				title: 'Ошибка!',
				text: response.detail.apiResponse.message,
				icon: 'warning',
				confirmButtonText: 'OK',
				customClass: {
					confirmButton: 'confirm-button-class',
				}
			})
		}, false);
	</script>
	<?php
}
add_action('wp_footer', 'sweetalert_settings_javascript_footer', 992);

Примечания

Дефолтные уведомление скрываем стилями — display: none.

.wpcf7-response-output {
	display: none !important;
}

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

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

4 комментария к “Сообщение об успешной отправке формы в модальном окне CF 7”

  1. Чтобы скрыть стандартный показ сообщений. подошел другой код в css^
    .wpcf7-response-output{
    display: none !important;
    }

  2. Вопрос:
    у меня при вызове форма отображается в модальном окне
    Сделано с помощью fancy
    Сообщение об отправке или ошибке выскакивает тоже в модальном, но скрыто первой формой.
    Как сделать наоборот?

  3. Здравствуйте. Вы пользуетесь плагином Fancybox WordPress или реализовано вставкой кода? Нужно смотреть документацию и при отправке формы скрывать окно с формой и открывать окно с уведомлением.

  4. .wpcf7-response-output{
    display: none !important;
    }

    Это скрываем все уведомления. Добавил в статью.

Оставьте комментарий