Barrierefreie Formulare.
Ohne Kompromisse.

Laden Sie das Repository herunter und kopieren Sie die folgenden Ordner und Dateien in Ihr Webprojekt. Die Verzeichnisstruktur muss erhalten bleiben, da alle JS-Module mit relativen Pfaden importieren.

Pflichtdateien – müssen kopiert werden

assets/
├── js/
│   ├── captureBarriereFrei/     ← ganzer Ordner
│   │   ├── index.js
│   │   ├── core.js
│   │   ├── botDetection.js
│   │   ├── formProtection.js
│   │   ├── formValidation.js
│   │   ├── ui.js
│   │   ├── utils.js
│   │   └── logger.js
│   └── mailSender/              ← ganzer Ordner
│       ├── index.js
│       ├── core/
│       │   ├── MailSender.js
│       │   └── ConfigManager.js
│       └── utils/
│           ├── ajaxHandler.js
│           ├── fileValidator.js
│           ├── formUtils.js
│           └── templateEngine.js
├── php/
│   └── send_mail.php            ← serverseitiger Handler
├── config/
│   ├── config.js                ← Konfiguration (wird angepasst)
│   └── betreff-routing.json     ← Routing-Optionen (wird angepasst)
└── templates/
    ├── contact.html             ← Benachrichtigungs-Mail
    └── confirmation.html        ← Bestätigungs-Mail

Optional – nur wenn Sie die mitgelieferten Formular-Styles nutzen möchten

assets/css/form-styles.css

Nicht kopieren – nur für dieses Showcase

index.html
assets/css/style.css
assets/php/mail_diagnose.php     ← nur Debug-Tool
assets/templates/helper.js       ← kein Runtime-Code
assets/js/captureBarriereFrei/Readme.pdf

Binden Sie die beiden ES6-Module und danach config.js als gewöhnliches Script ein. Die Reihenfolge ist entscheidend: Die Module müssen geladen sein, bevor config.js ausgeführt wird.

<!-- Zuerst die Module (type="module" lädt asynchron, blockiert nicht) -->
<script type="module" src="assets/js/captureBarriereFrei/index.js"></script>
<script type="module" src="assets/js/mailSender/index.js"></script>

<!-- Danach Konfiguration und Initialisierung -->
<script src="assets/config/config.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    window.FormularKonfiguration.initialisiere();
  });
</script>

Die Module registrieren sich als window.CaptureBarriereFrei und window.MailSender – config.js greift darüber auf sie zu.

Jedes zu schützende Formular braucht zwei Attribute: class="protected" aktiviert den Bot-Schutz und data-template verknüpft das Formular mit einer E-Mail-Vorlage.

<form id="kontaktFormular"
      method="post"
      novalidate
      class="protected"
      data-template="kontakt"
      aria-describedby="form-feedback">

  <!-- Barrierefreies Feedback-Element (Screenreader) -->
  <div id="form-feedback" class="sr-only" aria-live="assertive"></div>

  <!-- Ihre Formularfelder ... -->

  <!-- Jedes Feld braucht label + aria-describedby auf ein Fehlerelement -->
  <div class="form-group">
    <label for="email">E-Mail</label>
    <input type="email" id="email" name="email"
           required aria-required="true" aria-invalid="false"
           aria-describedby="email-error">
    <div id="email-error" class="error-message" aria-live="polite"></div>
  </div>

  <!-- Betreff-Select: Optionen werden automatisch aus betreff-routing.json befüllt -->
  <div class="form-group">
    <label for="betreff">Betreff</label>
    <select id="betreff" name="betreff"
            required aria-required="true" aria-invalid="false"
            aria-describedby="betreff-error">
      <option value="" disabled selected>Bitte wählen …</option>
      <!-- KEINE <option>-Elemente hier eintragen – config.js füllt den Select -->
    </select>
    <div id="betreff-error" class="error-message" aria-live="polite"></div>
  </div>

</form>

