ChronoEngine hat für Joomla! 1.6 ein paar Änderungen in die ChronoForms einfließen lassen. Hier möchte ich anhand eines Kontaktformulares zeigen, wie Ihr ein Formular mit ChronoForms unter Joomla! 1.6 erstellen könnt.

Meldet euch nach der Installation von ChronoForms am Backend an ...

ChronoForms - Neues Formular erstellen unter Joomla! 1.6

... und wechselt über "Komponenten > ChronoForms" zum Forms Manager alternativ gleich über "Komponenten > ChronoForms" auf "Easy Form Wizard".

Anmerkung: Der Hinweis in roter Schrift "Your Chronoforms install at .... is NOT Validated ..." weist nur darauf hin, das ihr euch bei ChronoEngine nicht registriert und noch keinen Beitrag für das Projekt geleistet habt. Wer möchte, kann für ein paar Euro das Projekt unterstützten und den Link zum Hersteller aus den Formularen entfernen lassen.

Um ein neues Formular mit Hilfe des "einfachen Assistenten" zu erstellen, klickt auf "Easy Form Wizard" (siehe blau gestrichelter Pfeil).

Erstellen von Formularen mit dem ChronoForms Easy Wizard unter Joomla! 1.6

Es öffnet sich der Assistent zum erstellen von Formularen.

Erstellen von Formularen mit dem ChronoForms Easy Wizard unter Joomla! 1.6

Wechselt in die "Form Settings" (Formulareinstellungen).

ChronoForms - Speichern der Formulareinstellungen

In der Zeile "Form name" tragt Ihr einen eindeutigen Namen für das Formular ein (ich nutze den Namen "kontakt"). Veröffentlicht das Formular gleich, hierzu setzt hierzu die Option "Published" auf "Yes".

Achtung: Der Name des Formulars muss eindeutig sein. Er darf keine Umlaute (ä, ü, ö), kein ß, keine Leerzeichen, keine Sonderzeichen enthalten. Ich selbst habe mir angewöhnt, die Namen immer klein zu schreiben, ist aber keine Pflicht.

Speichert die Einstellungen über die Schaltlfäche "Speichern" (siehe blauer Pfeil in der oberen Abbildung).

Einsatz des Textfeldes (Text Box) im ChronoForm Formular

Nach dem Speichern befindet ihr euch wieder im Regsiter "Preview", der Vorschau auf das Formular. Ihr könnt nun die Elemente aus dem linken Bereich auf den Vorschaubereich ziehen (einfach per Drag & Drop eines nehmen und dort drüben fallen lassen). Ich selbst habe zunächst eine "Text Box" in den Vorschaubereich gezogen.

Eigenschaften der Elemente einstellen

Um die Eigenschaften der Text Box zu bearbeiten, klickt Ihr nun auf dasmittlere Symbol (siehe auch blauer Pfeil in der oberen Abbildung).

Name des Elementes muss eindeutig pro Formular sein

Jedes Element auf einem Formular muss einen eindeutigen Namen haben. Der Name darf sich natürlich auf einem anderen Formular wiederholen, doch auf diesem Formular muss er eindeutig sein. In der Zeile Field Name trage ich "txt_name" ein, damit ich mich später besser an den Namen des Elementes erinnern kann.

Dann könnt Ihr noch die maximale Länge des Textfeldes (Field Max Length) eintragen, d. h. wie viele Zeichen man maximal eingeben kann. Die Feldbreite (Field Size) bestimmt, wie breit das Feld ist (30 Zeichen sind voreingestellt). Das lass ich mal so stehen.

Bewegt euch mit der Bildlaufleiste etwas nach unten.

Label des Textfeldes einstellen

In der Zeile "Label Text" könnt Ihr einstellen, was vor dem Textfeld stehen soll. Ich schreibe "Name" dort hinein. Klickt anschließend auf "Apply", um die Einstellungen zu speicheren. Es erscheint ...

Speichern der Einstellungen für das Element

... "Saved" dort wo Apply stand. Schließt dann die Einstellungen für das Element über das Kreuz oben rechts (siehe blauer Pfeil in der oberen Abbildung).

Speichern der Einstellungen

Klickt nun auf das Symbol "Speichern", um das komplette Formular zu speichern. Dadurch wird da das Formular neu geladen und der Name der Elemente richtig gesetzt.

Speichern der Einstellungen

Nach diesem Muster arbeitet ihr nun weiter. Ich hole mir als nächstes eine "Textarea" und benenne die "Nachrichten". Dann ein "Captcha Input" und abschließend noch einen "Submit Button".

