Formularfelder

Ähnlich wie bei Artikeln und Inhaltselementen gibt es auch bei Formularen für jedes Formularfeld ein eigenes Element, das speziell auf die jeweiligen Anforderungen des Eingabefelds ausgerichtet ist. Für jedes Formularfeld musst du mindestens einen Feldnamen und eine Feldbezeichnung eingeben.

Feldname: Über den Feldnamen wird die Benutzereingabe nach dem Absenden des Formulars referenziert. Falls du die Formulardaten in der Datenbank speicherst, muss es in der Tabelle ein gleich lautendes Feld geben.

Feldbezeichnung: Die Feldbezeichnung wird im Frontend vor bzw. über dem Formularfeld angezeigt und sollte in der jeweils richtigen Sprache verfasst werden.

Pflichtfeld: Wenn du diese Option auswählst, muss das Feld zum Abschicken des Formulars ausgefüllt werden. Bleibt es leer, erscheint eine Fehlermeldung.

Erklärung

Das Formularfeld Erklärung fügt dem Formular eine beliebige formatierte Erklärung hinzu. Die Eingabe erfolgt über den Rich Text Editor.

Text/HTML

Text: Gebe hier den formatierten Text der Erklärung ein.

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_explanation überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-explanation explanation">
    <p>…</p>
</div>

HTML

Das Formularfeld HTML fügt dem Formular beliebigen HTML-Code hinzu. In den Backend-Einstellungen unter »Erlaubte HTML-Tags« kannst du festlegen, welche HTML-Tags verwendet werden dürfen.

Text/HTML

HTML: Gebe hier deinen HTML-Code ein.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_html überschreiben.

HTML-Felder haben kein umschließendes HTML-Markup.

Fieldset Anfang und Fieldset Ende

Das fieldset-Element wird verwendet, um mehrere Steuerelemente sowie Bezeichnungen in einem Webformular zu gruppieren.

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Template-Einstellungen

Formularfeld-Template: Hier kannst du die Standard-Templates form_fieldsetStart und form_fieldsetStop überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<fieldset>
    <legend>…</legend>
    <div class="widget widget-text mandatory">
        …
    </div>
    <div class="widget widget-text mandatory">
        …
    </div>
</fieldset>

Textfeld

Das Formularfeld Textfeld fügt dem Formular ein einzeiliges Eingabefeld hinzu. Du solltest grundsätzlich für jedes Textfeld die Eingabeprüfung aktivieren, um einer missbräuchlichen Verwendung des Formulars vorzubeugen.

Feldkonfiguration

Eingabeprüfung: Hier kannst du ein Suchmuster vorgeben, anhand dessen die Benutzereingaben beim Abschicken des Formulars geprüft werden.

Platzhalter: Dieser Text wird angezeigt solange das Feld noch nicht ausgefüllt wurde.

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Standard-Wert: Hier kannst du einen Standardwert erfassen. Bei barrierefreien Webseiten wird es empfohlen, das @-Zeichen für E-Mail-Adressen vorzugeben.

Minimale Eingabelänge: Hier kannst du die minimale Anzahl an Zeichen vorgeben, die in das Textfeld eingegeben werden dürfen.

Maximale Eingabelänge: Hier kannst du die maximale Anzahl an Zeichen vorgeben, die in das Textfeld eingegeben werden dürfen.

Tastaturkürzel: Mit einem Tastaturkürzel kann ein Besucher direkt zu einem bestimmten Eingabefeld springen, indem er die [Alt]- bzw. [Strg]-Taste in Verbindung mit dem Tastaturkürzel, z. B. einer Zahl, drückt (vgl. Backend-Tastaturkürzel).

Tab-Index: Hier kannst du die Position des Formularfeldes innerhalb der Tabulator-Reihenfolge bestimmen.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_textfield überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-text … mandatory">
    <label for="ctrl" class="… mandatory">
        <span class="invisible">Pflichtfeld </span>…<span class="mandatory">*</span>
    </label>
    <input type="text" name="…" id="ctrl" class="text … mandatory" value="" required placeholder="…" minlength="…" maxlength="…" accesskey="…" tabindex="…">
