Formular Generator für Mobirise

[Tommy Herrmann]

Die Änderung mit der Fehlermeldung unter dem Formular, wenn man z.B. Pflichtfelder vergessen hat auszufüllen oder ein falsches Format verwendet hat, finde ich übrigens gar nicht schön.

Das war vorher mit der normalen, gewöhnten Meldung am Feld viel besser. Aber egal ...

[Tommy Herrmann]

Also - ich habe nochmals darüber nachgedacht und eigentlich wäre diese Anzeige OK aber:

> Blöd ist, dass die Anzeige der Fehlermeldungen unter dem Formular ist. Dadurch fehlt eventuell der Fokus und man sieht das gar nicht, wenn der Bildschirm nicht hoch genug ist. Der Fokus müsst bei einer Meldung also auch auf diesen Balken mit der Meldung springen.

> Störend und als falsch empfinde ich auch, dass die Felder verkehrt herum geprüft werden, also das unterste zuerst und dann wird nach oben jedes Feld geprüft. Man füllt ja ein Formular von oben nach unten aus und nicht umgekehrt. Das müsste also gerade umgekehrt ablaufen.

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

Sage mal, ob Du daran noch arbeiten willst oder nicht. Sonst mache ich mir das hier selbst

[Tommy Herrmann]

Noch ein dicker Fehler

Ich habe das jetzt dreimal geprüft. Die Checkbox für den Datenschutz ist im Generator als Pflichtfeld gekennzeichnet, das wird aber nicht in die JSON geschrieben, dort steht immer "false".

Man kann also das Formular senden ohne das angehakt zu haben.

[Tommy Herrmann]

Es wird noch verrückter

Jetzt steht es tatsächlich richtig in der JSON - also "required": true, - und dennoch wird die Mail gesendet

Volker - da musst Du dringend nochmals ran

Code: Alles auswählen

    {
      "id": "f8",
      "type": "consent",
      "label": "Den",
      "placeholder": "",
      "value": "",
      "required": true,
      "hiddenByDefault": false,
      "options": [],
      "linkText": "Datenschutz",
      "linkUrl": "https://www.mobirise-tutorials.com/Datenschutz/",
      "width": 100,
      "linkSuffix": "akzeptiert"
    },

Ich zeige das jetzt mal meinem ChatGPT.

[Tommy Herrmann]

Volker,

mein ChatGPT hat inzwischen ziemliche Probleme mit diesen riesigen Scripts. Mich wundert es inzwischen auch, dass der Mobirise Code-Editor das noch mitmacht.

Daher auch nur das korrigierte JavaScript, das komplett neu geschrieben wurde. Bitte prüfen aber möglichst nichts ändern, denn ich habe es in alle Richtung getestet und es funktioniert einwandfrei.

> Checkbox "Den Datenschutz akzeptiert" funktioniert jetzt. Alle Checkboxen wurden von Deinem Script explizit nicht geprüft.

> Ich habe jetzt auch gleich das mit dem Fokus der Fehlermeldungen und der Reihenfolge der Feldprüfung korrigiert.

Hier das JavaScript. Also in der Block-HTML nur das komplett austauschen und von <script> bis </script> mit meinem ersetzen.

Download der Datei javascript-vn-renderer.html als ZIP:


.:: gelöscht ::.

Eine nicht aktivierte Checkbox erhält dadurch den Wert „Nein“ und ist somit aus Sicht der bisherigen Prüfung nicht leer. Gleichzeitig wurden Checkboxen hier ausdrücklich von der Pflichtfeldprüfung ausgeschlossen:

Code: Alles auswählen

input.type !== 'checkbox'

[Volker]

Ist gefixt und im aktuellen Download.

Ursache: Beim finalen Absenden waren Checkboxen komplett von der Pflichtfeld-Prüfung ausgeschlossen – da stand im Code wörtlich "prüfe alles außer Checkboxen". Das betraf nicht nur die Datenschutz-Checkbox, sondern jede Checkbox im Formular, die als Pflichtfeld markiert ist. Kurioserweise war genau diese Prüfung beim "Weiter"-Button eines mehrseitigen Formulars schon korrekt eingebaut – nur beim eigentlichen finalen Absenden fehlte sie.

[Tommy Herrmann]

Hast Du meinen Code genommen? Eher nicht oder?

Das ist auch der Fokus und die Reihenfolge korrigiert - das betrift ganz viel, denn so einfach (nur Checkbox) war das nicht. Viel mehr war falsch:

