Extension-Suche: Gibt es Conditions für forms?

Nicole Kalinowski

Hallo zusammen,

ich habe eine Kundenanforderung für ein Formular, dass Conditions enthält. Ist "pickup address" angeklickt, dann werden Adressfelder (als Pflichtfelder) angezeigt, ist eine andere Auswahl getroffen, dann erfolgt keine Adressabfrage.

Außerdem möchte der Kunde Icons zu Auswahl (werden vermutlich radio buttons) hinzugefügt habe. Im Prinzip sind es also drei Icons (Lieferung / Abholung / per Mail) die zur Auswahl stehen und je nachdem welches angeklickt wird, kommt die Adressabfrage oder nicht.

Die Icons könnte ich vermutlich mit Javascript / CSS hinzufügen, aber gibt es da noch bessere Lösungen?

Da der Kunde bereits forms im Einsatz hat, möchte ungern auf Powermail umsteigen. Daher die Frage: Kennt jemand Condition-Lösungen für forms?

Danke und beste Grüße
Nicole

Lars Brinkmann

Nicole Kalinowski Hallo Nicole, eine Extension kenne ich auch nicht. Aber ich würde die Felder hinzufügen und dann per JavaScript passend verarbeiten. Du kannst ja onChange etc abfragen und dann mit JavaScript die entsprechenden Klassen für die Fieldsets / Felder setzen.

Habe dies z.B. hier (vereinfacht) so umgesetzt. Die Eingabefelder werden ist nach Auswahl angezeigt. Ist zwar Powermail, aber eben auch ohne Extension für die Condition:
https://www.gesundheitscentrum.de/praxisgemeinschaft/service/rezeptbestellung

Viele Grüße, Lars

Nicole Kalinowski

Lars Brinkmann Moin Lars. Ja, das dachte ich mir schon fast. Dann werde ich das vermutlich auch so umsetzen. Vielleicht hat aber ja noch jemand anderes weitere Ideen.

Wolfgang Wagner

Ich hab sowas mal mit Forms umgesetzt. Denn letztlich ist es ja nur ein simples JavaScript, dass Bereiche ein-/ausblendet. Evtl. muss man berücksichtigen, ob Pflichtfelder in den Bereichen sind.
Das JS habe ich mir damals einfach per ChatGPT erstellen lassen. Den generierten HTML-Code eingefügt und gesagt, was ich erreichen will. Fertig.

Sven Wappler

Die Icons können hinzufügbar gemacht werden, indem man entweder den vorhandenen Checkbox Element-Typ erweitert oder einen neuen macht. Darin ist form gut erweiterbar.
In Sachen Conditions/Variants auf der selben Seite, also wo Ursache und Wirkung platziert werden sollen, hat sich noch keiner dran begeben. Das steht auch noch auf meiner Liste für die form_extended Ext aber hierfür würde ich erst mal schauen was es da gutes an Vanilla-JS-Bibs schon auf dem Markt zu finden ist. Für deinen Fall kann man es ja erst mal so mit ein wenig JS erledigen.

Nicole Kalinowski

Perfekt, ich danke euch für die Antworten. Ich setze die Anforderungen dann individuell mit Javascript um.

Andre

Ich liefer noch mal was nach. Ich hatte mal eine ähnliche Anforderung. Ein Formular für eine Anmeldung fragt verschiedene Daten ab. Unteranderem "Art der Anreise" (Optionen Car, Train, Plane). Je nach dem was hier ausgewählt wird, werden im Anschluss andere Felder angefragt. Nach Car folgt nichts, nach Plane wird die Flugnummer zum Pflichtfeld. Ich habe das mit einem Multi-Step-Form gelöst. Ich poste hier mal einen Zwischenstand. Das Original Formular ist noch um einige länger.

renderingOptions:
  submitButtonLabel: Absenden
type: Form
identifier: skipkickoffFormular
label: "Skip Kickoff Registration"
prototypeName: standard
finishers:
  - options:
      subject: "Kickoff Registration"
      recipients:
        info@receiver.com: info@receiver.com
      senderAddress: info@sender.com
      senderName: ""
      addHtmlPart: true
      attachUploads: true
      translation:
        language: Default
      title: ""
    identifier: EmailToReceiver
    defaultValue: ""
  - options:
      pageUid: "549"
      additionalParameters: ""
      fragment: ""
    identifier: Redirect
renderables:
  - renderingOptions:
      previousButtonLabel: "Previous step"
      nextButtonLabel: "Next step"
    type: Page
    identifier: page-1
    label: "Step 1"
    renderables:
      - type: GridRow
        identifier: gridrow-1
        label: "Grid: Row"
        renderables:
          - properties:
              options:
                Frau: Frau
                Herr: Herr
              prependOptionLabel: "Bitte auswählen"
              fluidAdditionalAttributes: {}
            type: SingleSelect
            identifier: singleselect-1
            label: Anrede
            defaultValue: ""
          - defaultValue: ""
            type: Text
            identifier: text-1
            label: "Last name"
            properties:
              fluidAdditionalAttributes:
                autocomplete: family-name
          - defaultValue: ""
            type: Text
            identifier: text-2
            label: "First name"
            properties:
              fluidAdditionalAttributes:
                autocomplete: given-name
      - defaultValue: ""
        type: Telephone
        identifier: telephone-1
        label: "Phone number"
        properties:
          fluidAdditionalAttributes:
            autocomplete: tel
      - defaultValue: ""
        type: Email
        identifier: email-1
        label: "Email address"
        properties:
          fluidAdditionalAttributes:
            autocomplete: email
        validators:
          - identifier: EmailAddress
      - defaultValue: ""
        type: Text
        identifier: text-3
        label: Company
        properties:
          fluidAdditionalAttributes:
            autocomplete: organization
  - renderingOptions:
      previousButtonLabel: "Previous step"
      nextButtonLabel: "Next step"
    type: Page
    identifier: page-2
    label: Step
    renderables:
      - properties:
          options:
            CarCar: Car
            Train: Train
            Plane: Plane
          fluidAdditionalAttributes:
            required: required
        type: RadioButton
        identifier: radiobutton-1
        label: "Travelling by"
        defaultValue: ""
        validators:
          - identifier: NotEmpty
  - renderingOptions:
      previousButtonLabel: "Previous step"
      nextButtonLabel: "Next step"
    type: Page
    identifier: page-3
    label: "Flight data"
    variants:
      - identifier: skip-flight-data
        condition: 'traverse(formValues, "radiobutton-1") != "Plane"'
        renderingOptions:
          enabled: false
    renderables:
      - defaultValue: ""
        type: Text
        identifier: text-4
        label: "Flight number"

Nicole Kalinowski

Hallo Andre,
wow, danke für dein Beispiel. Das Projekt, um das ist mir hier ging, habe ich inzwischen via Javascript gelöst. Aber deine Lösung scheint mir schöner, das schaue ich mir auf jeden Fall mal an.
Beste Grüße

Unterstütze das Forum

Hilf mit, den Community Hub für TYPO3 werbefrei zu halten und die Betriebskosten zu decken. Werde Official Community Hub Supporter für nur 5 Euro im Monat (zzgl. USt) und erhalte ein exklusives Supporter-Badge. Jeder Beitrag zählt!

Jetzt Supporter werden

Impressum - Datenschutz - Kontakt - Netiquette - RSS