Стандартный спинер Contact Form 7 безошибочно опознаётся с первого взгляда. Серая стрелка, бесконечное вращение, и сразу ясно: сайт работает на дефолтных настройках. Дизайну десять лет, а прелоадеру все двадцать.

Но вы не обязаны с этим мириться. Механизм замены спиннера встроен в сам CSS-фреймворк плагина, без правки исходников, без риска потерять изменения при автообновлении. Три сниппета, пять минут, и форма выглядит так, как задумано в макете.

💡 Быстрый обзор:

• Прячем заводскую анимацию через display: none на .wpcf7-spinner::before
• Ставим свой GIF фоном или рисуем спинер на чистом CSS
• Центрируем прелоадер через flexbox, без !important и хаков
• Берём готовую анимацию на loading.io, Icons8 или CSS Loaders
• Для версий ниже пятой, deprecated-хук wpcf7_ajax_loader в functions.php

Как устроен прелоадер в CF7 сейчас

Контактная форма седьмая живёт в версии 6.1.6, и механика спиннера с пятой ветки не менялась. Никакого <img src="ajax-loader.gif"> больше нет. Браузер рисует стрелку сам, через ::before внутри <span class="wpcf7-spinner">. Ни одного внешнего файла, мгновенная отрисовка.

Старый селектор div.wpcf7 .ajax-loader мёртв. Все инструкции эпохи CF7 4.6, в архив. Сейчас всё проще: переопределили фон у .wpcf7-spinner, спрятали псевдоэлемент, готово.

Заодно отпала нужда в хуке wpcf7_ajax_loader. Больше никакого functions.php для замены стрелки, чистый CSS, три строки.

Меняем спинер через CSS: пошагово

Допустим, у вас есть custom-spinner.gif в папке images дочерней темы. Два шага, и заводская стрелка исчезает.

Сначала гасим встроенную анимацию. Селектор бьёт точно в псевдоэлемент, ничего лишнего не задевает:

1
/* Скрываем дефолтный спинер CF7 */
2
.wpcf7-spinner::before {
3
    display: none;
4
}

Теперь вешаем свой GIF фоном на сам <span>:

1
/* Подставляем кастомный прелоадер */
2
.wpcf7-spinner {
3
    background-image: url('images/custom-spinner.gif');
4
    width: 24px;
5
    height: 24px;
6
    margin-left: 10px;
7
    background-size: contain;
8
    background-repeat: no-repeat;
9
    background-position: center;
10
}

Оба блока идут в style.css дочерней темы. Путь: «Appearance → Theme File Editor» либо «Appearance → Customize → Additional CSS». Файлы самого плагина не трогайте, при первом же обновлении правки слетят.

Ширину и высоту подгоните под размер вашего GIF. Прозрачный спинер на тёмной форме? Уберите background-color, он там не нужен.

CSS-анимация без файлов: чистое кольцо

GIF тянет HTTP-запрос и пикселит на retina. Современный подход, рисовать спиннер силами браузера. border плюс @keyframes дают идеальную чёткость на любом разрешении. Никаких файлов, мгновенная загрузка, полный контроль над цветом.

Вот двойное кольцо с акцентным цветом бренда:

1
/* Прячем заводскую стрелку */
2
.wpcf7-spinner::before {
3
    display: none;
4
}
5
 
6
/* Рисуем внешнее кольцо */
7
.wpcf7-spinner {
8
    width: 24px;
9
    height: 24px;
10
    border-radius: 50%;
11
    display: inline-block;
12
    border-top: 2px solid #262b2e;
13
    border-right: 2px solid transparent;
14
    box-sizing: border-box;
15
    animation: cf7-spin 1s linear infinite;
16
    background-color: inherit;
17
}
18
 
19
/* Внутреннее кольцо — акцентный цвет */
20
.wpcf7-spinner::after {
21
    content: '';
22
    box-sizing: border-box;
23
    position: absolute;
24
    left: 0;
25
    top: 0;
26
    width: 24px;
27
    height: 24px;
28
    border-radius: 50%;
29
    border-bottom: 2px solid #FF3D00;
30
    border-left: 2px solid transparent;
31
}
32
 
33
@keyframes cf7-spin {
34
    0%   { transform: rotate(0deg); }
35
    100% { transform: rotate(360deg); }
36
}

Цвета, ваши. #262b2e и #FF3D00 замените на брендовую пару. Толщина линии 2px, полный оборот за секунду. Хотите побыстрее, уменьшите 1s до 0.6s. Медленнее, 1.5s.

Центрируем прелоадер

По умолчанию спинер жмётся к левому краю кнопки отправки. На мобильной ширине это незаметно, но на десктопе, неряшливо. Решается flexbox-ом за два правила:

1
/* Flex-контейнер для формы */
2
.wpcf7 form {
3
    display: flex;
4
    flex-wrap: wrap;
5
    justify-content: center;
6
}
7
 
8
/* Центрирование спиннера */
9
.wpcf7-spinner {
10
    margin: 10px auto 0 auto;
11
}

Первое правило переводит форму во flex-контейнер с выравниванием по центру. Второе даёт спинеру отступ сверху и автомаргинами прижимает к середине строки. Никаких float: inherit !important, никаких отрицательных margin-bottom, всё держится чисто и не ломается при смене темы.