> die vollständige ursprüngliche Formularlogik,
> die korrekte Auswertung von "required": true bei der Datenschutz-Checkbox,
> Prüfung der Felder von oben nach unten,
> Abbruch direkt beim ersten gefundenen Fehler,
> automatisches Scrollen zur Fehlermeldung,
> Fokus auf das Meldungsfeld,
> dieselbe Korrektur auch bei mehrseitigen Formularen und dem Weiter-Button.

[Volker]

Hab deinen Text erst jetzt gelesen. ich prüfe das mal..

[Tommy Herrmann]

Ich habe das kreuzweise getestet und alles funktioniert.

Das mit dem Fokus ist auch enorm wichtig. An einem kleinen Laptop-Bildschirm hat man bei Deinem Script die Meldungen gar nicht gesehen.

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

Lasse das bitte langsam und in Ruhe angehen, das macht ja auch nicht wirklich die große Freude ständig das Formular neu zu stylen

Das ist natürlich auch richtiger Mist, wenn man solche Sachen bereits geprüft hatte und alles ging ja schon mal, plötzlich werden die Checkboxen in einem Update da explizit von der Prüfung ausgenommen Ich meine wie soll man das testen, wenn man es schon als richtig abgehakt hatte

[Volker]

Ist jetzt gefixt im Download und sollte genau so gehen wie erwartet

[Tommy Herrmann]

Moin,

ja - scheint jetzt alles OK

> Checkbox
> Fokus
> Reihenfolge der Feldprüfung (von oben nach unten)

Beim ersten Versuch zickte das hCaptcha rum, von wegen "konnte nicht senden, versuchen sie es später nochmals" oder so ähnlich. Keine Ahnung warum, vielleicht weil ich zwei Formulare auf der gleichen Seite hatte oder zu schnell senden wollte.

Habe dann aber mehrmals erfolgreiche Tests gemacht.

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

[Tommy Herrmann]

Moin,

ich sehe irgendwie nicht so ganz ein, warum Du das Feld - Kopie an meine E-Mail senden - nicht mit in die Mail aufnimmst. Ich für meinen Teil möchte wissen, ob der Benutzer eine Kopie an sich selbst geschickt hat oder nicht. Grundsätzlich sollte auch gelten, dass jedes Formularfeld, das ich erstelle, eben auch mit in der Mail versendet wird.

Sollte es tatsächlich unklare Felder im Generator geben, die nicht mit in die Mail sollen, dann sollte das dort mittels Häkchen wählbar sein - aber nicht nach Gutdünken.


Hier kannst Du es testen:

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

Wenn Du das auch übernehmen willst, hier die Änderung von NUR dem JavaScript-Teil als ZIP:

vn-html-kopie.html


.:: gelöscht ::.


Wenn Du es übernimmst gib mir bitte Bescheid, denn dann installiere ich die .mbrext Datei erneut neu (aber erst morgen).

[Volker]

Ist jetzt auch im Download. Man man man an was man alles denken muss.
Fand ich jetzt persönlich nicht wichtig, aber nu ist es drin.

[Tommy Herrmann]

Moin Volker,

Ich habe noch einen Fehler entdeckt

Nur zur Info - muss jetzt nicht zwingend gleich repariert werden - besser wäre es aber schon, denn Du schreibst ja, es können mehrere Formulare auf der gleichen Seite verwendet werden. Deswegen teste ich das natürlich auch. Solche Fehler dürfen dann aber nicht auftreten.

Ich teste ja nun immer auch das neue Formular erst einmal auf das Aussehen und lasse dabei das alte Formular noch über dem neuen Formular stehen, damit ich abschreiben kann. Warum das bisher nie passiert ist, weiß ich nicht.

> Jetzt habe ich das Problem gehabt, dass ich das neue Formular nicht absenden konnte, obwohl sämtliche Felder ausgefüllt waren - auch das hCaptcha - denn genau das hat gemeckert: "Bitte bestätigen Sie, dass Sie kein Bot sind" (oder so ähnlich).

Es lag daran, dass am oberen (anderen und alten) Formular, kein Häkchen am hCaptcha gesetzt war. Offensicht guckt das JavaScript hier die gesamte Seite an. Nachdem ich auch am oberen Formular das Häkchen am hCaptcha gesetzt habe, konnte ich das untere (neue) Formular auch senden.


Tipp:

Wenn ich Dein Formular an Deiner Domain teste — zum Beispiel das mehrseitige Formular — fällt mir auf, dass es sich um veraltete Versionen handelt. Bitte aktualisiere diese Varianten doch besser oder entferne sie ganz; so hat man kein aussagekräftiges Beispiel. Ein mehrseitiges Formular solltest Du außerdem nicht als ersten Block einbauen, da man das Paginierungsverhalten sonst nicht erkennt. Ich wollte z.B. prüfen, ob das Formular beim Seitenwechsel auch immer an den Anfang vom Formular springt, das kann man nicht wenn das Formular als erster Block auf der Seite eingebaut ist.

