### [Formular zentrieren](https://wpforms.com/developers/how-to-center-a-form/)
**Veröffentlicht:** 6. November 2020
**Autor:** Umair Majeed
**Auszug:** Dieses Tutorial zeigt Ihnen, wie Sie mit CSS ein Formular mit WPForms zentrieren können.
**Inhalt:**
Möchten Sie Ihre Formulare auf Ihren WordPress-Seiten zentrieren? Während WPForms-Formulare standardmäßig eine Breite von 100 % ihres Containers haben, können Sie sie einfach mit benutzerdefiniertem CSS zentrieren.
Diese Anleitung zeigt Ihnen, wie Sie Ihre Formulare und deren Elemente perfekt zentrieren.
## Einrichten des Formulars
Zuerst müssen Sie Ihr Formular erstellen. Wenn Sie dabei Hilfe benötigen, können Sie jederzeit [diese Dokumentation zurate ziehen](https://wpforms.com/docs/creating-first-form/ "Erstellen Ihres ersten Formulars").
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 nach unten 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 zum Zentrieren Ihres Formulars:
Hinweis: Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, [sehen Sie sich bitte dieses Tutorial an.](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu")
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 für Ihre Bedürfnisse passenden gefunden haben
- Stellt die mobile Reaktionsfähigkeit sicher, indem die Breite auf kleineren Bildschirmen angepasst wird
## Zentrieren aller Formularelemente
Wenn Sie alles innerhalb des Formulars (Labels, Beschreibungen, Schaltflächen) zentrieren möchten, 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 Schaltfläche zum Absenden?
**A:** Verwenden Sie dieses vereinfachte CSS und fügen Sie die Klasse `wpf-center-button` (anstelle von `wpf-center`) zum Feld **Formular-CSS-Klasse** Ihres Formulars 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 Schaltfläche zum Absenden Ihrer Formulare ändern? Sehen Sie sich unseren Artikel über [das Ändern der Farbe der Schaltfläche zum Absenden](https://wpforms.com/developers/how-to-change-the-submit-button-color/) an.
**Kategorien:** Styling
**Tags:** CSS
---