() translation by (you can also view the original English article)
Die meisten von uns haben mindestens ein Formular irgendwo auf unserer WordPress-Seite.
Es könnte ein einfaches Kontaktformular sein. Oder eine Newsletter-Anmeldung. Vielleicht ein Kaufformular. Oder vielleicht etwas Maßgeschneiderteres.
Welche Informationen Ihr Formular auch immer sammeln soll, ich bin bereit, darauf zu wetten, dass Sie möchten, dass so viele Leute wie möglich das Formular ausfüllen und auf Abschicken klicken. Sie möchten nicht, dass die Leute nach der Hälfte der Zeit aufgeben oder das Formular gar nicht erst finden.
In diesem Artikel gebe ich Ihnen einige Tipps zum Hinzufügen von Formularen zu Ihrer Website, die tatsächlich ausgefüllt werden. Ich werde darüber berichten:
- Der Code: Wie man Formulare erstellt, die zugänglich und responsive sind, mit einem gültigen Code, der ihre korrekte Funktion gewährleistet.
- Die Benutzererfahrung: Wie Sie das Design Ihrer Formulare verbessern können, damit sie für die Benutzer so einfach wie möglich auszufüllen sind.
Im weiteren Verlauf werde ich einige Beispiele für gute Formulare nennen, die gut funktionieren und benutzerfreundlich sind, und Sie auf einige Ressourcen hinweisen, mit denen Sie helfen können.
Erstellen eines Kontaktformulars in WordPress mit einem kostenlosen Plugin
Wählen Sie einen Formularbuilder: Die 7 besten WordPress-Formularbuilder im Vergleich
Beste WordPress-Kontaktformular-Plugins
Verwenden Sie einen Drag-and-Drop-Formularbuilder für WordPress
Fangen wir also mit dem Code an.
Gut kodierte Formulare
Die Chancen stehen gut, dass Sie die Formulare nicht direkt in Ihre Website codieren. Wahrscheinlich verwenden Sie ein Plugin.
Daher ist es wichtig, ein Plugin zu installieren, das sauberen, zugänglichen und responsiven Code ausgibt, der die Art und Weise, wie Ihr Formular angezeigt wird oder funktioniert, nicht negativ beeinflusst.
Wenn Sie Ihr Plugin installiert und damit Ihr erstes Formular erstellt haben, empfehle ich Ihnen, das Formular auf Ihrer Website zu besuchen (sowohl auf dem Desktop als auch auf dem Handy) und den Code zu untersuchen, der es ausführt.
Ein gut kodiertes Formular wird:
- die richtigen Elemente für Formularfelder und Beschriftungen verwenden
- hat das Design des ausgegebenen Formulars in der gleichen Reihenfolge wie der Code.
- responsive sein, damit es auf allen Bildschirmgrößen gleich gut funktioniert.
- Ohne Maus bedienbar sein: Wenn der Benutzer mit der Tastatur durch die Felder tippt, wird er in der richtigen Reihenfolge durch die Felder geführt.
- Auf allen Bildschirmgrößen mit Maus, Tastatur oder Daumen/Finger leicht zu interagieren sein.
Überprüfen Sie Ihr Formular auf verschiedenen Geräten und Bildschirmgrößen und stellen Sie sicher, dass der Code die richtigen HTML-Elemente verwendet und nichts hinzufügt, was er nicht sollte. Lassen Sie es durch ein Validierungstool laufen, um zu überprüfen, ob es keine Probleme gibt.
Wenn Sie kleinere Probleme finden, können Sie diese in der Einrichtung Ihres Formulars beheben. Bei größeren Problemen müssen Sie möglicherweise ein anderes Formular-Plugin finden.
Und wenn Ihr Formularbuilder-Plugin Ihnen ein Formular gegeben hat, das nicht responsive, brauchen Sie definitiv ein neues Plugin. Die Mehrheit der Website-Besucher ist jetzt mobil und wenn Ihre Formulare nicht responsive, werden sie sie nicht ausfüllen.
Das Registrierungsformular für Envato Elements ist so gestaltet, dass es sowohl auf dem Desktop als auch auf mobilen Geräten funktioniert und sich das Design und der Inhalt zwischen den beiden nicht ändert.
UX in der Formulargestaltung
Das Design eines Formulars und wie einfach es zu bedienen ist, wird einen großen Einfluss darauf haben, wie oft es ausgefüllt wird. Um die Chancen zu maximieren, dass so viele Personen wie möglich den Submit-Button erreichen, sollten Sie die UX Best Practice übernehmen. Hier sind einige Dinge, die Sie tun können, um Ihre Formulare zu verbessern.
Anzahl der Felder begrenzen
Das Ausfüllen von Formularen nimmt Zeit in Anspruch, und Sie möchten diese Zeit reduzieren. Sie möchten auch vermeiden, dass die Leute das Gefühl haben, Sie würden ihre Privatsphäre verletzen. Vor kurzem habe ich versucht, auf öffentliches WiFi zuzugreifen, wozu ich nicht nur meine E-Mail-Adresse, sondern auch meine Telefonnummer, meine Anschrift und mein Geburtsdatum angeben musste. Unnötig zu sagen, dass ich ein anderes WiFi-Netzwerk angeschlossen habe!
Die Hubspot-Webseite gibt gegen Angabe Ihrer E-Mail-Adresse einen kostenlosen Leitfaden für Website-Konvertierungen heraus. Wenn Sie jedoch auf den Download-Link klicken, wird Ihnen ein Formular angezeigt, in dem Sie um viel mehr Informationen gebeten werden, als für die Zusendung des Leitfadens erforderlich sind.
Ich hätte den Leitfaden heruntergeladen und mich über den Erhalt ihres Newsletters gefreut, aber ich wollte nicht all diese Informationen zur Verfügung stellen, deshalb habe ich das Formular nicht ausgefüllt. Das ist eine verlorene Konvertierung.
Im Gegensatz dazu fragt die Kickstarter-Website nur nach Ihrem Namen, Ihrer E-Mail-Adresse und dem erforderlichen Kennwort, wenn Sie sich bei ihr anmelden. Das ist alles, was sie brauchen, also ist es alles, was sie verlangen.
Stellen Sie fest, welche Informationen Sie benötigen, um jemandem antworten zu können, der Ihr Formular ausfüllt. Dabei kann es sich um nichts weiter als den Namen und die E-Mail-Adresse oder Telefonnummer handeln. Für Newsletter-Abonnements benötigen Sie nur deren E-Mail-Adresse. Halten Sie sich an das Minimum: Sie können später jederzeit mehr verlangen, wenn Sie diese benötigen.
Lange Formulare aufteilen
Wenn Ihr Formular lang sein muss, weil Sie wirklich mehr Informationen benötigen, dann erwägen Sie, es auf mehrere Registerkarten oder Seiten aufzuteilen. Auf diese Weise wird der Benutzer beim ersten Zugriff auf das Formular nicht mit einer Unmenge von Feldern konfrontiert.
Wenn Sie sich für den Duke of Edinburgh Award im Vereinigten Königreich anmelden, eine Auszeichnung für junge Menschen, die mit körperlichen, geistigen und sozialen Herausforderungen verbunden ist, müssen Sie wirklich viele Informationen bereitstellen. Das Formular wurde in fünf Teile gegliedert, um dies weniger abschreckend zu gestalten.
Formular-Layout
Die Leser finden es einfacher, ein Formular einzuscannen, wenn der Text über den Feldern platziert ist. Auf diese Weise wird der Blick über das Formular nach unten gelenkt, ohne sich von einer Seite zur anderen bewegen zu müssen. Und das Formular funktioniert sowohl auf dem Schreibtisch als auch auf dem Handy gleichermaßen gut.
Das Envato Elements-Registrierungsformular dient dazu, den Blick durch das Formular zu lenken. Es enthält auch nicht mehr als die erforderlichen Felder.
Auch die Formularfelder sollten selbsterklärend und hilfreich sein. Vermeiden Sie Jargon oder nicht standardisierte Beschreibungen der Felder. Name und E-Mail sind ausreichend.
Aufruf zum Handeln
Ein klarer Aufruf zum Handeln gibt den Benutzern einen Anreiz, das Formular auszufüllen. Wenn klar ist, dass das Ausfüllen dieses Formulars für sie einen Nutzen hat, oder wenn die Aktion, die es auslöst, klar ist, dann werden sie mit größerer Wahrscheinlichkeit die Schaltfläche zum Absenden erreichen.
Unbounce führte A/B-Tests des Registrierungsformulars für Betting Expert durch und stellte fest, dass ein verbesserter Aufruf zum Handeln die Konversionen um über 30 % erhöhte.
"Kostenlose Tipps für Wetten" übertraf "Wett-Experte werden", weil es den Leuten einen klaren Grund gab, sich anzumelden, mit einem Nutzen für sie.
Wenn Sie Ihren Aufruf zum Handeln entwerfen, stellen Sie sich den Gemütszustand des Besuchers vor und was er sucht, wenn er Ihr Formular ausfüllt. Vergessen Sie die Vorteile für Ihr Unternehmen und artikulieren Sie, was sie davon haben werden.
Und wenn Ihr Formular-Plugin dies zulässt (und ein gutes wird es auch), bearbeiten Sie den Submit-Button so, dass es stattdessen ein Aufruf zum Handeln ist.
Fragen Sie nicht nach Zahlungsinformationen, wenn Sie sie nicht benötigen
Oben erwähnte ich das WiFi-Netzwerk, das Informationen wollte, die ich für irrelevant hielt. Eine weitere Information, von der sich die Leute nicht trennen wollen, es sei denn, sie müssen es tun, ist ihre Kreditkartennummer.
Wenn Sie eine kostenlose Testversion anbieten, fragen Sie bei der Anmeldung nicht nach einer Kreditkartennummer. Geben Sie dem Besucher stattdessen einen Grund, nach diesem ersten Monat (oder einer Woche, oder was immer Sie anbieten) bei Ihnen zu bleiben, und lassen Sie sich dann die Zahlungsdetails geben.
Die Moz-Webseite bietet einen kostenlosen Test mit einem einfachen Formular und einer Verpflichtung, die ich jederzeit kündigen kann, sowie das Versprechen, mich daran zu erinnern, bevor mein kostenloser Test endet. So weit so gut.
Aber wenn ich nach unten scrolle, werde ich nach meinen Kreditkartendaten gefragt. Dies lässt mich annehmen, dass sie mich nach einem Monat automatisch belasten, und hält mich davon ab, mich anzumelden.
Ich leugne nicht, dass Moz sich in Sachen SEO und Konvertierungen auskennt, also könnte dies eine bewusste Taktik sein. Möglicherweise haben sie festgestellt, dass die Zahl der Personen, die innerhalb des Gratismonats aussteigen, so groß ist, dass es sich lohnt, potenzielle Anmeldungen überhaupt zu verlieren. Wenn das auch bei Ihnen der Fall ist, ist das in Ordnung, aber stellen Sie sicher, dass Sie zuerst die Analyse durchführen.
Verwendung von bedingter Logik
Die Verwendung bedingter Logik in Ihren Formularen kann dazu beitragen, dass sie nicht länger als nötig sind.
Mit einem guten Formular-Plugin können Sie Felder basierend auf der Antwort des Benutzers auf ein früheres Feld anzeigen, d.h. diese Felder werden nur angezeigt, wenn sie benötigt werden.
Wählen Sie einen Formularbuilder: Die 7 besten WordPress-Formularbuilder im Vergleich
Quform vs. FormCraft: Top WordPress Formularbuilder-Plugins im Vergleich
Noch einmal: Seien Sie vorsichtig bei der Entscheidung, welche dieser Felder angezeigt werden, und zeigen Sie sie nur, wenn sie wirklich notwendig sind.
Formular-Bestätigungen und Mitteilungen
Sobald der Benutzer auf die Schaltfläche "Senden" geklickt hat, ist es eine gute Praxis, Feedback zu geben, damit er weiß, dass er das Formular erfolgreich ausgefüllt hat.
Dies könnte eine Weiterleitung auf eine andere Seite mit mehr Informationen sein, oder es könnte eine Nachricht auf derselben Seite sein, auf der sich das Formular befand. So oder so, machen Sie deutlich, dass der Benutzer das Formular erfolgreich ausgefüllt hat und dass Sie ihm dafür dankbar sind. Sagen Sie ihnen, was als nächstes passieren wird, einschließlich aller Maßnahmen, die sie ergreifen müssen, wie z.B. das Überprüfen ihrer E-Mails.
Und wenn Sie Formulareingaben erhalten, verfolgen Sie diese so schnell wie möglich. Ich bin gerade dabei, umzuziehen, und habe gestern bei drei Umzugsfirmen Anfrageformulare für die Webseite ausgefüllt. Nur einer hat mich zurückgerufen - raten Sie mal, wer mein Geschäft bekommen wird!
Konfigurieren Sie Ihr Plugin so, dass Sie benachrichtigt werden, wenn ein Formular abgeschickt wird, und gehen Sie sofort nach. Wenn Sie können, richten Sie einen Autoresponder ein, der Ihr E-Mail-System oder einen Mailinglisten-Anbieter benutzt, damit sie schnell etwas erhalten.
Wenn der Benutzer das Formular nicht korrekt ausgefüllt hat und ein Fehler vorliegt, stellen Sie sicher, dass jede Fehlermeldung deutlich ist und ihm sagt, was er zu tun hat. Verwenden Sie keinen wertenden Text und seien Sie nicht vage.
Wenn ich meinen Namen in das E-Mail-Adressfeld im Envato Elements-Anmeldeformular eingebe, wird dieses Feld hervorgehoben und die Meldung E-Mail ist ungültig erscheint.
Das macht deutlich, worin mein Fehler besteht, damit ich ihn korrigieren kann.
Gute Formgestaltung wird die Konversionen erhöhen
Wenn Sie die Formulare auf Ihrer Website gut gestalten, erhöht sich die Zahl der Personen, die sie ausfüllen und auf Absenden klicken. Wenn Sie dafür sorgen, dass Ihre Formulare gut kodiert, zugänglich und responsive sind, und wenn Sie sie so gestalten, dass sie für die Benutzer gut zugänglich sind, sollten Sie feststellen, dass sie viel effektiver sind.
- WordPressErstellen eines Kontaktformulars in WordPress mit einem kostenlosen Plugin
- WordPressWählen Sie einen Formularbuilder: Die 7 besten WordPress-Formularbuilder im Vergleich
- WordPressBeste WordPress-Kontaktformular-Plugins
- WordPressVerwenden Sie einen Drag-and-Drop-Formularbuilder für WordPress
Auch wenn Sie benutzerdefinierte Plugins verwenden möchten, sich aber nicht wohl dabei fühlen, an Servern herumzubasteln, und es vorziehen, dass jemand alles für Sie erledigt, sollten Sie das Managed WordPress Hosting in Betracht ziehen. Dank Envatos Partnerschaft mit SiteGround können Sie bis zu 60% Rabatt auf Managed WordPress Hosting erhalten.
