Registrierungsformular umgestallten

Hallo, ich sitze schon seit Stunden an dem Registrierungsformular und komme nicht weiter.

Ich möchte gerne die Input und Labels etwas verändern, bzw. möchte eine Bootstrap Erweiterung einsetzen die auf die Inputfelder und Labels zugreift, dafür muss ich aber dort zusätzlich Klassen einbringen und das Label muss zwingend unter dem Input Feld sein.

Also müsste die Felder angelegt sein, damit das Script funktioniert

HTML-Code:

---

<div class="form-label-group widget widget-text form-group">
      <input type="text" name="lastname" id="lastname" class="text" placeholder="" value="" required>
          <label for="lastname">Nachname</label>
        </div>

---

Ich habe auch schon versucht den Code direkt in das Template zu setzen, das Script funktioniert, aber wenn ich das Feld leer lassen würde und das Formular absende, wir bei meinem Code kein Fehler ausgegeben, das funktioniert leider nur mit dem original Code im Template.

Deshalb meine Frage in welchem Template finde ich den Code der zur Generation der Formfelder genutzt wird? Ich denke wenn ich das dort anpasse, dann sollte das ja sicherlich funktionieren.

Grüße

Wenn Du wissen willst, welches Template die jeweiligen Abschnitte einer Contao-Seite generiert, dann schaltest Du den Debug Mode ein und schaust Dir den erzeugten HTML Code an. Dort sind bei eingeschaltetem Debug Mode Kommentare enthalten, die Dir sagen welches Template verwendet wurde.

Zitat:

---

Zitat von Supermann

Hallo, ich sitze schon seit Stunden an dem Registrierungsformular und komme nicht weiter.

Ich möchte gerne die Input und Labels etwas verändern, bzw. möchte eine Bootstrap Erweiterung einsetzen die auf die Inputfelder und Labels zugreift, dafür muss ich aber dort zusätzlich Klassen einbringen und das Label muss zwingend unter dem Input Feld sein.

---

Wenn Du "eine Bootstrap-Erweiterung" einsetzen möchtest, dann wäre der vermutlich bessere Weg, erst einmal zu schauen, welche das sein wird, dann zu schauen, ob sie eine Komponente für Formularlayouts mitbringt und im Fall der Fälle diese auch zu konfigurieren (was in den Fällen, die ich nutze, durch dezidierte Formularkomponenten-Templates möglich ist).

Das Label würde ich persönlich aus semantischer Sicht eher nicht unter dem Input stellen, sondern das Imput-Feld umschliessen lassen. Siehe dazu beispielsweise https://www.mediaevent.de/html/label...3%BCpft%20sind. Optisch kann man es per CSS ja durchaus an die Stelle befördern, an der man es haben möchte.

Hallo, danke für die Infos. Ich habe mir diverse Contao Bootstrap Erweiterungen angesehen und auch testweise installiert, aber keine Erweiterung machte das was ich eigentlich wollte, bzw. damit die Erweiterungen funktionierten musste man einiges an weiteren Contao Erweiterungen und Bootstrap Komponenten installieren, ich fand das etwas viel, denn ich will ja nur die Formfelder der Formulare umgestallten.

Also was ich eigentlich möchte ist dass die Labels oberhalb des Inputs verschwinden, damit der Kunde aber weiß was in das Inputfeld eingegeben wird, benötige ich dann wenigstens einen Placeholder, diese Möglichkeit habe ich aber bei dem Registrierungsformular nicht, also muss ich ein Script einsetzen, welches die Labels entfernt und den dort enthaltenen Text in einen Placeholder setzt, was ich bisher auch gemacht habe. Nur funktioniert das nicht bei einem Select, also muss ich das versuchen irgendwie per CSS zu gestallten.

Ich habe auch schon versucht per CSS die Labels in dem Input zu platzieren, was ja ganz einfach funktioniert, nur bräuchte in dann wieder ein Script welches das Label bei der Eingabe des Feldes unsichtbar macht und da die meisten Sripte voraussetzen das man den Labels oder Inputfeldern eine CSS-Klasse zuweisen kann, ist das bisher für mich ausgefallen, da ich nicht weis wie ich dort rankommen soll, zumindest nicht bei dem Registrierungsformular, das Login ist kein Problem, da habe ich die Fleder manuell im Template angelegt.

Wenn von Euche jemand ein Script oder eine Möglichkeit kennt wie ich das per CSS umsetzen kann, dann würde ich mich freuen.

Was ich letztendlich erreichen möchte ist, das ich kein Label mehr oberhalb des Registrierungsformulares mehr habe, sondern dieses in dem Inputfeld auftaucht und bei ausfüllen entweder verschwindet, oder was ich eigentlich wollte, kleiner nach links oben wandert.

Ein Beispiel dazu wie ich mir das vorgestellt hatte ist:

HTML-Code:

---

https://iforgot.apple.com/password/verify/appleid?r=1&language=DE-DE

---

Grüße

1.) Wozu dann Bootstrap?

2.) Du solltest mal selbst etwas tiefer graben. Wenn Du ein Formular mit dem Contao-Formgenerator baust, dann kannst Du dabei auswählen, welches Template benutzt wird.

3.) Wenn Du das angeschaut hast, dann weisst Du ja, welches Template Du verändern möchtest.

4.) Das ist dann a) keine Raketentechnik mehr und b) kannst Du dann vermutlich das CSS direkt von der Apple-Form klauen (bzw. Dich davon inspirieren lassen, was die mit :focus machen).