Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

E-Mail-Adresse und -Formular schützen. – auch mit Quiz!

Illustration geralt
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Hier geht es darum, sowohl die E-Mail-Adresse, die das E-Mail-Programm öffnet, als auch das Formular Contact Form 7 vor unerwünschten Spam-Anfragen zu schützen. Es gibt verschiedene Möglichkeiten, dieses Ziel zu erreichen, darunter die Verwendung von CAPTCHAs. Aber auch mit Honeypots und Quizzen kann man die Formulare vor Spam schützen, sodass nur echte Nutzer Zugriff darauf haben und die DSGVO-Konformität gewährleistet ist

E-Mail-Adresse und -Formular schützen

Tab 1: E-Mail-Adresse mit Plug-in schützen
Tab 2: E-Mail-Adresse mit Base64 verschlüsseln
Tab 3: E-Mail-Adresse mit ROT13 verschlüsseln
Tab 4: Kontaktformular Contact Form 7 mit Code für Quiz! 

Tab 1

E-Mail-Adresse mit Plug-in schützen

Function Reference/antispambot

  • Achtung, bei dieser Variante des Anti-Spambot-Plugins ist die E-Mail-Adresse dennoch auslesbar. Weitere Informationen findest du unter dem Scrollbereich.

Dennoch kann ich bestätigen, dass das Plugin seit geraumer Zeit zuverlässig seinen Dienst verrichtet(e) und uns erfolgreich vor Spam geschützt hat. Ich zögere jedoch, anstelle von 'verrichtet' 'verrichtete' zu verwenden, da sich die Verschlüsselung von Base64 zunächst bewähren muss.


Das Plug-in Anti-Spambot bedient sich der Verschleierung von E-Mails über die Shortcode-Syntax mithilfe der integrierten WordPress Codex-Funktionalität.

Anti-Spambot

Um Spambots zu blockieren, werden ausgewählte E-Mail-Adressen in HTML-Entitäten konvertiert. Dabei werden nicht alle Zeichen der E-Mail-Adresse konvertiert. Die Auswahl ist zufällig und ändert sich somit bei jedem Aufruf der Funktion.

Verwende den Shortcode mit der E-Mail-Adresse in deinem Beitrag oder auf deiner Seite:

[email]deine@email.de[/email]

Varianten:

Erstellt einen Mailto: -Link mit vorab ausgefülltem Betreff und Text:

  • [email]deine@email.de?subject=Je nach Betreff&body=Hallo,[/email]

deine@email.de

Folgendes zeigt die E-Mail nur an, ohne dass ein Link sie umschließt:

  • [email nolink=1]deine@email.de[/email]

deine@email.de

Zeigt den Text "E-Mail" mit einem Link zur E-Mail-Adresse an:

  • [email linktext = "E-Mail"]deine@email.de[/email]

E-Mail

Das mag alles recht gut und schön sein, jedoch ist die Adresse in dieser Variante immer noch nachvollziehbar, wie auf https://migano.de/webanalyse.php ersichtlich ist. Dieser Test simuliert die Vorgehensweise von Spam-Bots beim Auslesen von E-Mail-Adressen.

Aus diesem Grund haben wir eine Lösung entwickelt, die sowohl PHP als auch JavaScript verwendet.

Tab 2: E-Mail-Adresse mit Base64 verschlüsseln

Tab 2

E-Mail-Adresse mit Base64 verschlüsseln

Der folgende Code verwendet Base64, um die E-Mail-Adresse zu verschlüsseln. Obwohl dies keine besonders ausgefeilte Verschlüsselung ist, bietet sie dennoch einen gewissen Schutz vor Spam-Bots.

Es ist zu beachten, dass die E-Mail-Adresse nur einmal pro Seite funktioniert. Die Verschlüsselung der E-Mail-Adresse ist insbesondere auf den Seiten Impressum und Datenschutz von Bedeutung. Daher wird hier die Möglichkeit geboten, IDs festzulegen, damit das Skript nicht unnötig geladen wird.

/* --- E-Mail base64 verschlüsselt --- */

