8 Formular-Layout-Best-Practices für benutzerfreundliches Design

Suchen Sie nach den besten Formularlayouts, um Ihre Kontaktformulare zu verbessern? Die Gestaltung von Formularlayouts für maximale Konversionen kann schwierig sein, wenn Sie nicht viel Erfahrung haben.

Für diesen Beitrag habe ich 7 Best Practices für Formulargestaltung zusammengestellt, um Ihr Formularlayout auf die nächste Stufe zu heben und die Konversionen zu steigern.

Erstellen Sie jetzt Ihr WordPress-Formular

Formularlayouts für bessere Konversionen gestalten

Ich habe festgestellt, dass der beste Weg, ein Webformular zu gestalten, darin besteht, an die Benutzererfahrung zu denken. Ihre Besucher werden keine Lust haben, ein langes, kompliziertes Formular auszufüllen, besonders wenn es einschüchternd aussieht.

Die Verwendung von Spalten ist nur eine Technik, mit der Sie Ihre Formularentwürfe ansprechender gestalten können. Eine weitere ist die Verwendung von mehrseitigen Formularen mit Fortschrittsbalken. Letztendlich sollte Ihr Formular übersichtlich, prägnant und für Benutzer leicht verständlich sein.

1. Verwenden Sie ein 2-Spalten-Layout, um Formulare zu verdichten

Es wird allgemein angenommen, dass einspaltige Formulare bessere Konversionsraten erzielen als mehrspaltige Formulare.  Aber die Wahrheit ist, dass es keinen Einheitsansatz für Formularlayouts gibt.

Tatsächlich zeigen HubSpots A/B-Tests zur Formular-Konversion, dass 2-spaltige Formulare in bestimmten Situationen besser konvertieren als einspaltige Formulare.

Zum Beispiel ist es im Allgemeinen nicht gut für die Benutzererfahrung (UX), wenn Sie eine lange Liste von Feldern haben, die in einer einzigen Spalte gestapelt sind.

Das einspaltige Online-Formularbeispiel unten hat eine beträchtliche vertikale Scrollleiste mit noch mehr Feldern unter dem hier Gezeigten, sodass wir erwarten können, dass Benutzer beim Ausfüllen einige Unannehmlichkeiten erfahren.

Aber das Formular wird viel kompakter, wenn wir stattdessen die gleiche Anzahl von Feldern ordentlich in 2 Spalten organisieren.

Das Gute ist, dass Sie mit dem WPForms Layout-Feld ganz einfach mehrspaltige Layouts erstellen können.

Sobald Sie das Layout-Feld zu Ihrem Formular hinzugefügt haben, können Sie auswählen, wie viele Spalten Sie verwenden möchten, und andere Felder in Ihr gewähltes Layout ziehen und ablegen.

Wenn Sie zahlreiche Formularfelder verwenden, können Sie immer mit verschiedenen Layouts experimentieren, um eines zu finden, das die Formularlänge reduziert und die Konversionen verbessert.

Lesen Sie auch: Einspaltige Formulare: Beispiele und Inspiration

2. Passen Sie Formularlayouts an die Eingabeanforderungen an

Bei der Gestaltung von Formularen mit erweiterten Layouts ist die Breite Ihrer Spalten genauso wichtig wie die Anzahl der verwendeten Spalten.

Wenn Sie beispielsweise erwarten, dass Benutzer detaillierten Text in Ihr Textfeld auf der rechten Seite eingeben, ist es sinnvoller, die Spalte für dieses Feld breiter zu machen.

Eine weitere Möglichkeit, dieses Layout zu nutzen, wäre, Kontaktdaten auf einer Seite und ein Kreditkartennummern-Eingabefeld auf der breiteren Seite zu haben.

In anderen Szenarien, in denen beide Spalten Ihres Formulars ähnliche Felder haben, können Sie gleich große Spalten verwenden. Dies funktioniert gut mit kleineren Eingabefeldern wie Telefonnummern, Kontrollkästchen, Dropdown-Menüs und Optionsfeldern.

