search

springers54 / reiki

0 stars 0 forks source link

Hintergrundbild für Formulare #131

Closed springers54 closed 5 years ago

springers54 commented 5 years ago

Auf der alten Seite haben Formulare ein Hintergrundbild. Dieses hat noch einen Parallaxeslider, das bedeutet, es scrollt in einem eigenen Bereich. Wenn man die Seite nach unten scrollt, dann srollt das Bild ebenfalls nach unten aber in einer andren Geschwindigkeit.

Im ersten Schritt sollten wir erst einmal ein Hintergrundbild im Formular einbauen und das Styling der alten Seite annähern. https://zen-reiki.de/kontaktformular/ http://reiki-lernen.de/kontaktformular/

joergsteinhauer commented 5 years ago

Soll das Bild möglichst im Admin konfigurierbar sein? Das wäre mehr Aufwand und ich wüsste erstmal nicht mal, wie und mit wieviel Aufwand das geht. Andere Variante wäre weniger dynamisch über CSS.

Ich schaue, was sich wie machen lässt.

springers54 commented 5 years ago

Es reicht, wenn es ein festes Bild aus der Mediathek ist. Im Moment isr es Kontakt4. Was du mit im Admin konfigurierbar meinst, ist mir unklar. Wenn man ein DIV um das Formular legt, kann man dort dich auch ein Bild reinpacken?

joergsteinhauer commented 5 years ago

Ok, gut so. Dann mache ich es lieber statisch über CSS.

Wie ichs meine: im WP Admin kann man u.a. solche Sachen, wie Header-Bild einstellen. Dies wird dann, je nach Theme Konfiguration, eben auf der Seite sichtbar. Ähnliches kann ich mir für andere Custom-Sachen vorstellen. Aber das ist zuviel Aufwand.

springers54 commented 5 years ago

Je nach Theme muss sich das nicht verändern. Es reicht css, so dass es eine Regel gibt, wie ich ein Bild hinter ein Formular lege und vielleicht auf der einen Seite Bild 1 und auf einer anderen Bild 2

joergsteinhauer commented 5 years ago

Gut, soweit umgesetzt. Alle Seiten haben einen Klassen-Slug im body-tag, also z.b. hat die Kontaktseite eine Zusatzklasse im body: <body class="[...] page-kontaktformular [...]"> Anhand dieser Klasse wird im CSS das Hintergrundbild gesetzt. Falls also auf einer anderen Seite das gleiche oder andere Bild in gleicher Art und Weise angezeigt werden soll, muss man das im CSS regeln.

springers54 commented 5 years ago

so richtig gut finde ich diese Lösung nicht, weil ich als Betreiber der Seite keine Möglichkeit habe, das Bild zu ändern. Es kann nicht sein, dass ich damit ins css muss. Kann man nicht eine Stylingregel basteln, die ich im Quellcode sehe, wo ich selbst Einfluss auf Hintergrundbilder nehmen kann?

springers54 commented 5 years ago

Vergleiche bitte mal beide Seiten und den Einbau der Bilder. Die neue Seite sieht einfach unschön aus. Das Bild ist anders eingefasst, der schöne Scrolleffekt ist weg, die Felder sind weiß und nicht transparent vom Hintergrund grafik

Alte Seite im Bildvergleich: grafik

Bekommt man so einen Scrolleffekt auch ohne Cherry hin?

joergsteinhauer commented 5 years ago

Kann man nicht eine Stylingregel basteln [...]

Genau das habe ich doch anfangs gefragt. Du meintest, es reicht eine starre Lösung über CSS... Gut, dann muss ich mir etwas dynamisches überlegen, wird schon irgendwie gehen müssen.

Kontaktseite ...

springers54 commented 5 years ago

ich habe dich dann wohl falsch verstanden. Mein Problem ist ja, dass ich selbst das Css nicht anpassen kann, da du das ja im LESS machst. Es würde mir prinzipiell reichen, wenn ich bestimmte css-Regeln wie auf der alten Seite modifizieren könnte und dann eventuell dort ein anderes Bild einfügen.

Aber es kann gut sein, dass wir auch noch andere Formulare bauen und dann das Hintergrundbild nicht passt. Bei mir passt der Bildausschnitt nicht zu 100%, irgendwie ist oben jetzt mehr Rand zu sehen, als wenn da Medikamente drauf sind oder was das auch immer sein soll.

Die transparenten Felder, die Farben und die Schriften sollten der alten Seite entsprechen.

joergsteinhauer commented 5 years ago

Ok, das ist schon mal ein Anfang. Ich habe das dazugehörige CSS aus dem LESS in die Datei custom.css verschoben, hier kannst du gern nach belieben rumschreiben. Wenn du auf anderen Seiten ein anderes Bild nehmen möchtest, musst du die bestehende Regel duplizieren und statt .page-kontaktformular entsprechend die passende Klasse einsetzen.