function encrypt_email($email) {
    // Verschlüssle die E-Mail-Adresse
    $encrypted_email = base64_encode($email);
    return $encrypted_email;
}

function add_custom_email_to_page() {
    // Definiere ein Array von Seiten- und Beitrag-IDs
    $page_post_ids = array(123, 456, 789); // Beispiel-IDs, ersetze diese mit den tatsächlichen IDs

    // Hole die aktuelle Seite oder den aktuellen Beitrag
    $current_id = get_queried_object_id();

    // Überprüfe, ob die aktuelle Seite oder der aktuelle Beitrag in der Liste der erlaubten IDs enthalten ist
    if (in_array($current_id, $page_post_ids)) {
        // Individuelle E-Mail-Adresse direkt im Code festlegen
        $custom_email = 'deine@email.de';

        // Verschlüssele die E-Mail-Adresse
        $encrypted_email = encrypt_email($custom_email);

        // Erstelle das Skript, um die E-Mail-Adresse zu entschlüsseln und im Frontend anzuzeigen
        ob_start(); // Starte den Puffer
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Funktion zum Entschlüsseln der E-Mail-Adresse
                function decryptEmail(encodedString) {
                    return decodeURIComponent(atob(encodedString));
                }

                // Entschlüssele die E-Mail-Adresse
                var email = decryptEmail("<?php echo esc_js($encrypted_email); ?>");

                // Füge die E-Mail-Adresse im Frontend ein
                var emailLink = document.createElement("a");
                emailLink.href = "mailto:" + email;
                emailLink.textContent = email;
                document.querySelector(".email-container").appendChild(emailLink);
            });
        </script>
        <?php
        $script = ob_get_clean(); // Hole den Inhalt des Puffers und beende den Puffer

        echo $script; // Gib das Skript aus
    }
}

add_action('wp_footer', 'add_custom_email_to_page');

/* Ende E-Mail base64 verschlüsselt */
  • Bei $page_post_ids = array(123, 456, 789); die Beitrags- oder Seiten ID eingeben, wo das Script geladen werden sollte.
  • Bei $custom_email = 'deine@email.at';, deine E-Mail-Adresse eingeben.

Im HTML:

<div class="email-container"></div>
<noscript>Bitte aktivieren Sie Javascript, um diese Adresse sehen zu können</noscript>

Hier ist die E-Mail-Adresse:


Zur Überprüfung bitte ich dich, mit Rechtsklick und "Seitenquelltext anzeigen" im Quelltext unter email-container zu sehen und auch im Test zu "Webseiten Analyse" ist das okay. Natürlich ist die Adresse im Entwicklertool oder Browser-Konsole unter Elemente sichtbar.

Wer lieber statt der E-Mail-Adresse einen beliebigen Text visualisieren möchte, dann ist folgender Code zu verwenden:

/* --- E-Mail base64 verschlüsselt; als Text --- */

function encrypt_email($email) {
    // Verschlüssle die E-Mail-Adresse
    $encrypted_email = base64_encode($email);
    return $encrypted_email;
}

function add_custom_email_to_page() {
    // Definiere ein Array von Seiten- und Beitrag-IDs
    $page_post_ids = array(123, 456, 789); // Beispiel-IDs, ersetze diese mit den tatsächlichen IDs

    // Hole die aktuelle Seite oder den aktuellen Beitrag
    $current_id = get_queried_object_id();

    // Überprüfe, ob die aktuelle Seite oder der aktuelle Beitrag in der Liste der erlaubten IDs enthalten ist
    if (in_array($current_id, $page_post_ids)) {
        // Individuelle E-Mail-Adresse direkt im Code festlegen
        $custom_email = 'deine@email.at';

        // Verschlüssele die E-Mail-Adresse
        $encrypted_email = encrypt_email($custom_email);

        // Erstelle das Skript, um die E-Mail-Adresse zu entschlüsseln und im Frontend anzuzeigen
        ob_start(); // Starte den Puffer
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Funktion zum Entschlüsseln der E-Mail-Adresse
                function decryptEmail(encodedString) {
                    return decodeURIComponent(atob(encodedString));
                }

                // Entschlüssele die E-Mail-Adresse
                var email = decryptEmail("<?php echo esc_js($encrypted_email); ?>");

                // Füge die E-Mail-Adresse im Frontend ein
                var emailLink = document.createElement("a");
                emailLink.href = "mailto:" + email;
                emailLink.textContent = "E-Mail scheiben"; // Text anpassen
                document.querySelector(".email-container").appendChild(emailLink);
            });
        </script>
        <?php
        $script = ob_get_clean(); // Hole den Inhalt des Puffers und beende den Puffer

        echo $script; // Gib das Skript aus
    }
}

