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.

Formularfelder bearbeiten

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: Gebe hier den formatierten Text der Erklärung ein.

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

Individuelles Template: Hier kannst du das Standard-Template ü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.

HTML: Gebe hier deinen HTML-Code ein.

Individuelles Template: Hier kannst du das Standard-Template ü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.

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

Individuelles Template: Hier kannst du das Standard-Template ü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.

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

Suchmuster Erklärung
Numerische Zeichen Erlaubt Zahlen, Minus (-), Punkt (.) und Leerzeichen ( ).
Alphabetische Zeichen Erlaubt Buchstaben, Minus (-), Punkt (.) und Leerzeichen ( ).
Alphanumerische Zeichen Erlaubt Zahlen und Buchstaben, Minus (-), Punkt (.), Unterstrich (_) und Leerzeichen ( ).
Erweiterte alphanumerische Zeichen Erlaubt alle Zeichen außer denen, die normalerweise aus Sicherheitsgründen kodiert werden (#/()<=>).
Datum Erlaubt Eingaben gemäß des globalen Datumsformats.
Uhrzeit Erlaubt Eingaben gemäß des globalen Uhrzeitformats.
Datum und Uhrzeit Erlaubt Eingaben gemäß des globalen Datums- und Uhrzeitformats.
Telefonnummer Erlaubt Zahlen, Plus (+), Minus (-), Schrägstrich (/), runde Klammern (()) und Leerzeichen ( ).
E-Mail-Adresse Erlaubt die Eingabe einer gültigen E-Mail-Adresse.
URL-Format Erlaubt die Eingabe einer gültigen URL.

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

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.

Individuelles Template: Hier kannst du das Standard-Template ü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.

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.

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.

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

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.

Individuelles Template: Hier kannst du das Standard-Template ü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.

Ein Select-Menü im Frontend

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: 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.

JavaScript-Assistent für das Anlegen von Optionen

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.

Individuelles Template: Hier kannst du das Standard-Template ü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.

Ein Radio-Button-Menü im Frontend

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

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

Individuelles Template: Hier kannst du das Standard-Template ü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.

Ein Checkbox-Menü im Frontend

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

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

Individuelles Template: Hier kannst du das Standard-Template ü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.

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.

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.

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

Individuelles Template: Hier kannst du das Standard-Template ü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>

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.

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

Suchmuster Erklärung
Numerische Zeichen Erlaubt Zahlen, Minus (-), Punkt (.) und Leerzeichen ( ).
Alphabetische Zeichen Erlaubt Buchstaben, Minus (-), Punkt (.) und Leerzeichen ( ).
Alphanumerische Zeichen Erlaubt Zahlen und Buchstaben, Minus (-), Punkt (.), Unterstrich (_) und Leerzeichen ( ).
Erweiterte alphanumerische Zeichen Erlaubt alle Zeichen außer denen, die normalerweise aus Sicherheitsgründen kodiert werden (#/()<=>).
Datum Erlaubt Eingaben gemäß des globalen Datumsformats.
Uhrzeit Erlaubt Eingaben gemäß des globalen Uhrzeitformats.
Datum und Uhrzeit Erlaubt Eingaben gemäß des globalen Datums- und Uhrzeitformats.
Telefonnummer Erlaubt Zahlen, Plus (+), Minus (-), Schrägstrich (/), runde Klammern (()) und Leerzeichen ( ).
E-Mail-Adresse Erlaubt die Eingabe einer gültigen E-Mail-Adresse.
URL-Format Erlaubt die Eingabe einer gültigen URL.

Individuelles Template: Hier kannst du das Standard-Template ü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.

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

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.

Individuelles Template: Hier kannst du das Standard-Template ü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: Hier definierst du das Absendefeld als Bildschaltfläche.

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

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.

Individuelles Template: Hier kannst du das Standard-Template überschreiben.

HTML-Ausgabe
Das Formularfeld generiert folgenden HTML-Code:

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