Beste JavaScript-Formulare von 2019

() translation by (you can also view the original English article)

Formulare sind ein wesentlicher Bestandteil fast jeder Website. Sie werden verwendet, um Informationen über Benutzer zu sammeln, sich anzumelden und zu registrieren, um Benutzern Feedback zu geben und um Benutzer mit Website-Administratoren in Verbindung zu setzen. Formulare werden auch für andere Zwecke verwendet, z. B. zur Buchung von Veranstaltungen und Hotelzimmern oder zur Berechnung der Kosten für verschiedene Artikel.

Grundsätzlich können Formulare überall dort verwendet werden, wo Sie Benutzer um Eingabe bitten und die Eingabe dann verarbeiten möchten, um einen Dienst oder zusätzliche Informationen zu erhalten oder bereitzustellen.

Ihre Anforderungen variieren stark in Abhängigkeit von Ihren Gründen für die Aufnahme eines Formulars in Ihre Website. Zum Beispiel müssen Anmelde- und Registrierungsformulare strengen Sicherheitsstandards entsprechen und andere Eingabeelemente verwenden als ein Formular, mit dem Personen ihre Kalorienaufnahme für den Tag berechnen können.

There are a wide variety of professionally crafted JavaScript forms available on CodeCanyon. In this post, we will pick the ten best JavaScript form scripts, builders and frameworks from the large selection available to us in the marketplace.

JavaScript Form Frameworks

Intelligente Formulare

Der erste Punkt in unserer Liste, Smart Forms, ist ein reaktionsschnelles professionelles Formular-Framework mit einer sauberen, konsistenten Formular-Benutzeroberfläche.

Alle Formularelemente werden vollständig mit einer Kombination aus CSS3 und HTML5 erstellt, anstatt sich auf Bilder zu verlassen. Die Formulare basieren auf einem fließenden 12-Spalten-Raster und verwenden jQuery und AJAX, um den Formularen zusätzliche Verbesserungen hinzuzufügen.

Hier ist eine kleine Liste seiner netten Funktionen:

Unterstützung für Google reCAPTCHA
Unterstützung für das Hochladen von Dateien per Drag & Drop
Formatierung für Zahlen und Währungen
Eingabe validierung für internationale Telefonnummern
Exportieren Sie Daten im PDF-, XLS- und CSV-Format

Small Forms ist ein fantastisches Plugin mit ansprechendem Design und browserübergreifender Unterstützung. Jede Form hat drei Stile: elegant, flach und dunkel. Und jeder Stil hat sieben verschiedene Farbschemata. Das Plugin enthält außerdem mehr als 40 Starter-Vorlagen.

Formulare Plus

Forms Plus ist nicht einfach ein Formular-Plugin, sondern ein voll funktionsfähiges Formular-Framework. Es verfügt über eine vollständige Sammlung von Kontakt- und E-Commerce-Formularen. Sie können damit alle Arten von Formularen erstellen, egal wie einfach oder kompliziert.

Schauen Sie sich einige seiner Funktionen an:

Enthält Datums- und Zeitauswahl, Farbauswahl, Schieberegler, CAPTCHA-Felder und Spinner
Über 100 Formularvorlagen und mehr als 40 Farbschemata
13 verschiedene Formulare
serverseitige Validierung
Speichern Sie Daten in einer Datenbank auf dem Server

Die Liste der Funktionen endet hier nicht. Sie können die Demoseite überprüfen, um alles andere zu sehen, was das Plugin bietet.

Spielen Sie einfach mit Hunderten von Arbeitsformularen, die mit Forms Plus auf der Demoseite erstellt wurden. Sie werden mit ziemlicher Sicherheit ein Formular finden, das direkt in Ihre Website aufgenommen werden kann.

Webformular: Mehrzweck-HTML-Formular

Wie der Name schon sagt, können Sie mit diesem Element Mehrzweck-HTML-Formulare erstellen, die Sie in Ihre Website integrieren können. Mit dem Skript können Sie Kontakt-, Anmelde-, Registrierungs- oder Support-Ticketformulare erstellen.

Einige der nützlichen Funktionen im Plugin sind:

voll ansprechendes und mobiles Design
jQuery- und AJAX-basierte Eingabevalidierung
Popup-Warnungen für Fehlermeldungen
Google reCAPTCHA oder mathematikbasiertes CAPTCHA

Die Liste der Funktionen endet hier nicht. Sie sollten einige der auf der Demoseite enthaltenen Formulare überprüfen, um alle Funktionen in Aktion zu sehen.

