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:

javascript-vn-renderer.zip

(11.03 KiB) 2-mal heruntergeladen

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

vn-html-javascript-mit-kopie.zip

(11.03 KiB) 2-mal heruntergeladen

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.