ACHTUNG: Wenn Ihr ein "Captcha Input" einfügt, belasst den "Field Name" bei "chrono_verification". Wenn Ihr den abändert, dann wird das Formular nicht gesandt. Es kommt ständig die Meldung "Falscher Sicherheitscode / Wrong verification code"!

Empfänger E-Mail-Adresse eingeben

Klickt nun auf das Register "Emails".

Empfänger E-Mail-Adresse eingeben

Dort gestalten wir nun die E-Mail, die uns zugesandt wird, sobald jemand einen Eintrag ins Formular macht. Klickt auf "Click to configure" und fangen wir mit den Allgemeinen Einstellungen an (General):

chronoforms_easy_form_wizard_13

Ist ist zunächst nur in die Option "Enable" auf "Yes" zu setzen. Die restlichen Optionen lasst so stehen. Wechselt ins Register "Template".

chronoforms_easy_form_wizard_14

Hier könnt ihr euch nun eine Nachricht erstellen. Mit Hilfe von HTML-Befehlen (wie z. B. den
-Befehl für einen Zeilenumbruch) könnt Ihr den Text gestalten. Die Namen der Elemente kommen in geschweifte Klammern. Hoffentlich habt Ihr euch eure Feldnamen gemerkt. Wenn nicht, speichert kurz und schaut euch nochmal die Elemente an.

Wenn Ihr noch ein paar HTML-Befehle kennen lernen wollt - z. B. um eure e-Mails zu gestalten - werft einen Blick auf die Seiten von Stefan Münz unter de.selfhtml.org.

Ich habe mir erlaubt folgenden Text als Vorlage für meine E-Mail einzusetzen:

Folgende Informationen kamen über das Kontaktformular<br>
<br>
Name: {txt_name} <br>
Nachricht: {txt_nachricht}<br>
<br>
<br>
 ENDE.

Tragt euren Text ein und wechselt zum Register "Static".

chronoforms_easy_form_wizard_15

Hier wird nun die E-Mail-Adresse eingegeben, an die die Informationen gesendet werden. Tragt in der Zeile "To (Required)" diese E-Mail-Adresse ein (ich nutze einfach meine eigene).

Unter "Subject (Required)" tragt ihr einen Betreff ein, der in der E-Mail stehen soll. Ich schreibe "Neue Anfrage über das Kontaktformular".

Weiterhin ist in der Zeile "From name (Required)" ein Name einzutragen, von demjenigen der die E-Mail sendet (ich trage "Kontaktformular" ein).

Und letztlich in der Zeile "From email (Required)" eine E-Mail-Adresse, unter der das Formular senden darf. Achtet hier darauf, dass die meisten Provider nur E-Mails von Adressen zulassen, deren Absender (und das ist hier der Absender) auch auf dem Server existieren. hier ist die Hauptursache dafür, dass Formulare keine E-Mails versenden. Also tragt hier nicht Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! ein, sondern eine eurer Adressen!

Habt Ihr alles eingetragen, klickt auf "Apply" (siehe oranger Pfeil in der oberen Abbildung).

chronoforms_easy_form_wizard_16

Dann könnt Ihr die Einstellungen für die E-Mail schließen (klickt hierzu auf das Kreuz oben rechts - siehe baluer Pfeil in der oberen Abbildung).

chronoforms_easy_form_wizard_17

Speichert mal zwischendurch (klick auf Speichern ... siehe blau gestrichelter Pfeil), dann wechselt ins Register "Thanks Message" (siehe orange geschwungener Pfeil).

chronoforms_easy_form_wizard_18

Ein weitere Klick auf "Click to configure" ist nötig.

chronoforms_easy_form_wizard_19

Genau wie bei der E-Mail, könnt Ihr hier - auch mit Hilfe von HTML-Auszeichnungen - eine Dankeschön Meldung formuliren. Ich habe hierzu folgenden Text genutzt:

<p align="center">Vielen Dank für Ihre Nachricht.</p>

Dann wieder Apply klicken und Schließen. Speichert das Formular wieder.

Wechselt ins Register "Anti Spam".

Einstellungen für das Captch, also den Sicherheitscode

Dann klickt in der Zeile "Load Captcha" auf "Click to configure" (siehe grüner Pfeil mit Punkt am Ende).

Einstellungen für das Captcha

Aktiviert in der Zeile "True Type Fonts Support" die Einstellung "With fonts support". Damit wird der Sicherheitscode später aus Ziffern und Zeichen erzeugt.

Apply ... Schließen.

Dann wird das Captcha noch aktiviert! Klickt hierzu auf "Click to configure" hinter "Check Captcha".

Chronoforms - Captcha aktivieren

Hier ist die Option auf Enable auf "Yes" zu stellen.

Chronoforms - Captcha aktivieren

