Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

JavaScript- und HTML5-Formulare kostenlos erstellen

Read Time: 8 mins

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Formulare werden für fast jede Website benötigt. Daher ist es sinnvoll, dass viele kostenlose und kostenpflichtige Dienste, Plugins und Bibliotheken verfügbar sind, um das Erstellen von Formularen zu vereinfachen. In diesem Beitrag werde ich einige Tools, Plugins und Bibliotheken auflisten, die verwendet werden können, um kostenlose Formulare online ohne Kenntnisse von JavaScript zu erstellen. Einige dieser Tools sind völlig kostenlos zu verwenden, während andere bis zu einer bestimmten Nutzungsgrenze frei sind.

Ich werde auch einige nützliche Bibliotheken auflisten, die die Erstellung von JavaScript-basierten Formularen erleichtern können, wenn Sie Grundkenntnisse in der Sprache haben. Die Bibliotheken sind kostenlos zu verwenden, so dass Sie so viele Formulare mit ihnen erstellen können, wie Sie möchten.

Beginnen wir mit den Online-Tools, um eigene Formulare zu erstellen.

Kostenlose Tools zum Erstellen von Formularen

Bootsnipp: Bootstrap CSS Formular Builder und Generator

Bootsnipp ist ein Tool, das für alle kostenlos ist. Sie können es verwenden, um so viele Formulare zu erstellen, wie Sie wünschen. Es generiert HTML, das Sie kopieren und auf Ihre eigene Webseite einfügen können.

Mit dem Drag-and-Drop-Formular-Generator können Sie die Formularkomponenten von der linken Seite ziehen und auf der rechten Seite ablegen, um das Formular zu erstellen. Nachdem Sie eine Eingabekomponente abgelegt haben, können Sie darauf klicken, um ein kleines Formular anzuzeigen, und die ID, den Beschriftungstext, den Platzhaltertext und andere elementspezifische Informationen basierend auf der Komponente ausfüllen.

Bootsnipp Form GeneratorBootsnipp Form GeneratorBootsnipp Form Generator

Nachdem Sie Ihr Formular erstellt haben, ist es einfach, den generierten HTML-Code zu erhalten, indem Sie auf die Schaltfläche HTML anzeigen klicken. Probieren Sie dieses Tool aus, wenn Sie Bootstrap-basierte Formulare erstellen möchten.

Die Bootsnipp-Website bietet tatsächlich auch ein paar andere Tools, die Sie nützlich finden könnten, wie einen Button Builder und einen Seitengenerator.

jQuery formBuilder

Dieser jQuery-basierte Formular-Builder ist ebenfalls völlig kostenlos und bietet eine sehr benutzerfreundliche Drag-and-Drop-Methode zum Erstellen von Formularen. Sie müssen nur verschiedene Formularkomponenten aus der Liste auf der rechten Seite ziehen und auf der linken Seite platzieren. Sobald Sie dies getan haben, können Sie auf die Bearbeiten-Schaltfläche in der oberen rechten Ecke der Formularkomponente klicken, um alle Attribute wie den Platzhaltertext, ob die Komponente erforderlich ist, und vieles mehr zu bearbeiten.

jQuery Form BuilderjQuery Form BuilderjQuery Form Builder

Eine weitere tolle Sache über dieses Tool ist, dass Sie Ihre Formulare in einer von 27 verschiedenen Sprachen erstellen können.

Alle Formulare oder Formularvorlagen, die Sie mit diesem Tool erstellen, können einfach mit dem formRender-Plugin gerendert werden. Weitere Informationen zum Formularerstellungs- und -renderprozess finden Sie auf der offiziellen Website.

pForm: Kostenloser HTML-Formular-Generator

pForm ist ein weiterer kostenloser HTML-basierter Formular-Builder, mit dem Sie Ihre eigenen Formulare erstellen können, indem Sie drei einfache Schritte ausführen.

Sie beginnen mit der Auswahl eines Farbschemas für das Formular und fügen dann einige Eingabefelder hinzu. Nachdem Sie die Eingabeelemente zu Ihrem Formular hinzugefügt haben, können Sie den Wert verschiedener Attribute wie Beschriftungstext, Feldtyp und andere Attribute festlegen.

pForm Free HTML Form BuilderpForm Free HTML Form BuilderpForm Free HTML Form Builder

Nachdem Sie alle gewünschten Felder zu Ihrem Formular hinzugefügt haben, klicken Sie einfach auf die Schaltfläche Formular speichern, um den generierten HTML-Code herunterzuladen. An diesem Punkt haben Sie auch die Möglichkeit, eine Vorschau des Formulars anzuzeigen, bevor Sie die Formulareingabefelder herunterladen oder zurückgehen, um die Formulareingabefelder erneut zu bearbeiten.

Erstellen Sie ein Formular mit pForm – es ist unglaublich einfach, und Sie können auch Ihr eigenes Farbschema für das Formular auswählen.

Weitere fortgeschrittene Formular Builder-Tools

Die beiden in diesem Abschnitt vorgestellten Dienste bieten eine einfache Möglichkeit, komplexe Formulare zu erstellen, aber ihre kostenlosen Pläne bieten nur sehr begrenzte Funktionen. Wenn Sie komplizierte Formulare erstellen möchten, sind diese Tools eine Möglichkeit, dies zu tun. Wenn Sie jedoch über grundlegende Kenntnisse in HTML und JavaScript verfügen, ist es für Sie möglicherweise billiger und besser, eines der Formular-Plugins von CodeCanyon zu verwenden, um Ihre Formulare zu erstellen.

JotForm

JotForm hat einen kostenlosen Starter-Plan, mit dem Sie bis zu 5 Formulare erstellen und 100 monatliche Einreichungen haben können. Sie erhalten auch etwa 1.000 monatliche Formularansichten. Die Formulare, die Sie generieren, enthalten JotForm Branding, wenn Sie das kostenlose Starterpack verwenden.

JotFormJotFormJotForm

Wenn Ihnen das JotForm-Branding nichts ausmacht und Ihre Nutzung innerhalb der Grenzen bleibt, ist dieses Tool eigentlich sehr einfach zu bedienen. Nachdem Sie sich angemeldet haben, können Sie mit der Verwendung der Vorlagen beginnen, um eigene Formulare zu erstellen. Die Vorlagen richten sich an alle Arten von Bedürfnissen, von Zahlungs- und Hotelbuchungsformularen bis hin zur Kurs- und Veranstaltungsregistrierung.

Cognito-Formulare

Cognito Forms bietet auch einen Formular-Builder mit eingeschränkten Funktionen in seinem kostenlosen Plan. Sie erhalten das Cognito Forms-Branding in den von Ihnen erstellten Formularen, Sie können jedoch so viele Formulare erstellen, wie Sie wünschen. Die Einreichung von Formularen ist jedoch im kostenlosen Plan auf 500 pro Monat begrenzt. Dies ist immer noch das Fünffache des von JotForm aufgestellten Limits.

Cognito FormsCognito FormsCognito Forms

Mit dem Formular-Builder-Tool können Sie entweder ein Formular von Grund auf neu erstellen oder integrierte Vorlagen verwenden. In beiden Fällen werden Sie wahrscheinlich feststellen, dass es das funktionsreichste und benutzerfreundlichste aller bisher aufgeführten Formular-Builder-Tools ist.

Erstellen Sie ein Formular mit einer der Cognito-Formularvorlagen, und prüfen Sie, ob es alle Ihre Anforderungen erfüllt.

Kostenlose Plugins und Bibliotheken zum Erstellen von Formularen

Wenn Sie nichts dagegen haben, selbst etwas Code zu schreiben, um Ihre Formulare zu erstellen, können Sie alle kostenlosen JavaScript- oder jQuery-Plugins und -Bibliotheken nutzen, um Ihre eigenen Formulare mit dem genauen Feature-Set zu erstellen, das Sie für ein bestimmtes Projekt benötigen.

Hier sind einige Bibliotheken, die Ihnen den Einstieg erleichtern.

jQuery-Validierungs-Plugin

Sie können das jQuery Validation Plugin verwenden, um Ihre eigenen benutzerdefinierten Validierungsregeln und Fehlermeldungen zu schreiben, die einfach in vorhandene Formulare integriert werden können. In der Tat haben wir auch ein Tutorial für jQuery-basierte Formularvalidierung, die dieses spezielle Plugin verwendet. Dies sollte Ihnen helfen, den Formularerstellungsprozess zu starten.

Auch wenn Sie bereits ein grundlegendes HTML5-Formular erstellt haben, können Sie das Plugin dennoch verwenden, um die Validierung mit einer einzigen Codezeile hinzuzufügen. Es wird die Benutzererfahrung für Benutzer, die Ihre Website besuchen, erheblich verbessern. Sie haben die volle Kontrolle über die Platzierung und das Styling von Fehlermeldungen, und die Bibliothek stellt sicher, dass sie nicht aufdringlich angezeigt werden.

Parsley

