15 Beispiele für richtig gemachtes Webformular-Design

Website-Formulare sind ein wesentlicher Bestandteil jeder Website, Zielseite oder jedes E-Commerce-Shops. Ob das Ziel des Formulars darin besteht, den Website-Besitzer zu kontaktieren, einen Fragebogen auszufüllen, sich bei einem Konto anzumelden, einen Artikel zu kaufen, sich für ein neues Konto anzumelden, eine Reservierung zu buchen oder sich für eine kostenlose Testversion anzumelden – jedes Detail des Webs Design und Layout des Formulars sind entscheidend.

Diese Fragen haben Sie sich vielleicht schon einmal gestellt: Welches Design-Layout passt am besten zu meinem Formular? Was wird die Benutzer am meisten ansprechen? Wie kann ich meine Designmotive und Markenidentität umsetzen? Soll ich das Formular in einem Website-Popup platzieren oder würde ein Fußzeilenformular besser funktionieren?

Zwischen der langen Liste von Website-Formulartypen und ihren Anwendungsfällen kann es, gelinde gesagt, einschüchternd sein, herauszufinden, was bei Ihrem Formulardesign zu beachten ist. Seien Sie versichert, das Erstellen eines leistungsstarken Website-Formulars wird bald zu einer stressfreien, herausfordernden und dennoch lohnenden Web-Erstellungserfahrung.

Um unsere Webdesign-Strategie und -Workflows zu stärken, haben wir eine Liste mit 15 Beispielen zusammengestellt, die Ihnen zeigen, woraus die besten Formulare bestehen.

Wir begeben uns auf eine prall gefüllte Reise durch Website-Formulare in allen Formen, Farben, Layouts und Größen. Lassen Sie sich von dieser Liste von 15 Website-Formularen überraschen, deren Design und Struktur Ihre Fähigkeiten zur Web-Erstellung revolutionieren werden.

Wenn Sie feststellen möchten, dass jeder Benutzer vor dem Verlassen Ihrer Website auf "Senden" klickt, kann Ihr Kontaktformular dieses Ziel erreichen oder nicht. Grundlegende Entscheidungen, wie ob und wann Animationen oder Fortschrittsanzeigen hinzugefügt werden sollen, wie groß oder fett Ihre Überschriften sein sollten, wie breit Ihre Formularfelder sein sollten – all diese Faktoren tragen zur Abschlussrate jedes Formulars bei und wirken sich auf die Benutzererfahrung Ihrer Website aus.

Brandingo ist eine armenische Designagentur und Schule, die wir bereits im Januar 2021 für unsere Top 10 der Elementor-Sites des Monats ausgewählt haben. Die Brandingo-Website wurde erstellt, um „potenziellen Kunden und Studenten das Talent und das Wissen der Agentur in Design, Illustration, UI/UX und Branding zu präsentieren“.

Was uns an Brandingos Site immer aufgefallen ist, ist die Verwendung so vieler Bewegungs- und interaktiver Effekte, die alle wie angegossen zusammenpassen. Sie beherrschen die Kunst, ein Gleichgewicht zwischen interaktiven Funktionen zu finden, die für das menschliche Auge nicht zu viel sind.

Unsere Lieblingssachen:

• Die vielen Verwendungsmöglichkeiten von Lottie-Animationen, die angezeigt werden, wenn Sie auf der Seite nach unten scrollen.
• Der Textpfad, der den kreisförmigen Hintergrund des Formulars umkreist, wenn Sie das Ende erreichen.

Der Space Cube ist ein Desktop-Organisationsprodukt, das von Carol Havener aus Sydney, Australien, entwickelt wurde. Das Produkt wurde sowohl für Hausbesitzer als auch für Büros entwickelt und adressiert den Schmerzpunkt der Organisation begrenzter Räume (wie ein Schreibtisch, ein Arbeitszimmer, ein Familienwohnzimmer usw.)

Carol hat ihre Produkt-Website mit Elementor erstellt und den WooCommerce-Builder verwendet, um ihre E-Commerce-Site-Anforderungen zu erfüllen. Angesichts seiner breiten Zielgruppe verwendet die Website des Produkts ein weißes und schwarzes Farbschema mit Bedacht. Die Motive tragen dem modernen, schlanken und minimalistischen Design des Produkts Rechnung, die Kontaktseite und ihre Form erfüllen dasselbe Ziel.