</div>

Passwortfeld

Das Formularfeld Passwortfeld fügt dem Formular zwei einzeilige Eingabefelder für das Passwort und dessen Bestätigung hinzu. Prinzipiell funktionieren Passwortfelder genau wie Textfelder, nur dass die Eingabe verdeckt erfolgt.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_password überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-password mandatory">
    <label for="ctrl" class="mandatory">
        <span class="invisible">Pflichtfeld </span>Passwort<span class="mandatory">*</span>
    </label>
    <input type="password" name="…" id="ctrl" class="text password mandatory" value="" required>
</div>

<div class="widget widget-password confirm mandatory">
    <label for="ctrl_confirm" class="confirm mandatory">
        <span class="invisible">Pflichtfeld </span>Bestätigung<span class="mandatory">*</span>
    </label>
    <input type="password" name="…_confirm" id="ctrl_confirm" class="text password mandatory" value="" required>
</div>

Textarea

Das Formularfeld Textarea fügt dem Formular ein mehrzeiliges Eingabefeld für längere Texte hinzu. Du solltest auch hier die Eingabeprüfung aktivieren, um einer missbräuchlichen Verwendung des Formulars vorzubeugen.

Feldkonfiguration

Eingabeprüfung: Hier kannst du ein Suchmuster vorgeben, anhand dessen die Benutzereingaben beim Abschicken des Formulars geprüft werden.

Platzhalter: Dieser Text wird angezeigt solange das Feld noch nicht ausgefüllt wurde.

Reihen und Spalten

Reihen und Spalten: Hier legst du fest, wie viele Reihen und Spalten die Textarea haben soll. Die Abmessungen des Feldes kannst du zudem per CSS bestimmen.

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Standard-Wert: Hier kannst du einen Standardwert erfassen.

Minimale Eingabelänge: Hier kannst du die minimale Anzahl an Zeichen vorgeben, die in das Textfeld eingegeben werden dürfen.

Maximale Eingabelänge: Hier kannst du die maximale Anzahl an Zeichen vorgeben, die in das Textfeld eingegeben werden dürfen.

Tastaturkürzel: Mit einem Tastaturkürzel kann ein Besucher direkt zu einem bestimmten Eingabefeld springen, indem er die [Alt]- bzw. [Strg]-Taste in Verbindung mit dem Tastaturkürzel, z. B. einer Zahl, drückt (vgl. Backend-Tastaturkürzel).

Tab-Index: Hier kannst du die Position des Formularfeldes innerhalb der Tabulator-Reihenfolge bestimmen.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_textarea überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-textarea mandatory">
    <label for="ctrl" class="mandatory">
        <span class="invisible">Pflichtfeld </span>…<span class="mandatory">*</span>
    </label>
    <textarea name="…" id="ctrl" class="textarea mandatory" rows="4" cols="40" required placeholder="…"></textarea>
</div>

Select-Menü

Das Formularfeld Select-Menü fügt dem Formular ein Drop-Down-Menü hinzu, aus dem du genau eine Option auswählen kannst. Um die Auswahl mehrerer Optionen zu erlauben, kannst du entweder die Mehrfachauswahl aktivieren oder ein Checkbox-Menü anstatt des Select-Menüs verwenden.

Feldkonfiguration

Mehrfachauswahl: Hier kannst du die Auswahl mehrerer Optionen erlauben.

Listengröße: Hier legst du fest, wie viele Zeilen das Auswahlfeld bei aktivierter Mehrfachauswahl hoch sein soll. Innerhalb des Feldes kann gescrollt werden.

Optionen

Optionen: Hier kannst du die verschiedenen Auswahlmöglichkeiten erfassen.

Beim Anlegen der Optionen unterstützt dich ein JavaScript-Assistent. Du kannst Optionen gruppieren und jede Gruppe mit einer Überschrift versehen. Um eine Zeile zu einer Gruppenüberschrift zu machen, wähle die Option Gruppe.

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Tastaturkürzel: Mit einem Tastaturkürzel kann ein Besucher direkt zu einem bestimmten Eingabefeld springen, indem er die [Alt]- bzw. [Strg]-Taste in Verbindung mit dem Tastaturkürzel, z. B. einer Zahl, drückt (vgl. Backend-Tastaturkürzel).

