CAPTCHAs (Completely Automated Public Turing test to tell Computers and Humans Apart) werden verwendet, um zwischen menschlichen Benutzern und automatisierten Bots zu unterscheiden. Sie hindern Bots z. B. daran, automatisch Formulare mit Spam-Inhalten abzuschicken.

CAPTCHA hinzufügen

Um ein Captcha auf deiner Website zu ergänzen, gehe zur Formular-Kategorie in der linken Sidebar und ziehe das Captcha-Element an die gewünschte Stelle innerhalb deines Formulars. Auf der linken Seite im Einstellungspanel siehst du, dass du zwischen zwei Optionen wählen kannst: dem Turnstile CAPTCHA von Cloudfare oder dem nativen CAPTCHA. 

Turnstile CAPTCHA

Turnstile von Cloudfare ist eine Drittanbieter-Integration, die barrierefreie CAPTCHAs anbietet. 

Um das Turnstile CAPTCHA aufzusetzen, klick auf Captcha managen. Das öffnet die Cloudfare Login-Page in einem neuen Tab. Wenn du noch keinen Cloudfare Account hast, musst du dir jetzt einen anlegen. Bitte beachte, dass du mit dem Signup die AGB, Datenschutz- und Cookie-Richtlinien von Cloudfare bestätigst. 

Sobald du eingeloggt bist, kannst du dein Captcha erstellen. Klicke dafür auf Add widget.

Klicke danach auf + Add Hostname. Das öffnet ein Slideout auf der rechten Seite. Hier musst du die Vorschau-URL deines Accounts (z.B. preview.sitejet.io oder preview.sitejet.dev oder preview.{deine Whitelabel-Domain}) und die Domain der Website hinterlegen. Um sicherzustellen, dass du die richtigen Hostnames nutzt, kannst du nochmal im Einstellungspanel im Website Builder gucken, denn da wird automatisch die richtige Vorschau-URL angezeigt und die Domain der Website, sofern du diese schon dem Projekt hinterlegt hast. Sobald du alle Hostnames hinzugefügt hast, klicke auf Add. 

Danach hast du die Möglichkeit den Widget Mode auszuwählen: 

• Managed: Diese Option wird von Cloudflare verwaltet. Dabei wird automatisch die geeignete Maßnahme auf Grundlage verschiedener Signale und Risikostufen ausgewählt. Cloudflare verwendet die Informationen des Besuchers, um zu entscheiden, ob eine interaktive Aufgabe verwendet werden sollte. Turnstile zeigt nur dann eine Interaktion an, wenn eine weitere Prüfung erforderlich ist, um zu verifizieren, dass der Besucher ein Mensch ist. Wenn eine Interaktion erforderlich ist, wird der Benutzer aufgefordert, ein Kästchen anzukreuzen (keine Bilder oder Texte zu entziffern).
  
• Non-interactive: Die Besucher sehen ein Widget mit einem Ladezeichen, während die Browser-Prüfung ausgeführt werden. Anders als bei der Managed Option werden die Besucher zu keinem Zeitpunkt aufgefordert, mit dem Widget zu interagieren.
  
• Invisible: Dieser Modus ähnelt der Non-interactive Option, bei dem die Besucher gar nicht mit dem Turnstile-Widget interagieren. Allerdings sehen die Besucher in diesem Fall weder ein Widget noch irgendeinen Hinweis darauf, dass eine unsichtbare Browser-Prüfung läuft.

Danach kannst du noch auswählen, ob es eine vorherige Freigabe für diese Website geben soll und danach klist du einfach auf den Create-Button. 

Als letzten Schritt siehst du den Site Key und den Secret Key für das Widget. 

Du musst beide einzeln kopieren uund im Einstellungspanel im Website Builder in die entsprechenden Felder kopieren. 

Sollte der Site Key falsch sein, siehst du das direkt im Editor, wo das Captcha auftauchen sollte. Wenn der Secret Key falsch ist, bekommst du das nur mit, wenn du tatsächlich ein Formular über die Website abschickst. Daher raten wir dir, dass du dein Setup auf der Website testest, indem du ein Formular abschickst. 

Sobald diese Schritte fertig sind, kannst du noch das Theme und die Größe des CAPTCHAs unter Generell anpassen. 

• Beim Theme kannst du zwischen Hell, Dunkel und Auto (automatisch auf die Browser-Einstellung angespasst) auswählen 
  
• Bei Größe hast du folgende Optionen:
  • Normal: 300px x 65px
    
    
  • Flexibel: 100% (min: 300px) x 65px
  • Kompakt: 150px x 140px
    
    

Wenn du die Website speicherst und neu lädst, solltest du dein ausgewähltes CAPTCHA im Formular sehen. 

Ein CAPTCHA mit hellem Theme, Non-interactive Mode und flexibler Größe könnte zum Beispiel so aussehen: 

Und mit einem dunklen Theme so: 

Bitte beachte, dass der "Invisible" Widget Mode, bei der Vorschau im Editor einen Platzhalter anzeigt. Bei der Vorschau-Website und bei der realen, veröffentlichen Website ist dann natürlich nichts zu sehen.

Wichtig: Da es sich hier um einen Drittanbieter handelt, musst du sicherstellen, dass Turnstile als ein notwendige Cookie hinterlegt wird bei deinem Consent Management Tool. Solltest du das nicht machen, kann es sein, dass das CAPTCHA nicht funktioniert. 

Natives CAPTCHA

Beim nativen CAPTCHA müssen Besucher eine visuelle Aufgabe lösen, indem sie Buchstaben und Zahlen in das daneben liegende Eingabefeld eingeben. Es erfordert keine Einrichtung und bietet ebenfalls einen sicheren Schutz, kann aber für einige Nutzer, insbesondere für diejenigen, die unterstützende Technologien verwenden, einschränkend sein und somit Auswirkungen auf die Barrierefreiheit der Website haben. 

Werde ein Teil unserer Community!

Tausche dich mit anderen Webdesignern über aktuelle Entwicklungen, Tipps und Tricks aus und präsentiere deine Lieblingsseiten. Hole dir Feedback und sprich mit uns über Funktionen, die du dir für Sitejet wünschst. Hier gelangst du direkt zur Sitejetters Community.