Der stellvertretende Projektmanager stepFORM Artem Petrov erläuterte , wie Webformulare benutzerfreundlich gestaltet, vor Spam geschützt und die wichtigsten Entwicklungsmethoden aufgeführt werden können.Webformulare sind ein einfaches Tool und eine der Hauptquellen für Leads auf der Website. Mit seiner Hilfe ist es möglich, von jeder Seite aus einen guten Strom von Anwendungen zu erstellen. Damit das Webformular einen stetigen Gewinnstrom erzielt und nicht nur ein schwaches Rinnsal nicht zielgerichteter Anwendungen, ist es wichtig, es für Besucher bequem zu gestalten. Und vergessen Sie nicht die Sicherheit, wenn Sie keinen Spam anstelle von Leads erhalten möchten.
So verbessern Sie Webformulare für Benutzer
Nutzen Sie die Leistung von Web Forms 2.0.
Webformulare mussten immer verbessert werden. Standard-HTML-Tools konnten für viele Aufgaben von Entwicklern keine Lösung bieten. JavaScript kam zur Hilfe, mit deren Hilfe Sie den Inhalt der Seite nach Belieben bearbeiten können. Eine ähnliche Situation war bei CSS. Viele Animationen und visuelle Effekte werden mithilfe von Skripten implementiert.
Mit dem Aufkommen von HTML5 und CSS3 wurden die Webentwicklungsfunktionen erweitert. Um viele Standardaufgaben zu lösen, mussten Sie keine Skripte mehr verwenden. HTML5 hat Webformularen neue Funktionen hinzugefügt, einschließlich der Web Forms 2.0-Spezifikation. Entwickler konnten die neuen Werte für das Typattribut verwenden. Um Benutzern bequeme Webformulare anzubieten, können Sie Folgendes verwenden:
Datum und Uhrzeit
Viele Websites, z. B. Hotelreservierungen oder Taxis, verwenden Widgets, um Datum und Uhrzeit auszuwählen. In HTML5 können Sie einen einfachen Kalender mithilfe der folgenden Felder implementieren:
- Datum - Jahr, Monat und Tag;
- datetime - Jahr, Monat, Tag, Stunde, Minute, Sekunde und auch Zeitzone (veralteter Typ, es wird empfohlen, datetime-local zu verwenden);
- datetime-local - analog zu datetime ohne Zeitzone;
- Monat - Jahr und Monat;
- Woche - Jahr und Woche Nummer;
- Zeit - Zeit in Stunden, Minuten, Sekunden, Bruchteilen von Sekunden.
Numerischer Zähler
Um viele Probleme zu lösen, reicht es aus, ein reguläres Textfeld zu verwenden. Wenn Sie jedoch einen genauen numerischen Wert eingeben müssen, können Sie ein Feld mit der Typennummer verwenden. Seine Attribute
min und max bestimmen den minimalen und maximalen Wert, und
step ist der Schritt. Ein Beispiel:
<input type="number" value="0" min="0" max="10" step="1">
Schieberegler
Es gibt viele JavaScript-Bibliotheken, mit denen Sie Schieberegler oder Schieberegler mit einer Auswahl von Werten aus einem bestimmten Bereich erstellen können. Sie können jetzt einen einfachen Schieberegler mit HTML erstellen. Ein Beispiel:
<p> 0 50:</p> <div> <input type="range" name="volume" min="0" max="50"> <label for="volume"></label> </div>
E-Mail und Telefon
Die wichtigsten Informationen, die über Formulare gesammelt werden, sind Telefon und E-Mail. Web Forms 2.0 bietet Felder mit diesen Typen. Ein Beispiel:
<div> <input type="tel" name="phone" value=""> <label for="phone"></label> </div> <div> <input type="email" name="email" value=""> <label for="email"> email</label> </div>
Farbwähler
HTML5 enthält Felder zur Auswahl von Farben. Sie können beliebige Werte im Hexadezimalzahlensystem angeben und Benutzer zur Auswahl auffordern. Ein Beispiel:
<p> :</p> <div> <input type="color" name="color1" value="#ff0000"> <label for="color1"> 1</label> </div> <div> <input type="color" name="color2" value="#f6b73c"> <label for="color2"> 2</label> </div>
Muster
Mit dem
pattern können Sie die Eingabe von Daten in das Formular überprüfen. Ein Beispiel:
<input type="password" name="pwd" pattern=".{12,}" title=" 12 "> <input type="password" name="pwd" pattern="(?=.*\d)(?=.*[az])(?=.*[AZ]).{12,}" title=" 1 , 12 "> <input type="url" name="address" pattern="https?://.+" title=" https://">
Andere nützliche Attribute
HTML5 verfügt über weitere nützliche Attribute für Formulare.
- Mit dem
placeholder können Sie Text eingeben, der angezeigt wird, wenn das Feld leer ist und mit Fokus verschwindet. - Das
autofocus Attribut fokussiert das Feld nach dem Laden der Seite automatisch. - Das
required Attribut gibt an, dass das Feld erforderlich ist. - Das Attribut "Autocomplete" aktiviert die Autocomplete des Formulars (merkt sich zuvor eingegebene Daten). Durch Deaktivieren deaktiviert
off: autocomplete="off"
Web Forms 2.0 hat die Entwicklung von Webformularen vorangetrieben. Heute ist die Anatomie von Webformularen viel komplizierter geworden. Felder und Dropdown-Listen können bei Auswahl dynamisch miteinander verbunden und geladen werden. Auf der Serverseite gibt es ein System zur Verarbeitung eingehender Anforderungen, die an viele Kommunikationskanäle (E-Mail, SMS, CRM, Instant Messenger) gesendet werden. Daher reicht HTML immer noch nicht aus, um nicht standardmäßige Aufgaben zu lösen.
So schützen Sie Webformulare vor Spam
Daten validieren. Dies schützt Sie vor der Eingabe unerwünschter Informationen und verhindert, dass die Website über das Formular gehackt wird. Die Validierung kann nicht nur auf der Serverseite, sondern auch auf der Clientseite durchgeführt werden. Es ist wichtig, dass die Validierung immer auf der Serverseite durchgeführt wird, da die Clientseite leicht umgangen werden kann, indem einfach die JavaScript-Verarbeitung im Browser deaktiviert wird.
Die wichtigste und einfachste Möglichkeit, Formulare vor Spam zu schützen, ist Captcha. Es reicht völlig aus, nicht als Spam eingestuft zu werden. In einigen Fällen können Sie auf andere Tricks zurückgreifen, um Spam zu erkennen und vor Spam zu schützen:
Das dynamische Generieren von Formularen mit JavaScript ist eine der guten Möglichkeiten, um zu verhindern, dass Spam-Bots Ihren Posteingang angreifen. Schließlich werden sie in der Regel so gestaltet, dass alle Formularfelder auf der Seite vorab angezeigt werden.
Eine andere einfache Möglichkeit besteht darin, ein verstecktes Feld mit einem Namen zu platzieren, zum Beispiel:
<input type="hidden" name="phone" value="">
Site-Benutzer sehen das Feld nicht und füllen es nicht aus. Und der Spam-Bot füllt automatisch alle Felder aus, damit die Formularübermittlung erfolgreich ist. Wenn sich herausstellt, dass das ausgeblendete Feld ausgefüllt ist, füllt der Bot das Formular aus und Daten daraus können abgelehnt werden.
In der Regel füllen Spam-Bots ein Formular in Sekunden aus, was ein normaler Benutzer nicht kann. Um den Bot zu identifizieren, reicht es daher aus, zu überprüfen, wie viel Zeit seit dem Aufrufen der Seite und dem Senden des Formulars vergangen ist.
Bei vielen Diensten, z. B. Akismet, können Sie Spam anhand der von Ihnen eingegebenen Daten filtern. Wenn Sie auf anderen Websites Spammer verwendet haben, hilft der Dienst dabei, dies zu identifizieren, und ermöglicht nicht das Senden unerwünschter Informationen.
Alle diese Schutzmethoden können in Kombination verwendet werden - dies erhöht den Schutzgrad gegen verschiedene Arten von Spam-Bots.
Tools zur Formularentwicklung
Die Entwicklung von Entwicklungswerkzeugen hat das Erstellen von Formularen erleichtert. Normales HTML wurde durch JSON-Schema-basierte Generierung von Formularinhalten ersetzt.
Es sieht ungefähr so aus. Json besteht aus Feldern, ihren Typen, Attributen und Daten:
{ "schema": { "message": { "type": "string", "title": "" }, "author": { "type": "object", "title": "", "properties": { "name": { "type": "string", "title": "" }, "gender": { "type": "string", "title": "", "enum": [ "male", "female", "alien" ] }, "magic": { "type": "integer", "title": " ", "default": 42 } } } } }
Die Ausgabe generiert eine Form der folgenden Form:
Das JSON-Schema löst mehrere Probleme:
- Sparen Sie Zeit bei der Formularentwicklung
- Reduzieren Sie die Gesamtmenge an Code.
- Formen funktional flexibel machen;
- Definieren Sie eine Struktur, die für alle Entwickler verständlich ist.
Im Folgenden finden Sie spezielle Tools und Bibliotheken, mit denen Sie die Entwicklung von Webformularen vereinfachen können.
JavaScript-Clientbibliothek zum Generieren von Bootstrap 3-Formularen basierend auf JSON-Schemas. Generierte Formulare umfassen die clientseitige Datenüberprüfung.
Eine einfache React-Komponente zum Erstellen eines HTML-Formulars aus einem JSON-Schema mithilfe der Bootstrap-Semantik.
Reagieren Sie auf eine Bibliothek, mit deren Hilfe Sie herausfinden können, wie Sie Werte aus einem Status abrufen, die Validierung implementieren, das Senden von Formularen und Fehlermeldungen verarbeiten
Die Komponente generiert ein schemabasiertes Formular für Vue.js. Enthält integrierte Validatoren, 21 Feldtypen, Bootstrap-Vorlagen und benutzerdefinierte Stile und kann mithilfe benutzerdefinierter Felder erweitert werden.
AngularJS-Befehlssatz zum Generieren von Bootstrap 3-Formularen aus dem JSON-Schema. Mit dem Tool können Sie die Reihenfolge und den Typ der Felder anpassen, den Wysiwyg-Editor verwenden und Tools zur Auswahl von Datum und Farbe enthalten. Viele Add-Ons sind ebenfalls verfügbar, um die Funktionalität zu erweitern.
Sie können das fertige Formular mit einer externen API verbinden, um Daten per E-Mail zu senden. Der Dienst erfordert nicht die Verwendung von PHP oder JavaScript, Sie müssen nur die Felder festlegen. Dies ist besonders nützlich für Websites, die aus statischen Seiten bestehen.
Das Tool erstellt Formulare mithilfe von JSON-Schemas. Enthält Datenbindung, Validierung und benutzerdefinierte Stile für benutzerdefinierte Widgets. Funktioniert mit Redux- und React / Angular-Unterstützung.
Eine ungewöhnliche Lösung ist ein Formulargenerierungsprogramm, das auf einem PC installiert ist. Erstellt Formulare mit unterschiedlichem Design Modern Flat, Metro, Bootstrap, Solid. Es generiert nicht nur HTML, sondern auch einen PHP-Handler zum Senden von Daten aus dem Formular.
Formularkonstruktoren
Vor einigen Jahren mussten komplexe Formen manuell entwickelt werden. Jetzt ist die WYSIWYG-Technologie erschienen, mit der Sie Formulare im visuellen Modus ohne Verwendung von Code erstellen können. Auf seiner Grundlage wurden zahlreiche Designer geschaffen. Schauen wir uns die berühmtesten an.
Es hilft, Formulare in einer einfachen Oberfläche zu erstellen (eignet sich jedoch besser für Umfragen), Daten in Tabellen zu sammeln und Statistiken zu Antworten auf Benutzerfragen anzuzeigen. Formulare können nur als Referenz verwendet werden, sie können nicht auf der Website platziert werden. Es gibt auch keine Möglichkeit, eigene Stile und Skripte hinzuzufügen. Trotzdem ist es ein gutes Werkzeug, um Mitarbeiter zu interviewen oder einen Termin für eine Veranstaltung zu vereinbaren.
Ein Tool mit einer größeren Funktionalität als Google Forms. Ermöglicht das Erstellen interaktiver Formulare und Umfragen mit nicht standardmäßiger Übergangslogik zwischen Feldern. Das beste Tool für Vermarkter, wenn Sie eine Idee testen oder Kontakte für Newsletter sammeln müssen.
Konstruktor mit einer einfachen Oberfläche zum Erstellen von Online-Formularen und -Profilen. Ermöglicht das Hinzufügen verschiedener Berechnungen zu den Formularen. Dies ist praktisch für Formulare, mit denen der Benutzer die Kosten eines Produkts oder einer Dienstleistung anhand der ausgewählten Parameter unabhängig berechnen kann. Die erstellten Formulare können auf der Website in Form eines interaktiven Widgets installiert werden, das als Referenz in sozialen Netzwerken und Instant Messenger verwendet wird. Mit dem Tool können Sie mithilfe eines speziellen Widgets eigene Skripte und CSS-Code hinzufügen.
Hilft bei der Erstellung kreativer und personalisierter Formulare für jeden Zweck mit einem einfachen Drag & Drop-Mechanismus. Der Service bietet Personalisierungs- und Branding-Tools, mit denen Sie benutzerdefinierte CSS bearbeiten und Skripte hinzufügen können.
Die im Service erstellten Formulare können auf standardmäßige Weise oder in Form einer schwebenden Schaltfläche zur Site hinzugefügt werden. Der Benutzer zeigt darauf und sieht das Formular. Im Tool können Sie Zugriffsrechte konfigurieren. Zum Beispiel, damit Ihre Mitarbeiter eingehende Anwendungen anzeigen und kommentieren können, aber den Inhalt des Formulars selbst nicht ändern können.
Benutzerdefiniertes Formular-Design
Die Richtung existiert noch, aber es wird schwieriger, individuelle Entwicklungen zu verkaufen - man muss mit den Designern konkurrieren. Es ist notwendig, dem Kunden zu beweisen, warum er die Entwicklung bei Ihnen bestellen sollte, und nicht den Konstruktor zu verwenden.
Das Erstellen eines Webformulars kann je nach Komplexität lange dauern. Insbesondere, wenn Sie das Formular in Zahlungsaggregatoren integrieren, Statistiken sammeln, Anforderungen zu CRM hinzufügen und vieles mehr müssen. In diesem Fall ist es für den Entwickler einfacher, einen vorgefertigten Satz von Modulen zu übernehmen oder ihn auf dem Designer zu erstellen. In der Regel haben Designer eine vorgefertigte Integration von Diensten von Drittanbietern, die einfach zu verbinden sind. Dank dessen kann sich der Entwickler darauf konzentrieren, das Formular selbst und nicht seine Komponenten zu erstellen.
Designer haben bei weitem nicht alle notwendigen Funktionen. Daher erlauben viele die Verwendung von benutzerdefiniertem Code in Formularen und stellen offene APIs bereit, damit Webmaster die Funktionalität verfeinern können. Daher erstellen einige Entwickler Formulare für ihre Kunden basierend auf Designern. Es gibt Vorteile für alle Seiten: Entwickler bringen neue Kunden zu Designern, bieten ihre Dienstleistungen im Gegenzug an und verschwenden keine Zeit damit, ähnliche Funktionen zu entwickeln. Es ist logisch, dass sie sich ergänzen.
Oft beenden Entwickler das Erscheinungsbild des Formulars: die Anordnung von Elementen und Blöcken. Schließlich möchte jeder Kunde Individualität, damit seine Form nicht stereotyp ist und nicht den anderen ähnelt. Manchmal müssen Entwickler wenig bekannte Dienste verbinden, die nur ein bestimmter Client verwendet. Zum Beispiel ein eigener CRM- oder E-Mail-Verteilungsserver.
Formulardesigner und benutzerdefiniertes Formulardesign sind etwas andere Dinge. Ein großes Unternehmen kann es sich leisten, einen Entwickler beiseite zu legen oder einzustellen, wenn es ein verwirrtes Webformular benötigt. Zum Beispiel ein Hotelbuchungsformular mit einer Auswahl an Städten und einer Vielzahl von Parametern, Zahlungsakzeptanz und CRM-Integration. Für kleine und mittlere Unternehmen ist es rentabler, dem Designer ein kostengünstiges Formular zu erstellen und Kundenanwendungen anzunehmen. Daher werden Designer Formularentwickler nicht vollständig vom Markt verdrängen.
Fazit
HTML 5 kann zusammen mit der Web Forms 2.0-Spezifikation, obwohl es zur Entwicklung von Formularen beigetragen hat, JavaScript immer noch nicht ersetzen. Das JSON-Schema ermöglichte es, so effizient wie möglich mit dem Formularinhalt zu arbeiten und die gesamte Feldstruktur dynamisch zu generieren. Zusätzlich zu den Entwicklungstools gibt es viele praktische Dienste für Nicht-Programmierer.
Je nach den Anforderungen des Unternehmens und des Budgets kann jede Lösung verwendet werden. Die Hauptsache ist, dass die Formulare benutzerfreundlich und sicher sind - vor Spam-Bots geschützt und die Site durch die Felder gehackt.
Von den Redakteuren
Netologiekurse zum Thema: