Little Boxes – der HTML-Crashkurs

Das Kontaktformular testen

Testen Sie unsere 1865 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Wenn Sie keinen serverseitigen Form-Mailer zur Verfügung haben, können Sie sich die Formulardaten mit einem kostenlosen Service namens Formular-Chef per E-Mail schicken lassen.

Transkript

Das Formular ist im HTML soweit fast fertig. Es sieht noch nicht hübsch aus, aber wichtiger als dass es hübsch aussieht, ist auch dass es funktioniert. Von dem Moment, wenn ich auf Abschicken klicke, dann werden hier oben, zwar, wie Sie sehen, Variablen dran gehängt, besuchername, besuchermail und nachricht, aber da steht nichts drin, weil ich nichts eingetragen habe und die werden auch nicht verarbeitet. Die Variablen sind hier die Felder name, also die Attribute name in den Feldern besuchermail und nachricht. Und es wird nicht überprüft, ob hier irgendwas drin steht, obwohl ich das oben drüber geschrieben habe "Bitte füllen Sie alle Formularfelder aus", das ist das Erste, was ich machen möchte. Ich gebe hier ein Attribut hinzu, das heißt required, erforderlich. So, required. Das bekommen alle drei Felder. So, und hier auch required. Alle drei. So, denn es steht ja oben drüber "Bitte füllen Sie alle aus". Also wollen wir zumindest gucken, ob da überhaupt was drin steht. Ich schneid hier oben die Adresse mal ab und lade die Seite neu. So, wenn ich jetzt auf Abschicken klicke, dann sehen Sie, dass der Browser guckt. Durch das required sieht er "Ich soll hier gucken, ob da was drin steht. Bitte füllen Sie dieses Feld aus!" Die Nachricht kommt vom Browser. Und das Formular wird nicht abgeschickt. Das ist Punkt 1. So kann man ganz einfach schnell überprüfen, ob da überhaupt was drin steht. Dann geht es hier jetzt zum zweiten Punkt, nämlich was uns noch fehlt, ist eine Adresse, wo die Daten hingeschickt werden sollen, zur Verarbeitung also, zum Verschicken per E-Mail, zum Eintragen in eine Datenbank, was auch immer. Und dazu brauchen Sie ein serverseitiges Programm. Wenn diese Formulardaten per E-Mail an Sie geschickt werden sollen, dann nennt man das einen Form-Mailer. Das ist ein Programm, das die Daten nimmt hier, und sie per E-Mail weiterschickt. Wenn Sie eigenen Webspace haben und Sie haben einen solchen Form-Mailer zur Verfügung, das kann Ihnen Ihr Webhoster sagen, dann können Sie den hier eintragen. Ich habe keinen Server im Moment, ich arbeite auf meiner Festplatte hier. Da ist kein Webspace, da ist kein PHP, da ist kein Webserver und gar nichts im Augenblick. Deswegen behelfe ich mir zum Testen des Formulars mit einem Drittanbieter. Der heißt Formular-Chef und der macht das für uns. Ich bin hier auf der Startseite. Der nimmt also die Daten und schickt die weiter per E-Mail. Dieser Formular-Chef ist in seiner Grundkonfiguration recht einfach. Sie sehen, das ist die Adresse, hier die action, wo das hingeschickt werden soll. Und diese Adresse kopiere ich jetzt einfach mal. So. Dann Strg c oder Cmnd c je nachdem, wo Sie gerade arbeiten. Und füge die hier wieder ein. So, das ist die Adresse. Dann fehlt uns noch message="post". Die Standartmethode zum Schicken von Formularen ist get. Die steht hier. Das bedeutet, die Fomulardaten werden mit einem Fragezeichen an die URL gehängt, oben im Browser. Achten Sie bei Google, beim Suchen mal drauf, vorhin war das hier auch ganz kurz zu sehen. Und post verschickt die Daten unsichtbar, so dass da nichts zu sehen ist. Das Einzige, was jetzt noch fehlt, ist eine Adresse, an die die Sachen geschickt werden sollen. Und das ist hier ein input-Feld, ein verstecktes input-Feld, das ich hier auch einfach reinkopiere, das / am Ende brauchen wir nicht. So, input type="hidden", name="empfaenger". Dieser name ist wichtig, weil das serverseitige Programm erwartet diesen name-n. Und darin steht eine E-Mail-Adresse benachrichtigung@little-boxes.de Nehmen Sie hier bitte eine E-Mail-Adresse von Ihnen, weil sonst wird es alles an mich geschickt. Ich kriege seit Jahren regelmäßig Formulardaten an diese E-Mail-Adresse. Im Quelltext steht diese E-Mail-Adresse auch. Das ist natürlich für Spambots ein gefundenes Fressen ganz Wort wörtlich. Die sehen das @-Zeichen und denken "Juhu, eine E-Mail-Adresse!" Also können Sie das beim Formular-Chef ersetzen mit X§X. So, das @-Zeichen einfach ersetzen durch großes X, § und X. Das ist eine einfache Codierung, aber die Spambots haben es dann nicht mehr ganz so leicht, hier eine E-Mail-Adresse rauszufischen. Sie sollten aber trotzdem nicht unbedingt Ihre allerbeste E-Mail-Adresse nehmen. Einfach eine einrichten hier für das Empfangen von Fomulardaten. So, im Quelltext ist alles soweit vorbereitet. Das Fomular wird einmal neu geladen. Und ich fülle es jetzt einmal aus, indem ich hier meinen Namen eingebe, dann eine E-Mail-Adresse. Das ist die Absender-Adresse und "Testing the Kontaktformular." So. Und weg damit. So, jetzt kommt gleich die Antwortseite vom Formular-Chef. "Vielen Dank!" Sie sehen, hier oben ist die Adresse. Der hat jetzt die Daten verschickt. Und hier erscheint meistens ein klein bisschen Werbung. Die ist aber harmlos. Und das ist alles. Wenn man die Werbung weg haben will, dann kann man auch'ne kostenpflichtige Einstellung nehmen, aber es ist, wie gesagt, für uns im Augenblick auch nur ein Notbehelf, um das Formular testen zu können. In echt haben Sie auf Ihrem Webspace Programme, die das für Sie übernehmen. Der Formular-Chef schickt also per E-Mail die Formulardaten an mich und in kurzer Zeit und wenige Minuten später sollte eine E-Mail eintreffen vom Formular-Chef. Hier das ist die Absender-Adresse von nettz.de, dem Betreiber, an benachrichtigung@little-boxes.de. Und hier sehen Sie die Formulardaten, die dann verschickt werden. Soweit hat alles geklappt.

Little Boxes – der HTML-Crashkurs

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 5 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016
Laufzeit:3 Std. 5 min (41 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!