Ein mehrseitiges Kontakt- oder Buchungsformular erstellen.

2010 by Sven Owsianowski (www.svo-nrw.de) Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. Anleitung für den WYSIWYG Web Builder ab Version 7.1 oder höher Sven Owsianowski 09.08.2010

2 Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. Inhaltsverzeichnis Abbildungsverzeichnis... 3 Wozu wird überhaupt ein mehrseitiges Formular benötigt?... 4 Was wird benötigt?... 4 Das mehrseitige Kontaktformular... 4 Dateierweiterung auf PHP umstellen... 5 Alle benötigten Seiten anlegen... 5 Die erste Seite (Index-Seite)... 6 Die Seite1 (das eigentliche Formular)... 6 Die Seite 2 (Bestätigungsseite)... 8 Die Seite 3 (die geheime, verborgene Seite)... 12 Die Seite 4 (die Letzte und abschließende Seite)... 14 Kann auch eine Fehlerseite definiert werden?... 14 Testen des Beispiels... 14 Das deutsche WWB-Forum... 15 Copyright dieses Beispiels & Anleitung... 15

Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. 3 Abbildungsverzeichnis Abbildung 1: Dialog der Seiteneigenschaften... 5 Abbildung 2: Site-Manager... 6 Abbildung 3: Toolbox... 6 Abbildung 4: Arbeitsfläche mit Eingabefeldern... 7 Abbildung 5: Eigenschaften Eingabefeld 1... 8 Abbildung 6: Eigenschaften Eingabefeld 2... 8 Abbildung 7: Eigenschaften jquery-button "Zurück" (1)... 10 Abbildung 8: Eigenschaften jquery-button "Zurück" (2)... 10 Abbildung 9: Verborgene Felder anlegen... 11 Abbildung 10: Eigenschaften des Formularbereichs (seite2.php) (1)... 11 Abbildung 11: Eigenschaften des Formularbereichs (seite2.php) (2)... 11 Abbildung 12: Arbeitsbereich der "seite2.php"... 12 Abbildung 13: Formulareigenschaften der Seite (seite3.php) (1)... 13 Abbildung 14: Formulareigenschaften der Seite (seite3.php) (2)... 14

4 Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. Wozu wird überhaupt ein mehrseitiges Formular benötigt? Die Frage ist an sich schnell geklärt. Jeder der möchte, dass seine Kunden nach dem Ausfüllen des Formulars nochmals die Möglichkeit erhalten die vorher getätigten Eingaben außerhalb der Eingabefelder zu überprüfen, der benötigt ein mehrseitiges Formular oder aber wenn Sie z. B. den Anschriftenteil von z. B. einem allgemeinen Buchungsteil trennen wollen. Auch für diese Möglichkeit müssen Sie auf ein mehrseitiges Formular zugreifen. Es sei wohl schon im Vorhinein gesagt, dass das Erstellen eines solchen Formulars etwas aufwendiger ist, als wenn Sie ein einfaches Formular mit Bestätigungsseite erstellen wollen. Übrigens könnte man sich ein Formular auch hervorragend nutzen, wenn Sie vorgefertigte (Layout) Printmedien anbieten. Sie könnten die entsprechenden Eingaben in der entsprechenden Schriftart 1 dann direkt auf der Printgrafik anzeigen, und wenn es dem Kunden dann gefällt, klickt dieser einfach auf BESTELLEN. Wie Sie sehen, sind die Möglichkeiten von mehrseitigen Kontaktformularen beinahe unbegrenzt. Was wird benötigt? Um mit dieser Anleitung ein mehrseitiges Kontaktformular zu erstellen, benötigen Sie den WYSIWYG Web Builder ab der Version 7.1 oder höher. Falls Sie noch nicht im Besitz einer Vollversion des WWB 2 sind, dann können Sie diesen unter der Internetadresse http://www.wysiwygwebbuilder.de käuflich erwerben. Es handelt sich um eine recht kleine Investition mit der Sie aber Großes bewerkstelligen können. Der deutsche Direktvertrieb erfolgt über die Firma GOEMO (Götz Morgenschweis). Sie erreichen die Website von GOEMO unter der Internetadresse http://www.goemo.de. Das mehrseitige Kontaktformular Um nun endlich mit dem erstellen des ersten mehrseitigen Kontaktformulars zu beginnen, rufen Sie bitte zuerst den WWB auf. Bitte achten Sie darauf, dass für dieses Formular der WWB ab der Version 7.1 oder höher verwendet werden muss. Starten Sie ein neues Projekt. 1 Bitte immer nur websichere Schriftarten verwenden 2 WYSIWYG Web Builder

Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. 5 Dateierweiterung auf PHP umstellen Als Nächstes muss die Dateierweiterung der geöffneten Seite von HTML auf PHP umgestellt werden. Öffnen Sie dazu bitte die Seiteneigenschaften. Diese öffnen Sie, indem Sie mit der rechten Maustaste in die leere Arbeitsfläche klicken und dort den Menüpunkt Seiteneigenschaften aus dem Menü auswählen. Wählen Sie dort unter den Erweiterungen die Erweiterung PHP aus. Abbildung 1: Dialog der Seiteneigenschaften Alle benötigten Seiten anlegen Nun klonen 3 Sie diese Seite 4-mal. Wählen Sie dazu im rechten Menü den Punkt Site-Manager aus. Klicken Sie nun Ihre erste Seite einmal an, sodass diese markiert ist. In der Regel wird die erste Seite INDEX heißen. Den Namen können Sie natürlich nach Ihren belieben ändern. 3 Eine exakte Kopie erstellen

