Der standardmäßige Contact Form 7-Spinner ist auf den ersten Blick erkennbar. Ein grauer Pfeil, endlose Rotation, und sofort ist klar: Die Seite läuft mit Standardeinstellungen. Das Design ist zehn Jahre alt, der Preloader zwanzig.

Doch damit müssen Sie sich nicht abfinden. Der Mechanismus zum Austauschen des Spinners ist im CSS-Framework des Plugins selbst eingebaut, ohne Bearbeitung von Quelldateien, ohne Risiko, Änderungen bei automatischen Updates zu verlieren. Drei Snippets, fünf Minuten, und das Formular sieht exakt so aus wie im Mockup vorgesehen.

💡 Kurzüberblick:

• Die Standardanimation über display: none bei .wpcf7-spinner::before ausblenden
• Ein eigenes GIF als Hintergrund einbinden oder einen Spinner mit reinem CSS zeichnen
• Den Preloader via Flexbox zentrieren, ohne !important und Hacks
• Eine fertige Animation von loading.io, Icons8 oder CSS Loaders übernehmen
• Für Versionen unter fünf den veralteten Hook wpcf7_ajax_loader in der functions.php

Wie der CF7-Preloader jetzt funktioniert

Contact Form 7 ist aktuell bei Version 6.1.6, und die Spinner-Mechanik hat sich seit Version fünf nicht geändert. Kein <img src="ajax-loader.gif"> mehr. Der Browser zeichnet den Pfeil selbst via ::before innerhalb von <span class="wpcf7-spinner">. Keine externen Dateien, sofortige Darstellung.

Der alte Selektor div.wpcf7 .ajax-loader ist tot. Alle Anleitungen aus der CF7-Ära 4.6 gehören ins Archiv. Jetzt ist alles einfacher: den Hintergrund bei .wpcf7-spinner überschreiben, das Pseudo-Element ausblenden, fertig.

Damit entfiel auch die Notwendigkeit des wpcf7_ajax_loader-Hooks. Keine functions.php mehr, um den Pfeil zu ersetzen, reines CSS, drei Zeilen.

Den Spinner per CSS ändern: Schritt für Schritt

Angenommen, Sie haben custom-spinner.gif im Ordner images Ihres Child-Themes. Zwei Schritte, und der Standardpfeil verschwindet.

Zuerst die eingebaute Animation deaktivieren. Der Selektor zielt präzise auf das Pseudo-Element, nichts anderes wird beeinflusst:

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

Nun binden Sie Ihr eigenes GIF als Hintergrund für das <span> selbst ein:

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
}

Beide Blöcke kommen in die style.css Ihres Child-Themes. Pfad: „Design → Theme-Datei-Editor" oder „Design → Customizer → Zusätzliches CSS". Bearbeiten Sie nicht die Plugin-Dateien selbst; Ihre Änderungen gehen beim ersten Update verloren.

Passen Sie Breite und Höhe an die Größe Ihres GIFs an. Transparenter Spinner auf dunklem Formular? Entfernen Sie background-color; das wird dort nicht benötigt.

CSS-Animation ohne Dateien: reiner Ring

Ein GIF erfordert eine HTTP-Anfrage und pixeliert auf Retina-Displays. Der moderne Ansatz ist, den Spinner mit dem Browser zu zeichnen. border plus @keyframes liefern perfekte Schärfe bei jeder Auflösung. Keine Dateien, sofortige Ladung, volle Kontrolle über die Farbe.

Hier ein Doppelring mit einer Akzent-Markenfarbe:

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
}

Verwenden Sie Ihre eigenen Farben. Ersetzen Sie #262b2e und #FF3D00 durch Ihr Markenpaar. Die Linienstärke beträgt 2px, volle Umdrehung in einer Sekunde. Soll es schneller sein? Reduzieren Sie 1s auf 0.6s. Langsamer? 1.5s.

Den Preloader zentrieren

Standardmäßig klebt der Spinner am linken Rand des Absende-Buttons. Bei mobiler Breite fällt das nicht auf, auf dem Desktop wirkt es jedoch unsauber. Gelöst mit Flexbox in zwei Regeln:

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
}

Die erste Regel macht das Formular zu einem Flex-Container mit zentrierter Ausrichtung. Die zweite gibt dem Spinner einen oberen Abstand und automatische Außenabstände, um ihn in die Mitte der Zeile zu schieben. Kein float: inherit !important, kein negativer margin-bottom; alles bleibt sauber und bricht nicht beim Theme-Wechsel.

Wenn das Formular komplex ist und flex-wrap: wrap das Feld-Layout zerstört, wickeln Sie den Spinner in ein separates <div> mit text-align: center. In neun von zehn Fällen reicht der Flexbox-Ansatz jedoch aus.

Wo Sie fertige Animationen bekommen

ajaxload.info, das in allen alten Anleitungen empfohlen wurde, ist abgeschaltet. Drei aktuelle Alternativen:

• loading.io, ein Spinner-Konstruktor. Sie wählen Form, Farbe, Größe. Export als GIF, SVG, CSS und APNG. Die kostenlosen Optionen reichen für ein Kontaktformular völlig aus.
• Icons8 Preloaders, eine Sammlung von über tausend Icons: Ringe, Balken, Punkte, 3D-Varianten. Der Generator gibt GIF, SVG und APNG aus. Einige sind mit Namensnennung kostenlos, andere sind Premium.
• CSS Loaders, reine CSS-Spinner ohne eine einzige externe Datei. Wählen Sie einen aus, der Ihnen gefällt, kopieren Sie HTML+CSS und passen Sie ihn für .wpcf7-spinner an. Ideal für alle, die grundsätzlich kein einziges Kilobyte laden möchten.

