Standard Contact Form 7-spinnern känner du igen direkt. En grå pil, oändlig rotation, och det syns omedelbart: sajten kör standardinställningar. Designen är tio år gammal, och preloadern är tjugo.

Men du behöver inte stå ut med det. Mekanismen för att byta ut spinnern är inbyggd i pluginens eget CSS-ramverk, utan att redigera källfiler, utan risk att förlora ändringar vid automatiska uppdateringar. Tre kodsnuttar, fem minuter, och formuläret ser ut precis som det var tänkt i mockupen.

💡 Snabb överblick:

• Dölj standardanimationen med display: none på .wpcf7-spinner::before
• Lägg till din egen GIF som bakgrund eller rita en spinner med ren CSS
• Centrera preloadern med flexbox, utan !important och hacks
• Hämta en färdig animation från loading.io, Icons8 eller CSS Loaders
• För versioner under fem, den föråldrade hooken wpcf7_ajax_loader i functions.php

Så fungerar CF7-preloadern nu

Contact Form 7 ligger för närvarande på version 6.1.6, och spinnermekaniken har inte ändrats sedan version fem. Ingen mer <img src="ajax-loader.gif">. Webbläsaren ritar själv pilen via ::before inuti <span class="wpcf7-spinner">. Inga externa filer, omedelbar rendering.

Den gamla selektorn div.wpcf7 .ajax-loader är död. Alla instruktioner från CF7 4.6-eran hör hemma i arkivet. Nu är allt enklare: skriv över bakgrunden på .wpcf7-spinner, dölj pseudoelementet, klart.

Detta eliminerade också behovet av hooken wpcf7_ajax_loader. Ingen mer functions.php för att byta ut pilen, ren CSS, tre rader.

Byta spinner via CSS: steg för steg

Låt oss säga att du har custom-spinner.gif i mappen images i ditt child theme. Två steg, och standardpilen försvinner.

Först, inaktivera den inbyggda animationen. Selektorn riktar sig exakt mot pseudoelementet, inget annat påverkas:

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

Lägg nu till din egen GIF som bakgrund på själva <span>-elementet:

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
}

Båda blocken placeras i style.css i ditt child theme. Sökväg: "Utseende → Temafilredigerare" eller "Utseende → Anpassa → Extra CSS". Rör inte själva plugin-filerna; dina ändringar försvinner vid första uppdateringen.

Justera width och height så att de matchar din GIF:s storlek. Transparent spinner på ett mörkt formulär? Ta bort background-color; den behövs inte där.

CSS-animation utan filer: ren ring

GIF kräver en HTTP-förfrågan och blir pixlig på retinaskärmar. Det moderna sättet är att rita spinnern med webbläsaren. border plus @keyframes ger perfekt skärpa i alla upplösningar. Inga filer, omedelbar laddning, full kontroll över färg.

Här är en dubbel ring med en accentfärg från varumärket:

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
}

Använd dina egna färger. Byt ut #262b2e och #FF3D00 mot ditt varumärkes färgpar. Linjetjockleken är 2px, full rotation på en sekund. Vill du ha den snabbare? Minska 1s till 0.6s. Långsammare? 1.5s.

Centrera preloadern

Som standard klistrar spinnern sig mot vänsterkanten på skicka-knappen. På mobilbredd märks det inte, men på desktop ser det slarvigt ut. Löses med flexbox i två regler:

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
}

Den första regeln gör formuläret till en flexcontainer med centrerad justering. Den andra ger spinnern toppmarginal och auto-marginaler för att trycka den till mitten av raden. Inget float: inherit !important, ingen negativ margin-bottom; allt hålls rent och går inte sönder vid temabyten.

Om formuläret är komplext och flex-wrap: wrap förstör fältlayouten, slå in spinnern i en separat <div> med text-align: center. Men i nio fall av tio räcker flexbox-metoden.

Var du hittar färdiga animationer

ajaxload.info, som rekommenderades i alla gamla guider, har stängt ner. Tre levande alternativ:

• loading.io, en spinner-byggare. Du väljer form, färg, storlek. Exportera till GIF, SVG, CSS och APNG. Gratisalternativen räcker gott för ett kontaktformulär.
• Icons8 Preloaders, en samling på över tusen ikoner: ringar, staplar, prickar, 3D-varianter. Generatorn ger ut GIF, SVG och APNG. Vissa är gratis med attribution, andra är premium.
• CSS Loaders, rena CSS-spinners utan en enda extern fil. Välj en du gillar, kopiera HTML+CSS, anpassa den för .wpcf7-spinner. Perfekt för dig som i grunden inte vill ladda en enda kilobyte.