Unsere Lieblingssachen:

• Die elegante Schriftpaarung kombiniert Kalligrafie, Handschrift mit der Sans-Serif-Schrift „Bodoni“.

Das raffinierte Hintergrundbild, das sich hinter dem soliden, quadratischen weißen Hintergrund des Formulars befindet. Dies erweckt den Anwendungsfall des Produkts wirklich zum Leben und erinnert den Benutzer auf subtile Weise daran, wie schön es ist, an einem sauberen, aufgeräumten und ruhigen Schreibtisch zu sitzen.

Metropolis Moving ist ein Umzugsunternehmen in New York City mit Sitz in Brooklyn, NY. Das Farbschema und das Design ihrer Website verwenden NYC-Themenfarben wie Taxi-Gelb, Marine und Grau, um die Essenz ihres maßgeschneiderten Service für die Bewegung im geschäftigen „Big Apple“ zu visualisieren. Das Kontaktformular der Website ist ein kurzes Formular mit mehreren Schritten, das der potenzielle Kunde ausfüllen und ein Preisangebot erhalten kann.

Unsere Lieblingssachen:

• Die abgegrenzte Kartenroute und die Standortpunkte erfassen die unvorhersehbare Erfahrung (Pfad) zwischen dem Bewegen von einer Adresse zu einer anderen.

• Die Formularfelder sind mit allen Webformular-Faustregeln gestaltet:

• • Minimale Anzahl von Formularfeldern
  • Linksbündig ausgerichtete Formularfelder und Platzhalter
  • Einspaltiges Layout
  • Deutlich geschnitzte Schrittanzeige

Wenn Sie Ihrem Publikum Fragen zu seinen Interessen, Vorlieben, Zielen usw. stellen, ist dies eine gute Möglichkeit, einen Dialog aufzubauen. Aber wie können Sie Ihre Fragen am besten präsentieren? Soll eine ungezwungene Atmosphäre geschaffen werden? Welches Format eignet sich am besten für Ihr Publikum? All diese Überlegungen sind gleich wichtig, doch die Möglichkeiten, sie anzugehen, sind unglaublich vielfältig.

Spotify Pets ist eine Playlist-Funktion innerhalb des digitalen Musik-, Podcast- und Videodienstes von Spotify. Diese einzigartig skurrile Ergänzung zu Spotify verwendet den Algorithmus der Plattform, um Wiedergabelisten zu erstellen, die das Haustier und der Haustierbesitzer anhören können – basierend auf den Hörgewohnheiten des Benutzers und den Attributen des Haustiers.

Unsere Lieblingssachen:

• Die einstellbare Drag-Bar-Animation, die der Benutzer anpasst, um die Eigenschaften seines Haustiers zu beschreiben, ist eine ansprechende Eingabemethode, die auch Tippaktivitäten eliminiert.
• Die Fortschrittsanzeige fügt sich in den fröhlich bebilderten Hintergrund ein.
• Das Fragebogenformular mit mehreren Bildschirmen enthält eine Frage pro Bildschirm, wobei jede einzelne sehr mobilfreundlich ist.

Red Bull ist ein international erhältlicher Energy Drink mit dem Slogan „Red Bull verleiht Flügel“. Auf der Produktseite der Website beteiligt Red Bull den Besucher mit einem interaktiven Quiz über Nachhaltigkeit und Umweltsicherheit – zwei der Säulenwerte der Marke – in Markengeschichten.

Unsere Lieblingssachen:

• Der Countdown-Timer für jede Frage sorgt für Spannung und Dringlichkeit bei der Beantwortung.
• Die großen Auswahlknöpfe machen die Antwortmöglichkeiten super zugänglich und einfach zu klicken.
• Das animierte Hintergrundvideo des Homepage-Quiz.

Anmeldeformulare sind eine unglaublich wichtige Komponente in der Benutzeroberfläche Ihres Produkts oder Ihrer Dienstleistung. Benutzer werden dieses Formular wahrscheinlich immer wieder sehen, und Vertrautheit und Einfachheit sind der Schlüssel. Ihr Formular sollte einladend, intuitiv und unkompliziert sein – und den Benutzer dennoch so begeistern wie möglich. Oft können kleinste Details und Illustrationen viel bewirken.

