/
11.2 Formularfelder

11.2 Formularfelder

Owned by Stefan Keller
Last updated: yesterday at 6:21 pm
6 min read

Demnächst: Anleitung auf Youtube ansehen (750x425)

Checkliste & ToDo’s

Anwender verstehen das generelle Konzept von “Input-Feldern”.
Anwender kennen die verschiedenen Typen von Formularfeldern und wissen wie diese eingesetzt werden können.
Anwender können mehrsprachige Formulare anlegen.

Inputfelder - Generelle Eigenschaften

Bei den meisten Formularfeldern können diese Optionen eingetragen werden:

  • Name

    • Interne technische Bezeichnung des Feldes (vgl. Naming)

  • Label

    • Externe Bezeichnung des Feldes

  • Platzhalter / Placeholder

    • Wert welcher im Feld als Beispiel steht - wenn das Feld ein Pflichtfeld ist, kann das Formular nicht abgesendet werden, bis der User dieses Feld ausgefüllt hat.

  • Standardwert / Default value

    • Wert welcher im Feld als Text steht - wenn das Feld ein Pflichtfeld ist, kann das Formular abgesendet werden, es wird dann der Standardwert übermittelt (ausser der User überschreibt diesen Wert)

Naming von Formularfeldern

Der Anwender muss pro Formularfeld einen eindeutigen Namen bestimmen. Wir empfehlen dabei sich an die folgenden Guidelines zu halten:

  • Sprache: Immer Englisch verwenden.

  • Schreibweise: CamelCase (z. B. firstName, billingAddress).

  • Keine Sonderzeichen: Nur Buchstaben (a-z), Zahlen (0-9) und keine Umlaute.

  • Trennzeichen: Keine Unterstriche (_) oder Bindestriche (-), nur CamelCase.

  • Klarheit & Kürze: Möglichst kurz, aber eindeutig (z. B. phoneNumber statt userPhoneNumber).

  • Keine Abkürzungen: Wenn nicht absolut geläufig (z. B. emailAddress, nicht emlAddr).

Beispiele für Feldbezeichnungen

Naming

Wert

Naming

Wert

addressCountry

Land

addressLocality

Ort

addressRegion

Kanton

birthDate

Geburtsdatum

department

Abteilung

email

Email

familyName

Nachname

faxNumber

Fax

givenName

Vorname

honorificPrefix

Anrede / Titel

jobTitle

Position

legalName

Organisation / Firma

message

Nachricht

mobilephone

Mobile

postalCode

PLZ

privacy

Datenschutz

send

Absenden

streetAddress

Strasse

subject

Betreff

telephone

Telefon

url

Website

Diese Werte sind auch über Insert Tags als Platzhalter verfügbar. Somit können diese Werte auch für die Labels oder Default values verwendet werden.

Beispiel:

image-20250403-081530.png

 

Mehrsprachigkeit bei Formularen

In Bezug auf die mehrsprachigen Formulare gibt es zwei Varianten:

  • Variante 1 → pro Sprache ein eigenes Formular anlegen

  • Variante 2 → ein mehrsprachiges Formular anlegen

Die Platzhalter sind bereits mehrsprachig angelegt und müssen nicht übersetzt werden. Wenn man also {{custom::legalName}} verwendet, erscheint automatisch das Übersetzte Feld in diesem Beispiel also:

  • DE = Organisation / Firma

  • EN = Organisation / Company

  • FR = Organisation / Entreprise

  • IT = Organizzazione / Azienda

Dies entspricht dieser Parametrisierung:

{{iflng::de*}}Organisation / Firma{{iflng::en*}}Organisation / Company{{iflng::fr*}}Organisation / Entreprise{{iflng::it*}}Organizzazione / Azienda{{iflng}}

Beispiel:

image-20250403-082223.png

Weitere Infos siehe Mehrsprachigkeit

 

Verfügbare Formularfelder

Backend

Frontend

Backend

Frontend

Explanation

image-20250403-132541.png

Gibt aus was im WYSWIG Editor eingegeben wird. Wird nicht im Formular übermittelt, dient als Erklärung für den User.

HTML code

image-20250403-084148.png
image-20250403-124247.png

 

Fieldset start / Fieldset stop

image-20250403-082655.png
image-20250403-132219.png

 

Text field

image-20250403-132333.png
image-20250403-132248.png

 

Textarea

image-20250403-082731.png
image-20250403-130242.png

 

Password field

image-20250403-084516.png

 

image-20250403-130754.png

 

Typeahead

image-20250403-130346.png

 

image-20250403-130421.png

 

Select menu

image-20250403-082914.png
image-20250403-123950.png

 

Radio button menu

image-20250403-131013.png

 

image-20250403-130950.png

 

Checkbox menu

image-20250403-083042.png
image-20250403-124028.png

 

Hidden field

image-20250403-083606.png

Wie der Name schon sagt sieht man das Feld nicht weil es versteckt ist.

Bspw. kann das Feld genutzt werden wenn man über einen URL Parameter einen versteckten Wert übergeben möchte.

Beispiel (URL = Seite auf der das Formular eingebunden ist):

  • [URL]?get=Kundenevent

Würde dazu führen, dass im versteckten Feld nun “Kundenevent” stehen würde.

File upload / Fine uploader

image-20250403-083729.png
image-20250403-124814.png

 

PDF Brochure

image-20250403-083642.png
image-20250403-123837.png

 

Rating

image-20250403-083528.png
image-20250403-123914.png

 

Range slider

image-20250403-132806.png
image-20250403-132733.png

 

Timepicker

image-20250403-084112.png
image-20250403-124319.png

 

Datepicker

image-20250403-125420.png

 

image-20250403-125512.png

 

Datepicker range

image-20250403-083919.png
image-20250403-124214.png

 

MultiPageForms - Page break

image-20250403-084241.png
image-20250403-124716.png

 

MultiPageForms - Summary

image-20250403-131804.png
image-20250403-131751.png

 

Security question

Dieses Feld sollte in jedem Formular aktiviert sein. Ansonsten kann es vorkommen, dass das Formular von Bots für SPAM-Attacken missbraucht wird.

image-20250403-083122.png

 

Das Feld ist für den normalen Anwender versteckt und funktioniert als “Honey-Pot”. Das heisst das Captcha wird nur bei (versuchtem) Missbrauch sichtbar.

image-20250403-131959.png

 

Submit button

image-20250403-083150.png
image-20250403-124045.png

 

Row start / Row stop

image-20250403-083239.png

gem. Grid-System

Column start / Column stop

image-20250403-083256.png

gem. Grid-System

Related content