Contact Form 7 — один из самых популярных плагинов для создания форм обратной связи в WordPress. Однако часто возникает необходимость кастомизировать внешний вид и поведение форм с помощью собственных CSS-стилей и JavaScript. В этой статье разберём, как правильно подключать внешние стили и скрипты именно для форм Contact Form 7, чтобы не влиять на остальные части сайта и избежать конфликтов.
Почему важно подключать стили и скрипты правильно
Подключение CSS и JS напрямую через header.php или footer.php темы не всегда удобно и безопасно, особенно если стили нужны только для одной формы. Это приводит к излишней нагрузке и потенциальным конфликтам с другими плагинами. Правильный способ — подключать ресурсы только на тех страницах, где есть форма, и даже лучше — только к самой форме.
Contact Form 7 использует AJAX для отправки, поэтому скрипты должны загружаться корректно и в нужном порядке. Также важно использовать WordPress API для регистрации и подключения стилей и скриптов, чтобы сохранить совместимость с другими компонентами.
Подключение стилей и скриптов через functions.php
Создадим функцию, которая будет подключать наши CSS и JS файлы только если на странице есть форма Contact Form 7. Для этого можно использовать хук wp_enqueue_scripts и функцию проверки наличия шорткода [contact-form-7].
function contactform7ru_enqueue_assets() {
if ( is_singular() && has_shortcode( get_post()->post_content, 'contact-form-7' ) ) {
// Подключаем кастомный CSS
wp_enqueue_style( 'contactform7ru-custom-style', get_stylesheet_directory_uri() . '/css/contactform7-custom.css', array(), '1.0' );
// Подключаем кастомный JavaScript
wp_enqueue_script( 'contactform7ru-custom-script', get_stylesheet_directory_uri() . '/js/contactform7-custom.js', array('jquery'), '1.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'contactform7ru_enqueue_assets' );В этом примере стили и скрипты будут подключаться только на страницах с формой Contact Form 7. Стили и скрипты помещены в папки /css/ и /js/ вашей активной темы.
Пример простого кастомного CSS
В файле contactform7-custom.css можно переопределить стили формы, например, изменить цвет кнопки:
.wpcf7-form input.wpcf7-submit {
background-color: #0073aa;
color: #fff;
border-radius: 5px;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.wpcf7-form input.wpcf7-submit:hover {
background-color: #005077;
}Добавление кастомного JavaScript для обработки событий формы
Для расширенной логики, например валидации или динамического изменения полей, можно добавить JavaScript. Contact Form 7 задействует собственные события, например wpcf7submit, которые можно использовать.
jQuery(document).ready(function($) {
$(document).on('wpcf7submit', function(event) {
if (event.detail.status === 'mail_sent') {
alert('Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.');
}
});
});Этот пример показывает простое всплывающее уведомление после успешной отправки формы. Подобным образом можно реализовать вызовы модальных окон, редиректы и другие действия.
Подключение скриптов и стилей к отдельным формам Contact Form 7
Если на сайте несколько форм, и для каждой нужен уникальный стиль или скрипт, можно определить ID формы и подключать ресурсы выборочно. Например, чтобы подключить стиль и скрипт только к форме с ID 123:
function contactform7ru_enqueue_assets_by_form() {
if ( is_singular() ) {
global $post;
if ( has_shortcode( $post->post_content, 'contact-form-7' ) ) {
// Получаем все формы на странице
preg_match_all('/\[contact-form-7.*id="(\d+)".*\]/', $post->post_content, $matches);
if ( ! empty($matches[1]) ) {
foreach ($matches[1] as $form_id) {
if ($form_id == 123) {
wp_enqueue_style( 'contactform7ru-form123-style', get_stylesheet_directory_uri() . '/css/contactform7-form123.css', array(), '1.0' );
wp_enqueue_script( 'contactform7ru-form123-script', get_stylesheet_directory_uri() . '/js/contactform7-form123.js', array('jquery'), '1.0', true );
}
}
}
}
}
}
add_action( 'wp_enqueue_scripts', 'contactform7ru_enqueue_assets_by_form' );Такой подход позволяет значительно повысить производительность и гибкость, не загружая лишние файлы.
Применение плагина Clearfy Pro для оптимизации Contact Form 7
Для оптимизации загрузки стилей и скриптов Contact Form 7 можно использовать плагин Clearfy Pro. Он позволяет отключать ненужные скрипты и стили плагина на страницах без форм, а также управлять загрузкой ресурсов более тонко.
Использование Clearfy Pro сокращает время загрузки страниц и улучшает пользовательский опыт, особенно если на сайте много форм или сложные темы.
Итоги и рекомендации
Подключение внешних стилей и скриптов к Contact Form 7 — важный аспект кастомизации форм, который позволяет улучшить внешний вид и функциональность без ущерба производительности сайта. Используйте условное подключение ресурсов, работайте с событиями CF7 в JavaScript, и при необходимости применяйте специализированные оптимизационные плагины.
Если вы хотите глубже автоматизировать или адаптировать формы, советую изучить REST API Contact Form 7 и WP хуки, что даст ещё больше возможностей для расширения.