WPForms hat sehr flexible Layouts und enthält 8 verschiedene Layout-Voreinstellungen zur Auswahl. Sie können mit einem einzigen Klick von einem Layout zum anderen wechseln.

Jedes Formularlayout bietet Vorteile für verschiedene Situationen. Es ist nur eine Frage Ihres besten Marketingurteils, das Layout zu wählen, das für Ihre Felder am besten geeignet ist.

3. Teilen Sie lange Formulare mit mehrseitigen Layouts auf

Wenn Sie ein kurzes Formular haben, sollten alle Felder problemlos auf eine einzige Seite passen. Aber bei vielen Feldern wird es knifflig.

Es ist keine gute Idee, alle Felder auf eine einzige Seite zu packen, wenn Ihr Formular zu lang ist und eine längere Abschlusszeit hat. Stattdessen können Sie längere Formulare leichter handhabbar machen und die Benutzerfreundlichkeit verbessern, indem Sie sie in mehrere Seiten aufteilen.

WPForms ermöglicht es Ihnen, mehrseitige Formulare zu erstellen. Jede Seite enthält normalerweise nur eine oder zwei Fragen. Dies hält Formulare kompakt und schafft eine gute Benutzererfahrung, während dennoch die notwendigen Informationen gesammelt werden.

Mein Lieblingsteil? Das Erstellen eines mehrseitigen Formulars ist so einfach wie das Ziehen und Ablegen eines Seitenunterbrechers, wo immer Sie es aufteilen möchten.

Diese Formulare enthalten auch eine Fortschrittsleiste, die den Benutzern hilft zu sehen, wie viel des Formulars sie abgeschlossen haben und was sie noch zu erledigen haben.

Sie können sogar Zwei-Spalten-Layouts in einem mehrstufigen Formular kombinieren. Wenn eine Ihrer Formularseiten länger ist als die anderen, können Sie für diesen Abschnitt ein Zwei-Spalten-Layout verwenden, um Ihr Formular von Seite zu Seite gleichmäßiger erscheinen zu lassen.

Wenn Sie die Konversionsraten mit Ihren Formularen steigern möchten, empfehle ich Ihnen, das WPForms Lead Forms Addon auszuprobieren. Es ermöglicht Ihnen auch, ein mehrseitiges Formular zu erstellen, aber ausschließlich zum Zweck der Lead-Generierung.

Das Lead Forms Addon gibt Ihnen auch die Möglichkeit, Ihr Formular etwas mehr anzupassen und zu gestalten. WPForms bietet viele verschiedene Funktionen, die Ihnen helfen, Formularabbrüche zu minimieren und Ihre Formularabschlussrate zu verbessern.

Letztendlich liegt es ganz bei Ihnen, ob Sie verschiedene Layouts für mehr Konversionen verwenden oder einfach eine Fortschrittsleiste oben hinzufügen möchten.

4. Verwenden Sie mobilfreundliche Layouts

Anspruchsvolle Formularlayouts sehen großartig aus und konvertieren auch auf Desktops gut. Aber Mobilgeräte sind eine andere Sache.

Ein Mehrspaltenformular, das auf dem Desktop perfekt funktioniert, kann auf Mobilgeräten fehlschlagen oder falsch gerendert werden, wenn Sie nicht vorsichtig sind.

Einige Formularersteller sind nicht mobilfreundlich, es sei denn, Sie stecken zusätzliche Mühe in die Anpassung von CSS-Codes. Das erfordert natürlich, dass Sie CSS-Kenntnisse haben.

Glücklicherweise verfügt WPForms über erstklassige Funktionalität. Selbst die fortschrittlichsten Mehrspaltenformulare, die mit WPForms erstellt wurden, sind von Natur aus mobilfreundlich. Kein CSS erforderlich.

Das bedeutet, dass sich mobile Formulare automatisch zu einer einzigen Spalte zusammenklappen, wenn ein Gerät Ihr Mehrspaltenlayout nicht richtig laden kann.

