Optionen für die Erstellung von Webformularen

Es gibt viele Dienste, Plugins und Frameworks zur Formularerstellung, die die mühsame Aufgabe des Formulardesigns und der -entwicklung erheblich erleichtern. Wir werden uns einige davon in diesem Beitrag ansehen.

Warum nicht selbst machen?

Die Erstellung eines Formulars ist eine dieser Aufgaben in der Front-End-Entwicklung, deren Schwierigkeit ich vergesse, bis ich darum gebeten werde, sie zu erledigen. Es ist keine große Sache, wenn wir über ein paar Textfelder und eine Schaltfläche zum Absenden sprechen, aber oft suchen wir nach etwas viel Komplexerem. Radio-Buttons, numerische Eingaben, Ajax-Validierung und -Übermittlung – oh je! Das ist, bevor wir überhaupt anfangen, Browserinkonsistenzen, Eingabezustände, Zahlungsintegration und Barrierefreiheit zu diskutieren.

Nichts ist so interdisziplinär wie die Formularerstellung. Formulare werden entworfen. Formulare werden im Front-End entwickelt. Formulare werden im Back-End entwickelt. Formulare sind auch ein Anliegen der Server- und Datenbankexperten. Neue Formulare und Änderungen an bestehenden Formularen können eine schwer zu koordinierende interdisziplinäre Anstrengung sein.

Es ist völlig in Ordnung, Formulare von Grund auf neu zu erstellen, aber es gibt keine Schande darin, auf den Schultern von Giganten zu stehen, die bereits die schwere Arbeit geleistet haben. Dies kann die Kosten und den Zeitaufwand für einen Kunden minimieren und zu einer besseren Endbenutzererfahrung führen.

Gehostete Formular-Dienste

Eine Option ist die Nutzung eines gehosteten Dienstes für Ihre Formulare. Auf diese Weise lagern Sie den Großteil der formularbezogenen Arbeit aus, die Ihr Team sonst erledigen müsste. Ich neige dazu, gehostete Formular-Dienste zu nutzen, wenn viele komplexe Aspekte eines Formulars zu berücksichtigen sind, wie z. B. bedingte Logik, Paginierung und Berichterstattung. Diese Unternehmen haben all das für uns herausgefunden und, in Anbetracht der Zeit, zu einem geringeren Preis, als es selbst zu entwickeln.

Wufoo / SurveyMonkey

Diese Dienste gehören heutzutage zum selben Konzern. Sie wissen vielleicht, dass Chris für Wufoo arbeitete, bevor es von Survey Monkey übernommen wurde. Wufoo ist ein Werbekunde hier auf CSS-Tricks, hat aber nicht für die Aufnahme in diesen Beitrag bezahlt. Wir haben diese Dienste aufgenommen, weil sie einfach funktionieren. Wufoo ist für jede Art von Webformular, während SurveyMonkey wahrscheinlich ein besseres Werkzeug speziell für Webformulare für Umfragen ist.

Wir verwenden Wufoo, um das Kontaktformular hier auf CSS-Tricks zu betreiben, und das seit vielen Jahren, ohne es jemals ändern zu müssen. Da Wufoo eine einfache Zahlungsintegration bietet, haben wir es auch schon mehrfach zum Verkauf von Produkten genutzt. Sie nehmen nicht einmal einen Anteil, das ist einfach Teil eines kostenpflichtigen Plans!

Mein persönlicher Favorit an Wufoo ist der Grad der Anpassung, den es bietet. Es gibt verschiedene Möglichkeiten, ein Formular auf einer Website einzubetten, sowie Optionen zur Anpassung des Erscheinungsbilds mithilfe ihrer Themes oder benutzerdefinierter CSS. Auf diese Weise ist es erweiterbar und funktioniert sofort. Ich habe vor langer Zeit einen Beitrag darüber geschrieben, wie ich Wufoo als Werkzeug für Kundenfeedback genutzt habe.

Polldaddy

Polldaddy stammt von Automattic, der Kraft hinter WordPress. Wie Wufoo ist es ein gehosteter Dienst und eignet sich für komplexe Formulare, wie z. B. Umfragen. Was ich persönlich daran mag (abgesehen von der übersichtlichen Benutzeroberfläche) ist, dass es eine nette iOS-App bietet, um Formulardaten auch an anderen Orten als einer Website zu erfassen. Das ist perfekt für etwas wie eine Konferenz, eine Buchsignierung oder eine andere Live-Veranstaltung, bei der die Erfassung von Informationen persönlich von Vorteil wäre.

