How to Center a form with Custom CSS with WPForms

Markdown anzeigen

Möchten Sie Ihre Formulare auf Ihren WordPress-Seiten zentrieren? Während WPForms-Formulare standardmäßig 100 % der Breite ihres Containers einnehmen, können Sie sie einfach mit benutzerdefiniertem CSS zentrieren.

Diese Anleitung zeigt Ihnen, wie Sie Ihre Formulare und deren Elemente perfekt zentrieren.

Einrichtung des Formulars

Zuerst müssen Sie Ihr Formular erstellen. Wenn Sie dabei Hilfe benötigen, können Sie diese Dokumentation zurate ziehen.

Sobald Sie Ihr Formular erstellt und Ihre Felder hinzugefügt haben, müssen Sie jede Feldgröße auf Groß einstellen.

Klicken Sie dazu auf die Registerkarte Erweitert und wählen Sie Groß aus dem Dropdown-Menü Feldgröße.

Hinzufügen der CSS-Klasse

Nachdem Sie die Feldgröße auf Groß eingestellt haben, müssen Sie als Nächstes eine spezielle CSS-Klasse hinzufügen. Öffnen Sie dazu den Formular-Builder und gehen Sie zu Einstellungen » Allgemein. Scrollen Sie dann zum Abschnitt Erweitert und suchen Sie das Feld Formular-CSS-Klasse. Geben Sie wpf-center in dieses Feld ein.

Hinweis: Der Schritt mit der CSS-Klasse ist entscheidend – ohne ihn funktioniert das Zentrierungs-CSS nicht. Stellen Sie sicher, dass Sie den Klassennamen genau wie angegeben eingeben.

Hinzufügen des CSS-Codes

Hier ist der grundlegende CSS-Code, um Ihr Formular zu zentrieren:

Hinweis: Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, werfen Sie bitte einen Blick auf dieses Tutorial.

Dieser Code:

Zentriert das Formular mit margin: 0 auto
Legt eine maximale Breite von 500 Pixeln fest. Sie können mit diesem Wert experimentieren, bis Sie den passenden gefunden haben
Stellt die mobile Reaktionsfähigkeit sicher, indem die Breite auf kleineren Bildschirmen angepasst wird

Alle Formularelemente zentrieren

Wenn Sie alles innerhalb des Formulars zentrieren möchten (Labels, Beschreibungen, Schaltflächen), verwenden Sie diese erweiterte Version:

Anpassen der Breite

Um die Breite des Formulars anzupassen, ändern Sie diese beiden Zeilen im CSS:

max-width: 500px !important;
width: 500px !important;

Ersetzen Sie 500px durch Ihre gewünschte Breite. Zum Beispiel für ein breiteres Formular:

max-width: 800px !important;
width: 800px !important;

Häufig gestellte Fragen

F: Warum funktioniert das CSS bei mir nicht?

A: Überprüfen Sie zuerst, ob Sie den Klassennamen wpf-center auf der Seite Einstellungen » Allgemein Ihres Formulars hinzugefügt haben. Dies ist der häufigste Grund, warum das CSS nicht funktioniert. Wenn es immer noch nicht funktioniert, leeren Sie den Cache Ihres Browsers und aktualisieren Sie die Seite.

F: Wie zentriere ich nur die Senden-Schaltfläche?

A: Verwenden Sie dieses vereinfachte CSS und fügen Sie die Klasse wpf-center-button (anstelle von wpf-center) zum Feld CSS-Klasse Ihres Formulars hinzu:

Fügen Sie den Klassennamen im Formular-Builder der Formular-CSS-Klasse hinzu

Fügen Sie dann dieses CSS zu Ihrer Website hinzu.

.wpforms-container.wpf-center-button .wpforms-submit-container {
    text-align: center;
}

Und das ist alles, was Sie brauchen, um Ihr Formular zu zentrieren. Möchten Sie als Nächstes die Farbe der Senden-Schaltfläche Ihrer Formulare ändern? Werfen Sie einen Blick auf unseren Artikel zum Ändern der Farbe der Senden-Schaltfläche.

Formular zentrieren

KI-Zusammenfassung