Lo spinner standard di Contact Form 7 si riconosce al primo sguardo. Una freccia grigia, rotazione infinita, ed è subito chiaro: il sito gira con le impostazioni predefinite. Il design ha dieci anni, il preloader venti.

Ma non siete obbligati a subirlo. Il meccanismo di sostituzione dello spinner è integrato nel framework CSS del plugin stesso, senza modificare i file sorgente, senza il rischio di perdere le modifiche con gli aggiornamenti automatici. Tre snippet, cinque minuti, e il modulo appare esattamente come previsto nel mockup.

💡 Panoramica rapida:

• Nascondere l'animazione standard con display: none su .wpcf7-spinner::before
• Aggiungere la propria GIF come sfondo o disegnare uno spinner in puro CSS
• Centrare il preloader via flexbox, senza !important e trucchi
• Prelevare un'animazione già pronta da loading.io, Icons8 o CSS Loaders
• Per versioni precedenti alla cinque, l'hook deprecato wpcf7_ajax_loader in functions.php

Come funziona ora il preloader di CF7

Contact Form 7 è attualmente alla versione 6.1.6 e la meccanica dello spinner non è cambiata dalla versione cinque. Niente più <img src="ajax-loader.gif">. Il browser disegna la freccia autonomamente tramite ::before dentro <span class="wpcf7-spinner">. Nessun file esterno, rendering istantaneo.

Il vecchio selettore div.wpcf7 .ajax-loader è morto. Tutte le istruzioni dell'era CF7 4.6 appartengono all'archivio. Ora tutto è più semplice: si sovrascrive lo sfondo su .wpcf7-spinner, si nasconde lo pseudo-elemento, fatto.

Questo ha anche eliminato la necessità dell'hook wpcf7_ajax_loader. Niente più functions.php per sostituire la freccia, puro CSS, tre righe.

Cambiare lo spinner via CSS: passo dopo passo

Supponiamo che abbiate custom-spinner.gif nella cartella images del vostro tema child. Due passaggi e la freccia standard sparisce.

Per prima cosa, disabilitare l'animazione integrata. Il selettore punta con precisione allo pseudo-elemento, nient'altro viene toccato:

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

Ora agganciate la vostra GIF come sfondo allo <span> stesso:

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
}

Entrambi i blocchi vanno nel style.css del tema child. Percorso: «Aspetto → Editor file tema» o «Aspetto → Personalizza → CSS aggiuntivo». Non toccate i file del plugin: le vostre modifiche andranno perse al primo aggiornamento.

Regolate larghezza e altezza in base alle dimensioni della vostra GIF. Spinner trasparente su modulo scuro? Togliete background-color; lì non serve.

Animazione CSS senza file: anello puro

La GIF richiede una richiesta HTTP e sgrana sui display retina. L'approccio moderno è disegnare lo spinner usando il browser. border più @keyframes offrono una nitidezza perfetta a qualsiasi risoluzione. Nessun file, caricamento istantaneo, pieno controllo sul colore.

Ecco un doppio anello con un colore accent brand:

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
}

Usate i vostri colori. Sostituite #262b2e e #FF3D00 con la vostra coppia brand. Lo spessore della linea è 2px, rotazione completa in un secondo. Lo volete più veloce? Riducete 1s a 0.6s. Più lento? 1.5s.

Centrare il preloader

Di default, lo spinner è attaccato al bordo sinistro del pulsante di invio. Su larghezza mobile non si nota, ma su desktop appare sciatto. Si risolve con flexbox in due regole:

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 prima regola trasforma il modulo in un contenitore flex con allineamento centrato. La seconda dà allo spinner un margine superiore e margini automatici per spingerlo al centro della riga. Niente float: inherit !important, niente margin-bottom negativo; tutto resta pulito e non si rompe cambiando tema.

Se il modulo è complesso e flex-wrap: wrap rompe il layout dei campi, avvolgete lo spinner in un <div> separato con text-align: center. Ma nove volte su dieci l'approccio flexbox è sufficiente.

Dove trovare animazioni già pronte

ajaxload.info, che era consigliato in tutte le vecchie guide, ha chiuso. Tre alternative attive:

• loading.io, un generatore di spinner. Scegli forma, colore, dimensione. Esporta in GIF, SVG, CSS e APNG. Le opzioni gratuite sono più che sufficienti per un modulo di contatto.
• Icons8 Preloaders, una raccolta di oltre mille icone: anelli, barre, punti, varianti 3D. Il generatore produce GIF, SVG e APNG. Alcuni sono gratuiti con attribuzione, altri sono premium.
• CSS Loaders, spinner in puro CSS senza un solo file esterno. Scegli quello che ti piace, copia HTML+CSS, adattalo per .wpcf7-spinner. Perfetto per chi non vuole caricare nemmeno un kilobyte.