Um dem Benutzer einen deutsche Meldung zu geben, könnt ihr statt "You have entered a wrong verification code!" z. B. "Sie haben den falschen Sicherheitscode eingegeben!" einsetzen. Apply ... Schließen.

Damit habt ihr es geschafft. Das Formular ist fertig.

Speichern und Schließen des Formulares

Klickt auf "Speichern & Schließen" und wir kommen zurück zum "Forms Manager".

Forms Manager - Klick auf Frontend View

Hier könnt Ihr nun über einen Klick auf "Frontend View" einen Blick auf das Formular verdient:

Blick auf das Formular - Aus Besuchersicht

Gebt mal ein paar Beispieldaten ein. Unten dann den Sicherheitscode nicht vergessen. Ein Klick auf senden ...

So sieht die Nachricht für den Dank aus

... und die Daten werden auf den Weg geschickt. Checkt eure E-Mails.

E-Mail die uns das Formular zugesendet hat...

Damit ist ein kleiner Einstieg in ChronoForms (hier in der Version V4 RC 1.7) beendet. Schaut euch einfach mal die übrigen Elemente und Einstellungen an. Es gibt noch einiges zu entdecken. Der Beitrag "ChronoForms - Dateien hochlanden mit dem File Upload Element unter Joomla! 1.6" zeigt euch wie, Ihr mit dem "File Upload Element" umgeht.

Weiterhin zeigt der Beitrag "ChronoForms - Dynamische E-Mail Benachrichtigung" wie man dem Besucher, der seine E-Mail-Adresse hinterlässt, eine Kopie der Informationen zukommen lassen kann (dynamische E-Mail-Empfänger bzw. "Dynamic To")

Wer seine Formulare noch ein wenig individueller gestalten will, schaut sich den Beitrag "ChronoForms - Gestaltung der Formulare mit CSS " an. Dort wird gezeigt, wie man an die CSS-Dateien kommen kann, die für die Formatierung des Formulares verantwortlich sind.

Viel Spaß beim Testen.

ENDE

Beachtet Bitte: Wir können keine Garantie dafür übernehmen, ob die Anleitungen auf dieser Seite stets aktuell, komplett oder richtig sind. Wir versuchen natürlich, so genau wie möglich zu arbeiten, doch wir sind keine Entwickler und untersuchen nicht alle Ecken und Kanten der Erweiterungen. Damit habt Ihr schon die Pflicht euch auch ein wenig mit den Erweiterungen zu beschäftigen und die Anleitungen und Foren bei den Herstellern zu lesen.

Kommentare   

# Gabi 2012-07-12 11:47
Danke für die Beschreibung, hat mir sehr weitergeholfen!
:-)
Antworten | Antworten mit Zitat | Zitieren
# Heiderad 2013-01-14 00:34
Super Beschreibung! Könnt Ihr hier vielleicht auch posten, woran es liegt, wenn die Mail zwar übermittelt wird, aber der Inhalt (wie Text in der Textbox); INSERT INTO mqdcs_jcomments (object_id, object_group, lang, userid, name, username, email, comment, ip, date, isgood, ispoor, published) VALUES also die Nachricht nicht?
Antworten | Antworten mit Zitat | Zitieren
# Kai Greinke 2013-02-13 07:16
"Hallo Heiderand,

die Textbox hat einen Namen ... so etwas wie ""input_text_1" ". Ich habe die bei mir in txt_nachname umbenannt.

Wenn du die E-Mail erstellst, achte darauf, dass hier der gleiche Name verwendet wird, also auch ...

Nachname: { txt_nachname }

...sonst kommt nix an.!

HTH, Kai"
Antworten | Antworten mit Zitat | Zitieren
# Stephan 2013-02-13 16:04
1A Hilfestellung, vielen Dank
Antworten | Antworten mit Zitat | Zitieren
# Lars Kroll 2014-02-07 13:22
Hallo,

super Anleitung. :) Danke dafür.
Kennst du dich auch mit der "Required"-Funk tion aus? Ich habe z.B. mehrere Checkboxen und möchte das der User mindestens eine Checkbox auswählen muss, damit die Email abgesendet werden kann.

Gruß Lars
Antworten | Antworten mit Zitat | Zitieren

Kommentar schreiben

Kommentare sind jeder Zeit willkommen. Beachtet, dass eure Kommentare zunächst von uns gelesen werden, bevor wir sie freischalten. Ihr könnt euch vorstellen, das auch über diese Komponenten viel Spam verbreitet wird.

Weiterhin noch der Hinweis: Die Kommentar-Erweiterung arbeitet mit Cookies! Ohne aktive Cookies werden die Captchas nicht erkannt!


Sicherheitscode
Aktualisieren