Formulare in Contao mit CSS3

Mit Unterstützung von CSS3 lassen sich auch Formulare ansprechend umsetzen. Die aus dem Tutorial Bildergalerien in Contao mit CSS3 bekannten CSS3-Eigenschaften box-shadow und border-radius lassen sich auch auf Formularfelder erweitern. Ergänzend findet noch die CSS3-Eigenschaft text-shadow Anwendung.

Wichtig dabei ist in den Einstellungen des Formulares unter der Rubrik Formular-Konfiguration die Option Tabellenloses Layout zu aktivieren.

Einstellung tabellenlose Darstellung verwenden

Dann sieht das Formular im Frontend nach dem Einbinden in einen Artikel noch sehr roh aus – und schick ist auch anders ;-).

Das Formular ohne CSS-Definitionen

Nachricht

Angaben zur Person



Bitte rechnen Sie 1 plus 3.

Das Formular mit CSS "anhübschen"

Das angepasste Formular ist unten dargestellt.

Was wurde angepasst?
Zunächst wurde dem Formular eine CSS-Klasse zugewiesen (hier form-css3) und die Labels über die CSS-Eigenschaft display:block auf die gesamte Breite gesetzt, so dass die Labels immer über dem einzelnen Feld stehen. Die Breiten für die Textfelder (ein- und mehrzeilig) wurden definiert sowie die Angaben zur Schriftgröße. Die CSS3-Eigenschaft box-shadow wurde hier verwendet– mit einem Unterschied: die Angabe inset setzt die Schatten innerhalb der Box. Es entsteht der optische Effekt, dass die Eingabefelder "vertieft" dargestellt sind.


Bei Berührung des Mauszeigers (hover) oder Benutzen der Tabulatortaste (focus) auf ein Eingabefeld (ein- und mehrzeilig) ändert sich die Rand- und Hintergrundfarbe, um die aktive Auswahl optisch hervorzuheben. Wird nun in ein Eingabefeld geklickt und erhält dieses den Fokus, wird die Schriftgröße und der Zeichenabstand erhöht, so dass die Eingabe leichter lesbar wird. Gleichzeitig werden die Breiten der Eingabefelder vergrößert, so dass für die Eingabe der Daten mehr Platz vorhanden ist.

Das Formular mit CSS-Definitionen

Nachricht

Angaben zur Person



Was ist die Summe aus 4 und 4?

Die CSS-Definitionen für das Formular

/* Position und Grundeigenschaften des Formulars definieren */
#main .ce_form.form-css3
{
	margin:0 0 0 80px;
	padding:20px 0 0 20px;
	font-family:verdana,arial,sans-serif;
}

/* Fieldsets definieren */
#main .ce_form.form-css3 fieldset
{
	width:80%;
	margin:0 0 30px;
	padding:10px;
	border:1px solid #dfdfdf;
}

