Formulare at its best!

[Jan Erdbeer]

Hallo!
Gibt es irgendwo gute (!) Anwendungbeispiele von Formularen, die mit dem Contao-internen Formulargenerator erstellt worden sind? Es gibt ja inzwischen einige schöne Lösungen (CSS+JS oder auch mit Ajax-Funktion wie automatische Email-Kontrolle ohne Reload) und so weiter.
Inspiration 1
Inspiration 2
Aber ich hab sowas noch nie mit Contao umgesetzt gesehen, geschweige denn selbst hinbekommen. Heute bin ich mehr als kläglich an Niceforms 2.0 gescheitert.
Kann man sowas überhaupt mit einem CMS umsetzen, ohne selbt viel programmieren zu müssen? Schön fände ich die Möglichkeit, einfach eine schöne CSS-Gestaltung einzubinden, als Zusatz-Head-Tag das entsprechende JavaScript einzubinden und schon ist aus dem Standardformular eine Augenweide geworden...
Also falls jemand mehr Erfahrung hat als ich, her mit den Tipps! Gern kann man sowas ja auch zusammen entwickeln, ich bin was Design und Farbgebung angeht gut, nur im Programmieren schlecht.
Ich finde es halt immer wieder schade, wenn ein Contao-Projekt fertig ist, es tolle Funktionen wie Lightboxen und Akkorden gibt, und das Kommentarformular darunter sieht dann aus wie 1990...

[tblumrich]

Hallo!

Ich finde es halt immer wieder schade, wenn ein Contao-Projekt fertig ist, es tolle Funktionen wie Lightboxen und Akkorden gibt, und das Kommentarformular darunter sieht dann aus wie 1990...

Der Meinung bin ich auch und an dem Thema wäre ich auch interessiert... bin aber auch nicht der Held was Programmierung angeht.
Einen Ansatz, der schon mal ganz viel versprechend aussieht gab es hier. Das hab ich schon hin und wieder mit eigenen Anpassungen genutzt...

Gruß
Thomas

[kos]

Die auf den oben verlinkten Webseiten dargestellten Formulare werden im Wesentlichen mit Grafiken und CSS gestaltet.

Sowohl das smashmagazine als auch niceforms können für die Formulare nur die HTML-Elemente benutzen, die auch in Contao zur Verfügung stehen und nicht mehr.

Man kann bei der Anlage der Formulare IDs oder Klassen vergeben, Teile mit eingenem HTML in <filedset>s packen oder in <div>s usw. und dies dann zur Formatierung nutzen. Natürlich sind hierzu gute CSS-Kenntnisse erforderlich.

Also frisch ans Werk... Die Ideen zur Gestaltung kann Contao wohl kaum mitliefern.

[Jan Erdbeer]

stimmt, kos, man kann schon einiges mit css machen, was die gestaltung angeht, js muss wohl wirklich nicht sein. aber wie sieht es mit direkter ajax-validierung aus? gibt´s dafür schon was für contao?
ich werd mich die kommenden tage mal an ein paar css-gestaltungen versuchen und ggf. hier veröffentlichen, möglichst mit psd für schöne umrandungen. ich find grade runde ecken machen schon viel aus bei einem formular. auch vernünftige positionierung der feldbezeichnungen und genug freiraum zwischen den feldern ist schon eine echte wohltat.

[xchs]

aber wie sieht es mit direkter ajax-validierung aus? gibt´s dafür schon was für contao?

Vielleicht diese Erweiterung?

[Jan Erdbeer]

Ohja! Ich liebe Tooltips! Jetzt noch ne automatische Validierung und ordentliches CSS-Design und wir haben was wir wollen.

[xchs]

Ohja! Ich liebe Tooltips! Jetzt noch ne automatische Validierung und ordentliches CSS-Design und wir haben was wir wollen.

Eine automatische Validierung bietet Dir doch schon der Formulargenerator von Contao (oder habe ich das jetzt falsch verstanden ) und wenn ich mich nicht irre, wird das auch von der oben zitierten Erweiterung entsprechend berücksichtigt...

[schman]

@xchs
Die Validierung wird von Contao gemacht, aber ich denke er will sowas schön gestylt haben wie in der Ext.
Zur Erweiterung: Wenn ich das richtig gelesen habe wird dieser Tooltip aber nur im Backend dargestellt nicht aber im FE. Täusche ich mich da?

[tblumrich]

Schöne Erweiterung, man lernt nie aus...

btw... @schman

