Formular-Themes verwenden

Bereit, das Gesamtdesign Ihrer Formulare zu verbessern, ohne benutzerdefinierten CSS-Code schreiben zu müssen? Die Formularvorlagen-Funktion in WPForms bietet vorgefertigte Designs, die Sie einfach auf Ihr Formular anwenden können.

Dieses Tutorial behandelt die Verwendung der Formularvorlagen-Funktion in WPForms.

---

Stellen Sie vor Beginn sicher, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist.

Zugriff auf Formularvorlagen

Um auf die Formularvorlagen-Funktion in WPForms zuzugreifen, müssen Sie zuerst ein neues Formular erstellen oder ein vorhandenes bearbeiten, um auf den Formular-Builder zuzugreifen.

Sie können auch eine unserer Formularvorlagen verwenden, um einfach zu beginnen. Nach der Auswahl einer Vorlage können Sie neue Felder hinzufügen oder vorhandene Felder in der ausgewählten Vorlage bearbeiten.

Sobald Sie die Feldoptionen und Einstellungen Ihres Formulars angepasst haben, speichern Sie Ihre Änderungen und betten Sie das Formular auf einer Seite oder in einem Beitrag auf Ihrer Website ein.

Formularvorlagen anpassen

Im Block-Editor sehen Sie Optionen zum Stylen und Anpassen Ihrer WordPress-Formulare. Der Abschnitt Vorlagen enthält alle verfügbaren Vorlagenstile, die WPForms bietet.

In den nächsten Abschnitten stellen wir einige der Formularvorlagen vor, die WPForms standardmäßig anbietet. Dies gibt Ihnen einen Überblick darüber, wie sie auf Ihrer Website aussehen werden.

Modern (Standard)

Dies ist die Vorlage, die standardmäßig auf alle Formulare auf Ihrer Website angewendet wird. Sie verwendet eine blaue Akzentfarbe für Elemente wie die Schaltfläche "Senden" und die Fortschrittsleiste.

Nachdem Sie eine Vorlage ausgewählt haben, können Sie die Vorlagenstile ähnlich wie beim Styling Ihres Formulars im Block-Editor aktualisieren.

Sobald Sie eine der Vorlagen aktualisieren, wird eine Kopie der ursprünglichen Vorlage mit den von Ihnen hinzugefügten neuen Stilen erstellt. Diese neue Vorlage hat (Kopie) hinter dem Namen der Vorlage. In unserem Beispiel lautet der Name Standard (Kopie).

Sie können die benutzerdefinierte Vorlage umbenennen, indem Sie den Text im Feld Vorlagenname aktualisieren.

Unter dem Feld "Vorlagenname" finden Sie den Link Vorlage löschen. Dieser Link ist hilfreich, wenn Sie benutzerdefinierte Formularvorlagen auf Ihrer Website löschen möchten.

Wenn Sie darauf klicken, erscheint ein Overlay, das Sie fragt, ob Sie mit dem Löschvorgang fortfahren möchten. Klicken Sie einfach auf die Schaltfläche Ja, löschen, um fortzufahren.

Klassisch

Der klassische Theme-Stil verwendet sehr minimale CSS mit einer grauen Akzentfarbe für die Schaltfläche zum Absenden.

Ozean

Das Ocean-Formular-Theme sieht dem Modern-Stil ähnlich, mit einer dunkel-türkisfarbenen Akzentfarbe für Formularelemente wie Schaltflächen und Zahlenregler.

Tangerine

Der Tangerine-Stil verwendet ähnliche Styling-Optionen für die Felder. Er wendet jedoch eine orangefarbene Akzentfarbe auf Formularelemente wie Schaltflächen, Fortschrittsbalken, Zahlenregler usw. an.

Aero

Das Aero-Design wendet eine hellgraue Hintergrundfarbe auf den Container des Formulars an, mit einer blauen Akzentfarbe. Es hat auch einen Schattenwurf auf den Container angewendet. Dies verleiht dem Formular ein modernes, erhabenes Aussehen und Gefühl.

Beton

Der Concrete-Stil verwendet eine pinkfarbene Akzentfarbe für Formularelemente wie Schaltflächen, Paginierung und Zahlenregler. Er fügt dem Container des Formulars auch ein dunkles Beton-Hintergrundbild hinzu.

