Conversion Tipps für deine Web-Formulare

Du möchtest, dass Dich Nutzer über Dein Kontaktformular anschreiben? Hättest Du gern mehr Newsletter-Abonnenten? Erfahre, wie du Formulare optimierst.

Backend Visualisierung Greyd.Forms

Anika Büchner

Anika Büchner /

28.07.2020


Du möchtest, dass Dich mehr Nutzer über Dein Kontaktformular anschreiben? Hättest Du gern mehr Newsletter-Abonnenten? Zielst Du auf weitere Neukunden ab, die Deinen Bestellprozess komplett abschließen?

Dann ist es Zeit für eine Conversion-Optimierung Deiner Formulare. Wie das ganz ohne die Hilfe eines Programmierers oder den Einsatz weiterer Plugins gelingt, erklären wir Dir in diesem Artikel.

Conversion-Optimierung mit Web-Formularen

Viele denken bei Conversion an den Klick auf den Kauf-Button. Doch das ist noch lange nicht alles. Eine Conversion  bzw. auch „Umwandlung“ bringt Webseiten-Besucher auf eine neue Ebene. So werden Leser zu Newsletter-Abonnenten, Webseiten-Besucher wandeln sich in Käufer und registrierte Kunden werden zu Premium-Mitgliedern.

In der Regel geschehen diese Schritte mithilfe von Online-Formularen. Dabei kann jeder einzelne Vorgang und jedes einzige Eingabefeld zu einer Hürde werden, die Deine Besucher zum Abbruch bringen. Damit dies nicht passiert und Du Deine Conversions erhöhst, haben wir grundlegende Tipps, die Du beim Anlegen beherzigen solltest.

12 Tipps für Conversion optimierte Web-Formulare:

  • Verwende bei der Erstellung das Corporate Design Deines Unternehmens

  • Hebe Dein Formularfeld optisch vom Hintergrund ab

  • Erkläre knapp, warum Du die Daten überhaupt benötigst

  • Gib jedem Formular einen Titel, damit Deine Nutzer wissen, was sie ausfüllen

  • Bringe Zusammengehöriges in eine Gruppe und grenze andere Themenblöcke optisch ab, wie z. B. persönliche Angaben, Anschrift und Kontodaten

  • Beschrifte die Eingabefelder kurz und prägnant – am besten so, wie Du es von anderen Webseiten aus dem Alltag gewohnt bist

  • Wähle für Deine Button-Beschriftungen Call to Actions, die Besucher darüber informieren, was sie im nächsten Schritt erwartet: z. B. „Hier downloaden“, „Jetzt bestellen“ oder „Newsletter anfordern“

  • Zeige Deinen Käufern ganz transparent die Schritte, die für den Ausfüllvorgang erforderlich sind

  • Gib positives Feedback, wie zum Beispiel „grüne Häkchen ✔“ bei einer korrekten Eingabe

  • Weise von vornherein auf Pflichtfelder mit einem roten * hin, um bei unausgefüllten Feldern später keinen Ausfüll-Frust zu erzeugen

  • Biete immer die Möglichkeit neue Passwörter anzufordern

  • Vermeide optische Ablenkungen, die Nutzer vom Ausfüllen abbringen könnten

Weniger Seitenabbrüche dank GREYD.Forms

Damit Du die oben genannten Tipps problemlos umsetzen kannst, kannst Du den Formulargenerator der GREYD.SUITE – GREYD.Forms – für Deine Webseite einsetzen. Damit ist es ganz leicht, Dein gewünschtes Design auf Deine Formulare anzupassen. Für die Umsetzung benötigst Du weder separate Plugins noch eine Programmierung.

Standardisiert aussehende Web-Formulare und unübersichtliche Formulartools mit nur wenigen Einstellungsmöglichkeiten gehören damit der Vergangenheit an. Wie Dich GREYD.Forms im Web-Design unterstützt, erfährst Du im Folgenden.

Geringere Abbruchquoten mithilfe von Multistep-Formularen

Benötigst Du für Deine Webseite lange Formulare mit vielen Eingabefeldern? Dann empfehlen wir den Einsatz von Multistep-Formularen. Wie der Begriff bereits verrät, handelt es sich um mehrstufige Formulare, die Deine Benutzer sehr übersichtlich durch einen Anmelde- oder Bestellvorgang leiten.

