simple-withdrawalbutton/views/templates/front/form.tpl

<section class="cyp-withdrawal-page">
  <header class="page-header">
    <h1>{l s='Widerruf erklären' mod='simple_withdrawalbutton'}</h1>
  </header>

  <div class="cyp-steps">
    <div class="cyp-step active">
      <div class="cyp-step-bubble">1</div>
      <div class="cyp-step-label">{l s='Angaben' mod='simple_withdrawalbutton'}</div>
    </div>
    <div class="cyp-step-line"></div>
    <div class="cyp-step">
      <div class="cyp-step-bubble">2</div>
      <div class="cyp-step-label">{l s='Prüfen' mod='simple_withdrawalbutton'}</div>
    </div>
    <div class="cyp-step-line"></div>
    <div class="cyp-step">
      <div class="cyp-step-bubble">3</div>
      <div class="cyp-step-label">{l s='Bestätigt' mod='simple_withdrawalbutton'}</div>
    </div>
  </div>

  <div class="card card-block">
    <div class="cyp-intro">
      {l s='Sie können hier den Vertrag zu einer Bestellung vollständig oder teilweise widerrufen. Bitte geben Sie die Bestellnummer und bei einem Teilwiderruf die betroffenen Artikel und Mengen an.' mod='simple_withdrawalbutton'}
      {if isset($revocation_url) && $revocation_url != ''}
        &nbsp;–&nbsp;<a href="{$revocation_url|escape:'html':'UTF-8'}" target="_blank" rel="noopener">{l s='Widerrufsbelehrung lesen (14-Tage-Frist)' mod='simple_withdrawalbutton'}</a>
      {/if}
    </div>

    {if $errors_list|@count > 0}
      <div class="alert alert-danger" role="alert">
        <ul>
          {foreach from=$errors_list item=error}
            <li>{$error|escape:'html':'UTF-8'}</li>
          {/foreach}
        </ul>
      </div>
    {/if}

    <form method="post" action="{$action_url|escape:'html':'UTF-8'}" class="cyp-withdrawal-form" novalidate>
      <input type="hidden" name="csrf_token" value="{$csrf_token|escape:'html':'UTF-8'}">
      <div style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;" aria-hidden="true">
        <label for="cyp_withdrawal_hp">Website</label>
        <input type="text" id="cyp_withdrawal_hp" name="cyp_hp_v1" value="" tabindex="-1" autocomplete="off">
      </div>

      <div class="form-group">
        <label for="cyp_withdrawal_customer_name" class="form-control-label">
          {l s='Name' mod='simple_withdrawalbutton'} <span aria-hidden="true">*</span>
        </label>
        <input class="form-control" type="text" id="cyp_withdrawal_customer_name" name="customer_name"
               maxlength="255" required
               value="{$form_data.customer_name|default:''|escape:'html':'UTF-8'}">
      </div>

      <div class="form-group">
        <label for="cyp_withdrawal_customer_email" class="form-control-label">
          {l s='E-Mail für die Eingangsbestätigung' mod='simple_withdrawalbutton'} <span aria-hidden="true">*</span>
        </label>
        <input class="form-control" type="email" id="cyp_withdrawal_customer_email" name="customer_email"
               maxlength="255" required
               value="{$form_data.customer_email|default:''|escape:'html':'UTF-8'}">
      </div>

      <div class="form-group">
        <label for="cyp_withdrawal_order_reference" class="form-control-label">
          {l s='Bestellnummer / Bestellreferenz' mod='simple_withdrawalbutton'} <span aria-hidden="true">*</span>
        </label>
        <input class="form-control" type="text" id="cyp_withdrawal_order_reference" name="order_reference"
               maxlength="64" required
               value="{$form_data.order_reference|default:''|escape:'html':'UTF-8'}">
      </div>

      <fieldset class="form-group">
        <legend class="form-control-label">
          {l s='Widerruf betrifft' mod='simple_withdrawalbutton'} <span aria-hidden="true">*</span>
        </legend>
        <div class="cyp-radio-group">
          <label class="cyp-radio-label{if !isset($form_data.withdrawal_scope) || $form_data.withdrawal_scope != 'partial'} cyp-selected{/if}" for="cyp_withdrawal_scope_full">
            <input type="radio" id="cyp_withdrawal_scope_full" name="withdrawal_scope" value="full"
                   {if !isset($form_data.withdrawal_scope) || $form_data.withdrawal_scope != 'partial'}checked{/if}>
            {l s='die gesamte Bestellung' mod='simple_withdrawalbutton'}
          </label>
          <label class="cyp-radio-label{if isset($form_data.withdrawal_scope) && $form_data.withdrawal_scope == 'partial'} cyp-selected{/if}" for="cyp_withdrawal_scope_partial">
            <input type="radio" id="cyp_withdrawal_scope_partial" name="withdrawal_scope" value="partial"
                   {if isset($form_data.withdrawal_scope) && $form_data.withdrawal_scope == 'partial'}checked{/if}>
            {l s='einen Teil der Bestellung' mod='simple_withdrawalbutton'}
          </label>
        </div>
      </fieldset>

      <div class="form-group" id="cyp-withdrawal-items-group">
        <label for="cyp_withdrawal_items_text" class="form-control-label">
          {l s='Welche Artikel / Mengen?' mod='simple_withdrawalbutton'}
        </label>
        <textarea class="form-control" id="cyp_withdrawal_items_text" name="withdrawal_items_text"
                  rows="4" maxlength="5000"
                  placeholder="{l s='Beispiel: 1x Tomizu 720 ml, 2x Magokoro 300 ml' mod='simple_withdrawalbutton'}">{$form_data.withdrawal_items_text|default:''|escape:'html':'UTF-8'}</textarea>
        <small class="form-text">{l s='Nur bei einem Teilwiderruf erforderlich.' mod='simple_withdrawalbutton'}</small>
      </div>

      <div class="form-group">
        <label for="cyp_withdrawal_message" class="form-control-label">
          {l s='Nachricht / Bemerkung' mod='simple_withdrawalbutton'} <span style="font-weight:400;text-transform:none;letter-spacing:0;">({l s='optional' mod='simple_withdrawalbutton'})</span>
        </label>
        <textarea class="form-control" id="cyp_withdrawal_message" name="message"
                  rows="4" maxlength="5000">{$form_data.message|default:''|escape:'html':'UTF-8'}</textarea>
      </div>

      <div class="cyp-legal">
        <p>{l s='Pflichtfelder sind mit * gekennzeichnet. Ein Widerrufsgrund ist nicht erforderlich.' mod='simple_withdrawalbutton'}</p>
        <p>
          {l s='Ihre Angaben (Name, E-Mail-Adresse) werden zur Bearbeitung Ihrer Widerrufserklärung verarbeitet. Rechtsgrundlage: Art. 6 Abs. 1 lit. b und c DSGVO.' mod='simple_withdrawalbutton'}
          {if isset($privacy_url) && $privacy_url != ''}
            <a href="{$privacy_url|escape:'html':'UTF-8'}" target="_blank" rel="noopener">{l s='Datenschutzerklärung' mod='simple_withdrawalbutton'}</a>
          {/if}
        </p>
      </div>

      <div class="cyp-actions">
        <button type="submit" name="submit_withdrawal_prepare" value="1" class="btn btn-primary">
          {l s='Angaben prüfen →' mod='simple_withdrawalbutton'}
        </button>
      </div>
    </form>
  </div>
</section>

<script>
(function () {
  var partial  = document.getElementById('cyp_withdrawal_scope_partial');
  var full     = document.getElementById('cyp_withdrawal_scope_full');
  var group    = document.getElementById('cyp-withdrawal-items-group');
  var textarea = document.getElementById('cyp_withdrawal_items_text');
  var labels   = document.querySelectorAll('.cyp-radio-label');

  function update() {
    if (!group || !partial || !textarea) return;
    var isPartial = partial.checked;
    group.style.display = isPartial ? '' : 'none';
    textarea.required = isPartial;
    labels.forEach(function (label) {
      var input = label.querySelector('input[type="radio"]');
      label.classList.toggle('cyp-selected', input && input.checked);
    });
  }

  if (partial) partial.addEventListener('change', update);
  if (full)    full.addEventListener('change', update);
  update();
})();
</script>