Wenn Sie zum ersten Mal ein Theme auswählen, das ein Hintergrundbild benötigt, müssen Sie das Bild herunterladen, bevor die Stile angewendet werden. Ein Overlay wird angezeigt, das Sie zum Herunterladen auffordert. Klicken Sie auf Weiter, um es herunterzuladen und zu importieren.

Wenn Sie möchten, können Sie das Hintergrundbild im Abschnitt Hintergrundstile aktualisieren.

Sie können zwischen der Mediathek Ihrer Website oder Stockfotos als Bildquelle wählen. Wenn Sie die Option Stockfoto auswählen, können Sie aus den verfügbaren Stockfotos wählen, indem Sie auf das vorhandene Bild klicken.

Der Abschnitt Hintergrundstile enthält auch Optionen zur Anpassung von Bildgröße, Position und Wiederholung.

Wenn Sie das Hintergrundbild entfernen möchten, klicken Sie auf die Schaltfläche Bild entfernen.

Eleganz

Der Elegance-Theme-Stil wendet einen abgerundeten Rand um den Container des Formulars an. Er verwendet auch ein Hintergrundbild für das Container-Widget des Formulars. Dies verleiht ihm ein ansprechendes, modernes Aussehen.

Frisch

Der Fresh-Theme-Stil fügt ein Hintergrundbild mit frischen grünen Blättern hinzu. Er verwendet auch Grün als Akzentfarbe für Formularelemente wie Schaltflächen.

Tristesse

Dieser Formular-Theme-Stil fungiert als Dark-Mode-Theme mit einem dunklen Hintergrund um den Container des Formulars. Er verwendet eine grüne Akzentfarbe für Formularelemente wie Schaltflächen und Zahlenreglerfelder.

Flur

Das Hallway-Theme verwendet eine dunkle Akzentfarbe für Formularelemente wie Schaltflächen, Zahlenregler usw. Es wendet auch ein Hintergrundbild auf den Container des Formulars an.

Üppig

Dieses Formular-Theme wendet Schatten und abgerundete Ecken auf den Container des Formulars an. Es verwendet auch ein Stockfoto als Hintergrund für das Container-Widget.

Monstera

Das Monstera-Theme verwendet ein modernes Design mit einer grünen Akzentfarbe und abgerundeten Ecken für den Container des Formulars. Es wendet auch ein ansprechend aussehendes Stockfoto als Hintergrund für den Formularcontainer an.

Bereich

Dieses Formular-Theme verwendet ein modernes Design mit einem Sonnenuntergangsbild als Hintergrund. Es wendet auch Stile wie Ränder, abgerundete Ecken und Schatten auf den Container des Formulars an.

Frühling

Das "Spring"-Formular-Theme fügt dem Formular-Container einen Schatten hinzu und verwendet ein verlaufendes Stockfoto als Hintergrund. Es verwendet auch eine blaue Akzentfarbe für Formularelemente wie die Senden-Schaltfläche.

Jahrgang

Dieses Formular-Theme hat einen Vintage-Look und -Gefühl. Es verwendet eine benutzerdefinierte Hintergrundfarbe für den Container des Formulars und eine gelbe Akzentfarbe für Formularelemente.

Nachdem Sie ein Theme für Ihr Formular ausgewählt haben, müssen Sie die Seite entweder veröffentlichen oder als Entwurf speichern, um Ihre Änderungen zu sichern.

Sobald Sie fertig sind, können Sie das Formular in jeden Teil Ihrer Website einbetten, und es behält die Stile bei, die Sie im Abschnitt "Themes" konfiguriert haben.

Häufig gestellte Fragen

Dies sind Antworten auf einige der häufigsten Fragen, die wir zur Verwendung von Formular-Themes in WPForms erhalten.

Kann ich Formular-Theme-Stile auf Formularvorlagen anwenden?

Absolut. Sobald Sie die Formularvorlage ausgewählt haben, die Sie verwenden möchten, betten Sie sie auf einer Seite mit aktiviertem Block-Editor ein. Im Block-Editor können Sie aus den verfügbaren Theme-Stilen wählen, um Ihre Formularvorlage zu gestalten. Weitere Details finden Sie im Abschnitt Formular-Themes anpassen.

Das ist alles! Sie haben jetzt gelernt, wie Sie Formular-Themes in WPForms aufrufen und verwenden.

Möchten Sie als Nächstes lernen, wie Sie Zahlungen über Ihre WordPress-Formulare akzeptieren? Unser Tutorial zum Erstellen eines Zahlungsformulars behandelt alle Schritte im Detail.