Formulare in Typo3

Mit dem normalen Inhaltselement FORM kann man bereits einiges machen, allerdings hat es einige Einschränkungen:

man kann die Formularelemente nur sehr mühsam mehrspaltig anordnen
Zwischentexte zwischen den Elementen sind zwar möglich, können aber nur mit einer einheitlichen Formatierung versehen werden.
die Validierung erfolgt nur mittels JavaScript
der Absender bekommt die gesendeten Inhalte nicht mehr gezeigt.
die eingebenen Daten werden nicht in einer Datenbank gespeichert

Es gibt einige Erweiterungen, die das Inhaltselement FORM erweitern, ausserdem kann man Erweiterungen einsetzen, die es komplett ersetzen.

Tipps zu FORM

Einzelne Elemente mit Klassen versehen:

tt_content.mailform.20.params.input = class="mein_input"
 tt_content.mailform.20.params.textarea = class="mein-text"

In den Beispielen auf Typo3.org findet sich eine Syntax, wie Kopien an mehrere Empfänger versendet werden können


|recipient_copy=hidden | copy@email.com

und wie man eine Bestätigungs-E-Mail an den Absender schicken kann:

|auto_respond_msg=hidden|  Hello / This is an autoresponse. //We have received your mail.

Diese Nachricht wird nur gesendet, wenn die E-Mailadresse bekannt ist, also das Feld “email” ausgefüllt wurde. Unklar ist dabei, inwieweit das gegen Spam geschützt werden kann. Ich vermute, dass es ein neues Feature von Typo3 Vs. 4 ist.

Weiterführende Links:

TypoScript-Referenz bei mittwald (in Deutsch),
TypoScript-Referenz bei Typo3 (Englisch, enthält aber einige zusätzliche Beispiele)
Fancy Form Design Using CSS Ziemlich gutes und aktuelles Tutorial zur CSS-Gestaltung von Formularen. Nicht spezifisch Typo3.
Anleitung zum Formatieren von Mailform in Typo3 Interessantes Tutorial auf der Basis von css_styled_content.
Uni-Form: Making forms simple Ein Versuch, die Formulargestaltung zu modularisieren. Nicht spezifisch Typo3, ausserdem mit vielen JavaScript-Effekten.
Wufoo Form Gallery Eine Gallery mit verschiedenen Formular-Vorlagen, deren Templates heruntergeladen werden können. Nicht spezifisch Typo3.

FORM in css_styled_content

In css_styled_content findet sich ein ziemlich ausführliches TypoScript zum FORM-Objekt, das als Ausgangspunkt genommen werden kann. Es ist dann relativ einfach, dieses zu ergänzen. Nachfolgend zuerst der Code, wie das FORM-Objekt standardmäßig überschrieben wird:

tt_content.mailform = COA
tt_content.mailform.10 = < lib.stdheader
tt_content.mailform.20 = FORM
tt_content.mailform.20 {
    layout = <tr><td class="csc-form-labelcell">###LABEL###</td><td class="csc-form-fieldcell">###FIELD###</td></tr>
    labelWrap.wrap = <p class="csc-form-label">|</p>
    commentWrap.wrap = <p class="csc-form-comment">|</p>
    radioWrap.wrap = <span class="csc-form-radio">|</span><br />
    REQ = 1
    REQ.labelWrap.wrap = <p class="csc-form-label-req">|</p>
    COMMENT.layout = <tr><td colspan="2" class="csc-form-commentcell">###LABEL###</td></tr>
    target = {$styles.content.mailform.target}
    goodMess = {$styles.content.mailform.goodMess}
    badMess = {$styles.content.mailform.badMess}
    redirect.field = pages
    redirect.listNum = 0
    recipient.field = subheader
    data.field = bodytext
    locationData = 1

    stdWrap.wrap = <table border="0" cellspacing="1" cellpadding="1" class="csc-mailform">  | </table>
    stdWrap {
        editIcons = tt_content: bodytext, pages, subheader
        editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.php:eIcon.form

        prefixComment = 2 | Mail form inserted:
    }
}

Danach folgt die neue Version ([compatVersion = 3.9.0]):

tt_content.table.20.innerStdWrap.wrap = |

tt_content.mailform.20 {
    accessibility = 1
    noWrapAttr=1
    formName = mailform
    dontMd5FieldNames = 1
    REQ = 1
    layout = <div class="csc-mailform-field">###LABEL### ###FIELD###</div>
    COMMENT.layout = <div class="csc-mailform-label">###LABEL###</div>
    RADIO.layout = <div class="csc-mailform-field">###LABEL### <span class="csc-mailform-radio">###FIELD###</span></div>
    LABEL.layout = <div class="csc-mailform-field">###LABEL### <span class="csc-mailform-label">###FIELD###</span></div>
    labelWrap.wrap = |
    commentWrap.wrap = |
    radioWrap.wrap = |<br />
    REQ.labelWrap.wrap = |
    stdWrap.wrap = <fieldset class="csc-mailform"> | </fieldset>
    params.radio = class="csc-mailform-radio"
    params.check = class="csc-mailform-check"
    params.submit = class="csc-mailform-submit"
}

