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 ...
... 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).
Es öffnet sich der Assistent zum erstellen von Formularen.
Wechselt in die "Form Settings" (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).
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.
Um die Eigenschaften der Text Box zu bearbeiten, klickt Ihr nun auf dasmittlere Symbol (siehe auch blauer Pfeil in der oberen Abbildung).
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.
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 ...
... "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).
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.
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"!
Klickt nun auf das Register "Emails".
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):
Ist ist zunächst nur in die Option "Enable" auf "Yes" zu setzen. Die restlichen Optionen lasst so stehen. Wechselt ins Register "Template".
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".
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).
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).
Speichert mal zwischendurch (klick auf Speichern ... siehe blau gestrichelter Pfeil), dann wechselt ins Register "Thanks Message" (siehe orange geschwungener Pfeil).
Ein weitere Klick auf "Click to configure" ist nötig.
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".
Dann klickt in der Zeile "Load Captcha" auf "Click to configure" (siehe grüner Pfeil mit Punkt am Ende).
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".
Hier ist die Option auf Enable auf "Yes" zu stellen.
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.
Klickt auf "Speichern & Schließen" und wir kommen zurück zum "Forms Manager".
Hier könnt Ihr nun über einen Klick auf "Frontend View" einen Blick auf das Formular verdient:
Gebt mal ein paar Beispieldaten ein. Unten dann den Sicherheitscode nicht vergessen. Ein Klick auf senden ...
... und die Daten werden auf den Weg geschickt. Checkt eure E-Mails.
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.
- Details
- Erstellt: 23. Dezember 2013
- Zuletzt aktualisiert: 23. Dezember 2013
Kommentar schreiben
Weiterhin noch der Hinweis: Die Kommentar-Erweiterung arbeitet mit Cookies! Ohne aktive Cookies werden die Captchas nicht erkannt!
Kommentare
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"
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
Alle Kommentare dieses Beitrages als RSS-Feed.