### [Hinzufügen eines benutzerdefinierten Rahmens um Ihr Formular](https://wpforms.com/developers/how-to-put-a-border-around-your-form/) **Veröffentlicht:** 9. Februar 2022 **Autor:** Umair Majeed **Auszug:** Dieses Tutorial zeigt Ihnen, wie Sie mit CSS einen Rahmen um Ihre Formulare setzen können. **Inhalt:** Möchten Sie, dass Ihr Formular auf Ihrer Website durch einen benutzerdefinierten Rahmen hervorsticht? Mit einem einfachen Code-Snippet können Sie einen stilvollen Rahmen um Ihr Formular hinzufügen, um seine visuelle Attraktivität zu verbessern und es auf Ihrer Seite hervorzuheben. Diese Anleitung zeigt Ihnen, wie Sie einen Rahmen um Ihre WPForms hinzufügen und anpassen können. ## Einrichten Ihres Formulars Zuerst müssen Sie die ID Ihres Formulars ermitteln. Dies ist wichtig, da der Code ein bestimmtes Formular anhand dieser ID anspricht. Wenn Sie Hilfe beim Auffinden Ihrer Formular-ID benötigen, lesen Sie bitte unsere Anleitung zum [Auffinden von Formular- und Feld-IDs](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id). ## Hinzufügen des Rahmen-Codes Als Nächstes müssen Sie den Code-Snippet hinzufügen, der den Rahmen um Ihr Formular erstellt. Wenn Sie Hilfe beim Hinzufügen von Code-Snippets zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial zum [Hinzufügen von benutzerdefiniertem CSS](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/). Der obige Code fügt Ihrem Formular einen Rahmen mit zusätzlichem Styling für eine bessere Optik hinzu. Hier ist, was jede Zeile bewirkt: - In **Zeile 2** ersetzen Sie 1234 durch Ihre tatsächliche Formular-ID. - In **Zeile 3** können Sie die Rahmenbreite (2px), den Stil (solid) und die Farbe (#333333) ändern. - In **Zeile 4** schafft der Innenabstand Platz zwischen Ihren Formularelementen und dem Rahmen. - In **Zeile 5** fügt der Radius abgerundete Ecken zu Ihrem Formular hinzu. - In **Zeile 6** setzt die Hintergrundfarbe einen weißen Hintergrund für Ihr Formular. - In **Zeile 7** fügt der Schatteneffekt einen dezenten Schatteneffekt um Ihr Formular hinzu. Wenn Sie dieses gleiche CSS auf alle Ihre Formulare anwenden möchten, verwenden Sie stattdessen dieses CSS. Und das ist alles, was Sie brauchen, um einen Rahmen um Ihr Formular zu setzen! Möchten Sie Ihre Formulare auch zentrieren? Schauen Sie sich unser Tutorial [So zentrieren Sie ein Formular](https://wpforms.com/developers/how-to-center-a-form/ "So zentrieren Sie ein Formular") an. **Kategorien:** Styling **Tags:** CSS ---