Dadurch können Sie sicher sein, dass Ihre Besucher immer das beste Erlebnis haben, auch auf Mobilgeräten. Wenn Sie dieses Verhalten steuern möchten, erfahren Sie hier, wie Sie Felder auf Mobilgeräten in einer einzigen Spalte anzeigen.

5. Verwenden Sie konversationelle Formulare

Konversationsformulare ermöglichen es Benutzern, eine Frage nach der anderen zu beantworten. Dieses Formularlayout kann sehr nützlich sein, wenn Sie möchten, dass sich Benutzer mit minimalen Ablenkungen auf jede spezifische Frage konzentrieren.

Es ist normalerweise eine gute Idee, das Konversationslayout für Umfragen oder Feedbackformulare zu verwenden. Das Conversational Forms Addon, erhältlich mit WPForms Pro, verwandelt jedes Formular in dieses Format mit einer Frage nach der anderen.

Wenn Sie bedingte Logik mit Ihren Konversationsformularen verwenden, können Sie die Befragten direkt zu der Seite leiten, die sie benötigen. Das bedeutet, dass sie keine Zeit mit der Durchsuchung irrelevanter Formularfragen verschwenden. Stattdessen ahmt das Formular fast eine Art reaktionsschnellen Chat nach.

6. Passen Sie Ihre Formularstile an

Peppen Sie Ihr Formular-Styling ein wenig auf! Das Erstellen eines modernen, professionellen Formulars bedeutet nicht, dass es langweilig sein muss. WPForms ermöglicht es Ihnen, Ihre Formulare so zu gestalten, dass sie zu den Farben oder dem Thema Ihrer Website passen, was es einfacher als je zuvor macht, Ihr Formular in Ihre Website zu integrieren.

Sobald Sie Ihr Formular in einem Beitrags- oder Seitenentwurf auf Ihrer WordPress-Website erstellt und eingebettet haben, können Sie ganz einfach Stile für Feldbezeichnungen, die Schaltfläche zum Absenden und mehr bearbeiten. Sie müssen keine CSS-Kenntnisse haben, um diese Funktion zu nutzen und schöne Formulare zu erstellen.

Keine einzige Zeile CSS ist dafür erforderlich. Wenn Sie alle Optionen sehen möchten, erfahren Sie hier, wie Sie Ihre Formular-Styling-Einstellungen auswählen. Kleine Details wie konsistente Abstände, Button-Farbe und Label-Styling tragen wesentlich dazu bei, dass sich ein Formular vertrauenswürdig anfühlt.

7. Verwenden Sie Inline-Fehlermeldungen und Validierung

Unabhängig davon, wie gut Ihr Formular gestaltet ist, sollten Sie damit rechnen, dass Benutzer gelegentlich Eingabefehler machen. Zum Beispiel können sie erforderliche Felder leer lassen oder Informationen im falschen Format eingeben.

Daher ist es sinnvoll, Inline-Validierungsnachrichten anzuzeigen, die das Problem klar hervorheben und Anleitungen zur einfachen Behebung bieten.

WPForms verwendet automatisch Inline-Fehlermeldungen, die direkt unter dem betreffenden Feld angezeigt werden. Dies ermöglicht es Besuchern, Fehler in Echtzeit zu beheben und reduziert proaktiv Benutzerverwirrung.

Es gibt viele verschiedene Arten von Feldvalidierungsnachrichten in WPForms, die je nach Art des Eingabefehlers angezeigt werden. Sie können Ihre Formulare also frei einsetzen und WPForms kümmert sich um alle Validierungsprobleme.

Eine weitere Möglichkeit, Verwirrung bei Ihren Benutzern zu minimieren, damit sie keine Fehler machen, ist das Hinzufügen von Platzhaltertext zu Ihren Feldern. Dies zeigt den Besuchern, wie sie Ihr Formular ausfüllen können, entweder mit Anleitungstext oder einem Beispiel, wie die Eingabe aussehen soll.

