Möchten Sie Ihr Formular auf Ihrer Website hervorheben, indem Sie einen benutzerdefinierten Rahmen hinzufügen? Mit einem einfachen Codeschnipsel können Sie einen eleganten Rahmen um Ihr Formular hinzufügen, um dessen visuelle Attraktivität zu erhöhen und es auf Ihrer Seite besser hervorzuheben.
Diese Anleitung zeigt Ihnen, wie Sie einen Rahmen um Ihre WPForms hinzufügen und anpassen können.
Einrichten Ihres Formulars
Zu Beginn müssen Sie die ID Ihres Formulars ermitteln. Dies ist wichtig, da der Code ein bestimmtes Formular mit dieser ID anvisieren wird. Wenn Sie Hilfe bei der Suche nach Ihrer Formular-ID benötigen, lesen Sie bitte unseren Leitfaden zur Ermittlung von Formular- und Feld-IDs.
Hinzufügen des Randcodes
Als Nächstes müssen Sie das Code-Snippet hinzufügen, das 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.
Der obige Code fügt Ihrem Formular einen Rahmen mit einigen zusätzlichen Gestaltungselementen für eine bessere visuelle Attraktivität hinzu. Hier ist, was jede Zeile tut:
- In Zeile 2 ersetzen Sie 1234 durch Ihre tatsächliche Formular-ID.
- In Zeile 3 können Sie die Randbreite (2px), den Stil (solid) und die Farbe (#333333) ändern.
- In Zeile 4 schafft das Padding Platz zwischen Ihren Formularelementen und dem Rahmen.
- In Zeile 5 fügt border-radius abgerundete Ecken zu Ihrem Formular hinzu.
- In Zeile 6 wird mit background-color ein weißer Hintergrund für Ihr Formular festgelegt.
- In Zeile 7 fügt box-shadow einen subtilen Schatteneffekt um Ihr Formular hinzu.
Wenn Sie dasselbe 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 über das Zentrieren eines Formulars an.