Procurati uno spinner con sfondo trasparente; si adatterà a un modulo di qualsiasi colore. La dimensione ottimale è 24×24 o 32×32 pixel. Quelli più piccoli danno un effetto tremolio, quelli più grandi distolgono l'attenzione dal pulsante di invio.

E per le versioni precedenti alla 5.x: metodo deprecato

Se il tuo sito è ancora su CF7 4.x, aggiorna il plugin. Seriamente. La versione corrente 6.1.6 ha chiuso numerose vulnerabilità, e il vecchio hook wpcf7_ajax_loader potrebbe smettere di funzionare in qualsiasi momento. Lo sviluppatore non garantisce retrocompatibilità.

Ma se l'aggiornamento è impossibile (codice personalizzato strettamente legato ai vecchi hook), ecco il metodo tramite 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
}

Il codice va inserito nel functions.php del tema child. Il file ajax-loader.gif va caricato in anticipo nella cartella images/ all'interno del tema child. Per il tema child: stylesheet_directory. Per il tema parent: template_directory.

E appena possibile, aggiorna comunque.

Esempio dal vivo in video

Il video qui sotto mostra una procedura completa: come si presenta il problema dello spinner che gira all'infinito, perché le vecchie istruzioni non funzionano e come risolverlo in due minuti tramite CSS:

⁉️🤔 Domande frequenti

Perché il CSS non viene applicato e lo spinner non cambia?

Quasi sicuramente stai puntando il vecchio selettore div.wpcf7 .ajax-loader. Dalla versione cinque è inutile. Devi puntare .wpcf7-spinner::before (per nascondere quello predefinito) e .wpcf7-spinner (per agganciare il tuo). Verifica la versione del plugin: "Plugin → Plugin installati → Contact Form 7". Apri DevTools (F12), cerca in Elementi <span class="wpcf7-spinner"> all'interno del modulo. Se ha uno pseudo-elemento ::before con un bordo, sei sulla versione corrente; usa i selettori della sezione CSS. Se vedi un <img> con classe ajax-loader, il plugin è irrimediabilmente obsoleto.

Posso rendere lo spinner sfumato o multicolore?

Sì, senza un solo pixel di grafica. Lo spinner CSS di base della sezione animazione accetta qualsiasi colore tramite border-top e border-bottom. Per una sfumatura, sostituisci il colore pieno con conic-gradient in una maschera. Esempio di un anello con transizione rosso-giallo-verde:

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
}

Funziona nei browser moderni. Lo spessore dell'anello si imposta in mask tramite calc().

Come rimuovo completamente lo spinner?

Una riga: .wpcf7-spinner { display: none !important; }. Ma pensaci due volte. Lo spinner è l'unico segnale per l'utente che il modulo è stato inviato e il server sta elaborando la richiesta. Senza, la persona cliccherà di nuovo "Invia" e otterrai un invio duplicato. Meglio non rimuoverlo, ma sostituirlo con un anello minimalista di colore neutro.

Uno spinner personalizzato influisce sulla velocità di caricamento?

Dipende dal metodo. Una GIF da 2-5 KB aggiunge una richiesta HTTP, che non ha praticamente alcun impatto sulla velocità della pagina. Uno spinner CSS non aggiunge né una richiesta né un byte oltre ai 300-400 byte di codice (l'opzione più veloce). Anche SVG in base64 dentro il CSS non richiede una richiesta, ma pesa 1-2 KB. Per un modulo di contatto, la differenza tra i tre metodi è invisibile a occhio. L'animazione CSS vince su tutto: nessun file, nessuna pixelatura, non ingombra la libreria media.

Dove devo salvare il file dello spinner per non perderlo durante gli aggiornamenti del tema?

Solo nel tema child. Metti custom-spinner.gif nel tema parent e quando si aggiorna il file sparirà. Struttura corretta:

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

In CSS scrivi il percorso senza barra iniziale: url('images/custom-spinner.gif'). È un percorso relativo rispetto al file di stile del tema child. I percorsi assoluti come /wp-content/themes/... si rompono quando si migra il sito su un dominio diverso.

Quale metodo di sostituzione scegliere per il tuo caso

Tre scenari, in ordine crescente di complessità e opzioni di personalizzazione.

Per nove siti su dieci il primo scenario è sufficiente. Prendi uno spinner già pronto da loading.io, caricalo nel tema child, scrivi tre righe di CSS e la freccia predefinita non tradirà più il tuo sito.