Le Contact Form 7 standard se reconnaît au premier coup d’œil. Une flèche grise, une rotation sans fin, et c’est tout de suite clair: le site tourne avec les réglages par défaut. Le design a dix ans, et le préchargeur en a vingt.

Mais vous n’êtes pas obligé de vous en contenter. Le mécanisme de remplacement du spinner est intégré au framework CSS du plugin lui-même, sans modifier les fichiers source, sans risque de perdre vos modifications lors des mises à jour automatiques. Trois snippets, cinq minutes, et le formulaire ressemble exactement à ce que prévoit la maquette.

💡 En bref:

• Masquez l’animation d’origine avec display: none sur .wpcf7-spinner::before
• Ajoutez votre propre GIF en fond ou dessinez un spinner en CSS pur
• Centrez le préchargeur via flexbox, sans !important ni bidouillage
• Récupérez une animation prête à l’emploi sur loading.io, Icons8 ou CSS Loaders
• Pour les versions antérieures à la cinq, le hook obsolète wpcf7_ajax_loader dans functions.php

Comment fonctionne le préchargeur de CF7 aujourd’hui

Contact Form 7 en est actuellement à la version 6.1.6, et le mécanisme du spinner n’a pas changé depuis la version cinq. Fini le <img src="ajax-loader.gif">. Le navigateur dessine lui-même la flèche via ::before à l’intérieur de <span class="wpcf7-spinner">. Aucun fichier externe, rendu instantané.

L’ancien sélecteur div.wpcf7 .ajax-loader est mort. Toutes les instructions de l’époque CF7 4.6 sont bonnes pour les archives. Maintenant, tout est plus simple: remplacez le fond sur .wpcf7-spinner, masquez le pseudo-élément, terminé.

Cela a aussi supprimé le besoin du hook wpcf7_ajax_loader. Plus besoin de functions.php pour remplacer la flèche, du CSS pur, trois lignes.

Modifier le spinner via CSS: étape par étape

Disons que vous avez custom-spinner.gif dans le dossier images de votre thème enfant. Deux étapes, et la flèche d’origine disparaît.

D’abord, désactivez l’animation intégrée. Le sélecteur cible précisément le pseudo-élément, rien d’autre n’est affecté:

1
/* Hide default CF7 spinner */
2
.wpcf7-spinner::before {
3
    display: none;
4
}

Attachez maintenant votre propre GIF en fond sur le <span> lui-même:

1
/* Insert custom preloader */
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
}

Les deux blocs vont dans le style.css de votre thème enfant. Chemin: «Apparence → Éditeur de fichiers du thème» ou «Apparence → Personnaliser → CSS additionnel». Ne touchez pas aux fichiers du plugin eux-mêmes; vos modifications seront perdues à la première mise à jour.

Ajustez la largeur et la hauteur pour qu’elles correspondent à la taille de votre GIF. Un spinner transparent sur un formulaire sombre? Supprimez background-color; ce n’est pas nécessaire ici.

Animation CSS sans fichier: un anneau en pur CSS

Un GIF nécessite une requête HTTP et pixellise sur les écrans retina. L’approche moderne consiste à dessiner le spinner avec le navigateur. border plus @keyframes offrent une netteté parfaite à toutes les résolutions. Aucun fichier, chargement instantané, contrôle total de la couleur.

Voici un double anneau avec une couleur de marque accentuée:

1
/* Hide default arrow */
2
.wpcf7-spinner::before {
3
    display: none;
4
}
5
 
6
/* Draw outer ring */
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
/* Inner ring — accent color */
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
}

Utilisez vos propres couleurs. Remplacez #262b2e et #FF3D00 par votre paire de couleurs de marque. L’épaisseur du trait est de 2px, rotation complète en une seconde. Vous le voulez plus rapide? Réduisez 1s à 0.6s. Plus lent? 1.5s.

Centrer le préchargeur

Par défaut, le spinner est collé au bord gauche du bouton d’envoi. Sur une largeur mobile, cela passe inaperçu, mais sur desktop, cela fait négligé. Problème résolu avec flexbox en deux règles:

1
/* Flex container for the form */
2
.wpcf7 form {
3
    display: flex;
4
    flex-wrap: wrap;
5
    justify-content: center;
6
}
7
 
8
/* Centering the spinner */
9
.wpcf7-spinner {
10
    margin: 10px auto 0 auto;
11
}

La première règle transforme le formulaire en conteneur flex avec alignement centré. La seconde donne au spinner une marge supérieure et des marges automatiques pour le pousser au milieu de la ligne. Pas de float: inherit !important, pas de margin-bottom négatif; tout reste propre et ne casse pas en changeant de thème.

Si le formulaire est complexe et que flex-wrap: wrap casse la disposition des champs, enveloppez le spinner dans un <div> séparé avec text-align: center. Mais neuf fois sur dix, l’approche flexbox suffit.

Où trouver des animations prêtes à l’emploi

ajaxload.info, qui était recommandé dans tous les anciens guides, a fermé. Trois alternatives opérationnelles:

• loading.io, un constructeur de spinners. Vous choisissez la forme, la couleur, la taille. Export en GIF, SVG, CSS et APNG. Les options gratuites sont largement suffisantes pour un formulaire de contact.
• Icons8 Preloaders, une collection de plus d’un millier d’icônes: anneaux, barres, points, variantes 3D. Le générateur produit du GIF, SVG et APNG. Certains sont gratuits avec attribution, d’autres sont premium.
• CSS Loaders, des spinners en CSS pur, sans aucun fichier externe. Choisissez celui qui vous plaît, copiez le HTML+CSS, adaptez-le pour .wpcf7-spinner. Idéal pour ceux qui refusent par principe de charger le moindre kilo-octet.