6 Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. Klicken Sie nun mit der rechten Maustaste auf die Seite (im Site-Manager), welche Sie kopieren bzw. klonen wollen. Wählen Sie im nun geöffneten Menü den Punkt Seite klonen. Dies machen Sie bitte 4-mal. Nun müsste Ihr Site-Manager so ähnlich aussehen: Abbildung 2: Site-Manager Die erste Seite (Index-Seite) Diese Seite steht Ihnen zur freien Verfügung. Hier können Sie z. B. eine Einleitung schreiben oder was Sie wollen. Innerhalb einer bestehenden Website können Sie diese erste Seite auch weglassen. Diese hat für das mehrseitige Formular keinerlei Bedeutung. Sie soll Ihnen nur zeigen, dass Sie auch vor dem eigentlichen Formular die Möglichkeit haben, etwas zu beschreiben. Legen Sie in diesem Beispiel bitte einen Link, welcher auf die seite1.php verweist, an. Dies ist wichtig, da Sie sonst von der Index-Seite nicht zum Formular kommen. Die Seite1 (das eigentliche Formular) Auf dieser Seite wird das eigentliche Formular erstellt. Dazu benötigen Sie zuerst einen sog. Formularbereich. Diesen finden Sie in der Toolbox (links) unter der Überschrift Form Controls. Klicken Sie dort auf den Punkt Formularbereich. Diesen ziehen Sie nun mit gedrückter, linken Maustaste in Ihrer Arbeitsfläche auf. Die Größe bestimmen Sie selbst. Seien Sie anfangs lieber großzügig mit Abbildung 3: Toolbox der Auswahl der Größe, diese können Sie später immer noch reduzieren. Nachdem Sie den Formularbereich angelegt haben, klicken Sie bitte mit der rechten Maustaste in diesen angelegten Bereich. Es erscheint ein Menü, aus welchem Sie bitte den Punkt Eigenschaften auswählen. Geben Sie nun in die Eingabezeile neben der Bezeichnung Formular-Name einen Namen für Ihr Formular ein. Dieser Name kann frei gewählt werden. Geben Sie anschließend in das Feld mit der Bezeichnung Aktion den exakten Wortlaut./seite2.php ein. Als Methode wählen Sie bitte POST

Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. 7 und als Verschlüsselungstype wählen Sie bitte den Eintrag application/x-www-form-urlencoded aus. Alle anderen Einstellungen lassen Sie bitte wie gehabt. Klicken Sie zum Beenden des Dialogs auf den Button OKAY. Was haben Sie jetzt gerade gemacht? Sie haben dass Formular so eingestellt, dass die Daten aus den Formularfeldern (welche Sie noch anlegen werden) nicht per email übertragen werden, sondern zur seite2.php portiert werden. Auf der seite2.php können die Eingaben dann ausgelesen und formatiert angezeigt werden. Die seite2.php wird also später unsere Bestätigungsseite werden. Nun müssen Sie die benötigten Formularfelder anlegen. Dazu können Sie sich allen Elementen aus der Toolbox (links) unter dem Punkt Form Controls sowie unter dem Punkt jquery die Elemente jquery AutoComplete, jquery Button und den jquery Date Picker bedienen. Wir werden in diesem Beispiel drei Eingabefelder aus den Form Controls verwenden. Ziehen Sie dazu jeweils ein Eingabefeld in den Formbereich. Davor können Sie einen Text mit den folgenden Bezeichnungen setzten: Vorname Nachname email Ihre Arbeitsfläche müsste nun so ähnlich aussehen: Abbildung 4: Arbeitsfläche mit Eingabefeldern Damit Sie später mit der Bezeichnung der Felder nicht durcheinander kommen, werden wir nun von allen Eingabefeldern die Eigenschaften aufrufen. Klicken Sie dazu wieder mit der rechten Maustaste in ein Eingabefeld und klicken Sie anschließend im Menü auf Eigenschaften. Geben Sie in dem erschienen Dialog unter Allgemein/Name: die Bezeichnung des Feldes ein. In unserem Fall könnte man nun Vorname eingeben. Die selbe Bezeichnung geben Sie unter dem Reiter Validieren/Anzeige-Namen ein. Schließen Sie den Dialog über die Okay Schaltfläche und wiederholen Sie diesen Vorgang bei allen Eingabefeldern. Passen Sie dort dann den entsprechenden Namen an.