Skaffa en spinner med transparent bakgrund; den passar in i ett formulär oavsett färg. Optimal storlek är 24×24 eller 32×32 pixlar. Mindre flimrar, större drar uppmärksamheten från skicka-knappen.

Vad gäller för versioner under 5.x: föråldrad metod

Om din sajt fortfarande kör CF7 4.x, uppdatera tillägget. På allvar. Den aktuella versionen 6.1.6 har täppt till många sårbarheter, och den gamla hooken wpcf7_ajax_loader kan sluta fungera när som helst. Utvecklaren garanterar inte bakåtkompatibilitet.

Men om en uppdatering är omöjlig (anpassad kod är hårt knuten till gamla hookar), här är metoden 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
}

Koden placeras i functions.php i ditt barntema. Filen ajax-loader.gif laddas upp i förväg till images/ inuti barntemat. För barntema: stylesheet_directory. För föräldratema: template_directory.

Och uppdatera ändå vid första bästa tillfälle.

Live-exempel på video

Videon nedan visar en komplett genomgång: hur problemet med den oändligt snurrande spinnern ser ut, varför gamla instruktioner inte fungerar och hur du fixar det på två minuter via CSS:

⁉️🤔 Vanliga frågor

Varför appliceras inte CSS:en, spinnern ändras inte?

Nästan helt säkert riktar du in dig på den gamla selektorn div.wpcf7 .ajax-loader. Sedan version fem är den värdelös. Du måste rikta in dig på .wpcf7-spinner::before (för att dölja standardspinnern) och .wpcf7-spinner (för att fästa din egen). Kontrollera tilläggets version: "Tillägg → Installerade tillägg → Contact Form 7". Öppna DevTools (F12), leta upp <span class="wpcf7-spinner"> inuti formuläret under Elements. Om det har ett ::before-pseudoelement med en border, kör du den aktuella versionen; använd selektorerna från CSS-avsnittet. Om du ser en <img> med klassen ajax-loader är tillägget hopplöst föråldrat.

Kan jag göra spinnern gradient eller flerfärgad?

Ja, utan en enda pixel grafik. Den grundläggande CSS-spinnern från animationsavsnittet tar vilka färger som helst via border-top och border-bottom. För en gradient, ersätt den heldragna färgen med conic-gradient i en mask. Exempel på en ring med röd-gul-grön övergång:

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
}

Fungerar i moderna webbläsare. Ringens tjocklek sätts i mask via calc().

Hur tar jag bort spinnern helt?

En rad: .wpcf7-spinner { display: none !important; }. Men tänk efter. Spinnern är den enda signalen till användaren att formuläret har skickats och att servern bearbetar begäran. Utan den kommer personen att klicka på "Skicka" igen, och du får en dubblett. Bättre att inte ta bort den, utan att ersätta den med en minimalistisk ring i en neutral färg.

Påverkar en anpassad spinner laddningstiden?

Det beror på metoden. En GIF på 2-5 KB lägger till en HTTP-förfrågan, vilket i praktiken inte påverkar sidhastigheten alls. En CSS-spinner lägger varken till en förfrågan eller en byte utöver 300-400 byte kod (det snabbaste alternativet). SVG i base64 inuti CSS kräver inte heller någon förfrågan, men väger 1-2 KB. För ett kontaktformulär är skillnaden mellan de tre metoderna osynlig för ögat. CSS-animation vinner totalt: inga filer, ingen pixelering, belamrar inte mediebiblioteket.

Var ska jag lagra spinnerfilen för att inte förlora den vid temauppdateringar?

Endast i barntemat. Lägger du custom-spinner.gif i föräldratemat försvinner filen när det uppdateras. Rätt struktur:

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

I CSS skriver du sökvägen utan inledande snedstreck: url('images/custom-spinner.gif'). Det är en relativ sökväg från barntemats stilmall. Absoluta sökvägar som /wp-content/themes/... slutar fungera när webbplatsen flyttas till en annan domän.

Vilken ersättningsmetod ska du välja för ditt fall

Tre scenarier, i ordning efter ökande komplexitet och anpassningsmöjligheter.

För nio av tio sajter räcker det första scenariot. Hämta en färdig spinner från loading.io, lägg in den i barntemat, skriv tre rader CSS, så kommer standardpilen aldrig mer att avslöja din sajt.