add_action('wp_footer', 'add_custom_email_to_page');


/* Ende E-Mail base64 verschlüsselt; als Text */
  • Bei $page_post_ids = array(123, 456, 789); die Beitrags- oder Seiten ID eingeben, wo das Script geladen werden sollte.
  • Bei $custom_email = 'deine@email.at';, deine E-Mail-Adresse eingeben.
  • Bei emailLink.textContent = "E-Mail scheiben"; // Text anpassen ist beliebiger Text einzugeben.

Im HTML ist dasselbe:

<div class="email-container"></div>
<noscript>Bitte aktivieren Sie Javascript, um diese Adresse sehen zu können</noscript>

Und wenn man nun diese beiden Variationen in einem haben möchte? 🙂

/* --- E-Mail base64 verschlüsselt; als E-Mail-Adresse oder mit Text --- */

function encrypt_email($email) {
    // Verschlüssle die E-Mail-Adresse
    $encrypted_email = base64_encode($email);
    return $encrypted_email;
}

function add_custom_email_to_page($show_email = true, $custom_text = "E-Mail schreiben") {
    // Definiere ein Array von Seiten- und Beitrag-IDs
    $page_post_ids = array(123, 456, 789); // Beispiel-IDs, ersetze diese mit den tatsächlichen IDs

    // Hole die aktuelle Seite oder den aktuellen Beitrag
    $current_id = get_queried_object_id();

    // Überprüfe, ob die aktuelle Seite oder der aktuelle Beitrag in der Liste der erlaubten IDs enthalten ist
    if (in_array($current_id, $page_post_ids)) {
        // Individuelle E-Mail-Adresse direkt im Code festlegen
        $custom_email = 'deine@email.ch';

        // Verschlüssele die E-Mail-Adresse
        $encrypted_email = encrypt_email($custom_email);

        // Erstelle das Skript, um die E-Mail-Adresse zu entschlüsseln und im Frontend anzuzeigen
        ob_start(); // Starte den Puffer
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Funktion zum Entschlüsseln der E-Mail-Adresse
                function decryptEmail(encodedString) {
                    return decodeURIComponent(atob(encodedString));
                }

                // Entschlüssele die E-Mail-Adresse
                var email = decryptEmail("<?php echo esc_js($encrypted_email); ?>");

                // Füge die E-Mail-Adresse oder den benutzerdefinierten Text im Frontend ein
                var emailElement = document.createElement("a");
                if (<?php echo ($show_email ? 'true' : 'false'); ?>) {
                    emailElement.href = "mailto:" + email;
                    emailElement.textContent = email;
                } else {
                    emailElement.href = "mailto:" + email;
                    emailElement.textContent = "<?php echo esc_js($custom_text); ?>";
                }
                document.querySelector(".email-container").appendChild(emailElement);
            });
        </script>
        <?php
        $script = ob_get_clean(); // Hole den Inhalt des Puffers und beende den Puffer

        echo $script; // Gib das Skript aus
    }
}

// Verwende die Funktion, um die E-Mail-Adresse anzuzeigen
// Füge 'false' als erstes Argument hinzu, um den benutzerdefinierten Text anzuzeigen, z.B.:
// add_custom_email_to_page(false, "E-Mail schreiben");
add_action('wp_footer', 'add_custom_email_to_page');


/* Ende E-Mail base64 verschlüsselt; als E-Mail-Adresse oder mit Text */
  • Bei $page_post_ids = array(123, 456, 789); die Beitrags- oder Seiten ID eingeben, wo das Script geladen werden sollte.
  • Bei $custom_email = 'deine@email.at';, deine E-Mail-Adresse eingeben.
  • Bei emailLink.textContent = "E-Mail scheiben"; // Text anpassen ist beliebiger Text einzugeben.