Nach Installation dieser Erweiterung ist im Backend für jedes Formularfeld ein neues Feld unterhalb der Feldbezeichnung vorhanden. Hier kann eine eigene Hilfsnachricht eingegeben werden, welche Besuchern beim klicken in dieses Feld mittels einem Javascript-Popup (siehe Beispiel-Bild) angezeigt wird.

Da Besucher nichts im BE zu suchen haben, gehe ich davon aus das die Tipps im FE angezeigt werden.

Was die Validierung angeht, wäre z.B. eine Anzeige der Fehler in den Feldern, vielleicht rot hinterlegt, sehr schön. Vielleicht auch per Ajax und schön gesteylten Popups oder so...
Bis dato (vielleicht reicht mein Horizont auch nicht so weit), fand ich die Anpassung in den Templates immer sehr schwer nachzuvollziehen (speziell die Errorausgabe).
Und ich will ja auch nicht jedesmal die Templates komplett umstricken, abgesehen davon, dass man dafür schon etwas mehr programmierseitige Ahnung haben muss...

Gruß
Thomas

[varix]

Hallo tblumrich,

ja, die Tooltipps werden im FE angezeigt und sind auch per CSS anpassbar. Eine Validierung findet meines Wissen nach auch automatisch statt und kann per CSS nach deinen Wünschen angepasst werden (Farbe, Position, oder auch z. B. ein kleinse Warnschild vor den Fehlerhinweis).

Also Firebug on und los gehts!

Gruß
varix

[tblumrich]

Hi varix.

Ja, das ist schon klar und praktiziere ich auch. Alles was mit CSS geht, ist ja ok.
Nur wenn z.B. die Errorausgabe per Template vorgegeben ist (also in einem <p> über bzw. unter den Feldern), dann gehts meiner Meinung nach nicht nur mit purem CSS... oder wie würdest du es z.B. machen, das der Errortext kommt und ich möchte das z.B. das betreffende Inputfeld dann eben einen roten Background oder Border bekommt? Da wüsste ich nicht mal, wie das mit einer Templateanpassung ohne Programmierkenntnisse möglich wäre...
Ich werde aber auf jeden Fall noch was versuchen.

Ich fänds ja schon ganz nett, wenn man z.B. die o.g. Tooltipp Erweiterung auch für Errormeldungen "missbrauchen" könnte - wäre ja eigentlich sogar konsequent... finde ich.
Vielleicht kann Andreas ja mal sagen ob sowas sehr aufwändig wäre?

Gruß
Thomas

[xchs]

Übrigens: Die Erweiterung habe ich gemeint (allerdings nur bis Version 2.6.7 freigegeben)

[andreasisaak]

Hi varix.

Ja, das ist schon klar und praktiziere ich auch. Alles was mit CSS geht, ist ja ok.
Nur wenn z.B. die Errorausgabe per Template vorgegeben ist (also in einem <p> über bzw. unter den Feldern), dann gehts meiner Meinung nach nicht nur mit purem CSS... oder wie würdest du es z.B. machen, das der Errortext kommt und ich möchte das z.B. das betreffende Inputfeld dann eben einen roten Background oder Border bekommt? Da wüsste ich nicht mal, wie das mit einer Templateanpassung ohne Programmierkenntnisse möglich wäre...
Ich werde aber auf jeden Fall noch was versuchen.

Ich fänds ja schon ganz nett, wenn man z.B. die o.g. Tooltipp Erweiterung auch für Errormeldungen "missbrauchen" könnte - wäre ja eigentlich sogar konsequent... finde ich.
Vielleicht kann Andreas ja mal sagen ob sowas sehr aufwändig wäre?

Gruß
Thomas

In gewisser Weise gebe ich dir Recht, ganz ohne Templateanpassungen geht es nicht bei Contao. Aber mit einer minimalen Templateänderung die ich schon seit längerer Zeit anwende (wurde auch mal von Nina hier im Forum veröffentlicht), kann ich seitdem 99% der Formulare bauen...

Also ich würde nicht behaupten das Contao's Formulare total unflexibel sind. Die Klassenvielfalt mag einen vielleicht am Anfang erschlagen aber mit der Zeit kann man jede Klasse und jede ID sinnvoll nutzen oder halt garnicht beachten.

[tblumrich]

Übrigens: Die Erweiterung habe ich gemeint (allerdings nur bis Version 2.6.7 freigegeben)

Hi.
Leider scheint das Ding wirklich zu alt zu sein und mit der aktuellen Contao Version nicht mehr zu funktionieren. Ich finde nirgends was zum Konfigurieren und nach Abschicken passiert auch nichts anderes bei den Fehlermeldungen...