8 Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. Abbildung 5: Eigenschaften Eingabefeld 1 Abbildung 6: Eigenschaften Eingabefeld 2 Um das Formular nun an die Bestätigungsseite (seite2.php) zu übergeben, müssen wir noch einen Sende -Button in den Formularbereich platzieren. Hier können Sie entweder den Button aus den Form Controls nehmen oder, wenn Sie etwas frischere Formulare mögen, dann verwenden Sie den jquery Button aus der Toolbox -> jquery. In unserem Beispiel haben wir uns für den modernen jquery-button entschieden. Dieser ist ab der WWB Version 7 standardmäßig in der Toolbox unter jquery zu finden. Wählen Sie nun den jquery-button aus der Toolbox und legen Sie diesen ans Ende des Formularbereichs. Rufen Sie nun die Eigenschaften des Buttons auf, indem Sie diesen mit der rechten Maustaste anklicken und im Menü den Eintrag Eigenschaften auswählen. In dem folgenden Dialog geben Sie Wert/Label den Wortlaut Weiter ein und wählen Sie als Button-Type Übermitteln-Button. Schließen Sie den Dialog über die Okay -Schaltfläche. Nun sind alle Einstellungen am Formular beendet und wir können uns jetzt mit der Bestätigungsseite seite2.php beschäftigen. Die Seite 2 (Bestätigungsseite) Klicken Sie im Site-Manager nun auf den Eintrag Seite2. Es erscheint eine leere Arbeitsfläche. Diese Seite wird nun als Bestätigungsseite verwendet. D. h. es werden alle zuvor ausgefüllten Eingabefelder, Optionsfelder usw. hier angezeigt. Sie können die Anzeige formatieren, wie Sie

Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. 9 wollen. Weiter wird diese Seite mit einem ZURÜCK -Button und einem SENDEN -Button versehen. Mit dem ZURÜCK -Button geben Sie Ihrem Kunden die Möglichkeit, bei einer falschen oder fehlerhaften Eingabe, diesen auf der Formularseite wieder zu korrigieren, ohne dass dabei die getätigten Eingaben verloren gehen. Mit der SENDEN -Button werden die gesamten Daten an die Seite3.php übertragen, von welcher die Daten auch gleich versendet werden. Die seite3.php wird von keinem Besucher gesehen. Öffnen Sie nun einen neuen Text auf dem Arbeitsplatz und geben Sie dort folgenden Wortlaut ein: '.''.$_POST[vorname].' In diesem gerade erstellten Textfeld wird nun die Eingabe aus dem Eingabefeld Vorname angezeigt. Sie erinnern sich? Die Variable vorname haben Sie in den Eigenschaften des Eingabefeldes eingegeben. Legen Sie nun zwei weitere Textfelder an. Tragen Sie nun den oben angezeigten Wortlaut in das nächste Feld ein und ändern Sie dort jeweils die Variable vorname in z. B. nachname oder wie auch immer Sie das entsprechende Eingabefeld in den Eigenschaften benannt haben. Jetzt können Sie noch vor den entsprechenden Textfeldern die Bezeichnung schreiben. Dies sowie die Formatierung der Variablen bleibt Ihnen überlassen. Beispielsweise könnten Sie nun eine Grafik (z. B. Visitenkarte) in den Hintergrund legen und die Felder entsprechend auf der Grafik verteilen. Toller Effekt. Im Anschluss legen Sie nun einen neuen Formularbereich unterhalb Ihrer Variablen an. In diesen Formularbereich setzten Sie zwei jquery-buttons. Ich denke, dass es an dieser Stelle unnötig ist, Ihnen nochmals zu erklären, dass der Formularbereich in der Toolbox (links) unter der Oberbezeichnung Form Controls zu finden ist. Legen Sie nun einen jquery-button links und einen rechts an. Bitte beachten Sie, dass die Buttons in den Formularbereich gesetzt werden müssen. Rufen Sie nun die Eigenschaften des linken jquery-buttons auf und geben Sie in das Eingabefeld Wert/Label den Wortlaut ZURÜCK ein. Wählen Sie als Button-Typ den Typ Link-Button aus. Klicken Sie anschließend im Dialog auf den Reiter Link und wählen Sie den Typ Smart Link im Auswahlfeld Verlinken mit aus. Im darunterliegenden Feld Typ wählen Sie bitte den Eintrag Zurück aus. Schließen Sie den Dialog mit der OKAY -Schaltfläche.

