Die Kontakt-Seite

Auch die Kontakt-Webseite habe ich der original DDP_WP entlehnt. Für das Kontaktformular, welches ich ans Ende der Seite gestellt habe, nutze ich die bereits beschrieben Variante aus dem Kapitel Kontaktformular. Als Empfänger Mailadresse ist im Formular-Quelltext meine DDP-Mailadresse eingetragen und der Link zur Datenschutzerklärung ist mit der Hubzilla-Webseite der Datenschutzerklärung hinterlegt.

<p>Anregungen, Fragen, allgemeine Kommentare...<br /><br />Feedback ist willkommen!<br /><br /></p>
<h3>Per eMail (<strong>möglichst!!!</strong> <a href="https://www.kuketz-blog.de/verschluesselte-e-mails-mit-gnupg-als-supergrundrecht/" rel="nofollow noopener">verschlüsselt</a>)</h3>
<p><br /><a href="mailto:pepecyb@dampfdruck-presse.hu" rel="nofollow noopener">pepecyb@dampfdruck-presse.hu</a><br /><a href="https://hub.hubzilla.hu/cloud/dampfdruckpresse/misc/pepecyb%40dampfdruck-presse_pubkey.asc" rel="nofollow noopener">GPG public key</a> - (oder von <a href="https://keys.openpgp.org/vks/v1/by-fingerprint/9A72C33867E04BD0C5F034BED0829CC448AB353D" rel="nofollow noopener">keys.openpgp.org</a>)<br /><a href="https://hub.hubzilla.hu/cloud/dampfdruckpresse/misc/pepecyb%40dampfdruck-presse_fingerprint.asc" rel="nofollow noopener">Fingerprint</a> (9A72 C338 67E0 4BD0 C5F0 34BE D082 9CC4 48AB 353D)<br /><br /></p>
<h3>Bei :matrix:</h3>
<p><br /><a href="https://matrix.org/" rel="nofollow noopener">Matrix</a> (bevorzugt): @pepecyb@matrix.org<br /><br /></p>
<h3>Per Direktnachricht (DN)</h3>
<p><br /><a href="https://hub.hubzilla.hu/channel/pepecyb" rel="nofollow noopener">pepecyb@hub.hubzilla.hu</a></p>
<hr>
  <div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">

        <form id="contactForm" novalidate>
          <div class="mb-3">
            <label for="subject" class="form-label">Betreff</label>
            <input type="text" class="form-control" id="subject" name="subject" required placeholder="Betreff">
            <div class="invalid-feedback">Bitte geben Sie einen Betreff ein.</div>
          </div>

          <div class="mb-3">
            <label for="message" class="form-label">Nachricht</label>
            <textarea class="form-control" id="message" name="message" rows="6" required placeholder="Ihre Nachricht"></textarea>
            <div class="invalid-feedback">Bitte geben Sie eine Nachricht ein.</div>
          </div>

          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" value="1" id="privacy_agree" required>

            <!-- Hier die URL zur Datenschutzerklärung einfügen -->

            <label class="form-check-label" for="privacy_agree">
              Ich habe die <a href="https://hub.hubzilla.hu/page/dampfdruckpresse/datenschutz" target="_blank" rel="noopener">Datenschutzerklärung</a> gelesen und bin mit der Speicherung meiner Daten einverstanden.
            </label>
            <div class="invalid-feedback">Sie müssen zustimmen, um die Nachricht zu senden.</div>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary" id="btnSend">Absenden</button>
            <button type="button" class="btn btn-secondary" id="btnReset">Abbrechen</button>
          </div>
        </form>

      </div>
    </div>
  </div>

  <script>
  (function () {

    // Konfiguration (hier die Empfängeradresse anpassen)

    const recipient = 'pepecyb@dampfdruck-presse.hu'; // <-- Empfängeradresse hier eintragen

    const form = document.getElementById('contactForm');
    const subjectEl = document.getElementById('subject');
    const messageEl = document.getElementById('message');
    const privacyEl = document.getElementById('privacy_agree');
    const btnReset = document.getElementById('btnReset');

    // Helper: mailto-encode
    function encodeMailto(text) {
      return encodeURIComponent(text).replace(/%0A/g, '%0D%0A');
    }

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      // HTML5 validity
      if (!form.checkValidity()) {
        form.classList.add('was-validated');
        return;
      }
      if (!privacyEl.checked) {
        privacyEl.classList.add('is-invalid');
        return;
      } else {
        privacyEl.classList.remove('is-invalid');
      }

      const subject = subjectEl.value.trim();
      const message = messageEl.value.trim();

      // Build mailto link
      let mailto = 'mailto:' + encodeURIComponent(recipient)
                 + '?subject=' + encodeMailto(subject)
                 + '&body=' + encodeMailto(message);

      // Open default mail client
      window.location.href = mailto;

      // Optional: reset form after triggering mailto
      form.reset();
      form.classList.remove('was-validated');
    });

    btnReset.addEventListener('click', function () {
      form.reset();
      form.classList.remove('was-validated');
    });
  })();
  </script>