Если форма сложная и flex-wrap: wrap разваливает раскладку полей, оберните спинер в отдельный <div> с text-align: center. Но в девяти случаях из десяти хватает flexbox-варианта.

Где взять готовую анимацию

ajaxload.info, который советовали во всех старых руководствах, закрылся. Три живых альтернативы:

• loading.io, конструктор спиннеров. Выбираете форму, цвет, размер. Экспорт в GIF, SVG, CSS и APNG. Бесплатных вариантов хватает для контактной формы.
• Icons8 Preloaders, коллекция из тысячи с лишним иконок: кольца, полосы, точки, трёхмерные варианты. Генератор отдаёт GIF, SVG и APNG. Часть бесплатно с атрибуцией, часть, премиум.
• CSS Loaders, чистые CSS-спиннеры без единого внешнего файла. Выбрали понравившийся, скопировали HTML+CSS, адаптировали под .wpcf7-spinner. Идеально для тех, кто принципиально не хочет грузить ни килобайта.

Берите спиннер на прозрачном фоне, впишется в форму любого цвета. Оптимальный размер, 24×24 или 32×32 пикселя. Меньше рябит, больше перетягивает внимание с кнопки отправки.

Что с версиями ниже 5.x: deprecated-метод

Если сайт всё ещё на CF7 4.x, обновите плагин. Серьёзно. Текущая версия 6.1.6 закрыла множество уязвимостей, и старый хук wpcf7_ajax_loader в любой момент может перестать работать. Разработчик не гарантирует обратную совместимость.

Но если обновление невозможно (кастомный код жёстко завязан на старые хуки), вот метод через functions.php:

1
// Замена прелоадера CF7 для версий ≤4.x — deprecated
2
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
3
function my_wpcf7_ajax_loader() {
4
    return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
5
}

Код кладётся в functions.php дочерней темы. Файл ajax-loader.gif предварительно загружается в images/ внутри дочерней темы. Для дочерней темы: stylesheet_directory. Для родительской: template_directory.

И всё равно обновитесь при первой возможности.

Живой пример на видео

На видео ниже, полный разбор: как выглядит проблема с бесконечно крутящимся спинером, почему старые инструкции не работают, и как починить за две минуты через CSS:

⁉️🤔 Частые вопросы

Почему CSS не применяется, спинер не меняется?

Почти наверняка вы целитесь в старый селектор div.wpcf7 .ajax-loader. С пятой версии он бесполезен. Нужно бить в .wpcf7-spinner::before (прятать дефолт) и .wpcf7-spinner (вешать свой). Проверьте версию плагина: «Plugins → Installed Plugins → Contact Form 7». Откройте DevTools (F12), найдите в Elements <span class="wpcf7-spinner"> внутри формы. Если у него есть псевдоэлемент ::before с бордером, вы на актуальной версии, используйте селекторы из раздела про CSS. Если видите <img> с классом ajax-loader, плагин безнадёжно устарел.

Можно ли сделать спиннер градиентным или разноцветным?

Да, без единого пикселя графики. Базовый CSS-спиннер из раздела про анимацию держит любые цвета через border-top и border-bottom. Для градиента замените сплошной цвет на conic-gradient в маске. Пример кольца с переходом красный-жёлтый-зелёный:

1
.wpcf7-spinner {
2
    background: conic-gradient(#FF3D00, #FFC107, #00C853, #FF3D00);
3
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
4
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
5
    animation: cf7-spin 1s linear infinite;
6
}

Работает в современных браузерах. Толщина кольца задаётся в mask через calc().

Как полностью убрать спинер?

Одна строка: .wpcf7-spinner { display: none !important; }. Но подумайте дважды. Спиннер, единственный сигнал пользователю, что форма отправилась и сервер обрабатывает запрос. Без него человек нажмёт «Отправить» повторно, получите дубликат заявки. Лучше не убирать, а заменить на минималистичное кольцо нейтрального цвета.

Влияет ли кастомный спиннер на скорость загрузки?

Зависит от метода. GIF на 2-5 КБ добавляет один HTTP-запрос, на скорости страницы это практически не отражается. CSS-спиннер не добавляет ни запроса, ни байта сверх 300-400 байт кода, самый быстрый вариант. SVG в base64 внутри CSS тоже без запроса, но весит 1-2 КБ. Для контактной формы разница между тремя методами незаметна глазу. CSS-анимация выигрывает по совокупности: нет файлов, не пикселит, не засоряет медиабиблиотеку.

Где хранить файл спиннера, чтобы не потерять при обновлении темы?

Только в дочерней теме. Положите custom-spinner.gif в родительскую тему, при её обновлении файл исчезнет. Правильная структура:

1
/wp-content/themes/
2
  your-theme/
3
  your-theme-child/
4
    style.css          ← сюда CSS
5
    images/
6
      custom-spinner.gif  ← сюда файл

В CSS путь пишите без слеша в начале: url('images/custom-spinner.gif'). Это относительный путь от файла стилей дочерней темы. Абсолютные пути вроде /wp-content/themes/... ломаются при переезде сайта на другой домен.

Какой метод замены выбрать именно вам

Три сценария, по возрастанию сложности и возможностей кастомизации.

Для девяти сайтов из десяти хватает первого сценария. Взяли готовый спиннер на loading.io, кинули в дочернюю тему, прописали три строки CSS, и дефолтная стрелка больше никогда не выдаст ваш сайт.