Ihre Formulare gestalten

Möchten Sie das Erscheinungsbild Ihrer WordPress-Formulare einfach anpassen? Mit unserer Formular-Styling-Funktion können Sie Ihre Formulare gestalten, ohne CSS schreiben zu müssen.

Dieses Tutorial zeigt Ihnen, wie Sie Ihre Formulare im WPForms-Formular-Generator gestalten.

---

Anpassen Ihrer Formular-Designs

Um zu beginnen, müssen Sie zuerst ein neues Formular erstellen oder ein vorhandenes bearbeiten, um auf den Formular-Generator zuzugreifen.

Sobald Sie den Formular-Generator geöffnet haben, gehen Sie zu Einstellungen » Designs, um auf die Anpassungseinstellungen Ihres Formulars zuzugreifen.

Hier auf der linken Seite finden Sie Optionen zur Anpassung von Farbdesign, Formularfeldern, Beschriftungen, Schaltflächen sowie Container- und Hintergrundstilen, ohne CSS schreiben zu müssen.

Der Vorschau-Bereich auf der rechten Seite zeigt ein Beispiel-Layout mit gängigen Feldern, sodass Sie sofort sehen können, wie Ihre Stiländerungen aussehen werden.

Wir werden jede der verfügbaren Optionen im Detail behandeln.

Designs

Die Einstellung Designs ermöglicht es Ihnen, ein vordefiniertes Farbdesign auszuwählen, um den Stil der Felder, Beschriftungen, Schaltflächen, des Containers und des Hintergrunds Ihres Formulars automatisch zu aktualisieren.

Um es anzuwenden, klicken Sie einfach auf Ihr bevorzugtes Design, und es werden sofort die Farben der Felder, Beschriftungen, Schaltflächen, des Containers oder des Hintergrunds Ihres Formulars angepasst.

Wenn Sie nach der Auswahl eines Designs einzelne Einstellungen anpassen, werden diese Änderungen als neues benutzerdefiniertes Formular-Design gespeichert. Dieses neue Design wird Ihrer Liste der verfügbaren Designs hinzugefügt und kann wie jedes andere Formular-Design auf jedes Formular angewendet werden.

Feldstile

Unter dem Abschnitt Feldstile finden Sie Optionen zur Anpassung von Größe, Rahmen, Rahmenbreite, Radius und Farben für Ihre Formularfelder. Nachfolgend haben wir die verfügbaren Feldoptionen erläutert.

• Größe: Passt die Gesamtgröße Ihrer Formularfelder an. Optionen sind Klein, Mittel und Groß.
• Rahmen: Mit dieser Einstellung können Sie Ihren Formularfeldern einen Rahmen hinzufügen oder entfernen. Optionen sind durchgezogene, gestrichelte oder gepunktete Rahmen.
• Randgröße: Legt die Dicke der Ränder Ihres Feldes fest. Die Standardeinheit ist Pixel (px), aber Sie können die Einheit auswählen, die am besten zu Ihren Designanforderungen passt.
• Abgerundete Ecken: Verwenden Sie diese Option, um abgerundete Ecken auf Ihre Formularfelder anzuwenden, für ein weicheres, moderneres Aussehen. Die Standardeinheit ist Pixel (px), aber Sie können sie in die von Ihnen bevorzugte Einheit ändern.

Als Nächstes finden Sie Optionen zum Aktualisieren der Hintergrund-, Rand- und Textfarben Ihrer Formularfelder.

Um eine Farbe zu ändern, klicken Sie auf die entsprechende Bezeichnung, um den Farbwähler zu öffnen. Sie können entweder eine Farbe visuell auswählen oder einen bestimmten Hex-Code für präzise Kontrolle eingeben.

Label-Stile

Im Abschnitt Stil der Bezeichnungen finden Sie die Option zur Aktualisierung der Größe Ihrer Formularbezeichnungen. Verfügbare Größenoptionen sind Klein, Mittel und Groß.

Sie finden auch die Option zur Aktualisierung der Farben für Bezeichnungen, Unterbezeichnungen und Fehlermeldungen. Nachfolgend haben wir die verfügbaren Optionen für die Bezeichnungsfarben erläutert.

• Bezeichnung: Diese Option steuert die Textfarbe Ihrer Hauptfeldbezeichnung.
• Unterbezeichnung & Hinweis: Diese Option steuert die Farbe von Feldunterbezeichnungen und Hinweisen, die angezeigt werden, wenn WPForms Benutzern im Frontend Werte vorschlägt.
• Fehlermeldung: Die Textfarbe, die angezeigt wird, wenn beim Ausfüllen Ihres Formulars durch Benutzer ein Fehler auftritt.

