benutzbares Uploadformular erstellen, alternative zu Formbuilder?

bd0 · 19. Juni 2014 18:47

Hallo,

ich hatte vor einiger Zeit schonmal ein Uploadformular erstellt und es hat damit bei den Endusern leider ziemlich viele Probleme gegeben.

Ein Problem ist der Dateiupload.
Es sollen über das Formular mehrere Bilder hochgeladen werden (bis zu 20). Dafür muss man diverse Formularfelder mit persönlichen Daten befüllen und einen Pflichthacken setzen dass man mit den AGB einverstanden ist.
Einige weiter Eingaben sind Pflicht, z.b. die emailadresse.
Wenn der User das Formular korrekt ausfüllt und fehlerfrei durchläuft funktioniert alles problemlos.
Die Bilder werden hochgeladen und die Daten werden an ListIt übergeben. Das klappt soweit zumindest ok.
Ich hatte dazu schon mal was gepostet. http://www.cmsmadesimple.de/forum/viewtopic.php?id=3787
Die Probleme von damals sind noch nicht gelöst, ich habe mich aber damit soweit arrangiert...

Nun zum Problem:
Wenn ein User eine Pflichteingabe nicht ausfüllt, wird vom Formbuilder eine Fehlermeldung für den User erzeugt und die fehlenden Felder werden hervorgehoben. Das ist prinzipiell nützlich und gewünscht.
Wenn man aber schon Bilder ausgewählt hatte sind diese nicht mehr mit den Dateiuploadfeldern verknüpft. Der jeweilige Dateiname steht zwar noch über dem entsprechenden Dateiauswahlfeld, neben dem Auswahlfeld steht aber "keine Datei ausgewählt"

Die meisten User bemerken das nicht und schicken dann das Formular OHNE Bilder ab.
Es ist schon unpraktisch genug dass die ausgewählten Bilder nicht mehr verknüpft sind, aber umso verwirrender für den User wenn der zuvor ausgewählten Dateiname noch angezeigt wird. Das ist eigentlich nicht wirklich zumutbar, bzw hat es zur Folge dass die meisten Einträge ohne Bild erfolgen, was blöd ist das es ja primär um den Bilderupload geht.
Selbst wenn es dem User klar wäre dass die Bilder nicht mehr verknüpft sind wäre das schon ärgerlich genug da es im konkreten Fall um bis zu 20 Bilder geht, die meisten werden das aber schlicht nicht registrieren

Gibt es für dieses Problem, vergessen der hochzuladenden Dateien nach Fehlermeldung bei nicht korrekt ausgefülltem Formular, eine Lösung?
Die Ausklapplisten und alle anderen Formularfelder behalten ihre Eingabewerte.
Ausschlieslich der Dateiupload vergisst die Auswahl!

Ich nutze
CMS-Version 1.11.10
FormBuilder 0.7.3
ListIt2 1.4.1
in einer nahezu jungfräulichen Neuinstallation.

Die einzige "Lösung" die bei mir bislang eingefallen ist, ist das Verzichten auf irgendwelche "required" Felder und Überprüfungen, so dass einfach alles ungehindert durchläuft, auch wenn das Formular nicht vollständig bzw. korrekt ausgefüllt ist.

Gibt es eine alternative zum Formbuilder bei dem das besser gelöst ist? Wichtig wäre aber eine Möglichkeit die Inhalte an ListIt oder etwas vergleichbares zu übergeben.

Hoffe jemand kennt das Problem und eine Lösung/workaround!

NaN · 20. Juni 2014 11:28

Das ist ein generelles Problem mit File-Upload-Feldern (in jedem Browser - hat also nichts mit CMSms oder den Modulen zu tun). Es gibt aus Sicherheitsgründen keine Möglichkeit, in diesen Feldern irgendeinen Standardwert vorzugeben. Daher ist es auch nicht möglich, sich die Eingabe in diesem Feld zu merken.

Der einfachste Workaround wäre meiner Meinung nach HTML5. (siehe z.B. hier) Damit können die Pflicht-Felder bereits vom Browser vor dem Absenden des Formulars validiert werden. Dann sendet der Browser das Formular nur dann ab, wenn alles korrekt ist.

(Alternativ können die Required-Felder auch via Javascript vor dem Absenden überprüft werden)