10 Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. Abbildung 7: Eigenschaften jquery-button "Zurück" (1) Abbildung 8: Eigenschaften jquery-button "Zurück" (2) Öffnen Sie nun die Eigenschaften des rechten jquery-buttons. Dies wird unser Sende -Button. Geben Sie dort in das Feld Wert/Label den Wortlaut SENDEN ein und wählen Sie als Button-Typ den Typ Übermitteln-Button. Rufen Sie nun den Reiter Link im selben Dialogfenster auf. Wählen Sie dort unter Verlinken mit, den Eintrag Interne Seite aus. Als Typ geben Sie ein seite3. Schließen Sie den Dialog ebenfalls über die OKAY -Schaltfläche. Nun müssen wir uns noch um die Einstellungen des Formularbereichs kümmern. Rufen Sie also die Eigenschaften des Formularbereichs auf. In das Feld Formular-Name können Sie eingeben, was Sie wollen. Geben Sie in das Feld Aktion folgenden Wortlaut ein:./seite3.php. Als Methode wählen Sie POST und als Verschlüsselungstype wählen Sie application/x-www-form-urlencoded. Öffnen Sie nun den Reiter Verborgene Felder im selben Dialog. Klicken Sie dort auf den Button Hinzufügen (rechts) und geben Sie in das folgende Dialogfenster unter Name den Wortlaut Vorname und unter Wert den Wortlaut <? echo $vorname;?> ein. Legen Sie anschließend die zwei weitere Felder an, nämlich für den Nachnamen und die email-adresse.

Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. 11 Abbildung 9: Verborgene Felder anlegen Der Befehl <? echo $vorname;?> im Feld Wert beinhaltet wieder die Variable der Eingabefelder. Ändern Sie diese entsprechend. Beenden Sie den jeweiligen Dialog über die OKAY -Schaltfläche. Nachdem Sie alle drei versteckten Felder eingegeben haben, müsste der Eingeschaften-Dialog wie folgt bei Ihnen aussehen: Abbildung 10: Eigenschaften des Formularbereichs (seite2.php) (1) Was habe ich nun gemacht? Abbildung 11: Eigenschaften des Formularbereichs (seite2.php) (2) Sie haben die Daten aus den vorherigen Formularfeldern als Variablen auf Ihren Abreitsplatz eingefügt und ein Formular erstellt, welches die Variablen als versteckte Felder an die seite3.php