/* Fieldset Legenden definieren */
#main .ce_form.form-css3 fieldset legend
{
	margin:-8px 0 0 -5px;
	padding:0 5px;
	font-weight:bold;
	font-size:1.2em;
	color:#999;
	letter-spacing:.1em;
}
/* Labels definieren */
#main .ce_form.form-css3 label
{
	display:block;
	padding:10px 0 4px;
	font-weight:bold;
	font-size:1.2em;
	color:#999;
}
/* einzeilige Textfelder definieren */
#main .ce_form.form-css3 .text
{
	width:300px;
	margin:0 0 4px;
	padding:6px;
	border:1px solid #efefef;
	font-size:1.3em;
	/* Gecko-Browser (Firefox) */
	-moz-box-shadow:inset 3px 3px 6px #cfcfcf;
	/* Webkit-Browser (Safari, Chrome) */
	-webkit-box-shadow:inset 3px 3px 6px #cfcfcf;
	/* allgemein CSS3 */
	box-shadow:inset 3px 3px 6px #cfcfcf;
}
/* mehrzeilige Textfelder definieren */
#main .ce_form.form-css3 .textarea
{
	width:300px;
	height:100px;
	margin:0 0 4px;
	padding:6px;
	border:1px solid #efefef;
	font-family:verdana,arial,sans-serif;
	font-size:1.3em;
	line-height:1.6;
	/* Gecko-Browser (Firefox) */
	-moz-box-shadow:inset 3px 3px 6px #cfcfcf;
	/* Webkit-Browser (Safari, Chrome) */
	-webkit-box-shadow:inset 3px 3px 6px #cfcfcf;
	/* allgemein CSS3 */
	box-shadow:inset 3px 3px 6px #cfcfcf;
}
/* Captcha-Feld definieren */
#main .ce_form.form-css3 .captcha
{
	width:100px;
	margin:0 0 4px;
	padding:6px;
	border:1px solid #efefef;
	font-size:1.2em;
	/* Gecko-Browser (Firefox) */
	-moz-box-shadow:inset 3px 3px 6px #cfcfcf;
	/* Webkit-Browser (Safari, Chrome) */
	-webkit-box-shadow:inset 3px 3px 6px #cfcfcf;
	/* allgemein CSS3 */
	box-shadow:inset 3px 3px 6px #cfcfcf;
}
/* Captcha Textbeschreibung definieren */
#main .ce_form.form-css3 .captcha_text
{
	margin:0;
	padding:0 0 0 20px;
	font-size:1.3em;
}
/* Absendeknopf definieren */
#main .ce_form.form-css3 .submit
{
	width:310px;
	margin:10px 0;
	padding:5px 0;
	font-size:1.6em;
	color:#777;
	text-shadow:1px 1px 1px #fff;
	letter-spacing:.2em;
	border:none;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius:6px;
	-moz-box-shadow:1px 1px 1px #888;
	/* Webkit-Browser (Safari, Chrome) */
	-webkit-border-radius:6px;
	-webkit-box-shadow:1px 1px 1px #888;
	/* allgemein CSS3 */
	box-shadow:1px 1px 1px #888;
	border-radius:6px;
	text-shadow:2px 2px 2px #fff;
	background:#cfcfcf;

}
/* Fehleranzeige definieren */
#main .ce_form.form-css3 p.error
{
	width:70%;
	margin:10px 0;
	padding:5px 0 5px 10px;
	font-size:1.2em;
	color:#fff;
	background:#f30;
	/* Gecko-Browser (Firefox) */
	-moz-border-radius:7px;
	/* Webkit-Browser (Safari, Chrome) */
	-webkit-border-radius:7px;
	/* allgemein CSS3 */
	border-radius:7px;
}
/* Hoverzustand ein- und mehrzeilige Textfelder definieren */
#main .ce_form.form-css3 .text:hover,
#main .ce_form.form-css3 .textarea:hover
{
	border:1px solid #CF9B9B;
	background:#efefef;
}
/* Fokuszustand einzeiliges Textfeld definieren */
#main .ce_form.form-css3 .text:focus
{
	width:95%;
	border:1px solid #CF9B9B;
	font-size:2em;
	font-size:normal;
	letter-spacing:.1em;
	background:#efefef;
}
/* Fokuszustand mehrzeiliges Textfeld definieren */
#main .ce_form.form-css3 .textarea:focus
{
	width:95%;
	height:200px;
	border:1px solid #CF9B9B;
	font-size:2em;
	font-size:normal;
	background:#efefef;
}

In diesem Tutorial werden die CSS3-Eigenschaften border-radius, box-shadow und text-shadow eingesetzt. Die CSS3-Eigenschaften border-radius und box-shadow wurden im Tutorial Bildergalerien in Contao mit CSS3 erklärt; neu ist hier die ergänzende Angabe von inset, die den Schatten innerhalb der Box und nicht außen anzeigt:
box-shadow: inset 2px 2px 6px #666;

Die CSS-Definition text-shadow:
Für den Absendeknopf wurde die CSS3-Eigenschaft text-shadow eingesetzt. Der Aufbau lautet wie folgt:

Versatz links - Versatz oben - Unschärfe (Blur) - Farbe

also als Beispiel:

text-shadow: 1px 1px 2px #666;

Im Gegensatz zu den CSS3-Eigenschaft box-shadow gibt es hier keine propriätären Schreibweisen. Unterstützt wird die CSS-Eigenschaft text-shadow in den aktuellen Browsern Firefox, Safari, Opera, nicht im Internet Explorer, einschließlich Version 8. Hier helfen dann nur die Filter-Eigenschaften des Internet Explorers.

twitter
rss-news-feed
weitzeldesign
planepix