В своих wordpress проектах я очень часто использую плагин 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-ов и буду использовать их:

Отключение скриптов
Возвращаемся в 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
выборке просто манипулируем нужными классами. В итоге при отправке формы, получаем красивые стилизованные сообщения:
