() translation by (you can also view the original English article)
In unseren früheren Beiträgen haben wir einige kostenlose Plugins und Tools aufgelistet, die Sie verwenden können, um Ihre eigenen Formulare zu erstellen. Ein großer Nachteil der Verwendung von kostenlosen Werkzeugen, um Formulare zu erstellen, ist, dass das Endprodukt möglicherweise nicht so professionell und poliert aussieht, wie Sie erwarten. Ebenso ist die Verwendung freier Bibliotheken zum Programmieren ihrer eigenen Formulare möglicherweise nicht möglich für Personen, die nicht über viel Programmiererfahrung verfügen.
-
JavaScriptErstellen von kostenlosen JavaScript- und HTML5-Formularen -
HTML5Formulareingabevalidierung mit nur HTML5 und Regex -
JavaScriptBeste JavaScript-Formulare im Jahr 2019 -
JavaScriptEinfache Formularvalidierung mit jQuery
In solchen Fällen können Sie entweder Dienste von Drittanbietern nutzen – was etwas teuer sein kann – oder Sie können ein Premium-Framework, einen Formular-Builder oder ein Plugin erwerben, das für einen bestimmten Zeitraum kostenlosen Support bietet. In diesem Tutorial werfen wir einen Blick auf eines der beliebtesten und funktionsreichsten Formularframeworks, das auf CodeCanyon verfügbar ist, um Ihre eigenen JavaScript-Formulare zu erstellen.
Smart Forms Übersicht
Das Tool, mit dem wir heute unsere eigenen Formulare erstellen, ist Smart Forms. Dieses Formular-Framework hat zum Zeitpunkt des Schreibens 3819 Verkäufe erzielt und hat eine durchschnittliche Bewertung von 4.5 basierend auf 159 Bewertungen. Die meisten Käufer, die das Framework in ihrer Website verwendet haben, mögen die Codequalität, die Funktionen, das Design, die Flexibilität und den aktiven Kundensupport.
Einige der Merkmale dieses Frameworks sind:
- Responsive Framework mit über 40 Startervorlagen
- Mehrstufige Formulare und Modale Formulare
- Datumsauswahl-, Zeitauswahl-, Monatsauswahl- und Farbauswahl-Widgets und mehr
- Drag-and-Drop-Datei-Uploads
- AJAX und PHP mit Unterstützung für Google reCAPTCHA
- Und die Liste geht weiter!
Wenn Sie viele professionell aussehende Formulare erstellen möchten, wäre die Verwendung des Smart Forms-Frameworks eine gute Wahl. Sehen Sie sich alle Funktionen und Bewertungen auf der Framework-Homepage an.
Beispielformulare
Um zu zeigen, was Sie mit Smart Forms erstellen können, finden Sie hier einige Beispiele mit unterschiedlichen Themen und Layouts. Sie können wählen, ob Sie einen Social-Media-Login-Button oben oder nebeneinander haben möchten. Es stehen viele Farbschemata und 3 verschiedene Themes zur Verfügung.
Hier ist ein Anmeldeformular.
Und hier ist das gleiche Login-Formular mit einer anderen Farbe und den Social Media Login Buttons auf der Oberseite:
In ähnlicher Weise sind hier zwei Formulare, die sich auf das Platzieren von Aufträgen beziehen. Wie Sie sehen können, ist es möglich, ganz andere Layouts basierend auf Ihren Bedürfnissen zu erstellen.
Im nächsten Formular können Sie sehen, wie Smart Forms attraktives Styling wie große Produktoptionskarten erstellen kann.
Die Download-Dateien enthalten Hunderte solcher Vorlagendateien, so dass Sie fast immer in der Lage sein, eine Vorlage zu finden, die Ihren Bedürfnissen und Styling entspricht. Nicht nur das, aber die Dokumentation im Download ist leicht zu verstehen, falls Sie ein völlig neues Layout für Ihre Formulare erstellen möchten.
Dateistruktur und andere Grundlagen
Sobald Sie Smart Forms gekauft haben, erhalten Sie eine detaillierte Dokumentation über den Prozess der Erstellung Ihrer eigenen Formulare und deren Hinzufügen zu Ihrer eigenen Website im ZIP-Download. Hier sind einige wichtige Punkte, die Sie sich merken müssen:
- Die Formulare basieren für den größten Teil des Stylings auf einer einzelnen Haupt-CSS-Datei. Stellen Sie sicher, dass Sie CSS-Reset-Dateien laden, bevor Sie das CSS für das Plugin laden.
- Die Formulare unterstützen Font Awesome-Symbole und JavaScript-Funktionen wie AJAX-Übermittlung und Formularvalidierung. Sie können diese Funktionen jedoch deaktivieren, wenn Sie sie nicht benötigen.
- Das Framework lädt ein zusätzliches Fallback-Stylesheet für IE8.
Es gibt drei Ordner innerhalb des extrahierten Archivs genannt dark, flat und light. Dies sind die drei Hauptthemes für verschiedene Formulare. Jeder der weiteren enthält drei verschiedene Ordner. Dies sind:
AJAX PHP: Dieser Ordner enthält funktionierende AJAX PHP Formulare wie ein Kontaktformular, ein Bestellformular und vieles mehr.
JavaScript-Erweiterungen: Dieser Ordner enthält alle Beispiele für die Formularüberprüfung sowie die Datumsauswahl und andere Widgets.
Vorlagenbeispiele: Dieser Ordner enthält HTML- und CSS-basierte Formularvorlagen, mit denen Sie Ihre Formulare schneller erstellen können. Diese Vorlagen können auch als grundlegende Richtlinie dienen, wenn Sie ihre eigenen Formulare erstellen.
Beim Erstellen eigener Formulare müssen Sie zunächst die erforderlichen CSS-Dateien in den folgenden Zeilen laden:
1 |
<link rel="stylesheet" type="text/css" href="css/smart-forms.css"> |
2 |
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> |
Sie müssen Ihre Formulare in zwei div-Elemente mit den Klassen smart-wrap und smart-forms umschließen.
Erstellen eines Kontaktformulars mit Smart Forms
Die Dokumentation enthält eine detaillierte und leicht verständliche Anleitung zum Erstellen verschiedener Arten von Formularen, in der erläutert wird, wie Texteingabeelemente, Kontrollkästchen, Optionsfelder und Dateieingänge hinzugefügt werden, wobei ein Theme Ihrer Wahl auf sie angewendet wird.
In diesem Tutorial erstellen wir ein Kontaktformular mit einem blauen Theme und Feldern für Name, E-Mail, Betreff und Nachricht. Wir müssen eine zusätzliche CSS-Datei laden, um das blaue Design anzuwenden.
1 |
<link rel="stylesheet" type="text/css" href="css/smart-forms.css"> |
2 |
<link rel="stylesheet" type="text/css" href="css/smart-themes/blue.css"> |
3 |
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> |
Hier ist unser erstes Markup zum Erstellen des Formulars mit einer grundlegenden Skelettstruktur:
1 |
<div class="smart-wrap"> |
2 |
<div class="smart-forms smart-container wrap-3"> |
3 |
|
4 |
<div class="form-header header-blue"> |
5 |
<h4><i class="fa fa-comments"></i>Contact us</h4> |
6 |
</div>
|
7 |
|
8 |
<form method="post" action="/" id="contact-form"> |
9 |
<div class="form-body theme-blue"> |
10 |
|
11 |
</div>
|
12 |
<div class="form-footer"> |
13 |
<button type="submit" class="button btn-blue pushed">Submit</button> |
14 |
</div>
|
15 |
</form>
|
16 |
|
17 |
</div>
|
18 |
</div>
|
Die wrap-3-Klasse wird verwendet, um die Breite des Formulars zu steuern, das Sie erstellen. Sie können es an einer beliebigen Stelle von wrap-0 bis wrap-4 festlegen. Wenn Sie KEINE CSS-Regeln ändern, erstellt die Klasse wrap-3 die schmalste Form, und wrap-4 deckt die gesamte Breite des Körperelements ab. Sie können eigene CSS-Regeln mit zusätzlichen Klassen wie wrap-5, wrap-6 usw. erstellen, um die Formularbreite anzupassen.
Sie müssen für das Design, das Sie anwenden möchten, eine Klasse mit dem Namen header-{colorname} anwenden. Der colorname entspricht der zusätzlichen CSS-Datei, die Sie geladen haben. Dasselbe gilt für die theme-blue Klasse des body Elements.
Sie können das Styling auf Ihre Schaltflächenelemente anwenden, indem Sie einen Klassennamen wie pushed, button-pointed, button-left etc. hinzufügen. Weitere Informationen zum Styling von Schaltflächen finden Sie im Abschnitt Form Buttons in der Dokumentation.
Jetzt ist es an der Zeit, die Eingabeelemente zu unserem Formular hinzuzufügen. All dieses Markup wird sich innerhalb des div-Elements mit der form-body-Klasse befinden.
1 |
<div class="frm-row"> |
2 |
|
3 |
<div class="section colm colm6"> |
4 |
<label class="field prepend-icon"> |
5 |
<input type="text" name="names" id="names" class="gui-input" placeholder="Enter name..."> |
6 |
<span class="field-icon"><i class="fa fa-user"></i></span> |
7 |
</label>
|
8 |
</div>
|
9 |
|
10 |
<div class="section colm colm6"> |
11 |
<label class="field prepend-icon"> |
12 |
<input type="email" name="email" id="email" class="gui-input" placeholder="Enter Email..."> |
13 |
<span class="field-icon"><i class="fa fa-envelope"></i></span> |
14 |
</label>
|
15 |
</div>
|
16 |
|
17 |
</div>
|
18 |
|
19 |
<div class="spacer-t20 spacer-b30"> |
20 |
<div class="tagline"><span>Please Choose The Concerned Department And Provide All Relevant Details</span></div> |
21 |
</div>
|
22 |
|
23 |
<div class="section"> |
24 |
<div class="option-group field"> |
25 |
|
26 |
<label class="option option-blue"> |
27 |
<input type="radio" name="department" checked> |
28 |
<span class="radio"></span> Billing |
29 |
</label>
|
30 |
|
31 |
<label class="option option-blue"> |
32 |
<input type="radio" name="department"> |
33 |
<span class="radio"></span> Technical Support |
34 |
</label>
|
35 |
|
36 |
<label class="option option-blue"> |
37 |
<input type="radio" name="department"> |
38 |
<span class="radio"></span> Other |
39 |
</label>
|
40 |
|
41 |
</div>
|
42 |
</div>
|
43 |
|
44 |
<div class="section"> |
45 |
<label class="field prepend-icon"> |
46 |
<input type="text" name="subject" id="subject" class="gui-input" placeholder="Enter subject..."> |
47 |
<span class="field-icon"><i class="fa fa-lightbulb-o"></i></span> |
48 |
</label>
|
49 |
</div>
|
50 |
|
51 |
<div class="section"> |
52 |
<label class="field prepend-icon"> |
53 |
<textarea class="gui-textarea" id="comment" name="comment" placeholder="Enter message..."></textarea> |
54 |
<span class="field-icon"><i class="fa fa-comments"></i></span> |
55 |
<span class="input-hint"> <strong>Hint:</strong> Please enter between 80 - 300 characters.</span> |
56 |
</label>
|
57 |
</div>
|
58 |
|
59 |
<div class="section"> |
60 |
<label class="switch switch-round switch-blue"> |
61 |
<input type="radio" name="newsletter" id="newsletter" checked> |
62 |
<span class="switch-label" data-on="YES" data-off="NO"></span> |
63 |
<span> Subscribe to our newsletter?</span> |
64 |
</label>
|
65 |
</div>
|
Das Wrapper-div mit der Klasse frm-row ist hilfreich, wenn Sie mehrere Formularelemente in derselben Zeile hinzufügen möchten. Die Breite der einzelnen Formelemente wird durch die Klasse colm6 gesteuert. Die Gesamtsumme der Klassen muss bis zu 12 addieren, um die gesamte Formularbreite auszufüllen. Dies bedeutet, dass Sie entweder die Breite von zwei Formularelementen auf colm8 und colm4 oder colm6 und colm6 festlegen können. Im ersten Fall wäre das linke Element doppelt so breit wie das rechte. Im letzteren Fall haben beide Eingabeelemente die gleiche Breite.
Mit dem obigen Markup wird das endgültige Formular wie im Bild unten aussehen:
Formularvalidierung und andere Verbesserungen
Das lframework bietet eine ganze Reihe von JavaScript-Dateien zum Hinzufügen zusätzlicher Funktionen zum Formular. Beispielsweise gibt es separate Dateien zum Einblenden und Hinzufügen von Drag-and-Drop-Funktionen für Dateien. Die Verwendung jeder Datei wird in der Dokumentation sehr klar erläutert, so dass Sie nur die Dateien einbinden müssen, deren Funktionalität Sie tatsächlich benötigen.
In unserem Fall möchten wir nur die Formulareingabe überprüfen, also werden wir das jQuery-Hauptskript und zwei weitere Validierungsdateien laden. Das eine ist das Core-JQuery-Validierungs-Plugin und das andere bietet zusätzliche Validierungsmethoden.
Sie müssen einfach die folgenden Skript-Tags zu Ihrer Webseite hinzufügen, um JavaScript-basierte Validierung zu verwenden.
1 |
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> |
2 |
<script type="text/javascript" src="js/jquery.validate.js"></script> |
3 |
<script type="text/javascript" src="js/additional-methods.js"></script> |
Der letzte Schritt zum Aktivieren der Validierung besteht darin, den folgenden Code nach den oben genannten Skripts einzubinden:
1 |
$(function() { |
2 |
$('#contact-form').validate(); |
3 |
});
|
Der Selektor #contact-Formular oben ist der Wert des id-Attributs für unser Formular. Es wird für Ihre eigenen Formulare anders sein, wenn Sie dieses Attribut geändert haben. Diese Codezeile weist die Webseite einfach an, die über das Formular bereitgestellten Informationen zu überprüfen.
Derzeit werden die Fehler angezeigt, ohne dass sich die Schriftfarbe oder die Eingabehervorhebung ändert. Sie können den folgenden Codeausschnitt verwenden, um die Fehler besser sichtbar zu machen:
1 |
$('#contact-form').validate({ |
2 |
|
3 |
errorClass: "state-error", |
4 |
validClass: "state-success", |
5 |
errorElement: "em", |
6 |
|
7 |
highlight: function(element, errorClass, validClass) { |
8 |
$(element).closest('.field').addClass(errorClass).removeClass(validClass); |
9 |
},
|
10 |
|
11 |
unhighlight: function(element, errorClass, validClass) { |
12 |
$(element).closest('.field').removeClass(errorClass).addClass(validClass); |
13 |
},
|
14 |
|
15 |
errorPlacement: function(error, element) { |
16 |
if (element.is(":radio") || element.is(":checkbox")) { |
17 |
element.closest('.option-group').after(error); |
18 |
} else { |
19 |
error.insertAfter(element.parent()); |
20 |
}
|
21 |
}
|
22 |
});
|
Sobald Sie den obigen Code zu Ihrer Webseite hinzugefügt haben, sehen die ungültigen Felder wie das Bild unten aus:
Die Formularvalidierung wurde in der Dokumentation ausführlich behandelt, sodass Sie bei der Implementierung in Ihren eigenen Formularen nicht hängen bleiben.
Letzte Gedanken
In diesem Tutorial haben wir ein sehr attraktives Kontaktformular mit dem Smart Forms JavaScript Formular Framework erstellt, das von CodeCanyon verfügbar ist. Eines der besten Dinge bei der Verwendung dieses Frameworks ist, dass alle JavaScript-Funktionen bereits für Sie geschrieben wurden. Auch sehen die Formulare mit ihrem gepflegten Design sehr professionell aus. Sie können aus einer großen Anzahl von Optionen wählen und das Formularlayout auswählen, das am besten zu Ihnen passt.
Die Dokumentation, die mit dem Framework geliefert wird, erklärt alles wirklich gut, so dass es sehr wenig Chancen gibt, dass Sie stecken bleiben. Für den unwahrscheinlichen Fall, dass Sie stecken bleiben, bietet der Entwickler 6 Monate kostenlosen Support, so dass alle Ihre Probleme schnell gelöst werden! Sie können die Demos überprüfen, um zu sehen, ob Ihnen das Styling der Formulare gefällt. Mit diesem Framework, um Ihre Formulare zu erstellen, sparen Sie auf lange Sicht viel Zeit und Geld, also sollten Sie es auf jeden Fall ausprobieren.
