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

<section class="cyp-withdrawal-page">
  <header class="page-header">
    <h1>{l s='Vertrag widerrufen' mod='simple_withdrawalbutton'}</h1>
  </header>

  <div class="card card-block">
    <p>
      {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'}
    </p>

    {if isset($revocation_url) && $revocation_url != ''}
      <p>
        <a href="{$revocation_url|escape:'html':'UTF-8'}" target="_blank" rel="noopener">
          {l s='Unsere Widerrufsbelehrung (14-Tage-Frist)' mod='simple_withdrawalbutton'}
        </a>
      </p>
    {/if}

    {if $errors_list|@count > 0}
      <div class="alert alert-danger">
        <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-Adresse 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>
        <label class="custom-radio" 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}>
          <span></span>
          {l s='die gesamte Bestellung' mod='simple_withdrawalbutton'}
        </label>
        <br>
        <label class="custom-radio" 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}>
          <span></span>
          {l s='einen Teil der Bestellung' mod='simple_withdrawalbutton'}
        </label>
      </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 möchten Sie widerrufen?' 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 text-muted">
          {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 optional' mod='simple_withdrawalbutton'}
        </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>

      <p class="small text-muted">
        {l s='Pflichtfelder sind mit * gekennzeichnet. Ein Widerrufsgrund ist nicht erforderlich.' mod='simple_withdrawalbutton'}
      </p>

      <p class="small text-muted">
        {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>

      <button type="submit" name="submit_withdrawal_prepare" value="1" class="btn btn-primary">
        {l s='Angaben prüfen' mod='simple_withdrawalbutton'}
      </button>
    </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');
  function update() {
    if (!group || !partial || !textarea) return;
    var show = partial.checked;
    group.style.display = show ? '' : 'none';
    textarea.required = show;
  }
  if (partial) partial.addEventListener('change', update);
  if (full) full.addEventListener('change', update);
  update();
})();
</script>