Die Felder security-score, url-field und interaction-start-time werden vom Modul automatisch als versteckte Felder eingefügt – diese Namen dürfen Sie in eigenen Feldern nicht verwenden.

Bearbeiten Sie assets/config/betreff-routing.json. Jeder Eintrag erzeugt eine Option im Betreff-Dropdown und legt fest, an welche E-Mail-Adresse Nachrichten mit diesem Betreff gehen.

[
  {
    "wert":        "support",          <!-- value-Attribut der <option> -->
    "bezeichnung": "Technischer Support", <!-- sichtbarer Label-Text -->
    "empfaenger":  "support@ihrefirma.de" <!-- Ziel-E-Mail für diesen Betreff -->
  },
  {
    "wert":        "angebot",
    "bezeichnung": "Angebotsanfrage",
    "empfaenger":  "vertrieb@ihrefirma.de"
  }
]

Der Fallback-Empfänger (wenn kein Routing-Eintrag greift) wird in config.js über EMPFAENGER_EMAIL gesetzt.

Öffnen Sie assets/config/config.js und passen Sie den oberen Bereich an. Den Code unterhalb des Kommentars „BITTE UNTENSTEHENDEN CODE NICHT ÄNDERN" nicht anfassen.

// Ihre Empfänger-E-Mail (Fallback, falls kein Routing greift)
const EMPFAENGER_EMAIL = 'ihre@email.de';

// Anzeigename des Absenders in der E-Mail
const ABSENDER_NAME = 'Kontaktformular Meine-Seite';

// ID Ihres Formulars (mit # davor)
const FORMULAR_ID = '#kontaktFormular';

// Formular nach erfolgreichem Absenden leeren?
const FORMULAR_ZURUECKSETZEN = true;

// Bot-Schutz aktiv? (empfohlen: true)
const BOT_SCHUTZ_AKTIVIEREN = true;

// Mindestzeit zum Ausfüllen in Sekunden (Standard: 5)
// Zu niedrig = Bots kommen durch. Zu hoch = Nutzer werden blockiert.
const MIN_AUSFUELLZEIT = 5;

// Debug-Modus: true während der Einrichtung, false in Produktion!
const DEBUGGING = false;

Den thresholdScore (Standard: 40) können Sie als optionalen Parameter in captureConfig im unteren Konfigurationsblock anpassen, falls Sie den Bot-Schutz strenger oder lockerer einstellen möchten.

Die Datei assets/php/send_mail.php empfängt den POST-Request und versendet die E-Mail über die PHP-Funktion mail() oder SMTP. Voraussetzungen:

• PHP 7.4 oder neuer auf dem Server
• Die PHP-Funktion mail() muss aktiviert und konfiguriert sein, oder ein SMTP-Plugin wie PHPMailer muss eingebunden werden
• Der Pfad zum Endpoint in config.js stimmt: endpoint: 'assets/php/send_mail.php' – passen Sie diesen an, wenn Ihre Verzeichnisstruktur abweicht

Kopieren Sie assets/php/mail_diagnose.php temporär auf den Server und rufen Sie die Datei im Browser auf, um die Mail-Konfiguration zu prüfen. Nach der Einrichtung wieder löschen.

https://ihreseite.de/assets/php/mail_diagnose.php

Öffnen Sie die Seite nie direkt als file://-URL – fetch()-Aufrufe für JSON und Templates werden dann vom Browser blockiert. Starten Sie stattdessen einen lokalen HTTP-Server:

# Python (im Projektordner ausführen)
python3 -m http.server 8080

# Node.js
npx serve .

# VS Code: Erweiterung "Live Server" → Rechtsklick auf index.html → "Open with Live Server"

Öffnen Sie dann http://localhost:8080 im Browser. Aktivieren Sie DEBUGGING = true in config.js, um detaillierte Konsolenmeldungen beider Module zu sehen. Für den E-Mail-Versand benötigen Sie einen echten Server mit PHP-Mail-Unterstützung.