TYPO3-Tutorial 2012-24 – Ein einfaches Mailformular mit form

TYPO3 LogoTYPO3 hat schon seit langem ein integrierte Möglichkeit, einfach Mailformulare zu erzeugen. Nur war bis vor einer Weile das Ganze nicht sehr komfortabel. Inzwsichen gibt es aber eine relativ komfortable Möglichkeit, Mail-Formulare zu erstellen, die sogar eine Validierung der Eingabefelder zulässt. Dazu verwendet man die bei TYPO3 mitgelieferte Extension „form“.
Für relativ einfache Formulare reicht diese im Prinzip aus, sodaß man unter Umständen ohne weitere Extension wie Powermail oder Formhandler auskommen kann.
Im folgenden Video zeige ich, wie ihr ein einfaches Kontaktformular mit „form“ erstellen könnt.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Alles bisher erschienenen Screencasts gibt es hier zum Download.

Dieser Beitrag hat 41 Kommentare

  1. Max

    Hallo,
    ich verwende TYPO3 4.5.17 und wenn ich im Erweiterungsmanager nach FORM suche, kommen zwar viele Ergebnisse, aber die Extension Form 4.7.4 wird mir leider nicht angezeigt!
    Wie bekomme ich diese extension installiert?
    Danke

    1. Peter Körner

      Mein Tipp.
      Benutze Powermail … ist prima das Teil.

  2. Peter Körner

    Zum Thema Form 4.7.4 bei Typo3 4.7.5 habe ich folgendes festgestellt.
    Form ist eingedeutscht (Sprachpaket)
    Leider kommt go back to the form bzw. confirm anstatt alles in deutsch. Was mache ich falsch?
    Danke für die Info.
    PK

    1. Tobi

      das Würde ich auch gern wissen

      1. Peter Körner

        Eventuell die Lösung:
        Im Root Template unter Setup folgendes eintragen …
        sys_language_uid = 0
        language = de
        locale_all = de_DE
        locale_all = de_DE.UTF8
        xhtml_cleaning = all
        htmlTag_langKey = de-DE
        }
        xml:lang=“de“ lang=“de“

  3. Tobi

    Jo habs auch grad selbst gefunden…
    config.language = de
    config.locale_all = de_DE
    das war bei mir noch auskommentiert, wegen einer vorgesehenen mehrsprachigen Konfiguration.
    Funktioniert jetzt super!
    LG Tobi

  4. Thunderkitty

    Hallo…
    ich habe das Formular komplett aufgebaut und nun fällt mir auf, dass keinerlei Validierung für Telefonnummern enthalten ist … mach ich das nun über Regex oder gibts dazu ein Addon oder so??

  5. tiggy

    Super Tutorial! … aber wie mache ich es, dass das Formular nach dem Absenden auf eine Danke-Seite weiterleitet?

    1. Peter Körner

      Benutze Powermail. Da kannst du eine Dankesseite einbauen.
      Wenn du dazu Fragen hast … her damit.
      Dir wird geholfen 🙂
      PK

      1. tiggy

        Läuft Powermail denn auch auf Typo3 6.0.0 korrekt?
        Wenn ich Powermail installiere, erhalte ich die Meldung unter Power Mail Function Check
        „TYPO3 Version
        Please check the TYPO3 version – maybe Powermail works not properly in this version“

        1. Habe es (noch!) nicht getestet. Kann aber sein, dass PM einfach noch nicht „offiziell“ für die 6.0 frei gegeben ist. Versuche es einfach, du siehst ja dann, ob es funktioniert oder nicht.

          1. tiggy

            Supi, es klappt, obwohl diese Meldung angezeigt wird.Und die Danke Seite ist somit auch ganz easy!
            Danke euch!

  6. Sandra Schadenbauer

    Hallo,
    ich versuche im Nachrichtenfeld bei mehrzeiligen Nachrichten die zu entfernen.
    Klappt aber leider nicht und in der Doku finde ich auch nichts passendes.

      1. Sandra Schadenbauer

        Hallo,
        da ist wohl ein Teil von meiner Nachricht bei der Übermittlung geschluckt worden…
        Wenn man mehrzeilige Nachrichten sendet, wird im Mail nur „“ angezeigt.
        Ich möchte die breaks im Mail mit Zeilenumbrüchen ersetzen.

        1. Sandra Schadenbauer

          und wieder ist ein Teil der Nachricht beim Übermitteln entfernt worden, in den Hochkomma wäre ein break-Zeichen gewesen…

  7. heidebrecht

    Habe ein Problem mit diesem Kontaktformular und zwar, wenn man Großbuchstaben in das E-Mail-Feld eingibt (wo die Gültigkeitsprüfung aktiviert ist), erhält man eine Meldung, dass man eine gültige E-Mail Adresse eingeben muss.
    Was kann ich da machen ??

    1. Keine Großbuchstaben verwenden 😉
      Großbuchstaben in einer E-Mailadresse sind bedeutungslos und unnötig. Oder du musst halt die Validierung ausschalten.

      1. heidebrecht

        Erstmal danke für die Antwort, aber es ist doch komisch einem Kunden zu sagne, dass er bitte die E-Mail-Adresse immer Kleingeschrieben eintragen muss. Ich selbst mach das ja nicht :D…
        Ich habe aber gelesen, dass man einen Filter setzen kann, dieser nennt sich „lowercase“. Wenn ich diesen Filter jedoch setze, ist die Seite mit dem Kontaktformular down.
        so sieht das Ganzen dann in der Voransicht aus:
        70 = TEXTLINE
        70 {
        name = email
        filters {
        1 = lowercase
        1 {
        }

        }
        label {
        value = E-Mail*:
        }
        ich glaube in dem oben fett markiertem Bereich fehlt etwas ? Könnte man das nicht irgendwie über die Filter regeln ? Kannst du damit etwas anfangen?
        Ich bin leider ein Neuling auf diesem Gebiet und kann auch nicht so viel mit dem ganzen Typo3 kram anfangen :-/

        1. Das mit den Filtern kenne ich nicht. Aber vielleicht solltest du dir mal Powermail 2 anschauen, vielleicht kommst du damit eher zum Ziel.

          1. Christian

            Wenn man das 1 {} einfach weglässt geht der filter, jedoch hilft einem das nicht wirklich weiter…, da die Validierung immernoch fehlschlägt.
            Ich habe es bei mir nun so gelöst das ich die Email.php die für den validation check verantwortlich ist einfach geändert habe.
            (Die Datei gibt es unter typo3/sysext/form/Classes/System/Validate )
            Dort habe ich einfach in nach Zeile 52 das folgende eingefügt:
            $value = strtolower($value);
            Dadurch wird die Adresse vor dem prüfen einfach in lowerCase überführt.
            Grüße

          2. Wolfgang Wagner

            Falls mal ein Update kommt,musst du diese Änderung halt wieder vornehmen.

  8. Schwaneberg

    Einfacher Spamschutz ohne Captcha!
    Wie funktioniert der Spamschutz?
    Spamschutzfeld 1 heißt email
    Spamschutzfeld 2 heißt e-mail
    Spamschutzfeld 3 heißt tel
    Spambots versuchen in 99% aller Fälle alle Felder auszufüllen und lesen die Feldbezeichnungen aus und versuchen anhand der gewonnen Informationen die korrekten Werte auszufüllen.
    In Spamschutzfeld 1,2,3 müssen exakt die selben Daten ausgefüllt werden. Liest ein Spambot die Feldbezeichnungen aus, so versucht der Spambot E-Mailadressen in Spamschutzfeld 1+2 zu hinterlegen sowie eine Telefonnummer oder irgendetwas anderes in Spamschutzfeld 3.
    User sehen die versteckten Felder Spamschutzfeld 1,2 und 3 nicht und füllen diese logischerweise nicht aus.
    Möchte man die Logik nachvollziehen ändert man einfach HIDDEN in TEXTLINE.
    Möchte man nicht, dass in der versendeten E-Mail der Text “Spamfeld 1:”, “Spamfeld 2:” und “Spamfeld 3” auftaucht, so entfernt man einfach folgendes:

    label {
    value = Spamschutz 1:
    }

    Das wiederholt man logischerweise mit Spamschutz 2 und 3.

    enctype = multipart/form-data
    method = post
    prefix = tx_form
    confirmation = 1
    postProcessor {
    1 = mail
    1 {
    recipientEmail = DeineEmailAdresse@domain.org
    senderEmailField = eadresse
    subject = Kontaktanfrage
    messages {
    success = Vielen Dank für Ihre Anfrage! Wir werden uns umgehend mit Ihnen in Verbindung setzen.
    error = Es ist ein Fehler aufgetreten. Bitte wenden Sie sich an den webmaster.
    }
    }
    }
    10 = SELECT
    10 {
    name = select
    label {
    value = Bitte auswählen:
    }
    10 = OPTION
    10 {
    data = Bitte auswählen
    selected = selected
    }
    20 = OPTION
    20 {
    data = Frau
    }
    30 = OPTION
    30 {
    data = Herr
    }
    }
    20 = TEXTLINE
    20 {
    name = lastname
    label {
    value = Nachname:
    }
    }
    30 = TEXTLINE
    30 {
    name = firstname
    label {
    value = Vorname:
    }
    }
    40 = TEXTLINE
    40 {
    name = street
    label {
    value = Straße:
    }
    }
    50 = TEXTLINE
    50 {
    name = city
    label {
    value = PLZ Ort:
    }
    }
    60 = TEXTLINE
    60 {
    name = telefon
    label {
    value = Telefon:
    }
    }
    70 = TEXTLINE
    70 {
    name = eadresse
    label {
    value = E-Mail:*
    }
    }
    80 = HIDDEN
    80 {
    name = email
    label {
    value = Spamschutz 1:
    }
    }
    90 = HIDDEN
    90 {
    name = e-mail
    label {
    value = Spamschutz 2:
    }
    }
    100 = HIDDEN
    100 {
    name = tel
    label {
    value = Spamschutz 3:
    }
    }
    110 = TEXTAREA
    110 {
    cols = 40
    rows = 5
    name = message
    label {
    value = Ihre Nachricht:
    }
    }
    120 = SUBMIT
    120 {
    name = 7
    value = abschicken
    }
    rules {
    1 = required
    1 {
    breakOnError = 0
    showMessage = 1
    message = Benötigt
    error = Bitte geben Sie Ihren Nachnamen ein.
    element = lastname
    }
    2 = email
    2 {
    breakOnError = 0
    showMessage = 1
    message = Benötigt
    error = Dies ist keine gültige E-Mail-Adresse
    element = eadresse
    }
    3 = equals
    3 {
    breakOnError = 0
    showMessage = 1
    message = Dieses Feld muss mit '%field' übereinstimmen
    error = Der Wert stimmt nicht mit dem Wert des Feldes "%field" überein
    field = e-mail
    element = email
    }
    4 = equals
    4 {
    breakOnError = 0
    showMessage = 1
    message = Dieses Feld muss mit '%field' übereinstimmen
    error = Der Wert stimmt nicht mit dem Wert des Feldes "%field" überein
    field = tel
    element = e-mail
    }
    5 = required
    5 {
    breakOnError = 0
    showMessage = 1
    message = Benötigt
    error = Dies ist ein Pflichtfeld
    element = message
    }
    }

  9. Schwaneberg

    Bitte beachtet dabei die Feldbezeichnungen für die einzelnen Formularfelder für Spambots e-mail, mail oder email zu bezeichnen und das für User sichtbare total anders wie im Beispiel: eadresse.
    Wenn Dir dieses Beispiel gefällt, würde ich mich über ein Videotutorial von Dir zu diesem Spamschutzbeispiel sehr freuen, damit möglichst viele Webworker eine Capcha freie Lösung benutzen. Ich würde gerne dieses Beispiel noch erschweren, aber mir ist noch noch nichts besseres eingefallen mit den Funktionen die zur Zeit zur Verfügung stehen. Ich würde gerne ein hidden Feld vorbelegen mit einem bestimmten chinesischen Zeichen, wenn das entfernt wird oder überschrieben wird, dann sollte man das Formular nicht abschicken können. Ich würde mich über weitere Spamschutz-Beispiele mit den vorhandenen Typo3 form conditions Dir/Euch freuen. (Oder ist das eine Aufgabe für das Forum?
    Ich wollte mich registrieren, aber mein Passwort war zu schwach und zack hatte ich das Problem, dass ich als Spammer mich nicht registrieren konnte.)

    1. Warum machst du nicht selber ein Tutorial daraus? Muss ja nicht als Video sein, Textform ist doch auch ok. Und dann vielleicht als Gastartikel hier im Blog 😉
      Wegen dem Forum: versuche es einfach mal mit einem anderen Usernamen.

  10. macpat

    Gibts eine Möglichkeit die prefix komplett zu entfernen. Ich möchte das Formular an ein eigenes PHP übergeben und an dieser Stelle möchte die Prefix bei den <form name=" nicht drin haben.

  11. Schwaneberg

    Wenn Du die aktuellste Typo3 Version (ab Typo3 V.4.6) hast, dann kannst Du es vergessen. PHP wurde komplett gesperrt. Möglichkeiten nur über eine Extension Programmierung. Vorher gab es ein paar dirty Tricks mit denen es funktioniert hat. Den namen des Formulars kannst Du aber meines Erachtens anpassen. prefix = tx_form umbennenen in bspw. prefix = tx_kontaktformular. Prefix komplett entfernen nicht möglich.

  12. Werner

    Funktioniert super, danke! Eine Frage aber: Wie kann man denn das Standard-CSS überschreiben? Die Form.css-Datei wird immer direkt vor body eingebunden, und meine eigenen CSS sind logischerweise immer davor.
    Wenn ich also was überschreiben will, z.B. die Nummerierung, die Farben, etc., dann geht das nur mit !important. Unsauber… Bin übrigens auf 4.7.8.

    1. Ab TYPO3 6.0 unterstützt form auch die CSS_DEFAULT_STYLES von TYPO3, hier kann man also z.B. die Einbindung der mitgelieferten Styles auch komplett abschalten und nur eigene verwenden.
      Bei 4.7.8 geht das aber noch nicht, hier wird es ohne !important wahrscheinlich nicht gehen.

  13. Maik

    Juten Tach,
    ich habe so ein Kontaktformular auf einer Seite integriert wo es noch mehr Inhaltselemente gibt.
    Ist es irgendwie möglich bei der Benachrichtigung „Vielen Dank für Ihre Nachricht blabla“ auf eine seperate Seite umzuleiten und dort diese Meldung auszugeben?

    1. Soweit ich weiss, ist eine Weiterleitung nicht möglich. Da müsstest du dann vielleicht Powermail nehmen, da kann man das machen.

      1. maik

        Hm, dann wirds wohl schwierig. Das steht alles schon soweit. Mal sehen wie ich das dann mache. Danke dir für deine schnelle Antwort.

          1. maik

            Wenn ich was finde bekommst du nen Hinweis.

      1. Ach ja, stimmt, jetzt, wo du es sagst, erinnere ich mich wieder, das in dem Video erwähnt zu haben. Peinlich, wie schnell man manche Sachen wieder vergisst… o.O

        1. maik

          Hm, ich bin mir ziemlich sicher das ich noch nicht soweit bin diesen postProcessor anzupassen, aber mal gucken was sich so finden lässt zu diesem Thema.

Schreibe einen Kommentar