Anderenfalls wäre da noch die Möglichkeit, das Formular auf dem Server immer zu verarbeiten - egal, ob alle Eingaben korrekt sind, oder nicht. D.h. die Bilder werden auf jeden Fall hochgeladen. Sollte ein Pflichtfeld nicht korrekt ausgefüllt sein, wird das Formular wieder angezeigt, mit den entsprechenden Fehlermeldungen. Dabei werden aber die Namen der hochgeladenen Dateien in einem hidden Input-Feld geschrieben, sodass man beim erneuten Absenden des Formulars weiß, dass es bereits hochgeladene Dateien gibt. Gleichzeitig zeigt man im Formluar neben den Upload-Feldern an, dass die Dateien bereits hochgeladen und OK sind. (grünes Häkchen, Dateiname, Vorschaubild ... ). Erst wenn ein File-Upload-Feld nicht leer ist, und einen anderen Namen enthält als im versteckten Input-Feld für dieses Upload-Feld hinterlegt wurde, werden die bereits hochgeladenen Dateien gelöscht und durch die neuen Dateien ersetzt.
(siehe z.B. auch hier)

bd0 · 21. Juni 2014 13:12

Danke für deinen Beitrag. Es ist ja schon erfreulich zu wissen dass es ein generelles Problem ist und nicht am Formbuilder bzw. CMSms liegt.
Gibt es eine Möglichkeit mit dem Formbuilder HTML5 Felder zu erzeugen?
Da ich mich mit Javascript nicht auskenne habe ich mir vorerst damit beholfen das Formular auf mehrere Seiten aufzuteilen. Die Anmeldedaten sind auf einer seperaten Seite, werden mit "weiter" validiert und ggf. bemängelt. erst auf der nächsten Seite werden die Bilduploadfelder angezeigt.
Dann sind die Anmeldedaten bereits validiert und das Problem tritt so erstmal nicht mehr auf, es sei denn der User geht zurück und wieder weiter. dann sind die Uploads weider futsch. Aber das ist schon wesentlich seltener der Fall denke ich.

Hast du vielleicht ein Beispiel wie so eine Validierung per Javascript aussieht?

Vielen Dank für deine Ausführungen zum Thema!

NaN · 23. Juni 2014 12:16

Gibt es eine Möglichkeit mit dem Formbuilder HTML5 Felder zu erzeugen?

Nein leider nicht. Jendefalls nicht ohne Umwege und auch dann nicht im vollen Umfang.

Im Prinzip ging es mir dabei nur um bestimmte HTML-Attribute. Z.B.:

Hier klicken, um den Code zum Kopieren zu markieren

<input type="text" required="true" />

D.h. im Template muss man lediglich abfragen, ob das Feld ein Pflichtfeld ist. Wenn ja, dann fügt man das Attribut hinzu. Den Rest macht der Browser.

Leider hat man im FormBuilder-Template die Eigenschaften eines Feldes nicht alle einzeln verfügbar, sodass man sich das Input-Feld nicht selber im Template zurechtbasteln kann. D.h. man müsste da ein wenig mit dem SMARTY-Modifikator "replace" tricksen.

Irgendwo im Template steht doch meist immer sowas:

Hier klicken, um den Code zum Kopieren zu markieren

...

{foreach from=$fields item=field}

...

{$entry->input}

...

{/foreach}

...

Aus dem {$entry->input} einfach mal folgendes machen:

Hier klicken, um den Code zum Kopieren zu markieren

{if $entry->required == 1}{$entry->input|replace:'<input ':'<input required="true"'}{else}{$entry->input}{/if}

Das bedeutet im Prinzip, "wenn das Input-Feld ein Pflichtfeld ist, suche im Input nach '<input ' und ersetze es mit '<input required=`true` '"

(Das Beispiel klappt aber nur bei Feldern die im HTML Code mit "<input .../>" definiert werden. Select-Elemente oder Textareas müsste man dann noch gesondert manipulieren.)

