TYPO3: Email layout of system extension „form“

Please note: This article was written for the old system extension „form“, which was shipped with TYPO3 version 7.6 and older.

After working in the past few years with the extensions powermail or formhandler when needing a form extension, I now wanted to give the system extension for forms, named „form“, a new chance. Until now, it looks good, even if the form wizard is a little bit buggy.

Form with extension "form"

Click to enlarge

In this article I want to show how you can adapt the layout of the email, which is sent after the form was submitted. You can see the form and it’s field in the image on the right side. Without modifications, the HTML version of the email looks like this:

HTML email

Especially the output of radio and checkbox groups do not look very nice and I do not like the spaces (around the whole text and around the radio/checkbox groups). Besides, the spaces (made with CSS rule „padding“) do not work in Outlook. But you have the possibility to change the layout with TypoScript:

TS Setup

tt_content.mailform.20 {
    postProcessor {
        mail {
            layout {
                label (
                    <labelvalue />
                )
                legend (
                    <legendvalue />
                )
                containerWrap (
                    <tbody>
                        <elements />
                    </tbody>
                )
                fieldset (
                    <td colspan="2">
                        <table cellspacing="0" cellpadding="0">
                            <legend />
                            <containerWrap />
                        </table>
                    </td>
                )
                checkbox (
                    <td width="200" valign="top">
                        <label />
                    </td>
                    <td>
                        <inputvalue />
                    </td>
                )
                radio (
                    <td width="200" valign="top">
                        <label />
                    </td>
                    <td>
                        <inputvalue />
                    </td>
                )
                radiogroup (
                    <td width="200" valign="top">
                        <legend />
                    </td>
                    <td>
                        <table cellspacing="0" cellpadding="0">
                            <containerWrap />
                        </table>
                    </td>
                )
                checkboxgroup < .radiogroup
                textline (
                    <td width="200" valign="top">
                        <label />
                    </td>
                    <td>
                        <inputvalue />
                    </td>
                )
                fileupload < .textline
                textarea (
                    <td width="200" valign="top">
                        <label />
                    </td>
                    <td>
                        <inputvalue />
                    </td>
                )
                select (
                    <td width="200" valign="top">
                        <label />
                    </td>
                    <td>
                        <elements />
                    </td>
                )
            }
        }
    }
}

Now the HTML email looks like this:

HTML email

Autor:
Geändert: Mittwoch, 3. Januar 2018 11:41 Uhr
Erstellt: Freitag, 26. September 2014 11:36 Uhr
Tags: , , , , , , , ,
Themengebiet: Web Entwicklung, TYPO3, TYPO3 Extensions

Trackback: Trackback-URL LoadingZu Favoriten hinzufügen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.