Formular Baukasten | Elemente

Eingabefelder - Typen

Typ	Zweck	Besonderheit
Text	Text Eingabe
E-Mail	E-Mail Eingabe	Der Shop Betreiber kann durch sein E-Mail Programm an diese E-Mail antworten. Der Kunde kann sich eine Kopie an diese E-Mail Adresse senden lassen.
Textfeld	Text Eingabe	Für längere Texte mit Zeilenumbrüchen.
Auswahl	Einfach-Auswahl	Man kann je nach Auswahl eine individuelle Empfänger E-Mail Adresse bestimmen. Die Auswahloptionen können direkt aus eine Datenbank-Tabelle bezogen werden.
Mehrfachauswahl	Mehrfach-Auswahl Eingabe	Siehe Typ: Auswahl
An/Aus	Switch Regler
Checkbox	Einfache Checkbox	Siehe Typ: Auswahl
Checkbox Gruppe	Mehrere Checkboxen	Siehe Typ: Auswahl + Bildselektierung möglich.
Radio Gruppe	Einfach-Auswahl	Siehe Typ: Auswahl + Bildselektierung möglich.
Einzel-Upload	Datei Upload	Es können verschiedene Dateitypen bestimmt werden - z.B. Dokumente oder Bilder. Ein Upload wird im Medien Manager gespeichert und kann als Datei-Anhang per E-Mail verschickt werden.
Datum	Datum Eingabe	Man kann ein Zeitfenster für ein Datum hinterlegen - z.B. Wenn ein Wunschlieferatum min. 3 Tage in der Zukunft sein soll.
Uhrzeit	Uhrzeit Eingabe
Passwort	Passwort Eingabe
Zahl	Zahl Eingabe	Man kann den Mindest- und den Maximalwert bestimmen.
Zahl Schieberegler	Zahl Eingabe	Siehe Typ: Zahl
Rating	Zahl Eingabe	Siehe Typ: Zahl + Das Icon kann ein FontAwesome-Symbol, ein Zeichen oder ein Emoji sein. Siehe Textbaustein moorl-form-builder.general.star.
Versteckt	Intern	Beliebig einsetzbar.
HTML	Intern	Kann für Textinhalte innerhalb des Formulares oder für Anpassungen am Formular-Layout genutzt werden. Dieses Feld ist nicht übersetzbar. Für Mehrsprachige Texte kannst du jedoch Textbausteine nutzen {{ "meinText"|trans }}.
Repeater Open/Close	Intern	Mit dem Repeater kannst du Eingaben gruppieren und wiederholen. Nähere Infos dazu folgen.

Grundlegende Eigenschaften

Jedes Eingabefeld hat spezifische Eigenschaften, diese werden hier im Detail erläutert!

• Typ: Typ des Elementes
• Label: Übersetzbar - Die Bezeichnung des Feldes

Wichtigste Merkmale

• Technischer Name: Pflichtfeld für alle Eingabe-Elemente, muss eindeutig sein, darf keine Umlaute oder Leerzeichen beinhalten
• Platzhalter: Übersetzbar - Steht im Feld, wenn leer
• Element vorausfüllen: Hier kann ein fester Wert oder eine TWIG-Variable stehen - z.B. {{context.customer.email}} - Ohne Leerzeichen!
• Prepend: Übersetzbar - z.B. Ein Symbol, ein Emoji - steht vor dem Eingabe-Element
• Append: Übersetzbar - z.B. Ein Symbol, ein Emoji - steht nach dem Eingabe-Element
• Validation: Client-Basierte Validation - z.B. [A-Za-z]{3}
• Tooltip: Übersetzbar - Hilfstext zu dem Eingabe Element
• Erforderlich: Pflichtfeld - Clientseitige + Einfache Serverseitige Validierung
• Deaktiviert: Das Feld wird deaktiviert und wird auch nicht abgesendet

Autocomplete für Text-Elemente

Die Autocomplete-Funktion zieht sich Informationen aus eine Datenbank-Tabelle und schlägt diese dem Kunden als mögliche Eingabe vor.

• Beziehung: Tabelle
• Mögliche Variablen: Tabellenspalte

Element-Wrapper

Wenn Bootstrap 12-Spalten Grid aktiv:

• Bestimme die Breite des Elementes
• Neue Zeile: Nach dem Element muss ein Zeilenumbruch sein

Wenn Bootstrap 12-Spalten Grid inaktiv:

• Das Element kann hier optional gewrappt werden

Custom Template

Manchmal reichen die gegebenen Elemente für eine optisch passende Darstellung nicht aus. Hier hast du die Möglichkeit selbst eine Template-Datei einzubinden oder ein Template zu schreiben.

So sieht z.B. Das Template für ein einfaches Textfeld aus.

<div class="form-group form-{{ formElement.type }}-{{ formElement.name }}">
    {% sw_include "@MoorlFormBuilder/plugin/moorl-form-builder/component/label.html.twig" ignore missing %}

    {% set formElementInput %}
        <input
            type="text"
            name="{{ formElementName }}"
            id="{{ formElementId }}"
            value="{{ formElementValue }}"
            placeholder="{{ formElementPlaceholder }}"
            {% if formElement.pattern %}pattern="{{ formElement.pattern }}"{% endif %}
            {% if formElement.autocomplete.property %}data-autocomplete="{{ seoUrl('moorl-form-builder.autocomplete', {
                formId: form.id,
                formElementId: formElement.id
            }) }}"{% endif %}
            {% if formElement.required %}required{% endif %}
            {% if formElement.disabled %}disabled{% endif %}
            class="form-control">
    {% endset %}
    {% sw_include "@MoorlFormBuilder/plugin/moorl-form-builder/component/input-group.html.twig" ignore missing %}
</div>

Interaktionen mit anderen Eingabe-Elementen

Du kannst abhängig von einer Eingabe Elemente oder ganze Bereiche ein- und ausblenden. So kannst du dein Formular für relevante Eingaben optimieren. Fange am besten hier klein an bevor du komplexe Formulare mit dieser Funktion baust.

• Technischer name: Gebe hier den technischen Namen des Schlüssel-Elementes ein
• Operator: Wähle einen Operator
• Wert: Wenn dieser Wert im Schlüssel-Element steht, dann wird dieses Element angezeigt

Bei diesen Elementen gibt es keine Serverseitige Validierung, da diese optional sind!

Wenn du ganze Bereiche ein- und ausblenden möchtest, dann nutze ein Element vom Typ: HTML. Dort öffnest du ein DIV-Tag und gibst das Attribut data-form-conditions='{{ formConditions }}' bei. Aktiviere die Option: "Keine Eltern HTML Tags / Kein Wrap".

Ein Beispiel findest du in dem Demo-Formular Example: Multipurpose Form.

Optionen

Bei Elementen vom Typ: Auswahl, Checkbox-Gruppe und Radio-Gruppe kannst du Optionen festlegen. Außerdem hast du auch noch weitere Möglichkeiten diese Optionen zu nutzen.

• Entitäts-Selektierung: Ermöglicht die Ausgabe der Optionen aus einer beliebigen Datenbank-Tabelle
• Aktiviere Bildselektierung: Optische Aufbesserung duch Bilder
• E-Mail Empfänger: Abhängig von der Auswahl kannst du E-Mail Empfänger für das Formular bestimmen, trenne mehrere Empfänger durch ein Semikolon ;
• Preisberechnung: Ist nur für das Add-On "Custom Products" relevant.

Beispiel für eine Entitäts-Selektierung:

Beispiel für E-Mail Empfänger:

Zeitfenster für Datum Eingabe

Bei Elementen vom Typ: Datum kannst du hier bestimmten in welchem Zeitfenster das Datum sein darf. Dazu nutzt du einfach die Date Modify Begriffe aus PHP.

Min- und Maxwert für Zahlen und Ratings

Wenn du eine Rating Eingabe anlegst, solltest du Min auf 1 und Max auf 5 stellen.

HTML Eingabe

Die HTML Eingabe ist für Textpassagen oder Layout Anpassungen im Formular geeignet. Dieses Feld ist nicht übersetzbar. Für Mehrsprachige Texte kannst du jedoch Textbausteine nutzen {{ "meinText"|trans }}.

Noch Fragen? Bitte stelle deine Frage im Kommentarbereich!