Eine anderweitige dynamische Lösung würde jetzt hier den Rahmen sprengen. So oft und durcheinander wird es ja nicht sein.

Bildausschnitt ist anders als auf der alten Seite u.a. durch die Höhe des Containers und vor allem durch das fehlende Parallax Effekt. Kann auch nicht sagen, ob mit Parallax dann das Bild haargenau den gleichen Ausschnitt hat. aber ist denn das so wichtig? Ich sage doch imemr wieder, dass es kleine Abweichungen ggü. dem alten Theme geben wird. Ist doch nicht schlimm, hauptsache das sieht stimmig und korrekt aus... habe das Gefühl wir verhaspeln uns auf solchen unwichtigen Details.

springers54 commented 5 years ago

Super, das würde mir reichen. Habe ich mir angeschaut. Wenn ich dann noch wüsste, wie ich zum Beispiel für meine Lehrerseite ein anderes Bild nehmen könnte im Kontaktformular?

Oder im Anmeldeformular? Heißt dass dann .page-anmeldeformular?

Wir werden uns nicht in unwichtigen Details verhaspeln, ich tue mein Bestes. Kleine Abweichungen werden sein, das war vorher klar und macht nicht die Welt aus, da hast du vollkommen Recht.

springers54 commented 5 years ago

https://reiki-lernen.de/anmeldeformular/ habe es jetzt mal probiert, aber so richtig funktioniert das nicht. grafik

ich möchte eigentlich davon ausgehen können, dass ich, wenn ich eine weitere Kontaktseite mache, das gleicht Styling habe?

Eine gewisse Parallaxe kann ich sehen, wobei man den Effekt noch etwas stärker machen könnte aus meiner Sicht. Die Felder sind aber hier nicht transparent, wie im Kontaktformular, Die Schriften haben eine andere Farbe..

Vorschlag: Neben der Fullwith-Page einen Seitentyp Kontaktformular machen, der die Basis des Stylings hat.

joergsteinhauer commented 5 years ago
springers54 commented 5 years ago

https://reiki-lernen.de/kontaktformular/ grafik

* Buttons sind grau, wenn sie inaktiv sind, d.h. wenn Voraussetzungen nicht erfüllt sind (z.b. nicht bestätigte AGB etc.)

Das ist bei dem andenren Formular auch so, dass man es eigentlich nicht absenden können dürfte, da Pflichtfelder nicht ausgefüllt sind. Wenn es möglich ist, würde ich diesen Effekt lieber nicht haben, sondern einfach nur gelbe Button

* was meinst du mit "Abstände zum Menü"?

ist jetzt da, vorher klebte das Bild an der Menüleiste, jetzt ist ein weißer Abstand da.

joergsteinhauer commented 5 years ago

Ich bin da ganz anderer Ansicht, was inaktive Buttons angeht. Es doch nur verwirrend, wenn ein normaler Button keine Aktion auslöst - man denkt, da ist etwas kaputt. Rein aus Usability-sicht sollte der inaktive Button schon als solcher erkennbar sein. Ich kann zusätzlich noch den entsprechenden Mauscursor einstellen, aber grau wäre schon gut. Das ist auch eigentlich ein gebräuchlihes Pattern in UX/UI.

springers54 commented 5 years ago

Du bist der Gestalter. Aber es sollte dann einheitlich auf allen Seiten funktionieren. Wenn im Kontaktformular gelb und im Anmeldeformular grau, dann würde ich das als Nutzer nicht verstehen.

joergsteinhauer commented 5 years ago

Im Kontaktformular gibts keine Pflichtfelder, deswegen ist der Button orange. Die Logik bei Buttons ist korrekt, vielmehr müssen die Formulare an sich optimiert werden. Z.b. müsste man noch klar ersichtlich machen, welche Felder pflicht sind - schaue ich mir noch an, das ist alles kein Problem, sobald der formular-Plugin da mitmacht.

springers54 commented 5 years ago

Die Pflichtfelder haben ein *. Das ist die übliche Praxis Man kann das Formular nicht absenden, wenn Pflichtfelder fehlen.

joergsteinhauer commented 5 years ago

Ok, ich habe gefunden, was dazu führte, dass das ganze Validierungsverhalten "getört" hat.

Im Anmeldeformular gibt es Checkboxen, diese sind pflicht. Dabei validiert CF7 das Formular anders, wenn es Checkboxen enthält: zuerst werden normale Eingabefelder validiert, danach die Checkboxen. Solange die Pflicht-Checkboxen nicht angeklickt wurden, bleibt der Button inaktiv. Komplett anders also, als wenn man keinen Text in die Pflicht-Eingabefelder eintippt. Nachzulesen: https://contactform7.com/acceptance-checkbox/

