Kontaktformular

Webseiten bieten oft ein Kontaktformular an. Die einfachste Methode ist es, ein Webformular für die Nachricht zu erstellen und diese dann über den E-Mail-Klienten des Besuchers abschicken zu lassen.

Der Block dafür sieht so aus:

  <div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <h1 class="mb-4">Kontakt</h1>

        <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="<URL_DER_DATENSCHUTZERKLÄRUNG>" 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 = '<ZIEL_MAILADRESSE_DES_KANALBETREIBERS>'; // <-- 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>

Hier muss dann nur noch die URL zur Datenschutzerklärung und die eigene Mailadresse eingetragen werden.

Ein Mail-Versand mittels PHP wäre ebenfalls denkbar, ist jedoch nicht trivial, zumal es darauf ankommt, welches Mailversand-System der Hub verwendet.