Ich meine - kein Mensch baut ein Formular als Header-Block einer Seite ein - warum machst Du es denn dann, das verzerrt doch das Bild.

Ergänze verpflichtende Felder wie die Datenschutzerklärung, damit mögliche Fehler überhaupt sichtbar werden. Ich empfehle außerdem, die Formulare optisch ansprechender zu gestalten und z.B. Feldnummern nicht hinter den Feldnamen anzuzeigen (so viel Zeit muss sein) — das schreckt Nutzer sonst davon ab, diese Formulare überhaupt auszuprobieren.

[Tommy Herrmann]

Noch eine Idee - eventuell erst auch für zukünftige Projekte:

Was spricht eigentlich dagegen das gesamte JavaScript auszulagern und nur noch ersatzweise in der HTML den Verweis zu diesem zu setzen, also etwas wie:

Code: Alles auswählen

<script src="assets/vn-formrender/vn-formrender.js"></script>

Die JavaScript-Datei kann doch mit der .mbrext-Datei auf den Server geschoben werden.

Das hätte doch enorme Vorteile. Die Block-HTML bleibt schlank und die meisten Änderungen können dann nur in dieser Datei "vn-formrender.js" vorgenommen werden.

Dann muss man auch nicht jedes Mal seinen Style neu aufbauen und den gesamten Block neu machen, dann braucht man nur noch die neue JS-Datei auf den Server laden und dennoch die .mbrext neu importieren. Der bereits erstellte und individuell bearbeitete Mobirise-Block bleibt unberührt.

Ein wenig JavaScript zur Anzeige des Dummy-Formulars zur Ansicht auf der Arbeitsseite kann ja dennoch im Mobirise-Block verbleiben, denn das geht sonst wahrscheinlich ja nicht anders.

Weiterhin sieht dann der Quelltext von der Seite im Browser wieder vernünftig aus und zeigt nicht mehr dieses mehr als 1000 Zeilen lange JavaScript.

[Volker]

Moin Tommy,

du alte nörgel Tante

1. Ist das Forumlar unter vntabs nur zum testen, keine Demo die ich zeigen will ( wird auch wieder geöscht)
2. Mehrere Formulare mit Mathe Captcha sind kein Problem. Das hCaptcha nicht geht war mir klar
3. Java Script auslagern muss ich mir mal überlegen (teste ich)
4: Falls Du das hier meinst: https://www.niederastroth.de/vnhero1/ ist auch nur Test eird auch gelöscht


PS: Nochmal zum Mathe Captcha: Das muss auf der Seite gelöst werden. Kein Bot kann das von außen machen, also ziemlich sicher in dieser Hinsicht

[Tommy Herrmann]

Moin,

mir war das nicht klar, dass hCaptcha nicht geht, denn eigentlich sollte es gehen. Ich spreche jetzt nicht vom Mathe-Captcha.

ChatGPT schreibt mir auch ganz genau und gleich, dass es an dem fehlerhaften JavaScript liegt. Das müsste nochmals umgeschrieben werden.

Du darfst durchaus zwei oder mehr Formulare mit hCaptcha auf derselben Seite verwenden. Das Script muss dafür aber jeden Formularblock und jedes hCaptcha eindeutig behandeln.
Die wichtigste Änderung ist, den Callback-Namen zusätzlich mit der eindeutigen Mobirise-Section-ID zu versehen.

Ich weiß nicht ob Du das noch korrigieren willst, denn das ist glasklar ein Bug. Das wollte ich wissen?!

[Volker]

https://www.niederastroth.de/vn-formrender-js.mbrext

Jetzt teste erstmal diese Verion. Alte mal löschen und ausgiebig diese testen die hat Java Script ausgelagert. Dann kann man immer noch das Javascript ändern, wegen hCaptcha.

Bin im Bus kann jetzt nicht alles testen

[Tommy Herrmann]

Welche Version ist das denn?

Ich habe die neueste Version aus der "VN-Gallery" heute morgen um ca. 5:30 herunter geladen und am Server. Wenn Du am hCaptcha noch nicht alles neu gemacht hast, brauche ich die nicht testen. Ich hab gerade eben erst die Antwort von ChatGPT erhalten, dass das aktuelle JavaScript das hCaptcha nicht korrekt berücksichtigt.

Ich teste nicht gerne umsonst. Ich kann das auch morgen oder kommende Woche machen. Mich drängt da nichts.

[Tommy Herrmann]

OK - ich habe mir die Scripts im mbrext angesehen und denke, das könnte gehen

Ich teste es etwas später - kann gerade nicht.