Tab-Index: Hier kannst du die Position des Formularfeldes innerhalb der Tabulator-Reihenfolge bestimmen.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_select überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-select select mandatory">
    <label for="ctrl" class="select mandatory">
        <span class="invisible">Pflichtfeld </span>…<span class="mandatory">*</span>
    </label>
    <select name="…" id="ctrl" class="select mandatory" required>
        <option value="">-</option>
        <option value="…">…</option>
        <option value="…">…</option>
        <option value="…">…</option>
    </select>
</div>

Felder mit Mehrfachauswahl verwenden die CSS-Klasse multiselect anstatt select.

Radio-Button-Menü

Das Formularfeld Radio-Button-Menü fügt dem Formular eine Liste von Optionen hinzu, aus der du genau eine auswählen kannst. Um die Auswahl mehrerer Optionen zu erlauben, musst du ein Checkbox-Menü verwenden.

Optionen

Optionen: Hier kannst du die verschiedenen Auswahlmöglichkeiten erfassen. Beim Anlegen der Optionen unterstützt dich ein JavaScript-Assistent.

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_radio überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-radio mandatory">   
    <fieldset id="ctrl" class="radio_container mandatory">
        <legend>
            <span class="invisible">Pflichtfeld </span>…<span class="mandatory">*</span>
        </legend>
        <span>
            <input type="radio" name="…" id="opt_0" class="radio" value="…" required> 
            <label id="lbl_0" for="opt_0">…</label>
        </span>
        <span>
            <input type="radio" name="…" id="opt_1" class="radio" value="…" required> 
            <label id="lbl_1" for="opt_1">…</label>
        </span>
        <span>
            <input type="radio" name="…" id="opt_2" class="radio" value="…" required> 
            <label id="lbl_2" for="opt_2">…</label>
        </span>
        <span>
            <input type="radio" name="…" id="opt_3" class="radio" value="…" required> 
            <label id="lbl_3" for="opt_3">…</label>
        </span>
    </fieldset>
</div>

Checkbox-Menü

Das Formularfeld Checkbox-Menü fügt dem Formular eine Liste von Optionen hinzu, aus der du beliebig viele Optionen oder auch gar keine auswählen kannst. Um die Auswahl genau einer Option zu erlauben, musst du ein Radio-Button-Menü oder ein Select-Menü verwenden.

Optionen

Optionen: Hier kannst du die verschiedenen Auswahlmöglichkeiten erfassen. Beim Anlegen der Optionen unterstützt dich ein JavaScript-Assistent.

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_checkbox überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-checkbox mandatory">
    <fieldset id="ctrl" class="checkbox_container mandatory">
        <legend>
            <span class="invisible">Pflichtfeld </span>…<span class="mandatory">*</span>
        </legend>
        <input type="hidden" name="…" value="">
        <span>
            <input type="checkbox" name="…[]" id="opt_0" class="checkbox" value="…"> 
            <label id="lbl_0" for="opt_0">…</label>
        </span>
        <span>
            <input type="checkbox" name="…[]" id="opt_1" class="checkbox" value="…"> 
            <label id="lbl_1" for="opt_1">…</label>
        </span>
        <span>
            <input type="checkbox" name="…[]" id="opt_2" class="checkbox" value="…"> 
            <label id="lbl_2" for="opt_2">…</label>
        </span>
        <span>
            <input type="checkbox" name="…[]" id="opt_3" class="checkbox" value="…"> 
            <label id="lbl_3" for="opt_3">…</label>
        </span>
    </fieldset>
</div>

Datei-Upload

Das Formularfeld Datei-Upload fügt dem Formular ein Feld hinzu, mit dem Besucher eine Datei von ihrem lokalen Rechner auf den Server übertragen können. Du kannst für jedes Upload-Feld individuell festlegen, welche Dateitypen hochgeladen werden dürfen und wo die übertragenen Dateien gespeichert werden.

Feldkonfiguration