8. Positionieren Sie Ihre Labels für einfaches Scannen

Wo Sie Ihre Feld-Labels platzieren, hat einen echten Einfluss darauf, wie schnell die Leute ein Formular durchlaufen können. Labels, die direkt über jedem Feld platziert sind, sind am einfachsten zu scannen, da das Auge gerade nach unten durch das Formular wandert, ohne hin und her zu springen.

Halten Sie jedes Label nahe an dem Feld, das es beschreibt, damit kein Zweifel besteht, zu welchem es gehört. Und widerstehen Sie dem Drang, Platzhaltertext als einziges Label zu verwenden, da er verschwindet, sobald jemand zu tippen beginnt, und ihn raten lässt.

WPForms platziert Labels standardmäßig über Ihren Feldern, sodass Sie von Anfang an eine saubere, übersichtliche Struktur erhalten. Sie können die Platzierung und das Styling von Labels im Formular-Builder und im Block-Editor anpassen, wenn ein bestimmtes Layout etwas anderes erfordert.

FAQs zum Formularlayout-Design

Formularlayout-Design kommt oft auf, wenn Leute mehr aus ihren Formularen herausholen wollen. Hier sind schnelle Antworten auf die Fragen, die ich am häufigsten zum Strukturieren und Layouten von WordPress-Formularen höre.

Wie sollten Formulare strukturiert sein?

Ich empfehle, Ihre Formulare nach der Art der Informationen zu strukturieren, die Sie in jedem Abschnitt sammeln. Beginnen Sie mit persönlichen Informationen und gruppieren Sie diese Felder zusammen, dann gehen Sie zur nächsten logischen Gruppe über.

In WPForms können Sie Abschnittstrenner verwenden, um Überschriften hinzuzufügen, damit Ihre Formularstruktur klar und leicht verständlich bleibt. Das Gruppieren zusammengehöriger Felder unter klaren Überschriften lässt selbst ein langes Formular organisiert und leicht zu durchlaufen erscheinen.

Warum sollte ich die Anzahl der Felder in meinem Formular begrenzen?

Die Begrenzung von Feldern hilft, Formularabbrüche zu verhindern, d. h. wenn jemand beginnt, Ihr Formular auszufüllen, aber vor dem Absenden aufgibt. Dies geschieht oft, weil Benutzer von der Länge eines Formulars überfordert sind. Das Kürzen von Feldern und andere Best Practices für das Formular-Design tragen wesentlich dazu bei, die Benutzer bis zum Absende-Button engagiert zu halten.

Sollte ich ein einspaltiges oder mehrspaltiges Formularlayout verwenden?

Für die meisten Formulare ist eine einzelne Spalte die sicherere Wahl, da sie leicht zu scannen ist und auf Mobilgeräten selten Probleme bereitet. Greifen Sie zu mehreren Spalten, wenn Sie kurze, zusammengehörige Felder wie Stadt und Postleitzahl kombinieren möchten oder ein Formular kürzen möchten, das zu hoch erscheint. Welches Sie auch wählen, überprüfen Sie das Formular immer auf einem Telefon, bevor Sie es veröffentlichen.

Erkunden Sie als Nächstes weitere Formularlayout-Optionen

Wenn Sie entscheiden, wie wiederholende Felder gruppiert werden sollen, vergleicht unser Vergleich des Wiederholungsfeldes mit dem Layoutfeld, wann jedes verwendet werden sollte.

Umfragen, die eine Frage nach der anderen anzeigen, sind großartig für die Benutzererfahrung und mit WPForms einfach zu erstellen. Hier erfahren Sie, wie Sie Umfragen erstellen, die eine Frage nach der anderen anzeigen.

Und um sicherzustellen, dass die Leute ihre Daten korrekt eingeben, werfen Sie einen Blick auf unseren Leitfaden zum Hinzufügen eines Feldes zur Bestätigung der E-Mail-Adresse.

Erstellen Sie noch heute ein besseres Formularlayout

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin.  WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.