Schaltflächenstile

Die Einstellungen für Schaltflächenstile ermöglichen es Ihnen, Größe, Rand, Randgröße, abgerundete Ecken und Farben für Ihre Schaltflächen zu ändern. Nachfolgend haben wir die verfügbaren Schaltflächenoptionen erläutert.

• Größe: Diese Option legt die Größe der Schaltfläche fest. Optionen sind Klein, Mittel und Groß.
• Rand: Diese Einstellung ermöglicht es Ihnen, Ihre Schaltflächen mit einem durchgezogenen, gestrichelten oder gepunkteten Rand zu umranden.
• Randgröße: Legt die Dicke der Ränder Ihrer Schaltflächen fest. Die Standardeinheit ist Pixel (px), aber Sie können die Einheit auswählen, die am besten zu Ihren Designanforderungen passt.
• Abgerundete Ecken: Dies passt die Rundung Ihrer Schaltflächenecken für ein weicheres oder schärferes Aussehen an. Pixel (px) sind die Standardeinheit, mit Optionen zum Wechseln je nach Ihren Designpräferenzen.

Sie finden auch die Option zur Aktualisierung der Hintergrund- und Textfarben Ihrer Schaltfläche.

Container-Stile

Die Einstellungen für Containerstile ermöglichen es Ihnen, den Innenabstand, den Randstil, die Randgröße, die abgerundeten Ecken, den Schatten und die Farben für den Container Ihres Formulars anzupassen. Nachfolgend haben wir die verfügbaren Containeroptionen detailliert beschrieben.

• Innenabstand: Diese Option legt den Abstand innerhalb der Ränder des Formularcontainers fest. Sie können diesen Wert erhöhen oder verringern, um den Abstand um Ihre Formularinhalte anzupassen.
• Randstil: Mit dieser Einstellung wählen Sie den Umriss Ihres Containers aus, mit Optionen für einen durchgehenden, gestrichelten oder gepunkteten Rand.
• Randgröße: Bestimmt die Dicke des Randes Ihres Containers. Die Standardeinheit ist Pixel (px), aber Sie können die Einheit wählen, die Ihren Designanforderungen am besten entspricht.
• Radius: Dies passt an, wie abgerundet die Ecken Ihres Containers sind, und verleiht dem Erscheinungsbild Ihres Formulars eine weichere oder definiertere Kante. Die Standardmessung erfolgt in Pixeln (px), kann aber geändert werden, um Ihrem Stil zu entsprechen.
• Schatten: Wählen Sie die Größe des Schatteneffekts für Ihren Container, um Ihrem Formular-Design Tiefe zu verleihen, mit Optionen von keiner bis zu großer Größe.
• Farben: Aktualisieren Sie die Randfarbe Ihres Containers, um sie an Ihr visuelles Thema anzupassen und die Gesamtästhetik des Formulars zu verbessern.

Hintergrundstile

Die Einstellungen für Hintergrundstile geben Ihnen die Kontrolle über das Hintergrundbild und die Hintergrundfarbe Ihres Formulars.

Wählen Sie zunächst eine Bildquelle aus dem Dropdown-Menü Bild. Für Bilder, die bereits auf Ihre Website hochgeladen wurden, oder um neue hochzuladen, wählen Sie die Option Mediathek. Um eine größere Auswahl an professionellen Bildern zu erkunden, wählen Sie die Option Stockfotos.

Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf die Schaltfläche Bild auswählen, um fortzufahren.

Wenn Sie Mediathek aus dem Dropdown-Menü Bild auswählen, öffnet sich die Mediathek Ihrer Website, sodass Sie ein Bild auswählen oder ein neues hochladen können. Wenn Stockfotos ausgewählt ist, wird Ihnen eine Auswahl an Stockfotos für den Hintergrund Ihres Formulars angezeigt.

Sobald Sie Ihr Bild ausgewählt haben, bietet der Abschnitt Hintergrundstile zusätzliche Anpassungsoptionen:

• Position: Mit dieser Einstellung können Sie Ihr Hintergrundbild innerhalb des Formulars ausrichten, indem Sie Optionen wie Oben Mitte, Unten Mitte und mehr auswählen, um die perfekte Platzierung zu erzielen.
• Wiederholung: Wählen Sie, wie Ihr Hintergrundbild wiederholt wird. Die Optionen sind Keine Wiederholung für ein einzelnes Bild, Kachel, um das Bild über den gesamten Hintergrund zu wiederholen, Horizontal wiederholen für die Wiederholung über die Breite und Vertikal wiederholen für die Wiederholung über die Länge.
• Größe: Dies passt an, wie Ihr Hintergrundbild in das Formular passt. Abdecken stellt sicher, dass das Bild den gesamten Hintergrund abdeckt und sich an die Größe des Formulars anpasst. Wenn Abmessungen ausgewählt ist, können Sie die genaue Breite und Höhe für Ihr Bild angeben.
• Farben: Diese Option ermöglicht es Ihnen, eine Hintergrundfarbe auszuwählen, die sichtbar ist, wenn kein Bild verwendet wird.

Erweiterte Stile

Im Tab Erweitert finden Sie zwei nützliche Optionen, um Ihre Formulare weiter zu gestalten.

• Das Feld Benutzerdefinierter CSS-Code ermöglicht es Ihnen, Ihre eigenen CSS-Klassen für zusätzliche Anpassungen hinzuzufügen. Um mehr zu erfahren, lesen Sie unser Tutorial zum Hinzufügen von benutzerdefinierten CSS-Klassen.
• Der Abschnitt Stileinstellungen kopieren / einfügen zeigt den CSS-Code für alle Stile an, die Sie im Formular-Generator angewendet haben. Sie können diesen Code kopieren, um dieselben Stile auf ein anderes Formular anzuwenden.

Nachdem Sie Ihr Formular gestaltet haben, können Sie bei Bedarf mit der Bearbeitung der Felder fortfahren. Wenn Sie fertig sind, klicken Sie auf Speichern und verwenden Sie dann die Schaltfläche Vorschau, um Ihr tatsächliches Formular mit den angewendeten Stilen anzuzeigen.

Testen deiner Formulare

Der letzte Schritt ist ein kurzer Test, um sicherzustellen, dass Ihr Formular so aussieht und funktioniert, wie Sie es erwarten.

Um es auszuprobieren, müssen Sie einfach einen Eintrag an Ihr Formular senden. Um mehr zu erfahren, lesen Sie bitte unsere vollständige Checkliste für Formular-Tests.

Häufig gestellte Fragen

Nachfolgend beantworten wir einige der häufigsten Fragen, die wir zum Gestalten Ihrer Formulare erhalten.

Behält mein Formular seine Stile bei, wenn ich es auf verschiedenen Seiten einbetten?

Ja. Wenn Sie ein Formular im WPForms-Generator gestalten, werden diese Einstellungen mit dem Formular gespeichert und gelten standardmäßig überall dort, wo das Formular eingebettet ist.

Wenn Sie den Block-Editor oder Elementor verwenden, um beim Einbetten des Formulars zusätzliche Stiländerungen vorzunehmen, wirken sich diese Änderungen nur auf diese spezielle Seite aus. Die ursprünglichen Generator-Stile bleiben für alle anderen Instanzen unverändert.

Dies ermöglicht es Ihnen, dasselbe Formular auf Ihrer gesamten Website verwenden und optional sein Erscheinungsbild seitenweise anpassen.

Kann ich die Gestaltungsoptionen des Formular-Generators mit Seitenerstellern wie Divi verwenden?

Ja. Die im WPForms-Formular-Generator verfügbaren Gestaltungsoptionen (Einstellungen » Themes) werden mit dem Formular gespeichert und gelten überall dort, wo es eingebettet ist – einschließlich Seiten, die mit Divi, Elementor oder einem anderen Seitenersteller erstellt wurden. Es ist keine zusätzliche Einrichtung erforderlich.

Wenn Sie Ihre Formulare stattdessen mit dem Block-Editor gestalten möchten, benötigen Sie aktiviertes modernes Markup. Weitere Details finden Sie in unserem Leitfaden zum Gestalten Ihrer Formulare im Block-Editor. Beachten Sie, dass die Gestaltungsoptionen des Block-Editors nur bei Verwendung des WordPress-Block-Editors oder Elementor verfügbar sind – sie sind nicht aus dem visuellen Editor von Divi zugänglich.

Das ist alles! Jetzt wissen Sie, wie Sie das Aussehen Ihrer WordPress-Formulare mit WPForms anpassen können.

Möchten Sie als Nächstes Symbole verwenden, um die Anzeige Ihres Formulars zu verbessern? Lesen Sie unbedingt unser Tutorial zum Verwenden von Icon-Auswahlen, um zu erfahren, wie.