📋 VN Formular Hintergrund – Nur eine Voransicht (Bild per Doppelklick änderbar). Echtes Formular wird nach dem Publish aus der JSON-Datei geladen.
Vielen Dank an Volker für diese Anwendung, die man kinderleicht in Mobirise integrieren kann.
Ihr dürft das Formular gerne testen, nur antworten werde ich nicht.
VN Form Renderer ist eine Anwendung, die über einen externen Formular-Generator ein Formular erstellt, den ich weiter unten beschreibe. Lest weiter unten zum Formular-Generator
Bitte löscht vor dem Import eines Updates dieser oder einer anderen PHP-Anwendung von Volker Niederastroth (VN) alle Komponenten innerhalb der Software, einschließlich der Blöcke, sowie auf dem Rechner das zugehörige Erweiterungsverzeichnis und auf dem Server hier das Verzeichnis /assets/vn-formrender/, damit eine fehlerfreie Neuinstallation möglich ist.
Bitte veröffentlicht in diesem Fall einmalig alles und deaktiviert dazu die Option „Nur Änderungen veröffentlichen“. Ansonsten wird Mobirise die zur Anwendung gehörende PHP-Datei nicht neu publizieren. Meine hier gezeigte Version ist vom 28. Juli 2026.
Diese Anwendung könnt ihr in der VN Block Galerie unter dem Namen „VN Form Renderer“ in der Kategorie „Mobirise & PHP“ kostenlos herunterladen.
Diese Anwendung fügt dem Site‑Menü von Mobirise am Zahnrad der Projektkachel eine zusätzliche Option hinzu, mit der ihr die SMTP‑Zugangsdaten direkt unter "VN Blöcke" eintragen könnt (siehe Screenshot). Dort tragt ihr die Zugangsdaten ein, die ihr von eurem Provider erhalten habt und die auch im Kundenbereich eures Providers zu finden sind. Habt ihr diese bereits bei einer anderen Anwendung von VN dort eingetragen, braucht ihr diese nicht erneut einzutragen.
Dabei handelt es sich um die SMTP‑Serveradresse, den Port inklusive Verschlüsselung, euren SMTP‑Benutzernamen (der in den meisten Fällen mit der E‑Mail‑Adresse übereinstimmt) sowie das zugehörige Passwort, die Absenderadresse, die für Antworten verwendet werden soll, und den Namen, der in der Mail angezeigt wird. Diese Daten werden nicht sichtbar gespeichert und sind daher nicht in der Mobirise‑Projektdatei enthalten. Diese SMTP-Daten werden dagegen sicher in einer Konfigurationsdatei im Online-Verzeichnis /assets/vn-shared/ abgelegt. Erfahrene Benutzer könnten also auch die SMTP-Daten direkt dort eintragen.
Der Schalter „VN Form Renderer aktiviert“ ist für andere Anwendungen vorgesehen; hier ist er irrelevant und kann ein‑ oder ausgeschaltet bleiben.
Dieser SMTP-Eintrag im Mobirise‑Menü wird automatisch entfernt, sobald ihr diese Anwendung deinstalliert. Das Formular funktioniert jedoch weiterhin.
Bitte stellt unbedingt sicher, dass ihr einmalig alles vollständig veröffentlicht, damit auch die PHP‑Skripte, die Mobirise nicht erkennt, auf den Server hochgeladen werden. Deaktiviert dafür die Option „Nur Änderungen veröffentlichen“; anschließend könnt ihr sie wieder aktivieren.
SMTP Einstellungen
Zunächst müsst ihr natürlich das Formular erst einmal erstellen. Hier geht es zu diesem Generator:
https://niederastroth.de/mbformular/
Die Möglichkeiten zur Formulargestaltung sind sehr vielfältig und selbsterklärend. Besonders erwähnenswert ist die Option, sogenannte Regeln — also Bedingungen — zu definieren. So wird in meinem Formular beispielsweise durch das Aktivieren einer Checkbox ein weiteres Feld eingeblendet.
Lest diese Anleitung zu den Regeln.
Zieht jedes Feld per Drag & Drop aus der Auswahl im linken Bereich in das Arbeitsfenster „Bearbeiten“. Die Position jedes Feldes könnt ihr anschließend jederzeit ändern. Im rechten Bereich weist ihr jedem Feld eine Beschriftung (Label) zu – den Feldnamen, der später in der E‑Mail angezeigt wird. Stellt die Breite eines jeden Feldes ein, die ihr aber erst in der Vorschau sehen könnt. Dort gebt ihr bereits den öffentlichen Schlüssel von hCaptcha ein. Hakt auch eure Pflichtfelder an.
Wenn ihr fertig seid, klickt unten auf den Button „Als JSON-Datei herunterladen“ und gebt eurer JSON‑Datei einen Namen ohne Sonderzeichen oder Leerzeichen. Ich habe sie zum Beispiel „formtest-formrender.json“ genannt. Die so erstellte .json Datei könnt ihr anschließend bei Bedarf über den Button „JSON-Datei importieren“ auch wieder zur erneuten Bearbeitung einlesen.
Mit anderen Worten: Ihr könnt euer Formular jederzeit erneut in den Generator importieren und zum Beispiel später Felder hinzufügen oder vorhandene ändern.
Diese JSON-Datei wird das Formular darstellen, das ihr später auf der fertigen Seite sehen werdet.
Form-Renderer - Formulargenerator
Bitte platziert zunächst einen der fünf mit „VN Formular ????“ als Formularblock auf eurer Seite. Diese fünf Blöcke haben unterschiedliche Themen, wobei mein Beispiel das Thema "Hintergrund" zeigt:
Fügt zunächst in den Blockwerkzeugen (Zahnrad) die Namen euerer JSON Datei ein. Nur den Namen, ohne die Dateierweiterung .json und ohne Pfadangaben, wie im Screenshot unten zu erkennen ist, hier also "form-renderer". Tragt die E-Mail Adresse ein, an die der Inhalt vom Formular gesendet werden soll.
Kopiert dann mit eurem FTP-Programm (wie "FileZilla") diese JSON-Datei in dieses Verzeichnis "forms":
/assets/vn-formrender/forms/form-renderer.json
Das Verzeichnis /vn-formrender/forms/ wird beim ersten Publizieren dieser Anwendung automatisch auf dem Server im Mobirise-Verzeichnis "assets" erstellt.
Die übrigen Design‑Einstellungen und Anwendungsoptionen könnt ihr in den Blockwerkzeugen ausprobieren. Einige Einstellungen sind in der Blockvorschau sichtbar; vollständig einsehbar sind sie jedoch erst nach der Veröffentlichung.
Ich empfehle den optionalen Spamschutz von „hCaptcha“ zu verwenden: Es ist eine gute Alternative und funktioniert ähnlich wie Google reCAPTCHA. Registriert euch und erzeugt dort einen öffentlichen sowie einen geheimen Schlüssel:
https://dashboard.hcaptcha.com/
Tragt hier einfach die beiden generierten Schlüsselzahlen in der App ein – mehr ist nicht nötig. Der obere Code ist der öffentliche Schlüssel; den tragt ihr bereits bei der Erstellung im Formular-Generator ein, wie zuvor beschrieben.
Den geheimen Schlüssel gebt ihr im Site‑Menü unter „VN Blöcke“ beim Feld „hCaptcha Secret Key“ ein.
Ihr könnt zwischen der normalen und der kompakten sowie zwischen der hellen und der dunklen Version von hCaptcha wählen.
VN-Form-Renderer Blockvorschau