2. Formularfelder

2. Formularfelder

Organisation

Aufbau und Nutzer

Erstellen & Versenden

Templates
Formulare
Inhaltsblöcke und Formularfelder

Sicherheit

Login

API

Integrationen

Rules Engine

Erste Schritte
Bedingte Sichtbarkeit

Teil 2: Arbeit mit Formularfeldern

Erstellen der Formularfelder

Allgemeine Vorgehensweise:

Erstellen Sie unter Verwendung des Paperless-Builders wie gewohnt per Drag-and-Drop alle Blöcke, die Sie für Ihr Formular benötigen.

Blöcke, die während des Ausfüllens des Formulars nur unter bestimmten Bedingungen angezeigt werden sollen, können ebenfalls zu diesem Zeitpunkt bereits angelegt werden. Später werden Sie diese mit Hilfe von Sichtbarkeits-Regeln entsprechend dynamisch aus- und einblenden.

Sie sollten für jeden Block einen individuellen Slug festlegen. Dabei ist es sinnvoll, Slugs ausdrucksstark, aber möglichst kurz zu wählen. Später werden Sie über die Slugs in JavaScript-Code auf Formularblöcke und deren Eigenschaften zugreifen.

Sie können den Slug eines Blockes bearbeiten, indem Sie diesen entweder direkt in der Kopfzeile der Block-Einstellungen anpassen, oder im aufklappbaren Reiter Erweitert bearbeiten.

image

Für Blöcke mit Auswahloptionen, also Radio- und Checkbox-Blöcke, sollten Sie außerdem für jede Auswahloption einen individuellen Slug vergeben. Über diesen Slug können Sie später erfragen, ob die entsprechende Auswahloption gewählt wurde.

Sie können die Slugs der Auswahloptionen eines Blockes bearbeiten, indem Sie im Reiter Optionen auf Erweitert klicken (bis einschließlich vier Auswahloptionen), oder auf den Button Auswahloptionen verwalten klicken (ab fünf Auswahloptionen).

image

Beispiele im Formular:

Erstellen Sie zunächst ein neues Paperless-Formular.

Sie werden in diesem Schritt alle erforderlichen Blöcke im Formular anlegen. Diese sind zunächst wie gewohnt einfache, statische Blöcke. In Schritt 3 und 4 werden Sie diese nachträglich mit dynamischem Verhalten versehen.

Nachfolgend werden alle Blöcke im Detail beschrieben. Das fertige Formular soll am Ende folgendermaßen aussehen:

image

Fragen Sie zunächst unter Verwendung von Texteingabe-Blöcken die Kontaktinformationen des Teilnehmers ab:

image

In den Einstellungen der jeweiligen Blöcke vergeben Sie dabei passende Slugs.

image

Vergeben Sie die folgenden Slugs:

  • First Name: first_name
  • Last Name: last_name
  • E-Mail Address: email
  • Contact Number: phone

Als nächstes fragen Sie mit Hilfe eines Radio-Blocks den Besucher-Typ des Teilnehmers ab.

image

Versehen Sie den Block mit dem Slug registration_type.

Auf Basis des gewählten Typs, soll sich das Dokument später dynamisch anpassen. Daher ist es wichtig, auch die Auswahloptionen mit passenden Slugs zu versehen:

image

Es folgen:

  1. Ein Datei-Upload-Block, mit welchem Studenten ihre Studienbescheinigung hochladen können.
  2. Slug: cert_enrollment

  3. Ein weiterer Radio-Block, mit welchem freiwillige Helfer ihre Wunsch-Schicht angeben können.
  4. Slug: shift_preferences

    Beachten Sie, für die Auswahloptionen auch wieder Slugs zu vergeben:

image
  1. Ein stylisierter Gruppen-Block mit einem Text-Block, der freiwillige Helfer und solche Teilnehmer, die einen Vortrag halten werden, darauf hinweisen soll, dass der Veranstaltungsorganisator in Kürze Kontakt aufnehmen wird.
  2. Slug: note

image

Daraufhin sollen alle Teilnehmer, die nicht als Studierende teilnehmen, die Möglichkeit haben, sich mit einem Checkbox-Block für Workshops anzumelden, welche als Ergänzung zu den allgemein zugänglichen Vorträgen angeboten werden.

Slug: workshop_selection

image

Vergeben Sie auch hier wieder Slugs für die einzelnen Auswahloptionen:

image

1. Textblöcke

Außerdem bekommen alle Nicht-Studierenden ein Konferenz-Shirt. Ein weiterer Text-Block soll Teilnehmenden den T-Shirt Aufdruck anzeigen, der auf Basis ihrer Angaben erstellt wird. Wie Sie Text in Text-Blöcken mit Hilfe von Variablen dynamisch anpassen können, lernen Sie in Schritt 4 dieses Guides.

Slug: shirt_text

Teilnehmenden soll außerdem in einem weiteren Text-Block der individuell angepasste Preis für die Konferenzteilnahme angezeigt werden.

Slug: price_text

2. Kontodaten-Block Im Anschluss soll allen zahlenden Teilnehmenden ein Kontodaten-Block angezeigt werden, um ihre Zahlungsinformationen zu hinterlegen.

Slug: payment_details

3. Unterschrift Block

Abschließend können Teilnehmende das Formular digital mit einem Unterschrift-Block unterschreiben.

Slug: signature

image