CINXE.COM
Kontakt-Formular Tutorial Captcha
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <link rel="shortcut icon" href="assets/images/logo-mobirise-250x250-128x128.png" type="image/x-icon"> <meta name="description" content="Tutorial Captcha Spamschutz"> <title>Kontakt-Formular Tutorial Captcha</title> <link rel="stylesheet" href="assets/web/assets/mobirise-icons/mobirise-icons.css"> <link rel="stylesheet" href="assets/icon54-v2/style.css"> <link rel="stylesheet" href="assets/web/assets/mobirise-icons2/mobirise2.css"> <link rel="stylesheet" href="assets/Material-Design-Icons/css/material.css"> <link rel="stylesheet" href="assets/simple-line-icons/simple-line-icons.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css"> <link rel="stylesheet" href="assets/web/assets/gdpr-plugin/gdpr-styles.css"> <link rel="stylesheet" href="assets/popup-overlay-plugin/style.css"> <link rel="stylesheet" href="assets/dropdown/css/style.css"> <link rel="stylesheet" href="assets/socicon/css/styles.css"> <link rel="preload" href="https://www.mobirise-tutorials.com/assets/myfonts/style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="https://www.mobirise-tutorials.com/assets/myfonts/style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap"></noscript> <link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css?v=ykqGqG"><link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css?v=ykqGqG" type="text/css"> <script src="https://consent.cookiefirst.com/sites/mobirise-tutorials.com-f6a24dff-9a33-4bc8-bd8d-af58db844677/consent.js"></script> <!-- added CSS to display the hamburger menu on iOS14 and later --> <style> .hamburger-icon { height: .1px !important; background-color: #fff !important } </style> <!-- Google Translator --> <style> /* Image */ .goog-te-gadget img { display: none !important; } /* Powered */ .goog-te-gadget { color: #e2e2e2 !important; } /* Link */ .VIpgJd-ZVi9od-l4eHX-hSRGPd { color: #6592e6 !important; } /* Link Hover */ .VIpgJd-ZVi9od-l4eHX-hSRGPd:hover { color: #326ede !important; } </style> <style> /* WCAG Focus */ *:focus-visible { outline: 2px solid red !important; } </style> </head> <body> <section data-bs-version="5.1" class="menu menu2 cid-uqubteM5aO" once="menu" id="menu2-7v"> <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg"> <div class="container"> <div class="navbar-brand"> <span class="navbar-logo"> <a href="index.html"> <img src="assets/images/logo-mobirise-96x96.png" alt="" title="Mobirise Tutorials" style="height: 4.2rem;"> </a> </span> <span class="navbar-caption-wrap"><a class="navbar-caption text-white text-primary display-7" href="index.html">Mobirise</a></span> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <div class="hamburger"> <span></span> <span></span> <span></span> <span></span> </div> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true"><li class="nav-item dropdown"><a class="nav-link link dropdown-toggle text-white display-4" href="#" data-toggle="dropdown-submenu" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Foto Galerien</a><div class="dropdown-menu" aria-labelledby="dropdown-270"><a class="dropdown-item text-white display-4" href="Fotos.html">Foto Beispiele</a><a class="dropdown-item text-white display-4" href="Lytebox.html">Fotoalbum mit Lytebox</a><a class="dropdown-item text-white display-4" href="Fotouploadalbum.php">Fotoalbum mit Upload</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Tutorials/Masonsry-Gallery.html" target="_blank">Lightbox 2</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Tutorials-3/Lightbox.html" target="_blank">Lightbox KI generiert</a><a class="dropdown-item text-white display-4" href="Slider.html">Slider</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/BusinessM4/Visual-Lightbox.html" target="_blank">Visual Lightbox</a><a class="dropdown-item text-white display-4" href="WOW-Slider.html" target="_blank">WOW Slider</a></div></li> <li class="nav-item dropdown"><a class="nav-link link dropdown-toggle text-white display-4" href="#" data-toggle="dropdown-submenu" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Kontakt</a><div class="dropdown-menu" aria-labelledby="dropdown-333"><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Formular/" target="_blank">Kontakt zu mir</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Formular/Generator-Arclab.html" target="_blank">Formular Generatoren</a><a class="dropdown-item text-white display-4" href="Gastbuch.php" target="_blank">G盲stebuch</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Event-Kalender-SQLite/" target="_blank">Kalender</a><a class="dropdown-item text-white display-4" href="Google-Maps.php" target="_blank">Karte Google Maps und andere</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Tutorials-2/Kommentar-Box.php" target="_blank">Kommentare hinterlassen</a><a class="dropdown-item text-white display-4" href="Kontakt-Formular.php" target="_blank">Mobirise Formular mit eigenem Mailskript</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Spenden/" target="_blank">Spenden als Beitrag zu diesem Projekt</a></div></li><li class="nav-item dropdown"><a class="nav-link link dropdown-toggle text-white display-4" href="#" data-toggle="dropdown-submenu" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Verweise</a><div class="dropdown-menu" aria-labelledby="dropdown-357"><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Download-Archiv/" target="_blank">Download Archiv</a><a class="dropdown-item text-white display-4" href="Linkliste.html" target="_blank">Linkliste</a><a class="dropdown-item text-white display-4" href="https://secure.2co.com/myaccount/" target="_blank">Mobirise 2Checkout Konto</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Testseiten/AI-Generated-5/" target="_blank">Mobirise AI</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Mobirise-Links/Documents-Mobirise.php" target="_blank">Mobirise Dokumentation</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Mobirise-Links/HelpCenter-Mobirise.php" target="_blank">Mobirise Help Center</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Mobirise-Links/Gesamtpaket-Mobirise-Erweiterungen.php" target="_blank">Mobirise Komplett Paket</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Mobirise-Links/Gesamtpaket-Mobirise.php" target="_blank">Mobirise Komplett Paket mit AI</a><a class="dropdown-item text-white display-4" href="https://tommys-web-online.mobirisesite.com/" target="_blank">Mobirise Online Builder mit AI</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Mobirise-Links/History-Mobirise.php" target="_blank">Mobirise neueste Version</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Download-Archiv/" target="_blank">Werner-Zenk.de - Archivseite</a></div></li><li class="nav-item dropdown"><a class="nav-link link dropdown-toggle text-white display-4" href="#" data-toggle="dropdown-submenu" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Tutorials</a><div class="dropdown-menu" aria-labelledby="dropdown-599"><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Tutorial-Links/" target="_blank">Alle Tutorials im 脺berblick</a><a class="dropdown-item text-white display-4" href="MP3-Music.html" target="_blank">Audio Player</a><a class="dropdown-item text-white display-4" href="Code-Editor.html" target="_blank">Code Editor</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Formular-Generator/" target="_blank">Formular Generator</a><a class="dropdown-item show text-white display-4" href="https://www.mobirise-tutorials.com/Local-Fonts/" target="_blank">Google Fonts entfernen</a><a class="dropdown-item show text-white display-4" href="https://www.mobirise-tutorials.com/News/direkteinbau/" target="_blank">Nachrichten Skript CMS</a><a class="dropdown-item show text-white display-4" href="https://www.mobirise-tutorials.com/PHP/" target="_blank">PHP Version meiner Domain</a><a class="dropdown-item show text-white display-4" href="Publizieren.html" target="_blank">Publizieren mit Mobirise</a><a class="dropdown-item show text-white display-4" href="Projekt-Sicherheit.html" target="_blank">Sicherheit und Settings</a><a class="dropdown-item show text-white display-4" href="https://www.mobirise-tutorials.com/BusinessM4/video.html" target="_blank">Video Player</a></div></li><li class="nav-item dropdown"><a class="nav-link link dropdown-toggle text-white display-4" href="https://www.mobirise-tutorials.com/Forum/" target="_blank" data-toggle="dropdown-submenu" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Weiteres</a><div class="dropdown-menu" aria-labelledby="dropdown-614"><a class="dropdown-item text-white text-primary display-4" href="https://amp.dev/de/" target="_blank">AMP was ist das</a><a class="dropdown-item text-white display-4" href="Eigene-Anker.html" target="_blank">Anker setzen</a><a class="dropdown-item text-white display-4" href="https://mobirise-tutorials.com/News-PHPJabbers/blog.html" target="_blank">Blogging Software CMS</a><a class="dropdown-item text-white display-4" href="https://getbootstrap.com/" target="_blank">Bootstrap was ist das</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/CMS-Dynpage/" target="_blank">CMS in Mobirise</a><a class="dropdown-item text-white display-4" href="javascript: void();" onclick="cookiefirst_show_settings();">Cookie Einstellungen 盲ndern</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Datenschutz/" target="_blank">Datenschutz</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/LawyerM4-Tutorials/Fullscreen-Background.html" target="_blank">Fullscreen Hintergrund</a><a class="dropdown-item text-white display-4" href="Mitglieder.php" target="_blank">Mitglieder Bereich</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Tutorial-Links/Mobirise-Themen.html" target="_blank">Mobirise Themen Beispiele</a><a class="dropdown-item text-white display-4" href="https://www.mobirise-tutorials.com/Tutorials/Spotify.html" target="_blank">Music Player Mobirise</a></div></li><li class="nav-item"><a class="nav-link link text-white display-4" href="https://www.mobirise-tutorials.com/Forum/" target="_blank"><span class="icon54-v2-speach-bubbles-1 mbr-iconfont mbr-iconfont-btn"></span>Forum</a></li> <li class="nav-item"><a class="nav-link link text-white display-4" href="Suchen.php"><span class="mbri-search mbr-iconfont mbr-iconfont-btn"></span>Suchen</a> </li></ul> </div> </div> </nav> </section> <section data-bs-version="5.1" class="header6 cid-uqubtf5kqL mbr-fullscreen" id="header6-7w"> <div class="mbr-overlay" style="opacity: 0.4; background-color: rgb(0, 0, 0);"></div> <div class="align-center container"> <div class="row justify-content-center"> <div class="col-12 col-lg-10"> <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-3 display-2"><strong>Captcha Code</strong><strong><br></strong></h1> <p class="mbr-text mbr-white mbr-fonts-style display-7">Spamschutz f眉r mein Skript mailscript.php<br><br><br></p> <div class="myposition"> <div class="mbr-section-btn mt-3"><a class="btn btn-white-outline display-4" href="Kontakt-Captcha-Tutorial.html#Tutorial"><span class="mobi-mbri mobi-mbri-pages mbr-iconfont mbr-iconfont-btn"></span>Captcha Zahlen</a> <a class="btn btn-white-outline display-4" href="Kontakt-Captcha-Tutorial.html#Captcha-Variante"><span class="mobi-mbri mobi-mbri-pages mbr-iconfont mbr-iconfont-btn"></span>Captcha Mixed</a> <a class="btn btn-white-outline display-4" href="Kontakt-Formular.php#Formular"><span class="socicon socicon-mail mbr-iconfont mbr-iconfont-btn"></span>Formular</a> <a class="btn btn-white-outline display-4" href="Kontakt-Captcha-Tutorial.html#Google"><span class="mdi-action-translate mbr-iconfont mbr-iconfont-btn"></span>Translator</a> </div> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="content5 cid-uqudNF2bZr" id="Tutorial" data-rv-view="1252"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-10"> <h4 class="mbr-section-subtitle mbr-fonts-style mb-4 display-5"> Tutorial Captcha mit Zahlen</h4> <p class="mbr-text mbr-fonts-style display-7"> Ich habe mit Hilfe der KI ChatGPT einen kleinen Spamschutz f眉r mein Skript <mark>mailscript.php</mark> in Form eines Captcha-Codes als PHP-Grafik erstellt und diesen in mein Formular integriert.<br><br><strong>Captcha</strong>:</p> <!-- Captcha-Start --> <div class="col-md-3 mbr-form"> <a href="javascript: void();" onclick="reloadCaptcha(); return false;"><img id="captchaImage" style="max-width: 150px;" src="https://www.mobirise-tutorials.com/captcha_image.php" alt="Captcha-Bild" media-simple="true"></a> <br> </div> <!-- Captcha-End --> <p class="mbr-text mbr-fonts-style display-7"> <span style="padding-top: 25px; padding-bottom: 25px;" class="col-md-12"> <a href="javascript: void();" onclick="reloadCaptcha(); return false;" class="text-primary">Neues Captcha laden <span class="sli-reload mbr-iconfont mbr-iconfont-btn"></span></a></span><br><br> Bitte speichert das folgende PHP-Skript zur Erstellung der Captcha-Grafik als Datei <mark><a href="https://www.mobirise-tutorials.com/captcha_image.php" class="text-primary" target="_blank">captcha_image.php</a></mark> und kopiert es in das Stammverzeichnis eures Projekts. Das Stammverzeichnis ist das oberste Verzeichnis eures Projekts, also der Ort, an dem sich auch die Seite mit dem Formular befindet.<br><br>Ich habe noch ein <strong>komplexes Captcha</strong> entwickelt, das ich <a href="Kontakt-Captcha-Tutorial.html#Captcha-Variante" class="text-primary">weiter unten beschreibe</a>. Dieses Captcha enth盲lt eine Mischung aus Zahlen sowie Gro脽- und Kleinbuchstaben. Nur der Code f眉r die Captcha-Grafik unterscheidet sich, ansonsten ist der Einbau fast gleich.<br><br>Den PHP-Code zur Erstellung der Captcha-Grafik k枚nnt ihr selbstverst盲ndlich nach euren W眉nschen anpassen, zum Beispiel in Bezug auf die Gr枚脽e oder die Farben. <br><br>Achte darauf, einen Editor zu verwenden, der die Kodierung auf "UTF-8" beibeh盲lt, wie zum Beispiel den Windows-Editor oder <a href="https://notepad-plus-plus.org/" class="text-primary" target="_blank">Notepad++</a></p> <p class="mbr-text mbr-fonts-style display-7"><br> <code> <?php<br> // Tommy October 7, 2024<br> // Save this code as a file named captcha_image.php<br> <br> session_start();<br> <br> // Zufallszahlen f眉r die Rechenaufgabe<br> $num1 = rand(1, 10);<br> $num2 = rand(1, 10);<br> $captchaResult = $num1 + $num2;<br> <br> // Das richtige Ergebnis in einer Session-Variable speichern<br> $_SESSION['captcha_result'] = $captchaResult;<br> <br> // Erstelle ein Bild<br> $img = imagecreatetruecolor(120, 40);<br> <br> // Farben definieren<br> $bg_color = imagecolorallocate($img, 255, 255, 255); // Wei脽er Hintergrund<br> $text_color = imagecolorallocate($img, 0, 0, 0); // Schwarzer Text<br> $line_color = imagecolorallocate($img, 64, 64, 64); // Graue Linien<br> <br> // F眉lle den Hintergrund<br> imagefilledrectangle($img, 0, 0, 120, 40, $bg_color);<br> <br> // Optional: Verwirrende Linien einf眉gen<br> for($i = 0; $i < 5; $i++) {<br> imageline($img, rand(0, 120), rand(0, 40), rand(0, 120), rand(0, 40), $line_color);<br> }<br> <br> // Text f眉r die Rechenaufgabe (Captcha)<br> $captcha_text = "$num1 + $num2 = ?";<br> imagestring($img, 5, 20, 10, $captcha_text, $text_color);<br> <br> // Header f眉r die Bildausgabe<br> header("Content-type: image/png");<br> imagepng($img);<br> imagedestroy($img);<br> ?><br> </code> </p><br> <p class="mbr-text mbr-fonts-style display-7">Bitte f眉ge den folgenden zus盲tzlichen PHP-Code direkt unter den Kommentaren in die bereits heruntergeladene Datei <mark><a href="Kontakt-Formular.php#Download" class="text-primary">mailscript.php</a></mark> ein, wie im <a href="Kontakt-Captcha-Tutorial.html#mailscript" class="text-primary">Screenshot unten</a> dargestellt. Die meisten Zeilen sind auskommentiert, aber ich lasse sie so, damit ihr sie ebenfalls testen k枚nnt. Am Ende wird lediglich die Umleitung zur Fehlerseite bei einem falschen Captcha-Code ben枚tigt.<br><br>Bitte passt den Namen der Fehlerseite an, auf die bei einem falschen Captcha-Code umgeleitet werden soll. In meinem Fall habe ich diese Fehlerseite so genannt: <mark><a href="Kontakt-Captcha.php" class="text-secondary notranslate" target="_blank">Kontakt-Captcha.php</a></mark>.</p><br> <p class="mbr-text mbr-fonts-style display-7"> <code> // Optionaler Captcha Spamschutz von Tommy vom 07.10.2024<br> session_start(); // Startet oder 眉bernimmt die Session<br> <br> if ($_SERVER["REQUEST_METHOD"] == "POST") {<br> $captchaUserInput = $_POST['captcha'];<br> $captchaCorrectResult = $_SESSION['captcha_result'];<br> <br> // Optional: Speichere die Benutzereingabe zur Ausgabe auf anderer Seite<br> $_SESSION['captcha_user_input'] = $captchaUserInput;<br> <br> // Debugging: Ausgabe der Werte zur 脺berpr眉fung<br> // echo "Eingabe: " . $captchaUserInput . "<br>";<br> // echo "Erwartetes Ergebnis: " . $captchaCorrectResult . "<br>";<br> <br> // 脺berpr眉fe das Captcha<br> if (intval($captchaUserInput) === intval($captchaCorrectResult)) {<br> // Debugging: Werte vergleichen - richtig<br> // Captcha korrekt - Hier weiter mit dem Senden der Mail<br> // echo "Nachricht wurde erfolgreich verschickt!";<br> <br> } else {<br> <br> // Debugging: Werte vergleichen - falsch<br> // Captcha falsch - Fehlermeldung anzeigen und Link zur眉ck zur Seite<br> // echo "Das Captcha wurde falsch beantwortet. Bitte versuche es erneut.<br>";<br> // echo '<a href="Mail-Senden.php">Zur眉ck zum Formular</a>';<br> <br> // Umleitung auf erstellte Fehlerseite und Abbruch vom Script<br> header("Location: " . "<mark><span style="color: red;">Kontakt-Captcha.php</span></mark>");<br> exit;<br> }<br> } </code> </p><br> <p class="mbr-text mbr-fonts-style display-7"> Nun muss noch das Formular im "Code Editor" um die Captcha-Eingabe erweitert werden. Dabei muss der Verweis zur Datei <mark>captcha_image.php</mark> als <span style="color: red;">absolute URL eingetragen werden</span>, da Mobirise einen relativen Verweis falsch generieren w眉rde. Ersetzt also meinen Domain-Namen mit eurem Domain-Namen als Verweis zur Datei. Ich habe diesen "Captcha-Bereich" in meinem Formular zwischen dem letzten Feld "Nachricht" und dem Senden-Button platziert, wie ihr <a href="Kontakt-Captcha-Tutorial.html#Code-Editor" class="text-primary">unten im Screenshot</a> sehen k枚nnt.</p><br> <p class="mbr-text mbr-fonts-style display-7"> <code> <!-- Captcha-Bereich --><br> <div class="col-md-3 mbr-form"><br> <label mbr-text mbr-theme-style="display-7" for="captcha" class="form-control-label mbr-fonts-style">Captcha:</label><br> <img <span style="color: red;">id="captchaImage"</span> style="max-width: 100px;" src="<span style="color: red;">https://www.mobirise-tutorials.com/<mark>captcha_image.php</mark></span>" alt="Captcha-Bild"><br> <br><br> <input type="text" name="captcha" required="required" class="form-control" placeholder="Ergebnis eingeben" autocomplete="off" maxlength="2"><br> </div><br> <br> <div style="padding-top: 25px; padding-bottom: 25px;" class="col-md-12"><br> <a href="javascript: void();" onclick="reloadCaptcha(); return false;" class="text-primary">Neues Captcha laden</a><br> </div> </code> </p> <p class="mbr-text mbr-fonts-style display-7"> <br>F眉gt das JavaScript mit der AJAX-Funktion zum Neuladen des Captchas in den Bereich "End of <body> code" der Seiteneinstellungen ein. Achtet dabei auf die <span style="color: red;">id="captchaImage"</span> von der Captcha-Grafik aus dem Formularcode oben und auch wieder auf die Angabe der gleichen <span style="color: red;">absoluten URL</span>. Das Script h盲ngt an die URL einen Zeitstempel, damit der Browser das Bild nicht aus dem Cache laden kann:<br><br></p> <p class="mbr-text mbr-fonts-style display-7"> <code> <!-- JavaScript f眉r das Neuladen des Captchas --><br> <script><br> function reloadCaptcha() {<br> // Erzeugt eine zuf盲llige Zahl, um das Bild zu aktualisieren und den Cache zu umgehen<br> var timestamp = new Date().getTime();<br> document.getElementById('<span style="color: red;">captchaImage</span>').src = '<span style="color: red;">https://www.mobirise-tutorials.com/captcha_image.php</span>?' + timestamp;<br> }<br> </script> </code> </p> </div> </div> </div> </section> <section data-bs-version="5.1" class="image3 cid-uqvnK5gr9V" id="mailscript"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <div class="image-wrapper"> <img src="assets/images/mailscript-captcha-einbau-1580x760.png" alt="mailscript" title="Captcha Eingabe pr眉fen in Datei mailscript.php"> <p class="mbr-description mbr-fonts-style mt-2 align-center display-4">Captcha-Code zur Pr眉fung der Eingabe in Datei mailscript.php</p> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="image3 cid-uquLVDain1" id="Code-Editor"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <div class="image-wrapper"> <img src="assets/images/formular-captcha-code-1599x846.jpg" alt="Code Editor" title="Captcha im Code-Editor"> <p class="mbr-description mbr-fonts-style mt-2 align-center display-4"> Einbau vom Captcha Formular Code im Code Editor</p> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="content5 cid-uqRfA5H2FG" id="Captcha-Variante" data-rv-view="1260"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-10"> <h4 class="mbr-section-subtitle mbr-fonts-style mb-4 display-5">Tutorial Captcha Variante mit Zahlen & Buchstaben</h4> <p class="mbr-text mbr-fonts-style display-7">Hier habe ich als Alternative eine komplexe Captcha-Grafik erstellt, die Zahlen sowie Klein- und Gro脽buchstaben enth盲lt. Diese Variante habe ich auf <a href="https://www.mobirise-tutorials.com/Testseiten/Software-Ende/Mail-Senden.php" class="text-primary" target="_blank">dieser Testseite</a> eingebaut.<br><br><strong>Captcha</strong>:</p> <!-- Captcha-Start --> <div class="col-md-3 mbr-form"> <a href="javascript: void();" onclick="reloadCaptcha2(); return false;"><img id="captchaImage2" style="max-width: 150px;" src="https://www.mobirise-tutorials.com/captcha-mix_image.php" alt="Captcha-Bild" media-simple="true"></a> <br> </div> <!-- Captcha-End --> <p class="mbr-text mbr-fonts-style display-7"> <span style="padding-top: 25px; padding-bottom: 25px;" class="col-md-12"> <a href="javascript: void();" onclick="reloadCaptcha2(); return false;" class="text-primary">Neues Captcha laden <span class="sli-reload mbr-iconfont mbr-iconfont-btn"></span></a></span><br><br>Bitte baut alles genau so ein, wie oben beschrieben. Lest auch alle meine detaillierteren Beschreibungen, die weiter oben stehen. Nur der Code f眉r die komplexe Captcha-Grafik 盲ndert sich, den ihr wieder als Datei <mark>captcha_image.php</mark> speichert. Kopiert diese Datei in das Stammverzeichnis eures Projekts, eben genauso wie bereits oben beschrieben.<br><br>Da hier auch Buchstaben verwendet werden, muss diesem Skript eine Schriftart zugewiesen werden. Diese .ttf Datei kopiert ihr ebenfalls in das Stammverzeichnis des Projektes oder ihr m眉sst den Pfad anpassen. Ich habe hier den Font <span style="color: red; font-weight: bold;">Jost-Regular.ttf</span> verwendet, den ihr im Internet, zum Beispiel von <a href="https://fonts.google.com/specimen/Jost" class="text-primary" target="_blank">Google Fonts</a> downloaden k枚nnt. Nat眉rlich k枚nnt ihr auch jeden anderen TrueType Font w盲hlen. Hier k枚nnt ihr auch meine Schrift downloaden als:<br><br><mark><a href="https://www.mobirise-tutorials.com/Jost-Regular.ttf" class="text-primary" target="_blank">Jost-Regular.ttf <span class="mobi-mbri mobi-mbri-download-2 mbr-iconfont mbr-iconfont-btn"></span></a></mark></p> <p class="mbr-text mbr-fonts-style display-7"><br> <code> <?php<br> // Tommy October 7, 2024<br> // Save this code as a file named captcha_image.php<br> <br> session_start();<br> <br> // Funktion zum Erzeugen einer zuf盲lligen Zeichenfolge (Zahlen, Klein- und Gro脽buchstaben)<br> function generateCaptchaString($length = 6) {<br> $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';<br> $charactersLength = strlen($characters);<br> $randomString = '';<br> for ($i = 0; $i < $length; $i++) {<br> $randomString .= $characters[rand(0, $charactersLength - 1)];<br> }<br> return $randomString;<br> }<br> <br> // Generiere eine zuf盲llige Zeichenfolge<br> $captchaString = generateCaptchaString(6);<br> <br> // Speichere die Zeichenfolge in einer Session-Variable<br> $_SESSION['captcha_result'] = $captchaString;<br> <br> // Erstelle ein Bild<br> $img = imagecreatetruecolor(150, 50);<br> <br> // Farben definieren<br> $bg_color = imagecolorallocate($img, 255, 255, 255); // Wei脽er Hintergrund<br> $text_color = imagecolorallocate($img, 0, 0, 0); // Schwarzer Text<br> $line_color = imagecolorallocate($img, 64, 64, 64); // Graue Linien<br> <br> // F眉lle den Hintergrund<br> imagefilledrectangle($img, 0, 0, 150, 50, $bg_color);<br> <br> // Optional: Verwirrende Linien einf眉gen, um Bots zu erschweren<br> for ($i = 0; $i < 5; $i++) {<br> imageline($img, rand(0, 150), rand(0, 50), rand(0, 150), rand(0, 50), $line_color);<br> }<br> <br> // Zeichne die zuf盲llige Zeichenfolge auf das Bild<br> imagettftext($img, 20, 0, 30, 35, $text_color, __DIR__ . '/<span style="color: red; font-weight: bold;">Jost-Regular.ttf</span>', $captchaString);<br> <br> // Header f眉r die Bildausgabe<br> header("Content-type: image/png");<br> imagepng($img);<br> imagedestroy($img);<br> ?> </code> </p><br> <p class="mbr-text mbr-fonts-style display-7">Bitte f眉ge den folgenden zus盲tzlichen PHP-Code direkt unter den Kommentaren in die bereits heruntergeladene Datei <mark><a href="Kontakt-Formular.php#Download" class="text-primary">mailscript.php</a></mark> ein, wie bereits oben beschrieben. <br><br>Hier erfolgt lediglich eine <span style="color: red;">Anpassung der 脺berpr眉fung</span> vom gesamten String, der in Kleinbuchstaben umgewandelt wird. Daher spielt es keine Rolle, ob die Buchstaben in Gro脽- oder Kleinschreibung vorliegen. Ansonsten bleibt alles gleich.</p><br> <p class="mbr-text mbr-fonts-style display-7"> <code> // Optionaler Captcha Spamschutz von Tommy vom 07.10.2024<br> session_start(); // Startet oder 眉bernimmt die Session<br> <br> if ($_SERVER["REQUEST_METHOD"] == "POST") {<br> $captchaUserInput = $_POST['captcha'];<br> $captchaCorrectResult = $_SESSION['captcha_result'];<br> <br> // Optional: Speichere die Benutzereingabe zur Ausgabe auf anderer Seite<br> $_SESSION['captcha_user_input'] = $captchaUserInput;<br> <br> // Debugging: Ausgabe der Werte zur 脺berpr眉fung<br> // echo "Eingabe: " . $captchaUserInput . "<br>";<br> // echo "Erwartetes Ergebnis: " . $captchaCorrectResult . "<br>";<br> <br> <span style="color: red;">// 脺berpr眉fe das Captcha (Gro脽- und Kleinschreibung ignorieren)<br> if (strtolower($captchaUserInput) === strtolower($captchaCorrectResult))</span> {<br> // Debugging: Werte vergleichen - richtig<br> // Captcha korrekt - Hier weiter mit dem Senden der Mail<br> // echo "Nachricht wurde erfolgreich verschickt!";<br> <br> } else {<br> <br> // Debugging: Werte vergleichen - falsch<br> // Captcha falsch - Fehlermeldung anzeigen und Link zur眉ck zur Seite<br> // echo "Das Captcha wurde falsch beantwortet. Bitte versuche es erneut.<br>";<br> // echo '<a href="Mail-Senden.php">Zur眉ck zum Formular</a>';<br> <br> // Umleitung auf erstellte Fehlerseite und Abbruch vom Script<br> header("Location: " . "<mark><span style="color: red;">Kontakt-Captcha.php</span></mark>");<br> exit;<br> }<br> } </code> </p><br> <p class="mbr-text mbr-fonts-style display-7"> Nun muss noch das Formular im "Code Editor" um die Captcha-Eingabe erweitert werden. Auch hier bleibt alles gleich wie bereits oben beschrieben. Das Captcha habe ich hier auf eine Breite von <strong>150px</strong> etwas gr枚脽er dargestellt, damit es besser zu erkennen ist. Weiterhin habe ich das Eingabefeld hier auf <strong>6 Zeichen</strong> verl盲ngert.</p><br> <p class="mbr-text mbr-fonts-style display-7"> <code> <!-- Captcha-Bereich --><br> <div class="col-md-3 mbr-form"><br> <label mbr-text mbr-theme-style="display-7" for="captcha" class="form-control-label mbr-fonts-style">Captcha:</label><br> <img <span style="color: red;">id="captchaImage"</span> style="max-width: <strong>150px</strong>;" src="<span style="color: red;">https://www.mobirise-tutorials.com/<mark>captcha_image.php</mark></span>" alt="Captcha-Bild"><br> <br><br> <input type="text" name="captcha" required="required" class="form-control" placeholder="Ergebnis eingeben" autocomplete="off" maxlength="<strong>6</strong>"><br> </div><br> <br> <div style="padding-top: 25px; padding-bottom: 25px;" class="col-md-12"><br> <a href="javascript: void();" onclick="reloadCaptcha(); return false;" class="text-primary">Neues Captcha laden</a><br> </div> </code> </p> </div> </div> </div> </section> <section data-bs-version="5.1" class="content5 cid-uquy5o4jRd" id="Google"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-10"> <p class="mbr-text mbr-fonts-style display-7"> Google Translator<br><span style="font-size: 0.8rem;"><a href="javascript: void();" onclick="cookiefirst_show_settings();" class="text-white">Funktionale Cookies akzeptieren</a></span> </p> <div class="d-flex justify-content-center"> <div style="text-align: center;" id="google_translate_element"></div> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="footer7 cid-uqubtfgaS4" once="footers" id="footer7-7x"> <div class="container"> <div class="media-container-row align-center mbr-white"> <div class="col-12"> <p class="mbr-text mb-0 mbr-fonts-style display-7"><a href="https://www.mobirise-tutorials.com/Datenschutz/" class="text-white" target="_blank">Impressum</a> | <a href="https://www.mobirise-tutorials.com/Datenschutz/" class="text-white" target="_blank">Datenschutz</a> | <a href="https://www.mobirise-tutorials.com/Spenden/" class="text-white" target="_blank">Spenden</a><br><br>Copyright 漏 Mobirise-Tutorials.com Thomas Frei-Herrmann <br>Private Homepage</p> </div> </div> </div> </section> <script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/smoothscroll/smooth-scroll.js"></script> <script src="assets/ytplayer/index.js"></script> <script src="assets/dropdown/js/navbar-dropdown.js"></script> <script src="assets/theme/js/script.js"></script> <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'de' }, 'google_translate_element'); } </script> <script type="text/plain" data-cookiefirst-category="functional" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <!-- JavaScript f眉r das Neuladen des Captchas 1 --> <script> function reloadCaptcha() { // Erzeugt eine zuf盲llige Zahl, um das Bild zu aktualisieren und den Cache zu umgehen var timestamp = new Date().getTime(); document.getElementById('captchaImage').src = 'https://www.mobirise-tutorials.com/captcha_image.php?' + timestamp; } </script> <!-- JavaScript f眉r das Neuladen des Captchas 2 --> <script> function reloadCaptcha2() { // Erzeugt eine zuf盲llige Zahl, um das Bild zu aktualisieren und den Cache zu umgehen var timestamp = new Date().getTime(); document.getElementById('captchaImage2').src = 'https://www.mobirise-tutorials.com/captcha-mix_image.php?' + timestamp; } </script> <div id="scrollToTop" class="scrollToTop mbr-arrow-up"><a style="text-align: center;"><i class="mbr-arrow-up-icon mbr-arrow-up-icon-cm cm-icon cm-icon-smallarrow-up"></i></a></div> </body> </html>