gidimo ist ein nigerianisches EdTech-Unternehmen, dessen Online-Lernplattform sich an Lernende aller Hintergründe und Lebensphasen richtet. Die Technologie der Plattform verwendet Gamification-Techniken und angepasste User Journeys, die es „spaßig und einfach machen, unterwegs alles zu lernen“.

Die Anmeldeseite von gidimos Elementor-gebauter Website (ein Gewinner unseres Showcases im März 2021) verfügt über ein sauberes Layout mit einer Slider-Galerie neben dem Anmeldeformular. Dies verleiht der Seite eine zusätzliche Ebene an Engagement und Attraktivität: Benutzer können sich durch abwechselnde Illustrationen navigieren, die die positive Atmosphäre der Plattform verstärken.

Unsere Lieblingssachen:

• Die Hintergrundfarbe des Schiebereglers wechselt beim Navigieren zwischen Grün und Weiß.
• Jede Zeile des Formulars hat die gleiche Breite, was ein einheitliches, organisiertes Layout ermöglicht, das Klarheit und Konsistenz schafft.

Snappet ist eine Online-Lernplattform für Tablet-Geräte, die von Mathematiklehrern verwendet wird, die den Lernpfad einzelner Schüler personalisieren und gleichzeitig ihre Leistung überwachen möchten. Das Lerntool ist für das Lernen von Schülern im Grundschulalter gedacht, das durch das freundliche, farbenfrohe Farbschema und die Vektorillustrationen der Website leicht zu verstehen ist.

Unsere Lieblingssachen

• Der illustrierte Anwendungsfall auf der Schüler-Login-Seite vermittelt eine emotionale Botschaft: Er erinnert die Schüler an das ermutigende (wenn auch virtuelle) High-Five und die positive Einstellung, die sie bei der Nutzung der Plattform empfinden werden.
• Das Typografieschema mit einer einzigen Schriftart verwendet Variationen einer Schriftart (verschiedene Farben und Größen). Die Vermeidung von Monotonie durch die Verwendung von zwei verschiedenen Farben und Größen zeigt die Informationshierarchie zwischen den Textelementen an.

Produkt-Landingpages sind für das Design von Website-Formularen von grundlegender Bedeutung, da ein Großteil des Einkaufsverhaltens eines Besuchers ein direktes Ergebnis des Produktseitendesigns ist. Angesichts all der Informationen, die Verbraucher über jedes einzelne Produkt wissen möchten, muss die Entscheidung, was und wie auf jeder Produktseite angezeigt werden soll, mit Sorgfalt behandelt werden.

Bram, ein Gewinner unseres WooCommerce-Site-Showcases, ist ein in Barcelona ansässiger Hersteller von handgefertigten Ledergeldbörsen. Das Layout der Produktseite war für uns eine besondere Inspiration (im Wesentlichen ein Einreichungsformular).

Unsere Lieblingssachen:

• Die große Auswahl an Farboptionen wird in einer Zeile zur gleichzeitigen Anzeige angezeigt. Sie müssen nicht auf ein Dropdown-Menü klicken, um jede Farboption anzuzeigen.
• Die Schaltfläche „In den Warenkorb“ ist leicht zu finden und befindet sich oben im Inhalt und nicht als letzte Komponente auf der Seite (nach den Produktdetails und reduzierbaren Registerkarten).
• Der reichlich weiße Raum auf der Seite macht die Produktdetails klar und lesbar, und die Lederdetails des Produkts sind gut sichtbar.

ABATOIR VEGETAL ist ein veganes Bistro und Lebensmittelgeschäft in Paris, Frankreich. Die E-Commerce-Site (erstellt mit Elementor und WooCommerce und ein Showcase-Gewinner im August 2020) bietet sowohl das Bistro zum Mitnehmen als auch die Lebensmittelmenüs, auf denen der Benutzer Zutaten und Gerichte auswählen kann, die er online bestellen kann.

Unsere Lieblingssachen:

• Die Verwendung von benutzerdefinierten WordPress-Feldern; Die Produktseite und ihr Bestellformular enthalten alle Basisinformationen der Mahlzeit in einem effizienten und ansprechenden Format.
• Die ansprechenden Formate, die im WooCommerce-Warenkorb der Seite verwendet werden: Die Artikelanzeige sowie die Schaltfläche „In den Warenkorb“ erhalten eine helle Hintergrundfarbe, die dem Checkout-Benutzerfluss und dem gesamten Online-Shopping-Erlebnis Spaß und Flair verleiht.
• Die bunten Schriften und detaillierten Fotos vermitteln die verbalen und visuellen Informationen klar – ein aufregender Einstieg in ein kulinarisches Einkaufserlebnis.

