Стандартний спінер 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, і дефолтна стрілка більше ніколи не викаже ваш сайт.