Der Beitrag zeigt, wie Sie mit Hilfe der Erweiterung "ChronoForms" ein einfaches Kontaktformular erstellen. Die Installation der Komponente, des Moduls und des Plugins, sowie die Aktivierung des Plugins habe ich vor der Dokumentation bereits erledigt.

Starten wir mit dem Klick auf "New simple" im "Forms Manager".

chronoforms v5 01

Geben Sie einen eindeutigen Formularnamen und (wenn Sie möchten) eine Beschreibung ein.

chronoforms v5 01

Wechseln Sie anschließend auf den Bereich "Designer".

Hier können Sie nun eines der "Basic" Elemente hin das Formularfeld ziehen. Ich starte mit einem Textfeld.

chronoforms v5 01

Nachdem das Textfeld hingezogen ist, klicke ich auf die Schaltfläche "Edit".

Als "Feldnamen" wird ebenfalls ein eindeutiger Eintrag benötigt. ChronoForms nummeriert die Felder einfach durch. "text1" für den Namen, "text2" für die E-Mail-Adresse, "text3" für den Betreff usw, sind zwar nett, doch kann man sich das kaum merken. Daher nutze ich anderen Feldnamen.

chronoforms v5 01

Beim ersten Feld gebe ich daher "txt_name" als Feldnamen ein.

Weiterhin wird unter "Label" der Eintrag "Vor- und Zuname" vorgenommen. Wechseln Sie dann ins Register "Validation".

chronoforms v5 01

Hier stelle ich die Einstellung "Requiered" auf "Yes". D. h. dass ein Besucher im Kontaktformular diese Feld ausfüllen muss, sonst kann das Kontaktformular nicht versandt werden.

Die weiteren Einstellungen belasse ich so, wie sie sind und klicke Auf "Save and Close".

chronoforms v5 01

Damit ist das erste Feld platziert.

chronoforms v5 01

Im nächsten Schritt füge ich eine weitere "Text Box" für die E-Mail-Adresse des Besuchers ein. Bei den dortigen "Validation"-Optionen stelle ich die Option "E-Mail" auf "Yes". Damit wird vor dem Versenden geprüft, ob es sich bei der Eingabe in diesem Feld wirklich um einen E-Mail-Adresse handelt.

Dann füge ich eine weitere "Text Box" ein, um den Betreff aufzunehmen. Hier aktiviere ich keine weitere Option.

Für die Nachricht selbst füge ich eine "Textarea Box" ein.

chronoforms v5 01

Dort klicke ich auf "Edit", um die Einstellungen der Textarea Box zu betrachten.

Zunächst wird ein eindeutiger "Feldname" vergeben. Ich nutze "txt_nachricht". Das Label wird mit "Nachricht" beschriftet. Sie können sich die weiteren Einstellungen kurz ansehen.

Ich setze in den "Validation"-Optionen nur die Eigenschaft "Required" auf "Yes". Dann Speichere ich die Feldeigenschaften.

chronoforms v5 01

Nun füge ich ein "Captcha" Element ein.

chronoforms v5 01

In den Eigenschaften des Captcha Feldes ändere ich das "Label" ...

chronoforms v5 01

... auf "Sicherheitscode". Dann wechsle ich ins Register "Validation".

chronoforms v5 01

Hier setze ich die Eigenschaft "Required" auf "Yes" und speichere die Feldeigenschaften.

chronoforms v5 01

Zuletzt wird ein "Submit Button" eingefügt.

chronoforms v5 01

In den Eigenschaften passe ich den Namen an.

chronoforms v5 01

