TYPO3: Foundation und Form-Extension

npostnik

vor 9 Jahren

Bereits seit einiger Zeit nutzt ich Foundation als Basis für meine Projekte. Da ich für ein einfaches Mail-Formular nicht gleich Powermail oder Formhandler nehmen wollte, wollte ich die Ausgabe des Formulars an den HTML-Code von Foundation anpassen, damit die Styles direkt greifen. Das hat auch fast geklappt (siehe unten).
Es ist nicht möglich, den contrainerWrap zu entfernen. Sobald ich nur noch stehen blieb, war das Formular komplett verschwunden, d.h. irgendwo wird doch ein Wrapper erwartet. Ganz ohne CSS-Anpassungen kommt man dann doch nicht aus, aber diese sind überschaubar.

Weiterhin finde ich es doof, dass Pflichtfelder nicht mit einem required-Attribut versehen werden. Und bei der Validierung sollte das Label und das Feld ebenfalls mit der Klasse „error“ versehen werden. Nach ein paar Stunden Recherche im Code von Form habe ich es schließlich aufgegeben und hoffe, dass tx_form bald auch auf Fluid-Templates umgestellt wird.

SASS:

.csc-mailform {
	.csc-form-element {
		margin-bottom: rem-calc(10);
	}
	.csc-form-element-submit input {
		@include button;
	}
	span.error {
		margin-bottom: 0;
	}
	input, select, textarea {
		margin-bottom: 0;
	}
}

TypoScript:

# Layout des Mailform anpassen #
tt_content.mailform.20.form {
	layout {
		containerWrap (
			<div class="form">
				<elements />
			</div>
		)
		elementWrap (
			<div class="row">
				<element />
			</div>
		)
		label (
			<label>
				<labelvalue />
				<mandatory />
			</label>
		)
		textblock (
			<div class="large-12 medium-12 columns">
				<textblock />
			</div>
		)
		textline (
			<div class="large-4 medium-4 columns">
				<label />
			</div>
			<div class="large-8 medium-8 columns">
				<input />
				<error />
			</div>
		)
		textarea (
			<div class="large-4 medium-4 columns">
				<label />
			</div>
			<div class="large-8 medium-8 columns">
				<textarea />
				<error />
			</div>
		)
		select (
			<div class="large-4 medium-4 columns">
				<label />
			</div>
			<div class="large-8 medium-8 columns">
				<select>
					<elements />
				</select>
				<error />
			</div>
		)
		submit (
			<div class="large-offset-4 medium-offset-4 large-8 medium-8 columns">
				<label />
				<input />
			</div>
		)
		error (
			<span class="error">
				<errorvalue />
			</span>
		)
	}
}