Damit werden Pflichtfelder vom Browser auf Inhalt geprüft, bevor das Formular abgesendet wird. Mehr kann man mit dem FormBuilder ohne großen Aufwand im Moment leider nicht erreichen. D.h. wenn Du den Inhalt der Felder auch noch nach bestimmten Mustern validieren willst (z.B. gültige E-Mail Adresse o.ä.) dann wäre man hier mit Javascript besser beraten. Denn sonst müsste man da ewig viel mit "|replace" rumwurschteln und genau das sollte man bei Smarty eigentlich vermeiden. Oder man müsste einiges am PHP-Code des Moduls ändern.

Die Javascript-Variante hab ich mir so vorgestellt, dass man die Felder über ihre CSS-Klassen entsprechend kennzeichnet wonach sie validiert werden sollen. Z.B.: <input type="text" class="email" />

Und tatsächlich gibt es dazu bereits ein fertiges Script: http://www.position-absolute.com/articl … is-a-mess/

bd0 · 23. Juni 2014 21:33

Hallo NaN,

danke für die Erklärung und Tipps. Das werde ich mal ausprobieren!

viele grüße
bd0

bd0 · 05. Juli 2014 11:49

Hallo,

das validieren von normalen Feldern funktioniert inzwischen gut und problemlos.
Beim Dateiupload scheint es aber keine Möglichkeit zur vorherigen Prüfung zu geben. Das wird immer erst an den Server übertragen und dann verarbeitet. Ist dann die Dateigrösse größer als das definierte Limit bekommt man die Fehlerseite. Dort ist die zu große Datei hervorgehoben und man kann einen neue Datei auswählen.
Das Probelm ist nun dass alle anderen Dateien nicht markiert sind und es den anschein erweckt dass damit allles ok wäre. Tatsächlich sind diese aber nicht mehr verknüpft erscheinen aber noch als Text beim Uploadfeld. Mir wäre schon geholfen wenn die Dateinamen dort nicht erschienen!

Hat jemand ne Idee. Ich nutze das standart Formtemplate vom Formbuilder.

Andynium · 05. Juli 2014 12:29

Spontan gedacht - display für den Hinweis auf none setzen.

bd0 · 05. Juli 2014 13:23

ja, hatte ich auch gedacht. Dazu müsste ich dem Hinweis aber ne eindeutige class zuweisen. So wie es im moment ausgegeben wird wüsste ich nicht wie.

aber falls jemand einen CSS Trick kennt, immer her damit.
Oder eben ein Tipp wie bzw. wo ich die class im Formtemplate einfüge.

Andynium · 05. Juli 2014 14:56

Stimmt - display:none geht nicht, aber was anderes ginge schon noch. Ich sag nur "Ostfriesische Nationalflagge" = weißer Adler auf weißem Grund wink (ist nicht von mir, sondern ein steinalter Joke von Otto (dem Comedian)).

Praktisch meine ich damit, dass du für die divs in diesem fieldset Vorder- und Hintergrundfarbe auf den gleichen Wert setzt und damit den Text unsichtbar machst. Für alle anderen Elemente kann über deren Klasse, ID oder den Tag selbst die Schrift wieder sichtbar gemacht werden. Zwar erwischst du damit auch das Wort "Löschen", aber das könntest du mit dem Pseudoelement after

http://www.css4you.de/beforeafter.html

und einem negativen margin wieder "sichtbar" machen.

Leider lässt das kleine Snippet keine Aussage zu, ob es da nicht noch an anderer Stelle hakt.

bd0 · 08. Juli 2014 00:45

Hey, danke für die Hinweise. Die Fehlerseite konnte ich passend formatieren, zumindest ausreichend... Leider zerschiessts dann die "Startseite" ohne die Fehlermeldungen.
Muss nochmal nen neuen Anlauf machen, vielleicht krieg ichs noch hin dass es sowohl auf der fehlermeldungsfreien als auch auf der fehlerseite funktioniert.
Hilfreich wäre ne Klasse auf dem jeweiligs betroffenen Fieldset, geht das irgendwie im formtemplate? wenn ja wie? So dass ich die inputfelder differenzierter ansprechen kann. Also einmal Fieldset normal und einmal Fieldset + "error" class.

Ist ja ein ganz schönes rumgewürge... der Fall einer zugroßen hochgeladenen Datei + Fehlermeldung müsste doch ein Standartproblem sein? Schade dass es so umständlich ist ein einfaches Uploadformular zu erstellen sad
Kennt niemand ein funktionierendes Workaround, das sich mit Formbuilder umsetzen lasst!