Beachten Sie, dass das Plugin kein vollständiges Backend enthält. Das Plugin enthält jedoch den gesamten Back-End-Code, den Sie möglicherweise benötigen, um die Daten zu empfangen. Daher sollte die Integration in Ihren eigenen Back-End-Code kein Problem darstellen.

Spezialformulare und Formularersteller

Einfacher Preisrechner

Jede Website, die Produkte oder Dienstleistungen verkauft, profitiert vom Plugin für den einfachen Preisrechner. Sie können es verwenden, um jedes Ihrer HTML-basierten Formulare in einen Preisrechner umzuwandeln und Ihren Kunden ein sofortiges Preisangebot oder eine Schätzung zu geben.

Here are some of its features:

einfach einzurichten
vollständige Dokumentation und viele Arbeitsbeispiele
Unterstützung für die Multiplikation von Werten in verschiedenen Bereichen
E-Mail mit dem Gesamtbetrag und anderen Details an Kunden

Die vier Beispiele in der Online-Demo zeigen vier verschiedene Formen, um Preisangebote für ein Produkt, eine Dienstleistung oder ein Lebensmittel bereitzustellen. Das Formular kann einfach mit CSS angepasst werden, damit es sich in den Rest Ihres Inhalts einfügt.

Es hat von fast jedem Käufer Fünf-Sterne-Bewertungen erhalten, sodass Sie sicher sein können, dass das Plugin fantastisch ist.

Einfaches Kontaktformular

Dieses Plugin soll speziell Kontaktformulare erstellen, und das macht es sehr gut. Es gibt sogar ein einfaches CAPTCHA im Formular-Plugin, um Spammer fernzuhalten.

Das minimalistische Design macht das Formular sehr attraktiv und gibt Ihnen die Möglichkeit, Ihr eigenes CSS hinzuzufügen, um das Erscheinungsbild des Formulars einfach an das Thema Ihrer Website anzupassen.

Es kommt auch mit einer Reihe nützlicher Funktionen:

Live-Validierung ohne erneutes Laden der Seite
serverseitige Validierung für Benutzer, die JavaScript deaktiviert haben
voll ansprechbar und einfach in Ihr Thema zu integrieren
animierte Fehler- und Übermittlungsmeldungen

Das Plugin verwendet PHP GD, um das CAPTCHA zu erstellen. Stellen Sie daher sicher, dass es auf Ihrem Server aktiviert ist. Geben Sie einige ungültige Daten in die Online-Demo ein, um zu sehen, wie das Formular mit der Validierung umgeht.

Galaxy: Anmelden und Registrieren der Seitenvorlage

Mit diesem Plugin können Sie wirklich einzigartige Formulare für die Anmeldung, Registrierung, das Ausfüllen von Einmalkennwörtern oder das Zurücksetzen von Kennwörtern erstellen.

Das Plugin basiert auf dem Bootstrap-Framework und verwendet die Bibliothek Particle.js, um subtile Partikelanimationseffekte auf den Formularseiten hinzuzufügen.

Hier sind einige seiner Funktionen:

basierend auf Bootstrap 4
reaktionsschnelles und mobiles Design
Verwendung von Google-Schriftarten und Material Design-Symbolen
soziale Login-Optionen

Diesem Plugin fehlt ein Back-End, sodass Sie die Funktionalität selbst hinzufügen müssen. Die Demoseite enthält Links zu verschiedenen Anmelde- und Registrierungsformularen, die mit diesem Plugin erstellt wurden.

Ajax-Kontaktformular

Verwenden Sie auf Ihrer Website bereits ein Framework wie Bootstrap, Semantic UI oder Bulma?

Wenn ja, wird Ihnen das Ajax-Kontaktformular gute Dienste leisten. Es reagiert vollständig und nutzt die Funktionen vorhandener Frameworks, um es noch leistungsfähiger und nützlicher zu machen.

Alle von Ihnen erstellten Formulare fügen sich nahtlos in den Rest der Website ein, da sie auf demselben Framework basieren.

Hier sind einige seiner nützlichen Funktionen:

Verwendung von AJAX, um das erneute Laden von Seiten zu verhindern
Einfache Integration in eine HTML-, PHP- oder WordPress-Website
mathematische Anti-Spam-Lösung
Fehlermeldungen für falsche oder unvollständige Formulare
Speichern Sie die Ergebnisse in einer Back-End-Datenbank

Das Plugin bietet eine separate, einsatzbereite Formularvorlage für jedes der unterstützten Frameworks. Überprüfen Sie sie auf der Live-Demo-Seite. Sie können auch ein enthaltenes Back-End konfigurieren, um die über die Formulare gesammelten Informationen in einer Datenbank zu speichern.

