29.03.2011 TYPO3

Einfaches Formular mit TYPO3-Bordmitteln

Aufgabenstellung

Abgebildetes Formular soll mit dem Standard-Inhaltselement "Mail-Formular" erstellt werden. Problem ist einerseits, dass die Labels in der Regel links stehen, bei den Checkboxen aber rechts. Ausserdem soll der Text "*Pflichtfelder" rechtsbündig auf Höhe des Absendebuttons stehen.

Zunächst erstellt man das "Mail-Formular"-Inhaltselement und fügt folgenden Code ein:

Name* | *name = input,40 |
Vorname* | *vorname = input,40 |
Straße | strasse = input,40 |
PLZ/Ort | plzOrt = input,40 |
Telefon | telefon = input,40 |
E-Mail* | *email=input,40,100 | | EMAIL
Bitte rufen Sie mich zurück | rueckruf=check | 0
Bitte senden Sie mir eine Referenzliste | referenzliste=check | 0
Mitteilung* | *mitteilung=textarea,40,4 |

|formtype_mail = submit | Senden
|html_enabled=hidden | 1
|subject=hidden| Kontakt example.com

Normalerweise bekommt jetzt jede label/input-Kombination einen div-Tag mit der Klasse "csc-mailform-field". Um jedem dieser divs noch eine eigene Klasse zu geben, damit die labels und inputs einzeln angesprochen werden können, ist folgender TS-Code notwendig:

tt_content.mailform.20{
  commentWrap.cObject=COA
  commentWrap.cObject{
    20=TEXT
    20.value=field-{current:1}
    20.insertData=1
  }
  layout (
     <div class="csc-mailform-field ###COMMENT###">###LABEL ### ###FIELD###</div>
  )
}

Jetzt hat jeder div-Tag neben der Klasse "csc-mailform-field" auch noch die Klasse "field-<name-des-input>". Jetzt kann man zuerst alle Labels mittels CSS mit "float:left" formatieren und dann die Labels der beiden Checkboxen mit "float:none" ausnehmen. Dort setzt man das div auf eine padding-left-Breite, die der Breite der anderen Labels entspricht und setzt das input auf "float:left".

Für den Text neben dem Button, schreibt man noch folgende Zeile zusätzlich ins TS:

tt_content.mailform.20.stdWrap.wrap = <fieldset class="csc-mailform"> | <span class="pflicht">*Pflichtfelder</span></fieldset>

Den Span-Teil setzt man mittels CSS auf "display:block" und gibt ihm einen negativen "margin-top".

Runde Ecken und Schatten sind übrigens HTML5-Eigenschaften.

Hier noch ein Ausschnitt aus der CSS-Datei:

.csc-mailform .csc-mailform-field {
	font-size:0.75em;	
	padding-bottom:5px;
	clear:both;
}
.csc-mailform .field-rueckruf, .csc-mailform .field-referenzliste {
	padding-left:90px;
}
.csc-mailform .csc-mailform-field label {
	float:left;
	width:90px;
}
.csc-mailform .field-rueckruf label,.csc-mailform .field-referenzliste label {
	float:none;
	width:350px;
}
.csc-mailform .csc-mailform-field input, .csc-mailform .csc-mailform-field textarea {
	width:350px;
	border: 1px solid #999;
	border-radius:3px;
	-moz-border-radius:3px;
	background-color:#fff;
	-moz-box-shadow: 2px 2px 2px #ccc;
	-webkit-box-shadow: 2px 2px 2px #ccc;
	box-shadow: 2px 2px 2px #ccc;
	padding:1px;
}
.csc-mailform .csc-mailform-field input {
	height:16px;
}
.csc-mailform .csc-mailform-field input#mailformrueckruf,.csc-mailform .csc-mailform-field input#mailformreferenzliste {
	width:16px;
	float:left;
	margin-right:5px;
}
.csc-mailform .csc-mailform-field input#mailformformtype_mail {
	margin-left:90px;
	width:100px;
	font-weight:bold;
	color:#666;
	height:18px;
}
.csc-mailform span.pflicht {
	font-size:0.7em;
	padding-left:380px;
	display:block;
	margin-top:-15px;	
}

Versionen: TYPO3 4.5.2

PermalinkTrackback linkViews: 803