Erlaubte Dateitypen: Hier kannst du eine durch Kommata getrennte Liste erlaubter Dateiendungen erfassen. Beim Versuch, eine andere Datei hochzuladen, gibt Contao automatisch eine Fehlermeldung aus und verweigert die Annahme der Datei.

Maximale Eingabelänge: Hier legst du die maximale Upload-Dateigröße in Bytes fest. Standardmäßig dürfen Dateien bis zu 2 MB hochgeladen werden.

Maximale Bildbreite: Beim Upload von Bildern prüft die Dateiverwaltung automatisch deren Breite und vergleicht diese Werte mit deiner hier festgelegten Vorgabe. Überschreitet ein Bild die maximale Breite, wird das Hochladen mit einer Fehlerausgabe im Formular abgebrochen.

Maximale Bildhöhe: Beim Upload von Bildern prüft die Dateiverwaltung automatisch deren Höhe und vergleicht diese Werte mit deiner hier festgelegten Vorgabe. Überschreitet ein Bild die maximale Höhe, wird das Hochladen mit einer Fehlerausgabe im Formular abgebrochen.

Datei speichern

Hochgeladene Dateien speichern: Wähle diese Option, um übertragene Dateien in einem bestimmten Verzeichnis auf dem Server zu speichern.

Zielverzeichnis: Hier wählst du den Speicherort für hochgeladene Dateien aus.

Home-Verzeichnis verwenden: Wenn du diese Option wählst und ein Mitglied zum Zeitpunkt des Uploads angemeldet ist, werden die übertragenen Dateien im Home-Verzeichnis des Mitglieds anstatt im Upload-Verzeichnis gespeichert.

Bestehende Dateien erhalten: Standardmäßig ersetzt Contao eine Datei, sobald eine gleichnamige neuere hochgeladen wird. Wenn du diese Option wählst, bleiben vorhandene Dateien erhalten und neue werden bei Namensgleichheit mit einem numerischen Suffix versehen.

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Tastaturkürzel: Mit einem Tastaturkürzel kann ein Besucher direkt zu einem bestimmten Eingabefeld springen, indem er die [Alt]- bzw. [Strg]-Taste in Verbindung mit dem Tastaturkürzel, z. B. einer Zahl, drückt (vgl. Backend-Tastaturkürzel).

Tab-Index: Hier kannst du die Position des Formularfeldes innerhalb der Tabulator-Reihenfolge bestimmen.

Feldgröße: Hier kannst du die Größe des Upload-Feldes festlegen (size-Attribut).

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_upload überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-upload mandatory">
    <label for="ctrl" class="mandatory">
        <span class="invisible">Pflichtfeld </span>…<span class="mandatory">*</span>
    </label>
    <input type="file" name="…" id="ctrl" class="upload mandatory" required size="…">
</div>

Range-Slider

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Standard-Wert: Hier kannst du einen Standard-Wert für das Feld eingeben.

Minimalwert: Hier kannst due einen Minimalwert für numerische Eingaben festlegen.

Maximalwert: Hier kannst due einen Maximalwert für numerische Eingaben festlegen.

Schritt: Hier kannst du die Schrittgröße des Feldes festlegen.

Tastaturkürzel: Mit einem Tastaturkürzel kann ein Besucher direkt zu einem bestimmten Eingabefeld springen, indem er die [Alt]- bzw. [Strg]-Taste in Verbindung mit dem Tastaturkürzel, z. B. einer Zahl, drückt (vgl. Backend-Tastaturkürzel).

Tab-Index: Hier kannst du die Position des Formularfeldes innerhalb der Tabulator-Reihenfolge bestimmen.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_range überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-range mandatory">
    <label for="ctrl" class="mandatory">
        <span class="invisible">Pflichtfeld </span>…<span class="mandatory">*</span>
    </label>
    <input type="range" name="…" id="ctrl" class="range mandatory" value="5" required max="10" step="2">
</div>

Verstecktes Feld

Das Formularfeld Verstecktes Feld fügt dem Formular ein verstecktes Feld hinzu. Versteckte Felder können beliebige Werte enthalten, die im Formular nicht sichtbar sind, aber trotzdem beim Absenden übermittelt werden.

Standard-Wert: Hier kannst du den Wert des versteckten Felds eingeben.

Versteckte Felder haben keine CSS-Klasse.

Feldkonfiguration

Eingabeprüfung: Hier kannst du ein Suchmuster vorgeben, anhand dessen die Benutzereingaben beim Abschicken des Formulars geprüft werden.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_hidden überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<input type="hidden" name="…" value="…">

Sicherheitsfrage

Das Formularfeld Sicherheitsfrage fügt dem Formular ein CAPTCHA hinzu.

Mit Hilfe eines Honeypots werden Spambots in die Falle gelockt und ausgesperrt. Der Honeypot besteht aus mehreren verstecken Feldern, die als Köder dienen. Normale Benutzer können die Felder nicht sehen und verändern sie deshalb nicht – die meisten Spambots schon. Zusätzlich werden im Hintergrund weitere Faktoren geprüft um Benutzer und Spambots zu unterscheiden.

Passiert es, dass ein Besucher fälschlicherweise als Spambot identifiziert wird, so muss er nur die in Contao übliche Rechenaufgabe lösen. Es gehen unter keinen Umständen abgesendete Formulardaten verloren.

Feldkonfiguration

Platzhalter: Dieser Text wird angezeigt solange das Feld noch nicht ausgefüllt wurde.

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Tastaturkürzel: Mit einem Tastaturkürzel kann ein Besucher direkt zu einem bestimmten Eingabefeld springen, indem er die [Alt]- bzw. [Strg]-Taste in Verbindung mit dem Tastaturkürzel, z. B. einer Zahl, drückt (vgl. Backend-Tastaturkürzel).

Tab-Index: Hier kannst du die Position des Formularfeldes innerhalb der Tabulator-Reihenfolge bestimmen.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_captcha überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-captcha mandatory">
    <label for="ctrl">
        <span class="invisible">Pflichtfeld </span>…<span class="mandatory">*</span>
    </label>
    <input type="text" name="captcha" id="ctrl" class="captcha mandatory" value="" aria-describedby="captcha_text" placeholder="…" maxlength="2" required>
    <span id="captcha_text" class="captcha_text">…</span>
    <input type="hidden" name="captcha_hash" value="…">
    <div style="display:none">
        <label for="ctrl_hp">Füllen Sie dieses Feld nicht aus</label>
        <input type="text" name="captcha_name" id="ctrl_hp" value="">
    </div>
    <script>
        var e = document.getElementById('ctrl'),
            p = e.parentNode, f = p.parentNode;
        if ('fieldset' === f.nodeName.toLowerCase() && 1 === f.children.length) {
            p = f;
        }
        p.style.display = 'none';
        e.value = '…';
    </script>
</div>

Absendefeld

Das Formularfeld Absendefeld fügt dem Formular eine Schaltfläche hinzu, mit der das Formular abgeschickt werden kann. Ein Absendefeld kann entweder eine Textschaltfläche oder eine Bildschaltfläche sein.

Bezeichnung der Absende-Schaltfläche: Gebe hier den Text der Absende-Schaltfläche bzw. Mouse-Rollover-Text der Bildschaltfläche ein.

Bildschaltfläche

Bildschaltfläche: Hier definierst du das Absendefeld als Bildschaltfläche.

Quelldatei: Hier wählst du das Bild für die Bildschaltfläche aus.

Experteneinstellungen

CSS-Klasse: Hier kannst du eine oder mehrere Klassen eingeben.

Tastaturkürzel: Mit einem Tastaturkürzel kann ein Besucher direkt zu einem bestimmten Eingabefeld springen, indem er die [Alt]- bzw. [Strg]-Taste in Verbindung mit dem Tastaturkürzel, z. B. einer Zahl, drückt (vgl. Backend-Tastaturkürzel).

Tab-Index: Hier kannst du die Position des Formularfeldes innerhalb der Tabulator-Reihenfolge bestimmen.

Template-Einstellungen

Formularfeld-Template: Hier kannst du das Standard-Template form_submit überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

<div class="widget widget-submit">
    <button type="submit" id="ctrl" class="submit">…</button>
</div>