Direkt im HTML eingebundene Kontaktformulare werden von Bots abgegriffen und für Spam und Phishing missbraucht. Du musst also verhinden, dass deine Formulare automatisch ausgefüllt werden können. Dennoch willst du sie den seriösen Website-Besuchern anbieten.
Hier findest du eine Anleitung, wie du Formulare in deine Website einbinden und dennoch vor Bots schützen kannst.
Der wohl bekannteste Bot-Schutz ist ein CAPTCHA, bei dem du z.B. Ampeln in einem Bild selektieren oder ein kryptisches Zahlen-Buchstaben-Bild entziffern musst. Solche Hürden nerven und willst du nicht. Auch Googles reCaptcha mit der Checkbox "Ich bin kein Roboter" hat zu viele Nachteile.
Ein sinnvoller Ansatz ist der Honigtopf. Damit wird ein Formularfeld bezeichnet, das vermeintlich ausgefüllt werden muss.
<label class="botProtection">
<span>Spitzname</span>
<input type="text" name="nickname" tabindex="-1" required>
</label>
Über die CSS-Klasse botProtection ist das Feld für den normalen Nutzer unsichtbar zu machen.
.botProtection {
height: 0;
margin: 0;
overflow: hidden;
opacity: 0;
}
Mittels Javascript wird das Feld nach vier Sekunden entfernt, sofern es dann noch leer ist. Ein Bot wartet diese Zeit in der Regel nicht ab. Eine echte Person braucht eh mher Zeit, um das Formular auszufüllen.
// Form Spam Protection
function formProtection() {
const submitButton = document.querySelector('.botProtection ~ button[name=submit]');
if (submitButton) {
setTimeout(() => {
submitButton.addEventListener('click', () => {
const botField = document.querySelector('.botProtection input');
if (botField.value == '') {
botField.remove();
}
});
}, 4000);
}
}
// Do on DOM Ready
document.addEventListener('DOMContentLoaded', () => {
formProtection();
});
Das Formularziel muss dann nur noch prüfen, ob ein Wert zum Feld "nickname" vorhanden ist. Falls ja ist die Aktion abzubrechen.
Nun funktionieren deine Formulare ganz normal und sehen auch korrekt aus. Ein so geschütztes Formular findest du bei Kontakt und Impressum. Als weiteren Schutz wird mein Kontaktformular verzögert nachgeladen (Lazy Load).
Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.