Mehrschrittformulare und Formularersteller

jQuery-Schrittassistent mit Step Form Builder

Dieser jQuery-basierte Builder für schrittweise Formulare enthält einen Assistenten, mit dem Sie ganz einfach mehrstufige Formulare erstellen können. Sie müssen selbst keinen Code schreiben! Mit dem Assistenten können Sie alle Arten von Eingabeelementen in Ihre Formulare einfügen, einschließlich Texteingaben, Dateien, Kontrollkästchen und Datumsangaben.

jQuery Step Wizard with Step Form Builder

Einige interessante Funktionen dieses Plugins sind:

21 verschiedene Stile, um Ihr eigenes einzigartiges Design zu kreieren
8 verschiedene Animationseffekte
Cross-Browser-Kompatibilität und responsives Design

Das Plugin ist wirklich unglaublich, wenn Sie Schritt-für-Schritt-Formulare für Ihre Website erstellen möchten. Es gibt viele Optionen, mit denen Sie fast alles anpassen und Ihr Formular wirklich einzigartig machen können.

Experimentieren Sie einfach mit dem Erstellen einiger Formulare in der Online-Demo und Sie werden sehen, was ich meine.

Mehrstufig: jQuery-Anfrageformular

Mehrstufig: Das jQuery-Anfrageformular ist ein weiteres Skript, mit dem Sie erstaunliche mehrstufige Formulare für alle Arten von Szenarien erstellen können, z. B. Benutzerregistrierung, Zahlungen und Buchung von Hotelzimmern.

Die Demoseite enthält eine Kurzanleitung, damit Sie die Formulare problemlos in Ihre eigene Website integrieren können. Und Sie können das Verhalten des Plugins mithilfe von Rückruffunktionen einfach anpassen.

Hier sind einige seiner einzigartigen Merkmale:

unbegrenzte Schritte in jeder Form
voll ansprechbar und leicht anpassbar
basierend auf dem Bootstrap-Framework
SCSS-Dateien sind zur einfachen Anpassung enthalten

Das Plugin bietet eine Validierung der Formulareingabe und ermöglicht es Benutzern nicht, mit dem nächsten Schritt fortzufahren, ohne alle erforderlichen Felder in ihrem richtigen Format auszufüllen. Dies stellt sicher, dass alle Daten, die Sie in übermittelten Formularen erhalten, tatsächlich vollständig und vollständig gültig sind.

Werfen Sie einen Blick auf die fünf verschiedenen Beispielformulare, die im Plugin enthalten sind, und Sie werden feststellen, dass jedes einen anderen Stil hat und eine einzigartige Funktion des Plugins hervorhebt.

... und ein hilfreiches Tool

Passwort-Generator-Skript

Dieses Plugin ist etwas anders als die anderen. Sie können ein Formular erstellen, mit dem Kennwörter generiert werden können. Grundsätzlich kann es wie ein Passwortgenerator für Ihre Website-Besucher wirken.

Sie können es entweder separat oder in Kombination mit anderen Formularen verwenden, um Ihren Benutzern die Möglichkeit zu geben, sichere Kennwörter zu generieren.

Hier sind seine Funktionen:

reaktionsschnelles, benutzerfreundliches Design
einstellbare Passwortstärke
Fügen Sie Kennwörtern Zahlen und Symbole hinzu

Versuchen Sie, mithilfe der Demo einige Kennwörter zu generieren, und prüfen Sie, ob Ihnen die Funktionalität gefällt.

Abschließende Gedanken

In diesem Artikel haben wir einige der besten JavaScript-Formularskripte, Frameworks und Builder ausprobiert, die in CodeCanyon verfügbar sind. Einige von ihnen, wie Smart Forms und Forms Plus, sind vollständige Frameworks, mit denen alle Arten von Formularen erstellt werden können: Buchungen, Registrierung, Kontaktformulare usw. Andere konzentrieren sich einfach darauf, einen bestimmten Formulartyp zu erstellen, z. B. ein Kontaktformular oder einen einfachen Preisrechner, sodass Sie nach dem Kauf nur minimale Arbeit leisten müssen. Gehen Sie einfach die Beschreibungsseite durch und sehen Sie sich einige der Demos an, um herauszufinden, welche Ihnen am besten gefällt.

Wenn keines der hier aufgeführten Elemente Ihren Anforderungen entspricht, gibt es auf CodeCanyon Hunderte anderer Skripte und Plugins. Diese machen es wirklich einfach, in wenigen Minuten professionell aussehende Formulare zu erstellen.