Form-Styling
Mit dem automatischen Formular-Generator haben Sie die volle Kontrolle über das Formulardesign. Passen Sie die Farben an Ihre Marke an, verwenden Sie Ihre Schriftarten, ändern Sie die Abstände und gestalten Sie Formulare, die sich nahtlos in Ihre Website einfügen.
Warum Formstyling wichtig ist
Ihre Website hat eine Marke. Ihre Formulare sollten diese widerspiegeln.
Wenn Formulare anders aussehen als der Rest Ihrer Website, zögern Besucher. Sie fragen sich, ob sie sich noch auf derselben Website befinden. Dieses Zögern kostet Konversionen.
Stilvoll gestaltete Formulare vermitteln Professionalität. Ein professionell gestaltetes Formular zeigt Besuchern, dass Ihnen Details wichtig sind – und wenn Ihnen das Formulardesign am Herzen liegt, dann wahrscheinlich auch deren Daten.
Wie Formstyling funktioniert
Der Auto Form Builder beinhaltet einen in die Benutzeroberfläche des Formulargenerators integrierten visuellen Stileditor.
- Wählen Sie aus, was Sie gestalten möchten.Wählen Sie zwischen Formularcontainer, Feldbeschriftungen, Eingabefeldern, Schaltflächen oder Fehlermeldungen.
- Einstellungen anpassenVerwenden Sie Farbauswahlfelder, Schieberegler und Dropdown-Menüs, um Werte zu ändern. Keine CSS-Syntax erforderlich.
- Sofortige VorschauJede Änderung wird sofort in der Live-Vorschau angezeigt. Sehen Sie genau, wie Ihr Formular vor der Veröffentlichung aussehen wird.
- Als Standardeinstellungen speichernWenden Sie Ihr Styling automatisch auf neue Formulare an. Einmal erstellen, überall wiederverwenden.
Was Sie anpassen können
Farbe
Sie haben die volle Kontrolle über alle Farben in Ihrem Formular. Hintergrundfarben für den Formularcontainer und die einzelnen Felder. Textfarben für Beschriftungen, Platzhalter und Eingabetext. Rahmenfarben für Standard-, Fokus- und Fehlerzustände. Schaltflächenfarben für Hintergrund, Text und Hover-Effekte.
Typografie
Wählen Sie Schriftarten für Beschriftungen und Eingabefelder. Passen Sie die Schriftgrößen unabhängig voneinander an – größere Beschriftungen zur Hervorhebung, kleinerer Hilfetext für ergänzende Informationen. Steuern Sie die Schriftstärke für fettgedruckte Beschriftungen oder dünnere Eingabetexte.
Abstand und Layout
Schaffen Sie mit Abständen zwischen den Feldern mehr Platz. Passen Sie die Innenabstände der Felder für eine komfortable Texteingabe an. Steuern Sie die Ränder um das gesamte Formular, um es optimal in Ihr Seitenlayout einzufügen.
Grenzen und Ecken
Legen Sie Rahmenbreite, -stil und -farbe fest. Runde Ecken sorgen für einen modernen Look, scharfe Ecken für ein minimalistisches Design. Weisen Sie verschiedenen Formularzuständen unterschiedliche Rahmenstile zu – dezente Rahmen standardmäßig, markante Rahmen im Fokus.
Tasten
Gestalten Sie Absendebuttons, die zu Ihrer Marke passen. Hintergrundfarbe, Textfarbe, Eckenradius, Innenabstand, Schriftgröße und Schriftstärke können Sie individuell anpassen. So reagieren die Buttons auf den Hover-Effekt und sind optimal klickbar.
FormularContainer
Gestalten Sie den gesamten Formularrahmen. Fügen Sie eine Hintergrundfarbe hinzu oder lassen Sie ihn transparent. Wenden Sie Schlagschatten an, um Tiefe zu erzeugen. Legen Sie den Radius für abgerundete Formularcontainer fest. Begrenzen Sie die maximale Breite, damit die Formulare nicht zu breit werden.
Häufige Szenarien für die Formulargestaltung
Richtlinien für die Einhaltung der Markenrichtlinien
Ihr Unternehmen verwendet spezifische Farben – #0F2D5F für die Primärfarbe und #F59E0B für die Akzentfarbe. Geben Sie diese Werte im Stileditor ein. Formularschaltflächen verwenden Ihre Akzentfarbe, Formularbeschriftungen Ihre Primärfarbe. So erzielen Sie ein perfektes Markenbild.
Formen mit hohem Kontrast erstellen
Website mit dunklem Hintergrund? Erstellen Sie helle Formulare, die sich von der Masse abheben. Heller Hintergrund? Verwenden Sie umrandete Formulare mit dezenten Schatten, um den Formularbereich optisch abzugrenzen, ohne ihn zu stören.
Minimalistische Formen gestalten
Entfernen Sie Rahmen, verringern Sie Abstände, verwenden Sie transparente Hintergründe. Erstellen Sie Formulare, die sich in die Seite einfügen und nicht in einem separaten Feld wirken.
Erstellen Sie aussagekräftige Call-to-Action-Formulare
Große Schaltflächen, kräftige Farben, großzügiger Abstand. Erstellen Sie Formulare, die Aufmerksamkeit erregen – besonders auf Ihren wichtigsten Seiten zur Leadgenerierung.
Formulare, die zu jedem Thema passen
Der Auto Form Builder funktioniert mit jedem WordPress-Theme. Ihre gestalteten Formulare passen sich jedem Designkontext an.
Nutzen Sie Woodmart, Astra, GeneratePress, Divi oder ein anderes Theme? Ihre Formulare sehen trotzdem nativ aus. Der Style-Editor bietet Ihnen genügend Kontrolle, um jedes Designsystem optimal zu integrieren.
Keine Designkonflikte. Keine Probleme mit der Stilvererbung. Einfach Formulare, die genau so aussehen, wie Sie es wünschen.
Kein CSS erforderlich
Sie müssen kein eigenes CSS schreiben, um Ihre Formulare zu gestalten. Der visuelle Editor erledigt alles.
Wenn Sie jedoch die CSS-Kontrolle nutzen möchten, unterstützt der Auto Form Builder benutzerdefiniertes CSS pro Formular. Fügen Sie Überschreibungen für Sonderfälle hinzu oder wenden Sie erweiterte Stile an, die im visuellen Editor nicht verfügbar sind. Fortgeschrittene Benutzer erhalten so die benötigte Flexibilität.