Und was ist der große Vorteil? Deine Nutzer werden nicht von einem einzigen, riesigen Formular „erschlagen“, sondern füllen die Eingabefelder Schritt für Schritt aus. Einmal angefangen, stehen die Chancen viel, dass sie alle Angaben bis zum Schluss vornehmen.

Mithilfe von Weiter- und Zurück-Buttons können Nutzer zwischen den einzelnen Formularstufen navigieren. Fortschrittsbalken informieren die User zusätzlich über den Status des Vorgangs.

Optische Formular-Highlights mit Bildkacheln

Der Einsatz von Bildkacheln bietet eine wunderbare Möglichkeit, um Online-Formulare besonders ansprechend zu gestalten. Anstelle von langweiligen Checkboxen bietest Du Deinen Usern schöne Bildmodule und Icons zum Anklicken.

Geringere Einstiegshürden dank Dynamic Content

Dynamic Content bedeutet maßgeschneiderte Inhalte für jeden Nutzer. Eingabefelder werden Besuchern immer in Abhängigkeit der vorangegangenen Angaben angezeigt. Hier ist es möglich auch Formulare mit jeweils nur einem Feld zu visualisieren, die sich während der Eingabe weiter aufbauen.

Außerdem entstehen damit sehr praktische Ergänzungen. Support-Formulare passen sich je nach Datum und Uhrzeit ganz automatisch an. Beispielsweise können potenzielle Kunden außerhalb Deiner Öffnungszeiten mithilfe von Folgeaktionen „bei Laune“ gehalten werden, sodass Sie nicht zum Konkurrenten wechseln.

Mobile first

Sei es die schnelle Pizzabestellung oder der Friseur-Termin – immer mehr Formulare füllen Anwender am Smartphone aus. Hier müssen die Formulare zum einen reibungslos funktionieren und andererseits sind spezielle Module, wie beispielsweise iOS Switch Buttons, sehr vorteilhaft. Achte zusätzlich darauf, die Oberflächen komplett im Responsive Design zu erstellen.

Formulare hinter den Kulissen

Ausgeklügelte und optisch ansprechende Formulare können Deine Kundenzufriedenheit und damit auch Deinen Umsatz deutlich steigern.

Doch was passiert hinter den Kulissen? Für ein effizientes und gut funktionierendes CRM-System ist es langfristig entscheidend, wie die Daten im Hintergrund verarbeitet werden. GREYD.Forms arbeitet hier mit der „Hidden Field Integration“. Diese ermöglicht es, Formulareingaben sehr übersichtlich zu verwalten.

Als Beispiel: Bestimmten Formularen kannst Du IDs zuweisen, die nach dem Ausfüllen von Eingabefeldern direkt an Sales Mitarbeiter weitergeleitet werden. Diese Vorgänge unterstützen Firmen bei der Lead Generierung. Als Beispiel: Bei einer Neuregistrierung erhält der jeweilige Verantwortliche eine Info und kann sich mit dem Ziel der Kundengewinnung direkt telefonisch beim Kunden zurückmelden.


Anika Büchner

Von Anika Büchner

Anika Büchner lebt im wunderschönen Bayern. Als freie Textzauberin unterstützt sie Unternehmen wie GREYD mit mitreißenden Inhalten. Sie ist studierte Medienwissenschaftlerin, berufserfahrene Zielgruppen­forscherin, exakte Online-Analystin und clevere Wortkünstlerin, die ihr zauberhaftes Wissen in Blog-Artikeln vereint.

Recent in Learn

Nahaufnahme von Händen, die auf einer Laptop-Tastatur tippen, was die Einfachheit eines Tastatur-Accessibility-Tests symbolisiert.

Barrierefreiheit 101: So geht ein Tastaturtest

Mehr erfahren

Was tun, wenn deine WordPress-Seite gehackt wurde?

Mehr erfahren

A pen rests on top of a stylized table grid with the HTML tag prominently displayed in bold white text, symbolizing the structure of tabular data in web development.

Use Case Tutorial: Wann man eine Tabelle statt eines Divs verwenden sollte

Mehr erfahren

10 Tipps für nachhaltige Websites

Mehr erfahren

Skalierung von Inhalten (mit WordPress)

Mehr erfahren