Als Namen vergebe ich "cmd_send" (beachten Sie, dass die Namen keine Leerzeichen oder Sonderzeichen haben darf. Unterstriche ("_") sind OK. Die "Value/Label" Eigenschaft setze ich auf "Senden". Dann speichere ich die Eigenschaften.

chronoforms v5 01

Damit ist das Formular gestaltet. Ich speichere nun kurz, hierzu klicke ich auf "Save and Close".

chronoforms v5 01

Im Anschluss wechsele ich auf den Bereich "Setup".

chronoforms v5 01

Im Bereich "Setup" gibt es einen Unterbereich "Captcha".

Hier setze ich die Eigenschaft "Enable" auf "Yes" und ändere die Fehlermeldung in einen deutschen Text.

chronoforms v5 01

Ich wechsle auf den Unterbereich "E-Mail(0)".

Das "Action Label" bezeichne ich mit "act_email_01". Der Name des Label ist nicht wichtig, für dieses Beispiel, muss aber eindeutig sein und darf keine Leer- oder Sonderzeichen enthalten. Unterstriche sind wieder OK.

Die Einstellung "Enable" stelle ich auf "Yes".

Als Empfänger für die eingegebenen Informationen trage ich im Feld "To" unsere eigene E-Mail-Adresse ein.

Als Betreff (subject) trage ich "Kontaktformular JUG Fulda" ein.

Im Feld "From Name" Trage ich "JUG Fulda" ein.

Als "From email" nutze ich wieder unsere E-Mail-Adresse "Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!" ein.

...

chronoforms v5 20

...

Also E-Mail-Format belasse ich "HTML". Bei "Template generation" wird auf Benutzerdefiniet (CUSTOM) belassen.

Dann folgt der HTML Code für die E-Mail, die von ChronoForms beim ersten Speichern angelegt wurde:



<table>
<tr><td>Vor- und Nachname</td><td>{txt_name}</td></tr>
<tr><td>E-Mail</td><td>{txt_email}</td></tr>
<tr><td>Betreff</td><td>{txt_betreff}</td></tr>
<tr><td>Nachricht</td><td>{txt_nachricht}</td></tr>
<tr><td>Sicherheitscode</td><td>{captcha}</td></tr>
<tr><td>{label}</td><td>{captcha}</td></tr>
</table>

Die Vorlage beinhaltet die Namen der Felder, die in der E-Mail übermittelt werden sollten. Die Nachricht könnne Sie beliebig gestalten.

Im Breich "Advanced" der E-Mail(0) kann man noch dynamsiche Empfänger ("Dynamic to") eintragen. Sollte also der Besucher eine E-Mail-Adresse eingeben, so wird auch die E-Mail-Adresse des Besuchers die Nachricht im Feld "An" der E-Mail eingetragen.

ACHTUNG: Durch solche Späße werden Formulare zum Versender von SPAM-Nachrichten! D. h. ein übel gelaunter Mensch könnte einfach eine beliebige Adresse eintragen. Der Absender sind dann wird. Also solche Einstellungen mit vorsicht eintragen!

Empfehlung: Keine dynamischen Empfänger!

chronoforms v5 01

Dann kommt noch die "Danke-Seite". Ich schreibe lediglich "Vielen Dank für Ihre Nachricht" und klicke auf "Save and Close".

chronoforms v5 01

ChronoForms kann jeden Eintrag in das Kontaktformular nicht nur per E-Mail versenden, sondern auch gleichzeitig in die Datenbank eintragen. Hierzu muss allerdings zunächst eine Tabelle erstellt werden, in die die Daten des Formulars hineinkommen.

Ich aktiviere die Checkbox vor dem Formular "kontakt" und klicke auf "Create table".

chronoforms v5 01

Die Tabelle wird mit dem Namen des Formulars ergänzt. Es werden die Felder aufgelistet, die benötigt werden. Die beiden letzten Felder "captcha" und "cmd_send" benötigt ich nicht, daher deaktiviere ich die Checkboxen vor dem Feld.

Dann klicke ich auf "Save" um die Tabelle anzulegen.

chronoforms v5 01

Nun öffne ich nochmals das Formular, indem ich auf den Namen "kontakt" des Formulars klicke.

chronoforms v5 01

Im Bereich "Setup" befinden sich im Unterbereich "Data Save" die Einstellungen, die für das Speichern in der Tabelle zu sorgen.

Ich trage als Name der Aktion (Action Label) den Namen "act_db_save" ein. Der Name muss eindeutig sein, darf keine Leerzeichen und keine Sonderzeichen haben

Der Eintrag "Enable" wird auf "Yes" gestellt.

Als Tabellennamen (Table name) wähle ich die gerade erstellt Tabelle aus.

chronoforms v5 01

Dann kann die Einstellung gespeichert werden.

Nun betrachte ich das Formular zum ersten Mal. Hierzu klicke ich auf "View Form".

chronoforms v5 01

Ich trage in die Felder entsprechende Werte an.

chronoforms v5 01

Nach dem "Senden" wird der "DAnke-Seite" angezeigt.

Diese sollte auf Ihren Seiten ein wenig besser gestaltet werden. Ein paar Leerzeilen drüber, ein paar Leerzeilen drunter und das "Vielen Dank" ggf. zentriert. Aber das überlasse ich Ihnen.

chronoforms v5 01

Ich schließe die Formularseite. Wieder zurück im Backend der ChronoForms, können wir über den "Pfeil" in der Zeile des Formulares die zuvor gewählte Tabelle auswählen und anklicken.

chronoforms v5 01

Es öffnet sich eine Übersicht, die alle Einträge anzeigt, die mittlerweile über das Kontaktformular eingegeben und versandt wurden. Ich klicke auf den Eintrag.

chronoforms v5 01

Hier kann man lesen, was die Besucher eingeben haben. Den Eintrag kann man über die Schaltfläche "Cancel" oben rechts schließen.

chronoforms v5 01

Noch ein "Goodie": Wenn Sie ein Anmeldeformular erstellt haben und sich über das Formular einige Personen angemeldet haben, kann man mit einem Klick alle Einträge auswählen und über die Schaltfläche "Backup records" als CSV-Datei herunterladen.

chronoforms v5 01

Diese CSV-Datei kann über ein entsprechendes Programm (z. B. Microsoft Excel) importiert und ausgewertet werden.

chronoforms v5 01

Um das Fomular als Menüpunkt in der Navigation zu integrieren, wechsle ich über die Menüs ins "Main Menü". Dort klicke ich auf "Neu".

chronoforms v5 01

Als Menütitel gebe ich "Kontakt" ein und klicke dann auf "Auswählen".

chronoforms v5 01

In den Menüeintragstypen gibt es nach der Installation der "ChronoForms"-Komponente nun auch den Eintrag "ChronoForms5 form". Diesen Eintrag wähle ich aus.

chronoforms v5 01

Dann wechsle ich ins Register "Optionen".

chronoforms v5 01

Hier wird in der Zeile "Form Name" der Name des Formulars "kontakt" eingetragen. Ich speichere den Eintrag über die Schaltfläche "Speichern & Schließen".

chronoforms v5 01

Der Eintrag ist ganz unten im Menü sichtbar. Dann schaue ich mir die Seite im Frontend an.

chronoforms v5 01

Tatsächlich taucht das Kontaktformular als letzter Menüpunkt auf. Ich Klicke auf "Kontakt".

chronoforms v5 01

Hier kann man nun als Besucher auf das Formular zugreifen.

Damit will ich erst mal Schluss machen. Der Rest ist wie immer. Es gibt ein Plugin, über das man Formulare direkt in einen Beitrag einbinden kann. Als "TAG" wird


{ chronoforms } kontakt { / chronoforms }

genutzt.

chronoforms v5 45

Das Ergebnis sieht dann wie folgt aus:

chronoforms v5 46

Damit ist der Workshop am Ende. Mehr finden Sie im Internet auf der Homepage des Herstellers, aber auch bei YouTube und den üblichen Quellen.

ENDE DES WORKSHOPS

Weitere Informationen im Internet