VN Mailer

[Volker]

Auf Wunsch eines einzelen Herren ( der hier Admin ist)

Gibt es jetzt den VN Mailer Block. Der findet alle Formulare auf der Seite und sendet dann per SMTP die Mails.
Kopie, captcha und danke Seite könnt ihr selber auswählen.
Und weil er die Formulare findet, haut der auch das Captcha oder den Kopie an mich Haken genau da rein. Immer unter dem letzen Formular Feld

Probiert es einfach aus. Wichtig !!!! Im Formular muss dann die Action URL in der Art rein:

https://www.deine domein.de/dein verzeichis/assets/vn-mailer/native-form-handler.php?to=volker@niederastroth.de

Wenn im Root dann habt ihr natürlich kein verzeichnis hinter der Domain

Ich wette Tommy testet den jetzt mal

PS: Bin ab heute Mittag mit dem WOMO unterwegs

PPS: Findet man unter Tools bei mir auf der Webeite
https://www.niederastroth.de/mobirisebl ... t=VN+Tools

Hier eingebaut; https://www.niederastroth.de/vnhero1/

Ist ein standard Mobirise Formular nur jetzt mit Kopie Haken udn Captcha

Eure SMTP Daten bitte einmalig im Sidemenü eimalig eintragen. Nicht wudnern, wenn ihr Mobirise erneut öffnet sind da keine Daten mehr zu sehen. Das ist Richtig !!

PPPS: Wenn ihr später den vn upload oder das GB oder formrender installiert, braucht ihr nicht nochmal die SMTP Daten einttagen !! Die kennt Mobirise schon

[Volker]

So,
der ist auf die Schnelle endstanden -läuft aber.
Ich werde den nächste Woche weiter entwickeln. Anhänge, Mehrfach Empfänger usw. wird ein geiler Mailer Aber für heute Feierabend

PS: Tommy: Du darfst dazu auch gerne ein umfassendes Tut machen War ja eh Deine Idee

[Tommy Herrmann]

Ich bin noch unterwegs und werde da wohl erst morgen mal gucken können...

[Volker]

Kein Ding Tommy

Es kann natürlich auch jeder andere hier testen. Der Block ist fertig, getestet und fehlerfrei

Bin mal gespannt ob Frank den auch testet

Hier nochmal eingebaut in einem schönen Mobirise Formular : https://www.niederastroth.de/vntabs/

[Volker]

Noch ein Hinweis:

Der VN Mailer Block muss im moment direkt unter dem Forumlar stehen !!!

Gefixt !!!

Egal wo der Block nun steht, er findet das Formular

Neue Version ist im Download !!

Aber setzt ihn bitte immer in die Nähe trotzdem

[Tommy Herrmann]

Also - ich habe das Teil jetzt mal schnell hier mit einem normalen Formular von Mobirise eingebaut.

https://www.mobirise-tutorials.com/VN-B ... ailer.html

Wie ich nun das Captcha einbaue habe ich noch nicht gesehen - auch die Erfogsnachricht oder Seite habe ich noch nicht entdeckt.

P.S.:

ach - da gibt es einen Block - warte ...

[Volker]

Wie ich sehe klappt es

[Tommy Herrmann]

OK - na das ist ja einfach - bin ich schon drin

Mir fehlt für die Optik ein Anker am Formular auf den nach einer Aktion gesprungen wird. Also nicht "Seite oben" sondern "Formular-Block oben"

[Volker]

Der Boris eben

[Tommy Herrmann]

Ich hatte erst den Block gar nicht vermutet - den habe ich dann unter dem Formular aufgezogen. Da ist aber eine Menge Gehirnschmalz drinnen.

So ein wenig einstellbare CSS fehlt da schon. Captcha andere Farbe oder transparent, Schriftfarben.

[Tommy Herrmann]

ich weiß gar nicht was ich da schreiben soll - geht doch alles ganz von alleine.

[Volker]

Ich hatte etrst den Block gar nicht vermutet - den habe ich dann unter dem Formular aufgezogen. Da ist aber eine Menge Gehirnschmalz drinnen.

Ha ha das meiste von der KI Tante - die hat auch ganz schön geschwitzt

Aber ist auch ein bisschen Volker drin

[Tommy Herrmann]

Habe oben noch das eine oder andere dazu geschrieben - lies mal nochmals

[Volker]

Mir fehlt für die Optik ein Anker am Formular auf den nach einer Aktion gesprungen wird. Also nicht "Seite oben" sondern "Formular-Block oben"

Nenn mir alle Mankos, ich hau nächste Woche die Final Version raus dann mit allen fixes

[Tommy Herrmann]

Also so weit sieht das alles schon mal richtig gut aus. Die Farben für die Kopie und das Captcha sollten in den Blockwerkzeugen noch einstellbar gemacht werden. Der Hintergrund vom Captcha mit Opacity-Schieber.

Das mit dem Sprunganker geht natürlich nur, wenn man die Block-ID von Mobirise (oben links im Code Editor) anpasst. Für alle die dann diese ID ändern in:

Mailer

https://www.mobirise-tutorials.com/VN-B ... tml#Mailer

… bitte Groß- und Kleinschreibung beachten, hier schon mal das angepasste Script für Volker. Falls jemand die ID nicht einträgt, dann wird eben wieder nach oben auf den Anfang der Seite gesprungen:

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>

[Volker]

Tommy lade dir jetzt mal die neue version runter

[Tommy Herrmann]

Ich habe jetzt keine Zeit (vielleicht morgen). Habe hier ständig Firmen, die die eine Wohnung oben in meinem Haus entrümpeln sollen. Angebote schwanken zwischen 600,00 und 2.000,00 EUR

Eigentlich will ich das lieber erst machen, wenn Du so ungefähr wirklich fertig bist. Was hast Du denn geändert???

Ich habe jetzt so an die 50 Stellen händisch geändert und weiß gar nicht mehr was alles. Das sind individuelle Anpassungen an mein Formular.

[Volker]

Hier das Video dazu :



Bitte beachten: Ihr müsst die Action URL eingeben und ganz hinten dann eure E-Mail dran hängen an die das Formular gehen soll. Schaut das Video dazu bitte an

[Tommy Herrmann]

Moin,

hast ja schon alle Ideen umgesetzt - prima

Eine großartige Anwendung, vielen Dank an Volker

Diese Anwendung ist nun wirklich perfekt und kinderleicht für jeden verwendbar.

https://www.mobirise-tutorials.com/VN-B ... ailer.html

Jeder kann nun auf den Mobirise-Mailversand via "Formoid" verzichten - da das auch eigentlich nicht Datenschutzkonform ist - und kann mit jedem Formular, also auch mit bereits eingebauten Mobirise-Formularen, diese neue Anwendung verwenden.

Es müssen lediglich die SMTP Daten vom Anbieter eingetragen werden und alles andere funktioniert automatisch. Die Anwendung erkennt jedes Formular und es ist vollkommen egal welche oder wie viele Formularfelder verwendet werden.

Einfacher geht es nicht mehr.

[Tommy Herrmann]

Kannst Du uns bitte noch mitteilen, wo ganz genau (Datei und Pfad) diese SMTP-Zugangsdaten nun gespeichert werden.