Ein erfolgreicher Anmeldeprozess erfüllt die Wünsche jedes Web-Erstellers, der ein Website-Formular erstellt. Ist es also wirklich möglich, diesen Traum wahr werden zu lassen? Alles ist möglich, aber die Schritte, die Sie unternehmen, um Ihre Besucher zufrieden zu stellen, können weitreichende Auswirkungen haben. Jedes Detail, von der Sichtbarkeit der Schaltflächen bis zum Kontrast zwischen den Elementen, zeigt die Ergebnisse der Formularübermittlung an.

Duolingo ist eine Website zum Sprachenlernen und eine mobile App. Als Marke ist es die Mission des Unternehmens, „Bildung kostenlos, unterhaltsam und für alle zugänglich zu machen“. Der oben gezeigte Bildschirm erscheint im Onboarding-Prozess der Plattform, in dem der Benutzer sein Sprachlernziel festlegt und einen Lernpfad wählt.

Unsere Lieblingssachen:

• Die Flat-Design-Avatare und Illustrationen, die auf der gesamten Site verwendet werden, werden als Schaltflächen für Miniaturansichten innerhalb des Formulars verwendet.
• Das ausgerichtete Rasterlayout rationalisiert die sieben Illustrationen – indem es ihre unterschiedlichen Größen, Farben und Formen miteinander verbindet.

Stripe ist eine Zahlungsverarbeitungssoftware, die von E-Commerce-Websites und mobilen Anwendungen verwendet wird. Die Verwendung von Stripe ermöglicht es Unternehmen, Zahlungen zu akzeptieren, Auszahlungen zu senden und ihr Geschäft online zu verwalten. Die Kontoregistrierung ist unkompliziert und einfach und wird durch ein einfaches, aber ansprechendes Anmeldeformular erleichtert.

Unsere Lieblingssachen:

• Der Schlagschatten um den Hintergrund des Einreichungsformulars unterscheidet zwischen dem Anmeldeformular und den Aufzählungspunkten auf der linken Seite der Seite.
• Die organisierten, prägnanten Aufzählungszeichen, die drei Hauptvorteile des Produkts nennen, verstärken den Mehrwert der Erstellung eines Stripe-Kontos.

Erfolgreiche Online-Buchungsformulare leben von einer positiven, ermutigenden Atmosphäre. Wenn Ihre Besucher den Punkt erreichen, sich zu überlegen, wie Sie Ihren Service buchen können, müssen Sie alles tun, um sie aufmerksam, interessiert und glücklich über das zu machen, was sie bald erleben werden.

Be A Roshan ist ein Energietherapie- und Meditationszentrum auf der Insel Mauritius. Die Elementor-Site von Be A Roshan bietet Online-Termin- und Veranstaltungsbuchungen für Kunden. Die für die Seite ausgewählten Designmotive (wie der sonnige Tag-Homepage-Hintergrund) spiegeln die Atmosphäre der wohltuenden Reiki- und Meditationserlebnisse wider.

Unsere Lieblingssachen:

• Die visuelle Kalenderoberfläche zeigt die während des ganzen Monats verfügbaren Reiki-Behandlungen an.
• Die informativen Textelemente über dem Kalender informieren den Benutzer über wichtige Details, die seine Entscheidung zum Ausfüllen des Formulars beeinflussen.
• Das Anmeldeformular für die Veranstaltung wurde entwickelt, um die Daten schnell zu sammeln und den Anmeldern ein reibungsloses Erlebnis zu bieten, ohne sie zu verwirren oder abzulenken

Presidio Speech and Learning ist eine Kindertherapiepraxis in San Francisco, die sich an Kinder richtet, die Unterstützung beim Sprechen, Sprechen, Lesen und Schreiben benötigen. Die von Elementor gebaute Presidio-Site, die in unserem Showcase im November 2020 zu sehen war, wurde für ihre pastellfarbenen, kinderfreundlichen Designmotive gelobt. Diese Details kommen der Zielgruppe des Zentrums entgegen: Eltern, die sich beraten lassen und aufmerksam und einfühlsam auf die individuellen Bedürfnisse ihres Kindes eingehen möchten.