Verwenden Sie einen Spinner mit transparentem Hintergrund; er fügt sich in ein Formular jeder Farbe ein. Die optimale Größe beträgt 24×24 oder 32×32 Pixel. Kleinere flackern, größere lenken die Aufmerksamkeit vom Absende-Button ab.

Was ist mit Versionen unter 5.x: veraltete Methode

Wenn Ihre Website noch auf CF7 4.x läuft, aktualisieren Sie das Plugin. Im Ernst. Die aktuelle Version 6.1.6 hat zahlreiche Sicherheitslücken geschlossen, und der alte Hook wpcf7_ajax_loader kann jederzeit seinen Dienst einstellen. Der Entwickler garantiert keine Abwärtskompatibilität.

Wenn eine Aktualisierung jedoch unmöglich ist (Custom Code ist eng an alte Hooks gebunden), hier die Methode über 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
}

Der Code kommt in die functions.php Ihres Child-Themes. Die Datei ajax-loader.gif wird zuvor in das Verzeichnis images/ innerhalb des Child-Themes hochgeladen. Für Child-Theme: stylesheet_directory. Für Parent-Theme: template_directory.

Und aktualisieren Sie trotzdem bei der ersten Gelegenheit.

Live-Beispiel im Video

Das folgende Video zeigt eine vollständige Anleitung: wie das Problem des endlos drehenden Spinners aussieht, warum alte Anleitungen nicht funktionieren und wie man es in zwei Minuten per CSS behebt:

⁉️🤔 Häufig gestellte Fragen

Warum greift das CSS nicht, der Spinner ändert sich nicht?

Mit ziemlicher Sicherheit sprechen Sie den alten Selektor div.wpcf7 .ajax-loader an. Seit Version fünf ist dieser nutzlos. Sie müssen .wpcf7-spinner::before (um den Standard auszublenden) und .wpcf7-spinner (um Ihren eigenen anzuhängen) ansprechen. Prüfen Sie die Plugin-Version: „Plugins → Installierte Plugins → Contact Form 7". Öffnen Sie die DevTools (F12) und suchen Sie in den Elementen nach <span class="wpcf7-spinner"> innerhalb des Formulars. Wenn dieses ein ::before-Pseudoelement mit einem Rahmen besitzt, sind Sie auf der aktuellen Version; verwenden Sie die Selektoren aus dem CSS-Abschnitt. Wenn Sie ein <img> mit der Klasse ajax-loader sehen, ist das Plugin hoffnungslos veraltet.

Kann ich den Spinner mit Farbverlauf oder mehrfarbig gestalten?

Ja, ohne ein einziges Pixel Grafik. Der einfache CSS-Spinner aus dem Animationsabschnitt akzeptiert beliebige Farben über border-top und border-bottom. Für einen Farbverlauf ersetzen Sie die Volltonfarbe durch conic-gradient in einer Maske. Beispiel für einen Ring mit Rot-Gelb-Grün-Übergang:

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
}

Funktioniert in modernen Browsern. Die Ringdicke wird in mask über calc() festgelegt.

Wie entferne ich den Spinner vollständig?

Eine Zeile: .wpcf7-spinner { display: none !important; }. Aber denken Sie zweimal nach. Der Spinner ist das einzige Signal für den Nutzer, dass das Formular abgesendet wurde und der Server die Anfrage verarbeitet. Ohne dieses Signal klickt die Person erneut auf „Absenden", und Sie erhalten eine doppelte Übermittlung. Besser nicht entfernen, sondern durch einen minimalistischen Ring in einer neutralen Farbe ersetzen.

Beeinträchtigt ein benutzerdefinierter Spinner die Ladegeschwindigkeit?

Das hängt von der Methode ab. Ein 2-5 KB großes GIF fügt eine HTTP-Anfrage hinzu, was praktisch keine Auswirkung auf die Seitengeschwindigkeit hat. Ein CSS-Spinner fügt weder eine Anfrage noch ein Byte über 300-400 Byte Code hinaus hinzu (die schnellste Option). SVG in Base64 innerhalb von CSS benötigt ebenfalls keine Anfrage, wiegt aber 1-2 KB. Für ein Kontaktformular ist der Unterschied zwischen den drei Methoden mit bloßem Auge nicht erkennbar. Die CSS-Animation gewinnt insgesamt: keine Dateien, keine Pixelbildung, belastet die Mediathek nicht.

Wo sollte ich die Spinner-Datei speichern, damit sie bei Theme-Updates nicht verloren geht?

Nur im Child-Theme. Legen Sie custom-spinner.gif im Parent-Theme ab, und bei dessen Update ist die Datei verschwunden. Korrekte 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

Schreiben Sie den Pfad in CSS ohne führenden Schrägstrich: url('images/custom-spinner.gif'). Dies ist ein relativer Pfad ausgehend von der Style-Datei des Child-Themes. Absolute Pfade wie /wp-content/themes/... funktionieren nicht mehr, wenn die Website auf eine andere Domain umzieht.

Welche Ersetzungsmethode Sie für Ihren Fall wählen sollten

Drei Szenarien, geordnet nach steigender Komplexität und Anpassungsmöglichkeiten.

Für neun von zehn Websites genügt das erste Szenario. Nehmen Sie einen fertigen Spinner von loading.io, legen Sie ihn im Child-Theme ab, schreiben Sie drei Zeilen CSS, und der Standardpfeil verrät Ihre Seite nie wieder.