Настройка Contact Form 7 : стилизация сообщений

В своих wordpress проектах  я очень часто использую плагин contact form 7 . Он очень удобный, гибкий и обладает множеством плюсов, однако как и в большинстве бесплатных плагинов в нем есть свои «болезни». И одна из них — малое количество хуков и, как следствие трудная настройка contact form 7 полей, элементов ит.п. Поэтому далее я распишу как можно изменить внешний вид сообщений в contact form 7 при отправке формы …

Отключаем стандартные contact form 7 стили

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

Стандартные contact form 7 сообщения

Для этого, в файле functions.php  добавляем следующий код:

add_filter( 'wpcf7_load_css', '__return_false' );

Теперь, когда старые стили удалены, можно сверстать/взять новые css стили сообщений (например тут) и прикрутить их к contact form 7. Для примера, я уже имею свои готовые стили alert-ов и буду использовать их:

Шаблон сообщений для cf7

Отключение скриптов

Возвращаемся в functions.php файл и добавляем следующий код:

if ( ! function_exists( 'wpcf7_do_enqueue_scripts' ) ) {
	
	function wpcf7_do_enqueue_scripts() {
		if ( wpcf7_load_js() ) {
			$in_footer = true;
			if ( 'header' === wpcf7_load_js() ) {
				$in_footer = false;
			}
			wp_enqueue_script( 'contact-form-7', get_theme_file_uri( 'NEW_PATH' ), array( 'jquery' ), WPCF7_VERSION, $in_footer );
		}
	}

	add_action( 'wp_enqueue_scripts', 'wpcf7_do_enqueue_scripts', 9 );
}

В коде выше, мы перезаписываем нативный скрипт contact form плагина на наш и подключаем его через функцию wp_enqueue_script . Кстати, если вы начинающий (или нет) разработчик и хотите узнать больше о встроенных функция в WordPress, то возможно вам будет интересна данная статья.

NEW_PATH — путь до нового js файла в теме, который нужно скопировать из wp-content/plugins/contact-form-7/includes/js/scripts.js

Зачем подключать новый скрипт?

Все просто. При отправке формы, сообщения/их статус «подтягиваются» через AJAX, т.е грубо говоря contact form после submit возвращает какой-то кусок html кода, который каждый раз перезаписывается, и естественно отслеживать постоянно на триггерах, когда обновится форма — неправильно. Можно конечно динамически отслеживать DOM через MutationObserver , но и он имеет свои определенные недостатки. Гораздо проще перезаписать главный скрипт cf7 плагина и уже внутри изменить js код под свои нужды.

Меняем внешний вид

Далее осталось только открыть скопированный js файл и внести нужные изменения. В моем случае, необходимо только добавлять/удалять классы для сообщений в зависимости от статуса — spam / mail_sent / mail_failed и т.д . Для этого в методе var ajaxSuccess = function( data, status, xhr, $form ) {  в case выборке просто манипулируем нужными классами.  В итоге при отправке формы, получаем красивые стилизованные сообщения:

Стилизованные сообщения

Подписаться на новые статьи