TYPO3: Foundation und Form-Extension

Geschrieben von in TYPO3 am

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>
		)
	}
}

1 Kommentar

  1. Björn

    Zum Glück sind die Probleme seit TYPO3 7 Geschichte und man kann nun sauber mittels Fluid alles anpassen.

    Dennoch ein Hinweis. In der „inoffiziellen“ Doku gibt es ein bisher undokumentiertes Feature, siehe https://docs.typo3.org/typo3cms/extensions/form/0.3/Configuration/Layout/Index.html#change-the-layout-for-a-specific-view.

    Wenn man noch – bspw. in TYPO3 6.2 – mit .layout Eigenschaften arbeitet, sollte man diese View spezifisch verwenden. Andernfalls machen die o.g. Einstellungen dieses Blog Beitrags evtl. im Confirmation oder Mail View Ärger.

    Also anstelle tt_content.mailform.20.form.layout lieber tt_content.mailform.20.form.form.layout oder tt_content.mailform.20.form.confirmation.layout verwenden.