12 Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. sendet. Die seite3.php wird anschließend die Variablen per email übertragen und die endgültige Bestätigungsseite aufrufen. Ihr Arbeitsbereich könnte nun wie folgt aussehen: Abbildung 12: Arbeitsbereich der "seite2.php" Die Seite 3 (die geheime, verborgene Seite) Die Seite 3 ( seite3.php ) nennen wir hier nicht umsonst: Die geheime und verborgene Seite. Die Seite bekommt nämlich niemand zu sehen. Die Seite kümmert sich automatisch um den Versand der Variablen per email. Die email-adresse wird natürlich vorgegeben. Weiter ruft die seite3.php nach dem Versand der Daten/Variablen die endgültige Bestätigungsseite seite4.php auf. Mit der seite4.php ist das komplette Formular abgeschlossen und beendet. Rufen Sie nun über den Site-Manager die seite3.php auf. Sie sehen nun einen leeren Arbeitsplatz vor sich. Legen Sie nun einen neuen Formularbereich an und öffnen Sie dessen Eigenschaften. Die Größe des Formularbereichs ist ganz egal, da keine Elemente in diesen gesetzt werden. Hier können Sie auch wieder einen beliebigen Formularnamen vergeben. Lassen Sie im oberen Bereich des Eigenschaften-Dialogs alles so, wie es ist und setzen Sie ein Häkchen bei PHP Formular- Prozessor benutzen. Geben Sie nun Ihre email-adresse in das Feld E-Mail-Adresse ein. Alle Daten werden an diese email-adresse gesendet, daher achten Sie darauf, dass hier die email- Adresse eingetragen wird, mit welcher Sie die Daten empfangen wollen.

Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. 13 In die Felder Betreff und Nachricht können Sie eingeben, was Sie wollen. Das Feld Betreff steht für die Betreffzeile der email und das Feld Nachricht steht für eine kurze Nachricht, welche Sie noch vor den später angezeigten und gesendeten Daten anzeigen können. Im Feld Bestätigungsseite wählen Sie bitte die Seite seite4.php. Oder geben Sie dort direkt den Wortlaut./hotel5.php ein. Anschließend wählen Sie im selben Dialog den Reiter Versteckte Felder aus. Legen Sie dort wie auf seite2.php die versteckten Felder an. NAME ist die Bezeichnung des Feldes, und als WERT wird <? echo $vorname;?> eingegeben. Bitte ändern Sie Ihre Variablen entsprechend. Beenden Sie die Dialoge über die OKAY -Schaltfläche. Abbildung 13: Formulareigenschaften der Seite (seite3.php) (1)

14 Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. Abbildung 14: Formulareigenschaften der Seite (seite3.php) (2) Nun sind alle nötigen Einstellung für diese Seite abgeschlossen. Die Daten werden nun an Ihre email- Adresse gesendet und die endgültige Bestätigungsseite seite4.php wird aufgerufen. Die Seite 4 (die Letzte und abschließende Seite) Diese Seite kann von Ihnen frei gestaltet werden. Hier wird kein Formularbereich mehr benötigt, da der gesamte Sendevorgang abgeschlossen ist. Verwenden Sie diese Seite um Ihren Kunden mitzuteilen, dass die Daten erfolgreich an Sie übermittelt wurden und Sie sich ggf. kurzfristig melden werden. Mit dieser Seite ist das komplette Beispiel abgeschlossen. Vergessen Sie nicht Ihre Arbeit zu speichern. Kann auch eine Fehlerseite definiert werden? Ja, diese kann in den Formulareigenschaften der seite3.php unter dem Punkt Fehlerseite eingestellt werden. Dies ist gerade dann sinnvoll, wenn Sie z. B. das Feld email validieren lassen. Wenn dort eine falsche Eingabe gemacht wird, wird das Formular nicht abgesendet, sondern verweist direkt auf einen Fehler. Testen des Beispiels Wenn Sie sich das Beispiel selbst Schritt für Schritt nachgearbeitet haben, dann laden Sie dieses jetzt auf Ihren Webserver und rufen Sie die Datei index.php auf. Nun sollten Sie über einen Button immer zur nächsten Seite geleitet werden. Sollten Sie keine Lust haben, dieses Beispiel nachzuarbeiten, dann können Sie sich das fertige Beispiel im Internet unter der Internetadresse http://www.svo-nrw.de/wwb/mehrs_form/hotel1.php ansehen. Alle dort eingegebenen Daten werden an unsere email-adresse versand und direkt gelöscht.

Ein mehrseitiges Kontakt- oder Buchungsformular erstellen. 15 Natürlich können Sie sich das komplette Beispiel für den WWB ab Version 7.1 auch runterladen. Die ZIP-Datei erhalten Sie unter folgender Internetadresse: http://www.svo-nrw.de/wwb/mehrs_form/mehrseitiges_formular.zip Das deutsche WWB-Forum Fragen speziell zu dieser Anleitung und diesem Beispiel können an sven im deutschen WWB-Forum gestellt werden. Ansonsten können im Forum alle Frage rund um den WYSIWYG Web Builder gestellt werden. Das deutsche Forum erreichen Sie unter der Internetadresse: http://www.wysiwygwebbuilder-forum.de/ Copyright dieses Beispiels & Anleitung Dieses Beispiel wurde von Sven Owsianowski: SVO-Webdesign GbR Rheinackerstr. 4 47495 Rheinberg Tel: (0 28 02) 80 82 98 Fax (0 28 02) 80 82 93 Internet: http://www.svo-nrw.de email: info@svo-nrw.de erstellt und kann frei verwendet werden. Auszüge aus dieser Anleitung sowie Screenshots dürfen erst nach vorheriger Genehmigung verwendet werden.