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.
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:
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: