Online-Generatoren • Tools / Werkzeuge • Tutorials
Website Forms - 13 Tutorials, Ressourcen, Tools & Services
Kaum eine Webseite kommt heute ohne Formular aus. Sei es das typische Kontaktformular, ein Formular zu Bestellung eines Newsletter- Abonnement etc. .
In diesem Beitrag stelle ich Ihnen diverse Formular Generatoren, Tools, Ressourcen, Tutorials rund um das Thema Website- Forms vor.
Mit Hilfe dieser Zusammenstellung wird es Ihnen leicht fallen in Kürze Ihr eigenes Kontaktformular zu erstellen.
Einführung
Webseite- Formulare unterstützen Sie darin, in Kontakt mit Ihren Online- Besuchern zu sein und bieten im Gegensatz zu einem einfachen E-Mail Link den Vorteil, dass benötigte Informationen gezielt abgefragt und Pflichtangaben definiert werden können.
Im Zeitalter von CSS- fähigen Browsern, Ajax und Javascript Libraries hat sich hier vieles verbessert. Heute ist es möglich Formulare sehr benutzerfreundlich zu gestalten und aufzupeppen.
Was braucht man für ein funktionierendes Webseite- Formular?
Eine Frage die Sie mir in den letzten Wochen häufig per E-Mail gestellt haben :-).
Im Prinzip besteht ein Website- Formular aus zwei Bereichen:
1. Dem eigentlichen Formular – definiert in HTML, gestaltet per CSS und evtl. funktional Erweitert mittels Javascript Funktionen (z.B. über jQuery)
2. Einem Auswertungs- Script – geschrieben in einer serverseitigen Scriptsprache (z.B. PHP, Perl). Dieses Script wird benötigt um die von Online- Nutzer im Formular eingegeben Informationen an den Webseiten- Betreiber zu übermitteln.
Über ein solches Script können die erfassten Daten z.B. per E-Mail an den Webseiten- Betreiber übermittelt und/ oder in einer Datenbank gespeichert werden.
(Bitte beachten Sie das in Ihrem Hosting- Paket eine entsprechende Scriptsprache unterstützt werden muss damit die Auswertung funktioniert!.)
Formular Generatoren
Im WWW finden Sie eine Vielzahl von Online- Formular- Generatoren die es Ihnen ermöglichen Ihr persönliches Kontaktformular „zusammenzuklickern“.
Ein wirklich gelungener Form- Builder mit unglaublich vielen Funktionen. Per Drag&Drop kann ein Formular individuell zusammengestellt werden. Spezielle Umfrage- und Payment- Felder werden unterstützt. In den Power- Tools können spezielle Eingabe- Felder wie Captcha, Auto- Complete, Date/Time etc. ausgewählt werden. Stil- Eigenschaften können an Ihre Wünsche angepasst werden oder verwenden Sie einfach zur Verfügung gestellte Vorlagen.
Wie Sie das erstellte Formular einbinden entscheiden Sie: Ob mit kompletten Source- Code oder als JavaScript Aufruf. Auch die Einbindung in verschiedene CMS- Systeme wird unterstützt.
Probieren Sie es einfach mal aus – ich denke dieser Formular- Generator lässt kaum einen Wunsch offen.
Dieser Formular- Generator ermöglicht es Ihnen ein einfaches Kontaktformular zu erstellen. Sie haben die Möglichkeit aus 9 vordefinierten Feldern auszuwählen. Captcha Code wird auf Wunsch unterstützt. Am Ende erhalten Sie HTML- und PHP Code den Sie per Cut&Paste in Ihre Webseite kopieren können.
Beim dem HTML Form Builder pForm entscheiden Sie sich vorab für eine Formular- Farbe und stellen dann im 2. Schritt Ihr individuelles Formular aus verschiedenen Feld- Typen zusammen. Die Eigenschaften eines jeden Feldes können individuell definiert werden. Nach dem Ihr Formular fertig ist speichern Sie es einfach ab. Anschließend können Sie das erstellte Formular als Zip- Archiv herunterladen und in Ihre Webseite einbinden.
Formular Services
Neben den Formular- Generatoren gibt es mittlerweile auch eine Vielzahl an Formular Services. Ähnlich wie mit den Formular- Generatoren, können Sie hier Kontaktformulare, Umfragen etc. zusammenstellen. Der Unterschied liegt darin, dass Sie keine Scripte zur Auswertung benötigen da dies auch Bestandteil des Service ist. In Ihre Webseite binden Sie nur den Link zum generierten Formular ein und alles andere wird über den Formular- Service abgewickelt.
Achten Sie bitte darauf, dass die meisten dieser Services (zumindest ab einer gewissen Anzahl Formulare, Kontakte, PageWies etc.) kostenpflichtig sind.
Hier eine kleine Auswahl solcher Formular Services:
Weitere links finden Sie im Bereich „Ressourcen“ dieses Beitrags.
Tutorials
Wer lernen möchte wie es von „Hand“ geht. Findet nützliche Tipps & Tricks in den folgenden Tutorials:
2. Create a Search Form with CSS3 and jQuery
3. Make your forms beautiful with CSS
4. Designing simple & beautiful CSS based forms
5. 10 Tips for Incredible Web Forms!
7. Clean and pure CSS FORM design
8. Have a Field Day with HTML5 Forms
9. How to Validate Forms in both sides using PHP and jQuery
10. Web Form Validation: Best Practices and Tutorials
11. Design a Prettier Web Form with CSS 3
13. Improved Current Field Highlighting in Forms
Ressourcen
1. 10 useful plug-in to enhance your HTML form validation
2. 13 Best Web Form Design Tutorials and Resources
3. 20 jQuery Plugins and Tutorials to Enhance Forms
4. Beautiful Contact Forms for your Inspiration
5. 20+ Resources and Tutorials for Creative Forms using CSS
6. 10+ JQuery tutorials for working with HTML forms
7. Forms On Mobile Devices: Modern Solutions
8. Web Form Design: Modern Solutions and Creative Ideas
9. 13 Hand-Picked Web Form Resources for Developers
1 Stimme/n, durchschnittliche Bewertung: 6,00 Sterne von max. 6 möglichen Sternen
Loading ...
Mein Name ist Sabine Kunkel-Dücking und ich arbeite seit 2001 als freiberufliche Internet- Dienstleisterin unter dem Projektnamen ArcheNet.
vom 10. Juni 2010 um 09:18 Uhr
vom 10. Juni 2010 um 23:11 Uhr