Formulare können einer der komplexesten Aspekte Ihrer Front-End-Entwicklungsarbeit sein. Sie sind weitaus komplizierter als die meisten Elemente, mit denen Sie arbeiten, sowohl aus HTML- als auch aus CSS-Sicht.
Wenn Sie in der Vergangenheit mit Formularen frustriert waren, machen Sie sich keine Sorgen, es gibt Hoffnung! Heute werden wir einige Tools und Frameworks durchgehen, mit denen Sie die Arbeit ohne Kopfschmerzen erledigen können.
Zwei Möglichkeiten, diese Katze zu enthäuten
Wir werden heute einen Blick auf zwei verschiedene Arten von Tools werfen, die Ihnen beim Erstellen erstaunlicher Formulare helfen können: Frameworks und Web-Apps.
Frameworks stellen die Heimwerker-Route dar, sie bieten Ihnen vorgefertigte Formgebung und Funktionalität, während Sie gleichzeitig die Art der freien Entscheidung berücksichtigen, die nur das manuelle Codieren bietet. Das Niveau an Wissen und Talent ist hier immer noch recht hoch, aber es zahlt sich aus, dass Sie keinen Cent zahlen und Sie die volle Freiheit haben, zu tun, was Sie wollen.
Im Gegensatz dazu stellen Formularersteller-Apps eine automatisierte Lösung dar. Diese werden häufig von WYSIWYG-Designsystemen unterstützt, die verhindern, dass Sie ein einzelnes Zeichen Code schreiben müssen. Darüber hinaus werden sie normalerweise mit einem Dienst gebündelt, der Eingaben akzeptiert und Kataloge katalogisiert, was ein großer Vorteil ist. Der Nachteil ist, dass sie nicht immer kostenlos sind und dass Ihre Anpassungsoptionen eingeschränkter sind, als wenn Sie von Hand programmieren würden.
Werfen wir einen Blick auf einige der beliebtesten und effektivsten Versionen beider Arten von Formularwerkzeugen.
Frameworks
An erster Stelle steht die Rahmenroute. All dies sind Namen, die Sie erkennen, aber haben Sie sich schon einmal ihre Formmerkmale angesehen? Sie sind in der Regel recht umfangreich und hilfreich.
Bootstrap
Twitter Bootstrap ist zu einem äußerst beliebten Toolkit und Ausgangspunkt für Entwickler geworden. Es bietet Ihnen eine absolut solide Basis, von der aus Sie arbeiten können, und kann Stunden und Stunden vor Ihrem Workflow abnehmen.
Das Form-Styling in Bootstrap ist erstaunlich umfangreich. Sie können Ihre Formularbeschriftungen oben oder seitlich platzieren, Ihre Felder können quadratisch oder gerundet sein, Kontrollkästchen hinzufügen und Menüs auswählen. all dies und mehr in einer Vielzahl verschiedener Stile zur Auswahl.
Wie bei allem in Bootstrap ist das Abziehen so einfach wie das einfache HTML mit ein paar sorgfältig platzierten Klassen. Die Dokumentation ist ziemlich gründlich, aber hier ein Beispiel, um einen Eindruck davon zu erhalten, wie das Erstellen von Formularen mit Bootstrap funktioniert.
Ziemlich einfach! Denken Sie daran, dass alle diese Elemente vorgestylt erscheinen, was bedeutet, dass wir jetzt nicht mehr mit CSS arbeiten müssen. Sie sehen toll aus, direkt aus der Box!
Auch hier gibt es genug Funktionen, mit denen Sie mit wenig Aufwand jede Form erstellen können, die Sie möchten. Es gibt sogar eine übersichtliche, automatisch vervollständigende JavaScript-Bibliothek namens "typeahead".
Nehmen wir an, Sie möchten Bootstrap nicht zum Erstellen Ihrer Site verwenden, möchten aber trotzdem diese fantastischen Funktionen nutzen. Ist das möglich? Sie wetten Gehen Sie einfach zum Customized Download Builder und deaktivieren Sie alles außer dem Formularmodul. Dadurch wird der Download auf die Elemente beschränkt, die für die Formularerstellung erforderlich sind.
Stiftung
Foundation by Zurb hat auch eine Menge toller Formmerkmale. Sie können einige sehr fortgeschrittene Formulare erstellen, indem Sie sehr ähnliche Techniken verwenden, wie wir sie gerade in Bootstrap gesehen haben.
Der Code für die Implementierung von Formularen in Foundation sollte ziemlich ähnlich aussehen wie zuvor. Wir verwenden nur die grundlegenden Elemente, die HTML5 selbst bietet, mit einigen speziellen Klassennamen:
Wie Sie sehen können, gibt es mit Bootstrap oder Foundation nicht viel zu lernen, welche HTML-Elemente wo verwendet werden sollen. Die mitgelieferte CSS-Datei erledigt alle Elemente, um diese Elemente zu hijacken und sie hübsch aussehen zu lassen.
Unterstützung für die Formularunterstützung von Foundation nicht ziemlich so tief und umfangreich wie Bootstrap, aber denken Sie daran, dass dies eine gute Sache sein könnte. Wenn Sie einfache Formulare erstellen, benötigen Sie nicht immer den Flaum.
Eine Sache, die Foundation ziemlich cool hat, ist ein JavaScript, mit dem Sie Ihre eigenen benutzerdefinierten Formularelemente implementieren können. Wenn Sie beispielsweise ein benutzerdefiniertes Kontrollkästchen-Design erstellen möchten, macht Foundation es so einfach wie einige Klassen und ein kleines JavaScript-Snippet.
52 Rahmen
52 Framework war eines der ersten HTML5-Frameworks, das im Web verfügbar war. Ich bin mir nicht sicher, wie aktiv es in diesen Tagen entwickelt wurde, aber es enthält tatsächlich einige grundlegende Formmerkmale.
Hier finden Sie eine Demo-Seite und einen Videoführer, der Sie durch die Funktionen führt.
Letztendlich denke ich, dass es Ihnen mit Basecamp oder Foundation viel besser geht, die viel beeindruckender, gründlicher und auf dem neuesten Stand sind. Wenn Sie jedoch 52 Framework in der Vergangenheit verwendet haben und bereits damit vertraut sind, möchten Sie möglicherweise die Form-Features untersuchen.
Formalisieren
Formalize ist ein CSS-Framework, das das Form-Styling für alle gängigen Browser konsistent machen soll. Sie koppeln es mit Ihrer bevorzugten JavaScript-Bibliothek, und es erledigt alle schweren Aufgaben für Sie.
Formalize wurde von Nathan Smith erstellt, der auch das 960 Grid System erstellt hat. Da dies der Fall ist, wissen Sie natürlich, dass Formalize erstklassig ist und den meisten Browsern dabei hilft, die neuesten HTML5-Formularfunktionen zu unterstützen.
Formee
Formee ist ein weiteres großartiges Framework, das ausschließlich dazu dient, Sie beim Erstellen perfekter Formen zu unterstützen.
Formee hat drei Hauptziele. Das erste Ziel ist es, das Layout zu vereinfachen. Formee baut auf den Ideen von 960.gs auf und ermöglicht Ihnen die Verwendung ähnlicher Konventionen zum Layout Ihrer Formulare. Das zweite Ziel ist die Cross-Browser-Kompatibilität. Formee normalisiert das Erscheinungsbild Ihrer Formulare in allen gängigen Browsern. Das dritte Ziel besteht darin, die Formulare fantastisch aussehen zu lassen.Das attraktive Standard-Styling wird angewendet und kann vollständig an Ihre Bedürfnisse angepasst werden.
Formularersteller
Nachdem wir nun einige der besten Form-Frameworks kennengelernt haben, wollen wir uns nun mit einigen wirklich hervorragenden Form-Buildern und -Services beschäftigen.
Wufoo
Wenn Sie über Formularersteller sprechen, können Sie einfach Wufoo aufrufen, was bei Weitem eine der besten Optionen in diesem Bereich ist.
Wufoo macht es unglaublich einfach, Webformulare aller Art zu erstellen, unabhängig davon, ob Sie ein wenig Code kennen oder nicht. Alles, was Sie tun müssen, ist, die vorformatierten, vorcodierten Formularelemente auf Ihre Leinwand zu ziehen, wo Sie sie per Drag & Drop ändern und anordnen können.
Ich kann wirklich nicht genug darüber sagen, wie großartig Wufoo sowohl als Builder als auch als allgemeiner Webformularverwaltungsdienst ist. Selbst wenn Sie mit dem manuellen Gestalten von Formularen zufrieden sind, wird der Backend-Entwickler alles sehr schnell kompliziert. E-Mails, Benachrichtigungen, Zahlungsakzeptanz, Analysen, Hochladen von Dateien. Wenn Sie nicht wissen, was Sie tun, kann dieses Zeug ein Albtraum sein. Wufoo-Griffe alles davon für dich Anstelle von Kopfschmerzen erhalten Sie einen optimierten Service und ein hübsches Dashboard, um alle Ihre Formulare zu verwalten.
Wufoo hat ein nettes kleines kostenloses Konto, um Ihnen den Einstieg zu erleichtern, und wenn Ihre Bedürfnisse grundlegend sind, könnten Sie dies alles brauchen. Wenn Sie jedoch für die großen Ligen bereit sind, sehen Sie zwischen 15 und 200 US-Dollar pro Monat.
JotForm
Wenn Sie nach einer guten Wufoo-Alternative suchen, besuchen Sie JotForm. Dieser großartige Service gibt es schon lange, ich habe ihn persönlich genutzt, bevor ich jemals von Wufoo gehört habe.
Die meisten Funktionen von JotForms sind mit Wufoo vergleichbar. Der Formularersteller und die Berichterstellungsfunktionen sind nicht so gut wie die von Wufoo, aber sie sind immer noch perfekt funktionell und so einfach zu bedienen, dass jeder mit ihnen tolle Formulare erstellen kann.
Wie Wufoo kann JotForm alle Ihre komplizierten Anforderungen erfüllen, z. B. Zahlung per PayPal oder Stripe, CAPTCHAs, automatische Vervollständigung und mehr.
Eine Sache, die JotForm wirklich hat, ist eine großartig Preisstruktur. Sie geben allen Benutzern unbegrenzte Formulare mit unbegrenzten Feldern. Anschließend können Sie die Kosten je nach Anzahl der eingegangenen Beiträge, Speicherplatz usw. erhöhen. Der Prämienplan beträgt lediglich 9,95 USD pro Monat und der professionelle Tarif beträgt nur 49,95 USD Sie sind ein Glück, wenn Sie sich den Wufoo-Plan für 200 USD / Monat ansehen.
Was benutzt du?
Das Erstellen, Gestalten und Berichten von Formularen tendiert dazu, scheinbar grundlegende Webdesign-Projekte in den Entwicklungsbereich zu drängen. Machen Sie sich keine Sorgen, Sie sind nicht allein, weil Sie über dieses Zeug verwirrt sind. Deshalb gibt es so viele großartige Tools wie die oben genannten, die Ihnen dabei helfen.
Hinterlassen Sie einen Kommentar und teilen Sie uns mit, was Sie von diesen Optionen halten und welche Methode oder Dienstleistung Sie für Formulare verwenden.