@jared
Danke für die Antwort.
Was mir aber nicht klar ist, inwieweit deine Template-Anpassungen das Ermöglichen, was ich oben beispielhaft anführte?
Die Meldungen sind jetzt nur unter den Input-Feldern. Vielleicht etwas praktischer...

Gruß
Thomas

[andreasisaak]

Den roten Border um das Input Feld? Oder was genau meinst du mit "oben"?

[tblumrich]

Den roten Border um das Input Feld? Oder was genau meinst du mit "oben"?

Ja, genau, z.B.. Das ich die Errormeldungen selbst färben, verschieben und manigfaltig formatieren kann, ist ja soweit klar... Aber das wäre mal was anderes...

Nach meinem rudimentären Verständnis müsste man ja da irgendwo eine Abfrage reinbringen ob korrekt ausgefüllt und wenn nicht -> bekommen die inkorrekten Felder eben die Klasse "fehlerfeld" oder so...

Gruß
Thomas

[andreasisaak]

Aber das bekommen sie doch schon lange.

<input class="error" type="text" />

Und mit dem Code den ich dir oben gezeigt habe, kannst du wie schonmal erwähnt 99% der Fälle abdecken:

- Kennzeichnung der Labels und Inputfelder bei nicht ausgefüllten Feldern
- Besondere Kennzeichnung der Fehlermeldung als Tooltip oder andere Varianten
usw..

Ich glaube du solltest dich noch etwas mit HTML und CSS auseinandersetzen. Contao bietet dir fast alles was du benötigst - du musst es nur selber anwenden können.

[tblumrich]

Vielleicht stehe ich ja völlig auf dem Schlauch und auch auf die Gefahr hin mich hier völlig zu blamieren, frag ich trotzdem (ich dachte bis jetzt schon mich etwas mit HTML und CSS auszukennen)...

Wenn ich das Input Feld per Klasse formatiere, gilt das doch immer und nicht nur nach der Validierung durchs System? Aber genau das will ich... es soll eine spezielle Formatierung bekommen bei einem Fehler...
Also User füllt das Formular aus und vergißt ein Pflichtfeld -> er will abschicken und bekommt genau bei diesem Feld die Fehlermeldung -> und (und NUR dann) das Inputfeld wird ROT.

Ich werd mal noch etwas drüber brüten, wie es gehen soll...
Vielleicht hast du ja ein Beispiel, wo es so funktioniert?

Gruß
Thomas

[xchs]

es soll eine spezielle Formatierung bekommen bei einem Fehler...

Sowohl Fehlermeldung als auch <label>- und <input>-Tag bekommen im Fehlerfall die Klasse "error" zugewiesen. Damit sind der Formatierung mittels CSS Tür und Tor geöffnet...

[tblumrich]

Alles klar, jetzt seh ichs auch...
Danke.

Ich geh denn mal schlafen.

[andreasisaak]

Ein Beispiel kannst du auf meiner Kontaktseite sehen. Da passiert haargenau das was du suchst

[tblumrich]

Ein Beispiel kannst du auf meiner Kontaktseite sehen. Da passiert haargenau das was du suchst

Jo, sehr nett und freundlich gestaltet.
Darf ich fragen wie du das mit der einen Meldung oben drüber (und nicht an jedem Fehlerfeld) gemacht hast... ich nehme nicht an, das war dein oben angefügtes Template und nur CSS...

Gruß
Thomas

[lucina]

.error{
color: #C0020E;
}

Carolina.

[tblumrich]

Hi Carolina,

.error{
color: #C0020E;
}

Carolina.

Danke.
Magst du eventuell noch einen Satz mehr dazu schreiben, für wen oder an wen das gerichtet ist? Soll das die Antwort auf meine Frage sein oder ein Hinweis, der zur Lösung führt?

Ich geb ja zu das ich mich oben etwas doof angestellt hab, aber muss das jetzt hier generell ein Quiz werden?

Im Fehlerteil ist ein neues Div mit der Klasse "haserror", das kann man erkennen... nur wo kommt das her?

Gruß
Thomas

[andreasisaak]

Nein das ist natürlich kein Quiz. Der Beitrag von lucina bezog sich, denke ich mal, auf die Fehlerklasse mit der man die Border bei einem Fehler umfärbt.

Den einzelnen Satz im oberen Teil des Formular bekommt man mit folgendem Eintrag in der "form.tpl" zustande:

<?php if ($this->hasError): ?>
<div id="haserror">dein individueller Fehlertext</div>
<?php endif; ?>

Der Codeschnippsel gehört im besten Fall gleich hinter das öffnende Formtag.

[planepix]

Ergänzend noch ein Link zu Formularen.