Das ergibt zum Beispiel folgenden Output:

<form action="Divers.64.0.html" id="mailform" name="mailform" enctype="multipart/form-data" method="post" target="_self" onsubmit="return validateForm('mailform','the_name,Name:,email,Email:','','Leere Pflichtfelder:','')">
    <div style="display:none;">
        <input type="hidden" name="html_enabled" id="mailformhtml_enabled" value="1" />
        <input type="hidden" name="subject" id="mailformsubject" value="This is the subject" />
        <input type="hidden" name="auto_respond_msg" id="mailformauto_respond_msg" value="Hello / This is an autoresponse. //We have received your mail." />
        <input type="hidden" name="tv" id="mailformtv" value="0" />
        <input type="hidden" name="locationData" value="64:tt_content:165" />
    </div>
    <fieldset class="csc-mailform">
        <div class="csc-mailform-field">
            <label for="mailformthe_name">Name:</label> 
            <input type="text" name="the_name" id="mailformthe_name" size="20" value="Enter your name here" />
        </div>
        <div class="csc-mailform-label">
            Eine kleine Zwischenzeile
        </div>
        <div class="csc-mailform-field">
            <label for="mailformemail">Email:</label> 
            <input type="text" name="email" id="mailformemail" size="20" value="" />
        </div>
        <div class="csc-mailform-field">
            Label <span class="csc-mailform-label">Label value</span>
        </div>
        <div class="csc-mailform-field">
            <label for="mailformtv">Like TV:</label> 
            <input type="checkbox" value="1" name="tv" id="mailformtv" class="csc-mailform-check" />
        </div>
        <div class="csc-mailform-field"> 
            <input type="submit" name="formtype_mail" id="mailformformtype_mail" value="Send this!" class="csc-mailform-submit" />
        </div>
    </fieldset>
</form>

Funktionserweiterungen für FORM

Drei Extensions von Christian Jul Jensen erweitern FORM um einige dieser aufgezählten Funktionen:

julle_formpreview: zeigt nach dem Ausfüllen und vor dem Absenden des Formulars nochmals alle Daten. Repository, Manual
julle_formreceipt: Damit kann eine Bestätigungsmail an den Ausfüller versendet werden. Repository, Manual
julle_form2csv: speichert die Daten im CSV-Format. Repository, Manual
formevalwizard: Damit können Validierungsvorgaben gespeichert werden; das macht es für die Redakteure einfacher, komplexe Validierungen einzusetzen, da sie keine regulären Ausdrücke mehr benötigen. Repository, Manual
qforms: ein einfach zu nutzender Formulareditor, der den Redakteuren das Anlegen von Formularen erleichtern soll. Repository, Manual

MailformPlus

Diese Extension wird wohl am häufigsten eingesetzt, um FORM zu ersetzen. Die Handhabung ist recht einfache, das eigentliche Formular wird einfach als HTML-Template angelegt, mit den üblichen Platzhaltern. Es ermöglicht somit ein völlig freies Layout. Seine Features:

flexibles Layout mit Templates
serverseitige Validierung
E-Mail an den Absender
Speichern in Datenbank und als Export als CSV-Datei
Erweiterbar um JavaScript-Validierung, bis hin zu Ajax.
ermöglicht mehrseitige Formulare

Nachteil:

man kann keine Felder dynamisch vorbelegen
komplexere Validierungen (die über »Feld leer« hinausgehen, sind offensichtlich nicht möglich.

Repository, Manual. Eine schöne Beispielseite mit etwas AJAX ist bei Steffen Kamper zu finden.

Mehrsprachigkeit kann mit mailformplus so realisiert werden:

plugin.tx_thmailformplus_pi1.default.email_htmltemplate = /fileadmin/tmpl/deutsch.html
 [globalVar = GP:L=1]
    plugin.tx_thmailformplus_pi1.default.email_htmltemplate = /fileadmin/tmpl/andereSprache.html
 [global]

Weitere Extensions

Mir ist noch dre_formmaker aufgefallen: offensichtlich extrem mächtig, aber neu und noch im Experimentalstadium. Das Manual ist verwirrend, ausserdem erfordert es mindestens PEAR und noch weitere Bibliotheken. Sollte man aber im Auge behalten … Repository, Manual

Category:Typo3 -> Formulare
Category:Typo3 -> Extensions

Navigation

Aktive Mitglieder:

Suchen:

Seite erstellen oder finden: