on multisteps form (with progress) mock data

endpoint_url: url
headline: Spenden Sie jetzt für den Umweltschutz
h1_headline: true
copy: >-
  Denn Aktionen, Laboranalysen, Recherchen und die Öffentlichkeitsarbeit
  finanzieren wir ausschließlich durch Spenden und Förderbeiträge von
  Privatpersonen wie Ihnen. So sichern Sie unsere völlige Unabhängigkeit von
  Politik, Parteien und Industrie. Erst Ihre Spende gibt uns die Möglichkeit,
  mit Schiffen auf hoher See aufzukreuzen oder Spezialisten in die entlegensten
  Ecken unserer Erde zu schicken.
donation_examples:
  id: test1234
  items:
    - $ref: elements/donation-example#small
      $tpl: elements/donation-example
      is_template: true
      data_attributes:
        - key: interval-dependency
          value: '0'
        - key: amount-dependency
          value: '60'
      copy:
        $tpl: elements/rte
        markup: lorem ipsum 60€.
    - $ref: elements/donation-example#small
      $tpl: elements/donation-example
      is_template: true
      data_attributes:
        - key: interval-dependency
          value: '0'
        - key: amount-dependency
          value: donate_custom_amount
      copy:
        $tpl: elements/rte
        markup: lorem ipsum custom amount.
image:
  $tpl: elements/image
  width: 569
  height: 349
  src: https://via.placeholder.com/569x349
  alt: Alternative text
  id: '6'
  sources:
    - width: 569
      height: 349
      srcset: >-
        https://via.placeholder.com/569x349 1x,
        https://via.placeholder.com/1138x698 2x
      media: '(max-width: 35.5625rem)'
    - width: 959
      height: 588
      srcset: >-
        https://via.placeholder.com/959x588 1x,
        https://via.placeholder.com/1918x1176 2x
      media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
    - width: 707
      height: 970
      srcset: >-
        https://via.placeholder.com/707x970 1x,
        https://via.placeholder.com/1414x1940 2x
      media: '(min-width: 60rem) and (max-width: 79.9375rem)'
    - width: 704
      height: 718
      srcset: >-
        https://via.placeholder.com/704x718 1x,
        https://via.placeholder.com/1408x1436 2x
      media: '(min-width: 80rem)'
payment_amount:
  has_flyout: true
  interval:
    $tpl: '@fsk/form/fieldset'
    $ref: '@fsk/form/fieldset'
    attributes:
      class: DonationTeaser-interval js-DonationTeaser-interval
    legend:
      title: Ich unterstütze Greenpeace
    children:
      $tpl: '@fsk/form/radios'
      $ref: '@fsk/form/radios'
      layout: row
      children:
        $render:
          - $tpl: '@fsk/form/form-element'
            $ref: '@fsk/form/form-element#radio'
            attributes:
              class: FskFormElement--switcher
            label:
              title: Monatlich
              attributes:
                for: input2
                data-text: Monatlich
            children:
              attributes:
                name: spendenbetrag[interval_count]
                id: input2
                value: 1
                class: FskRadio--switcher
                checked: true
          - $tpl: '@fsk/form/form-element'
            $ref: '@fsk/form/form-element#radio'
            attributes:
              class: FskFormElement--switcher
            label:
              title: Einmalig
              attributes:
                for: input100
                data-text: Einmalig
            children:
              attributes:
                name: spendenbetrag[interval_count]
                id: input100
                value: 0
                class: FskRadio--switcher
  amount:
    $tpl: '@fsk/form/fieldset'
    $ref: '@fsk/form/fieldset'
    attributes:
      class: DonationTeaser-amount js-DonationTeaser-amount
    legend:
      title: mit einem Betrag von
    children:
      $render:
        - $tpl: '@fsk/form/radios'
          $ref: '@fsk/form/radios'
          layout: row
          children:
            $render:
              - $tpl: '@fsk/form/form-element'
                $ref: '@fsk/form/form-element#radio'
                label:
                  title: 20€
                  attributes:
                    for: input20
                children:
                  attributes:
                    name: spendenbetrag[amount]
                    id: input20
                    value: 20
              - $tpl: '@fsk/form/form-element'
                $ref: '@fsk/form/form-element#radio'
                label:
                  title: 60€
                  attributes:
                    for: input60
                children:
                  attributes:
                    name: spendenbetrag[amount]
                    id: input60
                    value: 60
                    checked: true
              - $tpl: '@fsk/form/form-element'
                $ref: '@fsk/form/form-element#radio'
                label:
                  title: 120€
                  attributes:
                    for: input120
                children:
                  attributes:
                    name: spendenbetrag[amount]
                    id: input120
                    value: 120
        - $tpl: '@fsk/form/form-element'
          $ref: '@fsk/form/form-element#input'
          placeholder: Ihr Betrag
          label:
            title: 'Oder Betrag eintippen:'
          children:
            attributes:
              placeholder: Ihr Betrag
submit_button:
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#submit'
    attributes:
      class: DonationTeaser-buttonHolder
    children:
      $tpl: '@fsk/form/form-element/input/input--submit'
      $ref: '@fsk/form/form-element/input/input--submit'
      modifiers:
        - donation
      attributes:
        class: DonationTeaser-button
        value: Ich möchte aktiv werden
progress:
  $tpl: elements/progress-tracker
  $ref: elements/progress-tracker

Close