Mobirise-Tutorials.com

Code: Alles auswählen

<section data-bs-version="5.1" class="vn-mailer" group="Content" id="{{mbr-id}}" data-addcopycheckbox="{{addCopyCheckbox}}" data-copycheckboxlabel="{{copyCheckboxLabel}}" data-addcaptcha="{{addCaptcha}}" data-thankyouurl="{{thankYouUrl}}" data-toastmessage="{{toastMessage}}">
    <style>
        .vn-mailer {
            display: none;
        }

        html.is-builder .vn-mailer {
            display: block !important;
            padding: 20px;
            text-align: center;
            border: 2px dashed #e63946;
            border-radius: 8px;
            background: #fff5f5;
            color: #999;
            font-size: 13px;
        }

        .vn-mailer .vnm-editor-only {
            display: none;
        }

        html.is-builder .vn-mailer .vnm-editor-only {
            display: block;
        }

        .vnm-toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: #1d9e75;
            color: #fff;
            padding: 14px 24px;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
            font-family: system-ui, sans-serif;
            font-size: 14px;
            z-index: 999995;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            pointer-events: none;
        }

        .vnm-toast.vnm-toast-show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    </style>

    <mbr-parameters>
        <header>Formular-Erweiterung</header>
        <input type="checkbox" title="'Kopie an mich'-Checkbox einfügen" name="addCopyCheckbox" checked>
        <input type="text" title="Checkbox-Text" name="copyCheckboxLabel" value="Kopie an mich senden">
        <input type="checkbox" title="Captcha einfügen (Rechenaufgabe)" name="addCaptcha" checked>

        <header>Nach dem Absenden</header>
        <input type="text" title="Danke-Seite (URL, leer = Toast-Meldung statt Weiterleitung)" name="thankYouUrl" value placeholder="/danke.html oder https://...">
        <input type="text" title="Toast-Meldung (falls keine Danke-Seite)" name="toastMessage" value="Danke für deine Nachricht!">
    </mbr-parameters>

    <div class="vnm-editor-only">
        🔧 VN Mailer<br>
        <small>Unsichtbar auf der Live-Seite. Rüstet das Formular direkt darüber oder darunter mit Kopie-Checkbox/Captcha/Danke-Seite nach.</small>
    </div>

    <script>
    (function() {
        if (document.documentElement.classList.contains('is-builder')) return;

        var sec = document.currentScript
            ? document.currentScript.closest('section.vn-mailer')
            : document.querySelector('section.vn-mailer');

        if (!sec) return;

        function attr(name) {
            var v = sec.getAttribute(name);

            if (!v || v.indexOf('{{') !== -1) {
                return '';
            }

            return v.trim();
        }

        function truthy(v) {
            return v === 'true' || v === 'on' || v === '1';
        }

        var addCopyCheckbox   = truthy(attr('data-addcopycheckbox'));
        var copyCheckboxLabel = attr('data-copycheckboxlabel') || 'Kopie an mich senden';
        var addCaptcha        = truthy(attr('data-addcaptcha'));
        var thankYouUrl       = attr('data-thankyouurl');
        var toastMessage      = attr('data-toastmessage') || 'Danke für deine Nachricht!';

        // ── Natives Formular in der Nachbarschaft finden ──────────────
        function findNeighborForm() {
            var candidates = [
                sec.previousElementSibling,
                sec.nextElementSibling
            ];

            for (var i = 0; i < candidates.length; i++) {
                var el = candidates[i];

                if (!el) continue;

                var form = el.tagName === 'FORM'
                    ? el
                    : el.querySelector('form');

                if (form) {
                    return form;
                }
            }

            return null;
        }

        var form = findNeighborForm();

        // Kein Formular gefunden – nichts zu tun
        if (!form) return;

        function getAssetsBasePath() {
            var ref = document.querySelector(
                'link[href*="assets/"], script[src*="assets/"]'
            );

            if (ref) {
                var url = ref.getAttribute('href') || ref.getAttribute('src');
                var idx = url.indexOf('assets/');

                if (idx !== -1) {
                    return url.substring(0, idx + 'assets/'.length);
                }
            }

            return 'assets/';
        }

        var base = getAssetsBasePath() + 'vn-mailer/';

        // Container, in den neue Felder eingefügt werden
        var dragArea = form.querySelector('.dragArea') || form;
        var submitBtnWrap = dragArea.querySelector('.mbr-section-btn');

        function insertField(html) {
            var wrap = document.createElement('div');

            wrap.className =
                'col-lg-12 col-md-12 col-sm-12 form-group mb-3';

            wrap.innerHTML = html;

            if (submitBtnWrap) {
                dragArea.insertBefore(wrap, submitBtnWrap);
            } else {
                dragArea.appendChild(wrap);
            }

            return wrap;
        }

        function escapeHtmlLocal(str) {
            var div = document.createElement('div');

            div.textContent = str || '';

            return div.innerHTML;
        }

        // ── "Kopie an mich"-Checkbox einfügen ────────────────────────
        if (addCopyCheckbox) {
            insertField(
                '<label style="display:flex;align-items:center;gap:8px;font-weight:400;">' +
                    '<input type="checkbox" name="copy_to_sender" style="width:auto;"> ' +
                    escapeHtmlLocal(copyCheckboxLabel) +
                '</label>'
            );
        }

        // ── Captcha einfügen ──────────────────────────────────────────
        if (addCaptcha) {
            var captchaWrap = insertField(
                '<label style="padding-top:20px;">Sicherheitsabfrage ' +
                    '<span style="color:#fff;">*</span>' +
                '</label>' +
                '<div style="display:flex;align-items:center;gap:10px;background:transparent;border:1px dashed #b8c4d0;border-radius:6px;padding:10px 12px;">' +
                    '<span style="color:#fff;" data-vnm-captcha-q>Lade…</span>' +
                    '<input type="text" name="captcha_answer" required style="width:70px;padding:6px;border:1px solid #ccc;border-radius:4px;">' +
                    '<input type="hidden" name="captcha_token" value="">' +
                '</div>'
            );

            fetch(base + 'captcha.php?t=' + Date.now(), {
                cache: 'no-store'
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                var questionElement =
                    captchaWrap.querySelector('[data-vnm-captcha-q]');

                var tokenElement =
                    captchaWrap.querySelector('input[name="captcha_token"]');

                if (questionElement) {
                    questionElement.textContent = data.question || '?';
                }

                if (tokenElement) {
                    tokenElement.value = data.token || '';
                }
            })
            .catch(function() {});
        }

        // ── Toast-Meldung anzeigen ────────────────────────────────────
        function showToast(message) {
            var toast = document.createElement('div');

            toast.className = 'vnm-toast';
            toast.textContent = message;

            document.body.appendChild(toast);

            requestAnimationFrame(function() {
                toast.classList.add('vnm-toast-show');
            });

            setTimeout(function() {
                toast.classList.remove('vnm-toast-show');

                setTimeout(function() {
                    toast.remove();
                }, 400);
            }, 4000);
        }

        // ── URL-Parameter entfernen und Anker setzen ──────────────────
        function cleanUrlParams(anchor) {
            var url = new URL(window.location.href);

            url.searchParams.delete('vnmailer');
            url.searchParams.delete('vnmailer_msg');

            if (anchor) {
                url.hash = anchor;
            }

            window.history.replaceState({}, '', url.toString());
        }

        // ── Zum Anker scrollen ────────────────────────────────────────
        function scrollToAnchor(anchor) {
            if (!anchor) return;

            var target = document.getElementById(anchor);

            if (!target) return;

            setTimeout(function() {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }, 100);
        }

        // ── Erfolgreiches Absenden behandeln ──────────────────────────
        function onFormSuccess() {
            if (thankYouUrl) {
                window.location.href = thankYouUrl;
                return;
            }

            cleanUrlParams('Mailer');
            scrollToAnchor('Mailer');
            showToast(toastMessage);
        }

        // ── Erfolg oder Fehler nach Seiten-Reload erkennen ────────────
        // native-form-handler.php leitet nach dem Absenden zurück und
        // hängt ?vnmailer=success oder ?vnmailer=error an die URL.
        var urlParams = new URLSearchParams(window.location.search);
        var vnmStatus = urlParams.get('vnmailer');

        if (vnmStatus === 'success') {
            onFormSuccess();
        } else if (vnmStatus === 'error') {
            var errMsg =
                urlParams.get('vnmailer_msg') ||
                'Es ist ein Fehler aufgetreten.';

            cleanUrlParams('Mailer');
            scrollToAnchor('Mailer');
            showToast(errMsg);
        }
    })();
    </script>
</section>