Google Forms

Google Forms ist in dieser Gruppe einzigartig, da es völlig kostenlos ist. Es ist Teil der Google Docs-Welt zusammen mit Slides und Sheets (Sie können Formulardaten in Sheets exportieren). Als Teil dieser Welt können Sie Mitarbeitern die Formulare hinzufügen, die Sie dort erstellen.

Es ist ein ziemlich gutes Formular-Tool, und überzeugend wegen der Kostenfreiheit, aber auch ziemlich eingeschränkt. Keine Zahlungen, keine Logik, sehr begrenzte Designkontrolle, die iFrame-Einbettungen können etwas seltsam sein (erfordern Scrollen) usw.

Typeform

Typeform erstellt Formulare mit einer einzigartigen Benutzeroberfläche: Jede Frage wird einzeln gestellt, eher wie ein Gespräch im echten Leben.

Formstack

Formstack ist ebenfalls ein vollständig gehosteter Formular-Dienst mit einigen ziemlich einzigartigen Funktionen, die für geschäftliche und marketingbezogene Bedürfnisse von besonderem Interesse sein könnten. Zum Beispiel verfolgen sie Teilstoffermittlungen, sodass Sie Informationen sammeln, auch wenn der Benutzer das Formular nicht ganz ausgefüllt hat. Sie ermöglichen A/B-Tests und verfolgen, wo Benutzer abgebrochen haben, um Engpässe zu identifizieren und Konversionen zu steigern.

Online-Formular-Builder

Ist eine gehostete Plattform für Ihr Projekt etwas zu viel? Eine weitere Option ist die Verwendung eines Online-Formular-Builders.

Es ist eine feine Linie zwischen einem gehosteten Formular-Dienst und einem Formular-Builder. Wo ein SaaS alles bietet, was Sie möglicherweise brauchen, und es für Sie hostet, bietet ein Formular-Builder die Funktionen, die Sie benötigen, um Daten und Benachrichtigungen zu erhalten. Sie hosten das Formular auf Ihrer Website und der Server des Formular-Builders verarbeitet die Einreichungen für Sie.

Simple Form

Simple Form ist ein perfektes Beispiel für einen Online-Formular-Builder. Es stellt Ihnen einen API-Token zur Verfügung, der dann zum Markup des Formulars auf einer Website hinzugefügt werden kann, um Daten von den Servern von Simple Form zu senden und zu empfangen. Keine Anmeldung oder Registrierung erforderlich; nur ein API-Token. Das ist ziemlich cool.

FormKeep

FormKeep ist ein weiterer brauchbarer Online-Formular-Builder. Der Hauptunterschied hierbei ist, dass eine Anmeldung erforderlich ist, um loszulegen, und sobald Sie dies tun, haben Sie die Möglichkeit, Ihre Formulare zu aktualisieren, um mehr Daten zu sammeln. Andernfalls gibt es niedrige Grenzen für die Anzahl der Einreichungen, die in einem bestimmten Formular akzeptiert werden können.

Eine wirklich coole Sache an FormKeep: Es gibt eine Tonne von Zapier Webhooks, die Ihr Formular mit anderen Diensten wie MailChimp, Trello, Salesforce und vielen von Googles Webanwendungen integrieren können.

Formspree

Formspree ist eine Art glücklicher Mittelweg zwischen den beiden anderen Online-Formular-Builders, die wir uns angesehen haben. Keine Anmeldung oder ein Konto ist erforderlich, um Formularfunktionen zu erhalten, aber es gibt eine Grenze von 1.000 Einreichungen pro Formular, bevor ein Konto und ein Upgrade benötigt würden.

Mein Lieblingsteil an Formspree ist, dass es eine Fülle von erweiterten Optionen bietet, um das Verhalten eines Formulars mithilfe von `name`-Werten im Markup anzupassen.

WordPress-Plugins

Wenn Sie eine WordPress-Website betreiben, haben Sie Zugriff auf viele, viele Plugins, die Formulare viel besser handhabbar machen, als von Grund auf neu zu beginnen. Dies sind einige meiner Favoriten, jeder aus unterschiedlichen Gründen.