Mit diesem aktualisierten Code kannst du entscheiden, ob du die E-Mail-Adresse selbst anzeigen möchtest oder einen benutzerdefinierten Text anzeigen möchtest, der dann angeklickt werden kann, um das E-Mail-Programm zu öffnen. Wenn du die E-Mail-Adresse anzeigen möchtest, übergebe einfach true als zweites Argument. Wenn du einen benutzerdefinierten Text anzeigen möchtest, übergebe false und den gewünschten Text als zweites Argument anzuzeigen.

  • Mit if (<?php echo ($show_email ? 'true' : 'true'); wird dem Besucher die E-Mail-Adresse angezeigt.
  • Mit if (<?php echo ($show_email ? 'true' : 'false'); wird dem Besucher der Text angezeigt.

Das erste Argument bleibt konstant, da es für beide Versionen des Codes in einem Dokument erforderlich ist. Es dient als Unterscheidungsmerkmal zwischen den beiden Varianten.

Im HTML ist dasselbe:

<div class="email-container"></div>
<noscript>Bitte aktivieren Sie Javascript, um diese Adresse sehen zu können</noscript>

Hier den obigen Codes erfolgt die Verschlüsselung mittels Base64 uns somit möchten wir auch hervorheben:

Unterschiede zwischen ROT13-Verschlüsselung und Base64-Verschlüsselung

Die ROT13- und die Base64-Verschlüsselung sind zwei gängige Methoden, um sensible Informationen wie E-Mail-Adressen zu schützen.

ROT13-Verschlüsselung:

Die ROT13-Verschlüsselung ist eine einfache Verschiebungschiffre, bei der jeder Buchstabe im Alphabet um 13 Positionen verschoben wird. Diese Methode ist leicht zu implementieren und zu verstehen, da sie nur eine einfache Transformation verwendet.

Base64-Verschlüsselung:

Im Gegensatz dazu verwendet die Base64-Verschlüsselung eine komplexere Kodierungsmethode, die die E-Mail-Adresse in eine Reihe von ASCII-Zeichen umwandelt. Diese Methode bietet eine höhere Sicherheit, da sie schwerer zu entschlüsseln ist als ROT13.

Außerdem kann die verschlüsselte Adresse im HTML-Quellcode möglicherweise nicht korrekt gerendert werden, was zu Problemen mit der Schriftgröße führen kann und diese sollte dann per CSS angepasst werden.

/* --- E-Mail Schriftgröße --- */

.email-container {
	font-size: 24px;
}

/* Ende E-Mail Schriftgröße */
Tab 3: E-Mail-Adresse mit ROT13 verschlüsseln

Tab 3

Das folgende begleitete mich den Anfängen von WordPress:

Daraus war zu testen:

  • Methode 2: Ersetzung der E-Mail-Adresse: "HTML-E-Mail-Verweis per Redirect" ist hier ein Fehler 500.
  • Methode 3:
    • Maskierung der E-Mail-Adresse, wandelt sich der Hex-Code mit Umschalten auf "Visuell" in die normale Adresse um.
    • Maskierung durch Ergänzung kann nicht mit einem HTML-E-Mail-Verweis verlinkt werden, siehe bspw.: user@domain.de.
  • Methode 4: Verschlüsselung der E-Mail-Adresse:

Der letzteren Methode 4: Verschlüsselung der E-Mail-Adresse hat mich angesprochen und wollte aufgearbeitet werden.

E-Mail-Adresse mit ROT13 verschlüsseln

Die ROT13-Verschlüsselung ist eine einfache Verschiebungschiffre, bei der jeder Buchstabe im Alphabet um 13 Positionen verschoben wird. Diese Methode ist leicht zu implementieren und zu verstehen, da sie nur eine einfache Transformation verwendet.

Hier das JavaScript der Website:

/* --- Verschlüsselung ROT13 der E-Mail-Adresse --- */

function decode(a) {
  return a.replace(/[a-zA-Z]/g, function(c){
    return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
  })
}; 
function openMailer(element) {
var y = decode("znvygb:orahgmre@qbznva.qr");
element.setAttribute("href", y);
element.setAttribute("onclick", "");
element.firstChild.nodeValue = "E-Mail-Software öffnet sich";
};

/* Ende Verschlüsselung ROT13 der E-Mail-Adresse */

Weiter, haben wir den Code optimiert. Anstatt die Funktionen direkt im JavaScript-Code zu definieren, verwenden wir jetzt die document.addEventListener("DOMContentLoaded", ...)-Methode. Diese Methode stellt sicher, dass der Code nur ausgeführt wird, wenn das DOM (Document Object Model) vollständig geladen ist.

Durch diese Änderung wird sichergestellt, dass nur aufgerufen werden, wenn alle HTML-Elemente, einschließlich des E-Mail-Links, vollständig geladen und gerendert wurden. Dadurch wird vermieden, dass die Funktion auf nicht vorhandene Elemente angewendet wird, was möglicherweise zu Fehlern führen könnte.

/* --- Verschlüsselung ROT13 der E-Mail-Adresse mit DOMContentLoaded ---*/

document.addEventListener("DOMContentLoaded", function() {
    // Hier kommt der JavaScript-Code, der ausgeführt werden soll, wenn das DOM vollständig geladen ist
    function decode(a) {
        return a.replace(/[a-zA-Z]/g, function(c){
            return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
        });
    }
    
    function openMailer(element) {
        var y = decode("znvygb:orahgmre@qbznva.qr");
        element.setAttribute("href", y);
        element.setAttribute("onclick", "");
        element.firstChild.nodeValue = "E-Mail-Software öffnet sich";
    }

    // Hier wird überprüft, ob das Element mit der ID "email" vorhanden ist und falls ja, wird die openMailer-Funktion aufgerufen
    var emailElement = document.getElementById("email");
    if (emailElement) {
        openMailer(emailElement);
    }
});

/* Ende Verschlüsselung ROT13 der E-Mail-Adresse mit DOMContentLoaded */

Um bei var y = decode("znvygb:orahgmre@qbznva.qr"); deine E-Mail-Adresse einzugeben, muss diese erst mal umgewandelt werden.

  • Hierzu empfehlen wir https://rot13.com/. Der generierte Code ist dann statt 'orahgmre@qbznva.qr' mit deinem Code zu ersetzen.

Der JavaScript-Code wird nur ausgeführt, wenn im HTML ein Aufruf der Funktion openMailer() vorhanden ist. Wenn die Funktion openMailer() nicht im HTML aufgerufen wird, wird der Code nicht ausgeführt.

Im HTML:

<a id="email" href=" " onclick='openMailer(this);'>E-Mail: bitte klicken</a>

Funktioniert ist aber hier nicht implementiert.

In Bezug auf die Performance kann das Einbetten des Codes über PHP effizienter sein, da nur der erforderliche Code gerendert wird, wenn bestimmte Bedingungen erfüllt sind. Dadurch kann die Ladezeit der Seite verringert und die Serverlast reduziert werden.

Wenn die Effizienz und die Reduzierung von Overhead für deine Website wichtig sind, ist das Einbetten des Codes über PHP und die Verwendung von Bedingungen, um zu steuern, wo und wann der Code geladen wird, eine gute Option. Somit sieht das für die functions.php dann so aus:

/* --- E-Mail-Verschlüsselung JS/ROT13 der E-Mail-Adresse basierend auf Seiten-IDs --- */

function custom_email_js() {
    // Definiere die Seiten- und Beitrag-IDs, auf denen der Code geladen werden soll
    $page_post_ids = array(123, 456, 789); // Beispiel-IDs, ersetze diese mit den tatsächlichen IDs

    // Hole die aktuelle Seite oder den aktuellen Beitrag
    $current_id = get_queried_object_id();

    // Überprüfe, ob die aktuelle Seite oder der aktuelle Beitrag in der Liste der erlaubten IDs enthalten ist
    if (in_array($current_id, $page_post_ids)) {
        // Füge den JavaScript-Code ein
        ?>
        <script type="text/javascript">
            function decode(a) {
                return a.replace(/[a-zA-Z]/g, function(c){
                    return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
                });
            }

            function openMailer(element) {
                var y = decode("znvygb:orahgmre@qbznva.qr");
                element.setAttribute("href", y);
                element.setAttribute("onclick", "");
                element.firstChild.nodeValue = "E-Mail-Software öffnet sich";
            }

            document.addEventListener("DOMContentLoaded", function() {
                // Element auswählen und openMailer-Funktion aufrufen
                var emailElement = document.getElementById("email");
                if (emailElement) {
                    openMailer(emailElement);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'custom_email_js');

/* Ende E-Mail-Verschlüsselung JS/ROT13 der E-Mail-Adresse basierend auf Seiten-IDs*/

Was im Hintergrund zum Lernen ist, ist der Wert!

Tab 4: Kontaktformular Contact Form 7 mit Code für Quiz!

Tab 4

Weiter ist folgend die versprochene Konfiguration zum Quiz von Christian Schenk (hier auf youtube) für Contact Form 7.

Formular mit Contact Form 7

Die Anwendung des Plug-ins geht aus sich selbst hervor. Im Beschrieb ist hier kurz die Herstellung des anschließenden Quiz zum Spamschutz.

Contact Form 7

  • "Contact Form 7" über Plug-ins (Dashboard WordPress) hochladen; den generierten Code auf neuer oder anderer Seite in "Text" eingeben und schon ist samt eigene E-Mail-Adresse installiert.
  • Ansprechend ist der Artikel Contact Form 7 DSGVO konform einrichten

Code für Quiz! –
super Cooper und DSGVO-konform

A. Mathe-Quiz: Das Ganze ist eine Spielerei, aber nicht im Schwung "geht schnell" – die Mühe für diese Komplexität übernimmt folgender Hinweis:

B. Wörtliche Frage und Antwort Quiz:

Dashboard > Formulare. Das entsprechende Formular aufrufen und dort 'Quiz' auswählen:

Dashboard > Formulare. Das entsprechende Formular aufrufen und dort 'Quiz' auswählen:

Danach das Quiz mit den Fragen erstellen:

Nach Eingabe der Fragen|Antworten und klicken in Name (hier "quiz-654") wird ein Code in Wortfolge generiert. Dieser ist dann via "Insert Tag" in "Formular bearbeiten" einzufügen:

Nach Eingabe der Fragen|Antworten und klicken (Antippen) in Name (hier "quiz-654") ein Code in Wortfolge generiert ist und via "Insert Tag" in "Formular bearbeiten" einzufügen.

Das Formular voreingestellter Vorlage mit Quiz (hier der Ansicht ist auch das Plug-in "Honeypot" mit eingefügt, dazu s. u. Link). Mit Kopie und Paste des generierten Codes (blauer Balken) auf eine Seite, in "Visuell" geeignet, einfügen – und dargestellt: im Kontaktformular.

CSS Anpassungen für das Kontaktformular

/* == Kontaktformular == */
.wpcf7-quiz-label {
    margin-right: 15px;
}

.wpcf7-list-item input[type="checkbox"] {
    min-width: 20px;
    min-height: 20px;
}

.wpcf7-not-valid-tip {
    font-size: 0.8em;
}

/*Cotactform7 Ja Checkbox */
.wpcf7-list-item [type="checkbox"] {
    position: relative;
    left: -2px;
    top: 6px;
    width: 25px;
    height: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.wpcf7-list-item input[type="checkbox"]:checked {
    background: #24890c;
    background-image: url(https: ..haekchen3.svg);
    transition: all 0.2s ease-out 0s;
}

/* Senden-Button */
.wpcf7 .wpcf7-submit {
    font-size: 0.8em;
}

Honeypot für Contact Form 7

Die Alternative zur Abwehr von Spam, da könnte auch genügen oder zusätzlich:

Honeypot for Contact Form 7

Nachlese:


🛎


Bitte läuten

zum Kontaktformular

Spinne

Aktualisiert im Jahr 2024-März