Optez pour un spinner avec un fond transparent; il s’intégrera dans un formulaire de n’importe quelle couleur. La taille optimale est de 24×24 ou 32×32 pixels. Plus petit, il scintille; plus grand, il détourne l’attention du bouton d’envoi.

Qu’en est-il des versions antérieures à la 5.x: méthode obsolète

Si votre site tourne encore sous CF7 4.x, mettez le plugin à jour. Sérieusement. La version actuelle 6.1.6 a corrigé de nombreuses vulnérabilités, et l’ancien hook wpcf7_ajax_loader peut cesser de fonctionner à tout moment. Le développeur ne garantit pas la rétrocompatibilité.

Mais si la mise à jour est impossible (du code sur mesure est étroitement lié aux anciens hooks), voici la méthode via functions.php:

1
// Replacing CF7 preloader for versions ≤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
}

Le code se place dans le functions.php de votre thème enfant. Le fichier ajax-loader.gif est préalablement téléversé dans images/ à l’intérieur du thème enfant. Pour un thème enfant: stylesheet_directory. Pour un thème parent: template_directory.

Et faites la mise à jour dès que possible.

Exemple concret en vidéo

La vidéo ci-dessous montre un parcours complet: à quoi ressemble le problème du spinner qui tourne indéfiniment, pourquoi les anciennes instructions ne fonctionnent pas, et comment le corriger en deux minutes via CSS:

⁉️🤔 Foire aux questions

Pourquoi le CSS ne s’applique-t-il pas, le spinner ne change pas?

Vous ciblez presque certainement l’ancien sélecteur div.wpcf7 .ajax-loader. Depuis la version cinq, il ne sert plus à rien. Vous devez cibler .wpcf7-spinner::before (pour masquer celui par défaut) et .wpcf7-spinner (pour attacher le vôtre). Vérifiez la version du plugin: «Extensions → Extensions installées → Contact Form 7». Ouvrez les DevTools (F12), repérez dans Éléments <span class="wpcf7-spinner"> à l’intérieur du formulaire. S’il possède un pseudo-élément ::before avec une bordure, vous êtes sur la version actuelle; utilisez les sélecteurs de la section CSS. Si vous voyez une balise <img> avec la classe ajax-loader, le plugin est désespérément obsolète.

Puis-je rendre le spinner en dégradé ou multicolore?

Oui, sans un seul pixel d’image. Le spinner CSS de base de la section animation accepte n’importe quelle couleur via border-top et border-bottom. Pour un dégradé, remplacez la couleur unie par conic-gradient dans un masque. Exemple d’un anneau avec une transition rouge-jaune-vert:

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
}

Fonctionne dans les navigateurs modernes. L’épaisseur de l’anneau se règle dans mask via calc().

Comment supprimer complètement le spinner?

Une seule ligne: .wpcf7-spinner { display: none !important; }. Mais réfléchissez à deux fois. Le spinner est le seul signal indiquant à l’utilisateur que le formulaire a été envoyé et que le serveur traite la demande. Sans lui, la personne cliquera à nouveau sur «Envoyer», et vous obtiendrez un doublon. Mieux vaut ne pas le supprimer, mais le remplacer par un anneau minimaliste dans une couleur neutre.

Un spinner personnalisé affecte-t-il la vitesse de chargement?

Cela dépend de la méthode. Un GIF de 2 à 5 Ko ajoute une requête HTTP, ce qui n’a pratiquement aucun impact sur la vitesse de la page. Un spinner CSS n’ajoute ni requête ni octet au-delà de 300 à 400 octets de code (l’option la plus rapide). Un SVG en base64 dans le CSS ne nécessite pas non plus de requête, mais pèse 1 à 2 Ko. Pour un formulaire de contact, la différence entre les trois méthodes est imperceptible à l’œil nu. L’animation CSS l’emporte sur tous les plans: pas de fichier, pas de pixellisation, elle n’encombre pas la médiathèque.

Où stocker le fichier du spinner pour ne pas le perdre lors des mises à jour du thème?

Uniquement dans le thème enfant. Placez custom-spinner.gif dans le thème parent, et lors de la mise à jour le fichier disparaîtra. Structure correcte:

1
/wp-content/themes/
2
  your-theme/
3
  your-theme-child/
4
    style.css          ← CSS goes here
5
    images/
6
      custom-spinner.gif  ← file goes here

En CSS, écrivez le chemin sans barre oblique initiale: url('images/custom-spinner.gif'). Il s'agit d'un chemin relatif depuis le fichier de style du thème enfant. Les chemins absolus comme /wp-content/themes/... ne fonctionnent plus lorsque vous migrez le site vers un autre domaine.

Quelle méthode de remplacement choisir selon votre cas

Trois scénarios, par ordre croissant de complexité et de possibilités de personnalisation.

Pour neuf sites sur dix, le premier scénario suffit. Récupérez un spinner prêt à l'emploi sur loading.io, déposez-le dans le thème enfant, écrivez trois lignes de CSS, et la flèche par défaut ne trahira plus jamais votre site.