Unsere Lieblingssachen:

• Die blaue und grüne Farbpalette, die im Buchungsformular verwendet wird, erweitert die erhebende Atmosphäre der Website während des gesamten Terminbuchungs-Benutzerflusses.
• Die Hintergrundfarbe der Formularfelder ermöglicht ein ansprechendes, einladendes Layout für einen angenehmen Einreichungsprozess.

Kostenlose Testversionen werden von potenziellen Kunden und Kunden immer geschätzt. Vor allem die Betonung der Vorteile und des Mehrwerts beim Ausprobieren Ihrer Dienstleistung oder Ihres Produkts hilft den Besuchern, ihre endgültige Entscheidung zu treffen. Je mehr Anreiz Sie ihnen geben, sich weiterzuentwickeln, desto wahrscheinlicher ist dies.

Hone, ein weiterer Showcase-Gewinner im November 2020, ist eine Online-Lernplattform, die Live-Kurse zu Themen wie Teamführung, Management und zwischenmenschliche Kommunikationsfähigkeiten anbietet. Die Plattform ermöglicht einen befähigenden, proaktiven Ansatz für Teamführung und interne Kommunikation. Diese Ideale werden erfolgreich durch das fröhliche, energetisierende Pink- und Violett-Farbschema der Website sowie durch die Stimme und den Ton des geschriebenen Inhalts ihrer Website vermittelt.

Unsere Lieblingssachen:

• Der pinke Unterstreichungseffekt erzeugt einen visuellen Hinweis, um die Machtworte des Formulars hervorzuheben – und hebt den potenziellen Benutzer hervor, dass die 30-Tage-Testversion von Hone völlig kostenlos ist.
• Die Aufzählungszeichen neben dem Formular kennzeichnen den Mehrwert und die wichtigsten Vorteile des Produkts.
• Die für jeden Aufzählungspunkt verwendeten Symbole ähneln der Benutzererfahrung und Benutzeroberfläche des Produkts.

Sobald Sie Ihren Benutzer davon überzeugt haben, dass es sich lohnt, Ihre Inhalte zu abonnieren, verlässt er sich darauf, dass Sie Inhalte liefern, die er weiterlesen möchte. Wenn Sie transparent wissen, was Sie ihm senden möchten, kann dies immer einen großen Beitrag dazu leisten, dass er weiß, was ihn erwartet und sich darauf freut.

Codepuffin ist die Geschäfts- und Portfolio-Website von Amy Nortje, einer Webentwicklerin mit Sitz in Neuseeland. Amy hat ihre Website mit Elementor erstellt, auf der sie ihre Dienste auflistet und ihr Portfolio und ihren persönlichen Blog vorstellt. Amys Blogeinträge konzentrieren sich auf ihre „Lessons Learned“ aus verschiedenen Projekten und Kundenbeziehungen und dienen ihren Lesern als sympathische, informelle Quelle für Einblicke und Unterstützung.

Unsere Lieblingssachen:

• Inhalt und Sprache des Anmeldeformulars stimmen mit der Botschaft des Blogs selbst überein: humorvolle Anekdoten, die mit wertvollen fachlichen Erkenntnissen verwoben sind.
• Die Überschrift des Formulars „Möchtest du etwas Cooles?“ schneidet auf den Punkt. Diese Frage umrahmt den Vorteil des Benutzers, den Newsletter zu abonnieren, in einem dialogischen Ton, der eine Beziehung zum Besucher herstellt, die Interesse an Amys Erkenntnissen und vielfältigen Erfahrungen weckt.

Es besteht kein Zweifel: Nichts ist lohnender als ein Dashboard, das erfolgreiche Ergebnisse der Formularübermittlung anzeigt. Jetzt, da wir von den Besten gelernt haben, kann man mit Sicherheit sagen, dass das Beste noch kommt. Sie sind dazu bestimmt, im Laufe Ihrer Web-Erstellungskarriere viele Website-Formulare zu erstellen, und jetzt, da Sie 15 Kunstwerke für Website-Formulare gesehen haben, ist es an der Zeit, sich das Webformular Ihrer Träume vorzustellen, zu entwerfen und zu erstellen.