Diese Bibliothek ermöglicht es Ihnen auch, die Eingabevalidierung in alle Ihre Formulare zu integrieren, aber im Gegensatz zum jQuery-Validierungs-Plugin verwendet sie HTML-Datenattribute anstelle von JavaScript für die Validierung. Das Hinzufügen einer Validierung zu einem Formular ist so einfach wie die Aufnahme des Attributs data-parsley-validate in das <form>-Element.

Sie sollten einen Blick auf einige der auf der offiziellen Webseite erwähnten Beispiele werfen, um ein gutes Verständnis der Funktionsweise und Funktionen der Bibliothek zu erhalten.

Pickadate

Jeder, der eine benutzerfreundliche, mobilfreundliche, responsive und leichte jQuery-basierte Datums- und Zeiteingabeauswahl hinzufügen möchte, würde Pickadate als sehr nützlich empfinden.

Es ist sowohl touch- als auch tastaturfreundlich. Die Auswahl unterstützt über 40 verschiedene Sprachen, so dass Ihre Nutzer wahrscheinlich in der Lage sein werden, die Daten in ihrer Muttersprache wählen zu lassen.

Das Plugin bietet eine Menge Anpassungsoptionen für die Datumsauswahl und die Zeitauswahl.

Zxcvbn

Dieser seltsam benannte Schätzer für die Passwortstärke ist eigentlich ein großartiges Tool, um Benutzern die relative Stärke von Passwörtern mitzuteilen, die sie bei der Anmeldung über ein von Ihnen erstelltes Formular verwenden möchten.

Es basiert auf Musterabgleich und gewichtet rund 30.000 gängige Passwörter, gebräuchliche Namen, Nachnamen und Muster wie Datumsangaben oder Tastatursequenzen wie qwertyuiop usw., um festzustellen, ob ein Passwort stark genug ist. Es lohnt sich auf jeden Fall einen Besuch, wenn Sie Ihren Benutzern eine freundliche Möglichkeit geben möchten, ihre Passwortstärke zu bestimmen.

FilePond

FilePond ist eine JavaScript-Bibliothek, mit der Sie Dateiuploadfunktionen in Ihren Formularen mit beeindruckenden Funktionen implementieren können. Eines der Dinge, die Sie sofort über dieses Plugin mögen wird, ist seine Benutzerfreundlichkeit.

Es akzeptiert Verzeichnisse, Dateien, Blobs und vieles mehr als Eingabe. Alle hochgeladenen Bilder werden optimiert, in der Größe angepasst und auf der Clientseite zugeschnitten, um die Upload-Geschwindigkeit drastisch zu verbessern und gleichzeitig die Serverlast zu reduzieren.

Die Liste der Funktionen endet hier nicht! Ich schlage vor, dass Sie diese Bibliothek prüfen, wenn Sie nach einer JavaScript-Bibliothek suchen, um das benutzerfreundliche Hochladen von Dateien in Ihren Formularen zu erleichtern.

Letzte Gedanken

In diesem Beitrag haben wir einen Blick auf einige der beliebten Formularerstellungstools, Plugins und Bibliotheken, die verwendet werden können, um in kürzester Zeit funktionsreiche HTML-Formulare zu erstellen.

Wenn Sie keinen Code schreiben möchten, generieren die in der ersten Hälfte des Artikels erwähnten kostenlosen Formular-Generator-Tools den HTML-Code für Sie. Sie müssen nur die Komponenten, die Sie in Ihre Formulare aufnehmen möchten, ziehen und ablegen. Einige dedizierte Formularerstellungsdienste geben Ihnen auch viele andere Funktionen, aber sie werden in der Regel bezahlt, und die kostenlose Version gibt Ihnen Zugriff auf eingeschränkte Funktionalität.

Die Plugins und Bibliotheken, die später im Artikel erwähnt werden, werden für diejenigen, die ihre eigenen Formulare mit der genauen Funktionalität erstellen möchten, die sie benötigen, hilfreich sein. Diese Bibliotheken machen es ihnen einfach einfacher, die erforderliche Funktionalität hinzuzufügen, während sie eine Menge Kontrolle über das Aussehen und Verhalten der Formulare haben.

Sie können auch einen Blick auf verschiedene Plugins und Skripte auf CodeCanyon werfen, um Ihnen zu helfen, alle Arten von Formularen mit Leichtigkeit zu erstellen. Sie sind eine gute Option für Leute, die nicht alles von Grund auf neu programmieren möchten, aber dennoch die Kontrolle über die Formulare im Vergleich zu Drittanbieterdiensten haben möchten.

Advertisement
Did you find this post useful?
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.