Zum Glück gibt es eine Einstellung, die das Validierungsverhalten bei Checkboxen genau so macht, wie bei Eingabefeldern. Was ich auch gemacht habe. Nun ist der button imemr orange, also NICHT inaktiv, wenn Pflichtfelder nicht ausgefüllt sind. Nun haben wir gleiches Verhalten überall.

springers54 commented 5 years ago

Ich muss das .leider nochmal aufmachen. Geh bitte auf die Seite der Kontaktformulare und scrolle die mal runter. Die Felder laufen aus dem Bild. Es sollte hier auch so sein, dass nur das Bild scrollt, aber die Texte stehen bleiben.

https://reiki-lernen.de/kontaktformular/ https://reiki-lernen.de/anmeldeformular/

grafik

Weiterhin funktioniert hier die gelbe Schrift nicht mit p class="title-h6"

Im Sinne der einheitlichen Gestaltung wäre es gut, wenn die Überschrift H1 wie bei den anderen Seiten oben steht und nicht Teil des Hintergrundbildes ist, also diese bitte aus der Gestaltung rausziehen.

joergsteinhauer commented 5 years ago

Ja, das parallax Zeug scheint überall noch buggy zu sein. Rest sollte kein Problem werden.

springers54 commented 5 years ago

Das Parallaxezeug sollte auch hier kompett weg.

joergsteinhauer commented 5 years ago

Was meinst du damit?

Bitte die Seitenüberschrift aus dem Hintergrundbild nehmen

springers54 commented 5 years ago

Auf allen Themen- Übersichtsseiten steht die H1 oben, dann kommt das Bild. Im Formular ist die H1 im Bild.

springers54 commented 5 years ago

Ich habe jetzt mal etwas gebastelt: grafik

So würde es prinzipiell gehen, es stört nur, dass die Felder weiß sind und nicht halbtransparent, so dass man noch etwas vom Hintergrundbild sehen kann. Kannst du das noch umsetzen?

grafik

Wenn du dafür vielleicht eine weitere Klasse machen könntest? https://reiki-lernen.de/kontaktformular

joergsteinhauer commented 5 years ago

Ein Screenshot hilft immer besser... Aber nun weiß ich, was gemeint ist.

Ich löse das eher über ein Template, weil der Umbau im Content so doch nicht ganz sinnvoll ist und nur mit viel Arbeit und extra HTML verbunden ist.

springers54 commented 5 years ago

Wir haben 2 Seiten, wo das Formular nach Außen gezeigt wird, das ist also kein Aufwand. Außerdem haben wir hier die volle Gestaltungsmöglichkeit, könnten selbst jederzeit ein anderes Bild einsetzen. Für mich ist nur das Problem zu lösen, dass die Felder nicht weiß, sondern halbtransparent sind.

Ein Screenshot hilft immer besser... Aber nun weiß ich, was gemeint ist.

... verstehe ich nicht. Hatte ich doch geschickt.

joergsteinhauer commented 5 years ago

... verstehe ich nicht. Hatte ich doch geschickt.

ja, aber nicht gleich bei der Anforderung ;-) egal.

Habe das Template "Ganzseite mit Hintergrund" nun soweit angepasst, dass alles passt: https://reiki-lernen.de/anmeldeformular/

Es ist nicht richtig, das Layout im Editor zu machen.

springers54 commented 5 years ago

grafik

und jetzt deine Variante: grafik

Sorry, da gefällt mir die obere viel besser, die Schriften, die Größen, die Abstände, die Farben. Also bitte nur die Felder halbtransparent und den Rest so lassen

springers54 commented 5 years ago

grafik

Die Headings stimmen dann auch nicht

joergsteinhauer commented 5 years ago

Die Größen, Farben etc sind nicht das Prioblem, ide passe ich an. Viel mehr gings mir hier darum, das Layout-Zeug nicht in den Content zu verschieben. Außerdem geht in deiner Variante das Hintergrundbild nicht bis zum Rand - das sieht nun wirklich nicht gut aus. Ich mach mich noch mal ran, das sind Kleinigkeiten...

springers54 commented 5 years ago

Ja, mit dem Rand hast du auf jeden Fall Recht.

springers54 commented 5 years ago

Die Überschriften habe ich angepasst, die Größen und Farben musst du nochmal kontrollieren

joergsteinhauer commented 5 years ago

Habe es angepasst.

Die orange Überschrift hat un folgenden Markup:

<p class="title-h6 has-style-primary">[...]</p>

Die Klasse has-style-primary sorgt für die Farbe, diese Klasse kannst du übrigens nach belieben überall auf die H-Titel oder auf alle Elemente, die bereits eine Klasse title-h[...] haben, setzen - falls du die Titel in orange haben möchtest.