Gravity Forms

Dies ist ein Premium-Plugin (d. h. es kostet Geld), das einen echten Formular-Builder in der Verwaltung Ihrer Website platziert. Gravity Forms ermöglicht es Ihnen, eine unbegrenzte Anzahl von Formularen direkt über das WordPress-Dashboard zu erstellen, enthält eine elegante Drag-and-Drop-Oberfläche und bietet alle erweiterten Optionen, die Sie möglicherweise von etwas wie Wufoo erwarten würden, wie z. B. bedingte Logik, Stil-Anpassungen und Integrationen mit beliebten Diensten.

Sie haben die volle Kontrolle über Einreichungsbenachrichtigungen, E-Mail-Trigger und Design. Mein Lieblingsmerkmal ist die Kontrolle, die Gravity Forms auf jeder Ebene bietet. Zum Beispiel hat jedes Eingabefeld eine Reihe von erweiterten Einstellungen, die verwendet werden können, um alles von der Darstellung und dem Verhalten des Eingabefelds bis hin zu seiner Barrierefreiheit und der Möglichkeit, Daten aus anderen Feldern im selben Formular abzurufen, anzupassen.

Dann wird, ähnlich wie bei Wufoo, das Formular mithilfe eines eindeutigen Shortcodes in jede Seite oder jeden Beitrag eingebettet.

Ninja Forms

Ich binde mich immer mehr an dieses Plugin. Es ist komplett kostenlos in dem Sinne, dass die grundlegenden (aber auch großartigen) Formularfunktionen enthalten sind, und dann eine ganze Reihe von Add-ons gegen eine Gebühr erhältlich sind.

Im Moment denke ich, dass Ninja Forms ein solider Vergleich zu Gravity Forms ist, von der Benutzeroberfläche bis zu den angebotenen Funktionen. Ich weiß jedoch, dass das Team an einer ordentlichen Überarbeitung in Version 3 arbeitet, die die Dinge ziemlich aufmischen und es weiter von Gravity Forms abheben wird.

Contact Form 7

Dies ist der OG der WordPress-Formular-Plugins. Dies ist das erste, an das ich mich erinnere, das ich jemals auf einer WordPress-Website verwendet habe. Es ist weit entfernt von den erweiterten Funktionen von Gravity Forms und Ninja Forms, aber es ist komplett kostenlos und bietet immer noch einige ziemlich ausgefeilte Dinge, von Benachrichtigungseinstellungen bis hin zu Ajax-Ladevorgängen im Front-End. Außerdem gibt es eine Community dahinter, die Erweiterungen und Add-ons beigesteuert hat, um das Erlebnis noch weiter zu verbessern.

Ich greife oft auf Contact Form 7 bei kleineren WordPress-Projekten mit grundlegenden Formulareingabebedürfnissen zurück. Es mag etwas mehr Anleitung erfordern, wenn ein Projekt an den Kunden zurückgegeben wird, ist aber für viele Anwendungsfälle mehr als ausreichend.

Formular-Frameworks

Nehmen wir an, Sie sind vom DIY-Typ und benötigen keine Hilfe bei der Formularverarbeitung. Sie können immer noch von der Arbeit anderer profitieren, die sich bemüht haben, Frameworks für Formulare zu entwickeln, die nicht nur attraktiv sind, sondern auch oft problematische Aspekte von Formularen wie Barrierefreiheit und Browserkompatibilität handhaben. Es gibt wirklich keinen Bedarf, diese Tools hervorzuheben, da sie bereits gut genutzt und dokumentiert sind, aber wir können sie zumindest verlinken.

• Bootstrap
• Foundation
• Bourbon
• Formalize
• Mosto

Zusammenfassend

Ich wähle Formularlösungen basierend darauf aus, was meiner Meinung nach am besten zu einem bestimmten Projekt passt. In den meisten Fällen verwende ich eine Art von Formularlösung, da die Erstellung von Formularen angesichts all der Permutationen oder dessen, was erforderlich sein kann, so verdammt schwierig ist.

Zapier hat eine eigene Liste mit einigen Optionen zusammengestellt. Ich habe diesen Beitrag basierend auf persönlichen Erfahrungen mit verschiedenen Diensten zusammengestellt, aber welche anderen haben Sie gefunden? Lassen Sie es mich in den Kommentaren wissen.