Andynium · 08. Juli 2014 10:10

bd0 schrieb:

Leider zerschiessts dann die "Startseite" ohne die Fehlermeldungen.

Öhmm, jetzt weiß ich ganz genau, wie es aussieht roll ...

bd0 schrieb:

Hilfreich wäre ne Klasse auf dem jeweiligs betroffenen Fieldset, geht das irgendwie im formtemplate? wenn ja wie? So dass ich die inputfelder differenzierter ansprechen kann. Also einmal Fieldset normal und einmal Fieldset + "error" class.

Hab hier dazu grad kein funktionstüchtiges Szenario.

Ich würde mir dir URL vorher/nachher sowie die verfügbaren Smarty-Variablen ansehen. Evtl. lässt sich da etwas als Klasse heranziehen.

bd0 schrieb:

der Fall einer zugroßen hochgeladenen Datei + Fehlermeldung müsste doch ein Standartproblem sein? Schade dass es so umständlich ist ein einfaches Uploadformular zu erstellen

Wie NaN bereits ausführte, ist es in der Tat ein allgemeines Problem. Hab hier mal 'ne Funktion gefunden, um die Dateigröße vorher auszulesen:

http://www.computerbase.de/forum/showth … ost5764679

Hab aber noch keine Idee, wie man die gescheit mit FB einsetzt.

bd0 schrieb:

Kennt niemand ein funktionierendes Workaround, das sich mit Formbuilder umsetzen lasst!

Formbuilder ist ein Allrounder. Hast du dir schon mal einen Spezialisten wie das Uploads-Modul angesehen?

bd0 · 09. Juli 2014 15:56

cyberman schrieb:

Wie NaN bereits ausführte, ist es in der Tat ein allgemeines Problem. Hab hier mal 'ne Funktion gefunden, um die Dateigröße vorher auszulesen:
http://www.computerbase.de/forum/showth … ost5764679
Hab aber noch keine Idee, wie man die gescheit mit FB einsetzt.

Ja, dass es ein generelles Problem ist habe ich verstanden und das ist ja auch "ok". Ich frage mich halt warum er den Dateinamen der schon vergessenen wurde immer noch oben reinschreibt. Wenn er einfach alles vergessen würde wäre es ja ok, dann wüsste der User dass er nochmal alle Dateien neu auswählen muss. So siehts halt leider so aus als müsste man nur die als zu groß gekennzeichnete Datei neu zuweisen. Das führt im Ergebnis dann dazu dass nur die ehemals zu kleine Datei hochgeladen wird. Es ist halt total missverständlich für den User und ich finde keine einfach Möglichkeit die ex-Dateinamen loszuwerden...

Uploadmodul habe ich mir noch nicht angeschaut. Mal sehen...
Lässt sich das mit Formbuilder kombinieren oder wird das dann ne gesonderte Kiste?

Andynium · 16. Juli 2014 09:40

Hab es noch nicht getestet, muss vermutlich separat konfiguriert werden - andererseits ist im News-Modul ein Beispiel drin, wie es in Kombination genutzt werden kann

Hier klicken, um den Code zum Kopieren zu markieren

{cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue}

Andynium · 20. Oktober 2014 22:06

bd0 schrieb:

Hoffe jemand kennt das Problem und eine Lösung/workaround!

Formbuilder ist nun endlich in der Version 0.8 veröffentlicht worden - lt. einer Nachricht im Forum der .org soll unter anderem dieses Problem gelöst sein.

Kannst ja mal schauen ...

Forum für CMS/made simple

#1 19. Juni 2014 18:47

benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#2 20. Juni 2014 11:28

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#3 21. Juni 2014 13:12

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#4 23. Juni 2014 12:16

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#5 23. Juni 2014 21:33

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#6 05. Juli 2014 11:49

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#7 05. Juli 2014 12:29

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#8 05. Juli 2014 13:23

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#9 05. Juli 2014 14:56

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#10 08. Juli 2014 00:45

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#11 08. Juli 2014 10:10

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#12 09. Juli 2014 15:56

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#13 16. Juli 2014 09:40

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

#14 20. Oktober 2014 22:06

Re: benutzbares Uploadformular erstellen, alternative zu Formbuilder?

Fußzeile des Forums