📋 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 1. August 2026.
Diese Anwendung könnt ihr kostenlos in der VN Block Galerie herunterladen. Sucht dort nach dem Namen „VN Form Renderer“ in der Kategorie „Mobirise & PHP“.
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. Ihr könnt diesen Formulargenerator auch als ZIP‑Archiv unten am Download-Link im Generator herunterladen und auf dem Computer verwenden.
Hier geht es zu diesem Formulargenerator:
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.
Lest auch in Volkers Blog, um mehr über den „VN Form Renderer Generator“ zu erfahren: Blog Artikel
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.
Kennzeichnet außerdem eure Pflichtfelder. Pflichtfelder sind alle Felder, deren Ausfüllung zwingend erforderlich ist — zum Beispiel Name und E‑Mail‑Adresse des Absenders. Mindestens ein Pflichtfeld muss vorhanden sein, damit ein Formular nicht leer abgeschickt werden kann.
Für eine bessere Darstellung auf Smartphones könnt ihr optional einen Schalter nutzen: „Aus“ setzt alle Formularfelder grundsätzlich auf 100% Breite; „Ein“ behält die formatierten Feldbreiten bei. Felder, die kleiner als 50% gestaltet sind – zum Beispiel drei Felder nebeneinander – werden auf mobilen Geräten sonst zu schmal. Probiert das am besten kurz aus, um die optimale Darstellung zu finden.
Mit diesem Formular könnt ihr jedes Thema mehrseitig gestalten; es gibt keine Begrenzung der Seitenzahl. Um Seiten zu trennen, fügt ihr im Generator jeweils eine neue Überschrift ein und benennt sie nach Belieben. Über die Navigation könnt ihr vor- und zurückblättern, vorausgesetzt, die Pflichtfelder sind ausgefüllt.
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 „form-renderer.json“ genannt. Die so erstellte JSON‑Datei könnt ihr bei Bedarf über den Button „JSON‑Datei importieren“ erneut einlesen — zum Beispiel zur Weiterbearbeitung oder als Vorlage für ein anderes Formular.
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.
Wählt in jedem Fall einen Spamschutz für das Formular. Zur Auswahl stehen ein einfacher Schutz durch eine Rechenaufgabe oder ein professioneller Schutz mittels „hCaptcha“.
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. Unten ein Screenshot, der die Verwendung von hCaptcha im Dashboard zeigt.
VN-Form-Renderer Blockvorschau
hCaptcha Dashboard zeigt die Verwendung an