Anleitung zum Formatieren von Mailform in Typo3

Ein Webmail-Formular ist für einen Webseiten-Administrator ein sehr nützliches Tool, um dem Leser eine Möglichkeit zu geben, aktiv an den Inhalten mitzuarbeiten oder Mitarbeiter zu kontaktieren. Direkt in den Webseiten integriert ist ein Webmail-Formular für den Leser einfach zu bedienen, da kein eigener E-Mail-Account oder -Programm benötigt wird.

Typo3 - Mailform

Typo3 bietet Webmail-Formulare standardmäßig unter der Bezeichnung "Mailform" als Inhalts-Element an. Diese müssen natürlich noch an das jeweilige Design der Webseite angepasst werden, da sie ansonsten sehr "unschick" aussehen. Da Mailform keine Erweiterung ist, gestaltet sich die Formatierung etwas schwieriger, da es kein Template oder Ähnliches gibt.

Damit Typo3-Anwender trotzdem ein schickes Webmail-Formular auf ihren Webseiten einrichten können, kann man folgenden Code in Typo3 und in die CSS-Datei einbinden. Voraussetzung ist, dass man CSS-Styled-Content nutzt. 

tt_content.mailform.20 {
  accessibility = 1
  noWrapAttr=1
  formName = mailform
  dontMd5FieldNames = 1
  REQ = 1
  layout = <div>###LABEL### ###FIELD###</div>
  COMMENT.layout = <div>###LABEL###</div>
   
  ### doppeltes LABEL
  // RADIO.layout = <div>###LABEL### ###FIELD###</div>
  RADIO.layout = <div class="radiolayout">###FIELD###</div>
   
  LABEL.layout = <div>###LABEL### ###FIELD###</div>
   
  ### Möglichkeit die Input Felder nebeneinander sauber
  ### darzustellen
  //labelWrap.wrap = <div style="width:100px; float:left;">|</div>
  labelWrap.wrap = <div style="width:350px;">|</div>
   
  commentWrap.wrap = |
   
  ### nach jeden Optionsfeld ein Umbruch, lässt man den weg, sind
  ### die Optionsfelder nacheinander
  radioWrap.wrap = |<br />
   
  ### Das selbe gilt für benötigte Felder in Formularen
  REQ.labelWrap.wrap = <div style="width:350px;">|</div>
  stdWrap.wrap =  <div class="formu">|</div>
}

### Formular CSS zuweisen
### Die CSS müssen natürlich eingebunden werden
### Seitendefinition

page = PAGE
page.bodyTag = <body>
page.includeCSS {
  file1 = fileadmin/styles.css
}

### Des weiteren habe ich für die einzelnen durch CSS definierten
### Input, Select, etc. Klassen, ebenfalls im Setup von TYPO3

tt_content.mailform.20 {
  params >
  params.input = class="mf-input"
  params.password = class="mf-pass"
  params.textarea = class="mf-text"
  params.check = class="mf-check"
  params.radio = class="mf-radio"
  params.select = class="mf-select"
  params.file = class="mf-file"
  params.reset = class="mf-reset"
  params.submit = class="mf-submit"
}

 Und nun noch folgenden CSS-Code in das Stylesheet einfügen und ggf. anpassen. 

legend {
padding-left:10px;
padding-right:10px;
border: 0px;
}

fieldset {
border:0px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #C0C0C0;
}

.radiolayout {
width:60%;
padding-top:15px;
padding-bottom:15px;
}

.formu {
width:80%;
padding-top:10px;
padding-bottom:10px;
padding-left:110px;
border: 1px solid #C0C0C0;
}

.mf-radio {
border:0px;
}

.mf-text {
color: #000000;
border: 1px solid #C0C0C0;
margin-bottom: 5px;
}

.mf-check {
border: 0px;
}
.mf-select {
border:0px;
}

.mf-input {
border: 1px solid #C0C0C0;
margin-bottom: 5px;
}

.mf-submit {
color: #ffffff;
background-color: #C0C0C0;
border: 0px;
}

Dieses Tutorial wurde basierend auf Typo3 4.0.2 und HtmlArea 1.3.7 durchgeführt.