Mehrseitige Formulare mit Accordion

[aadursun]

Hallo,

hat jemand schon mehrseitige Formulare über das Akkordion umgesetzt?

Die Lösung über efg / sessionsform ist ja elegant, wenn ich aber mehrseitige Formulare in einen Artikel einbinde; dass muss man 4x klicken und 4x nach öffnen der Seite nach unten zum Formular scrollen.

Auch die Darestellung der mehrseitigen Formulare in der lightbox brachte mir keine Hilfe -> Hintergrund schwarz; bei Abändern des Hintergrundes auf weiß, kann man dann die Feldbezeichnungen nicht mehr lesen.

Da kam mir die Idee, ob man das Formular nicht aufteilen und die einzelnen "Seiten" in ein Akkordeon packen kann.

Gibt es hierzu Ansätze oder Lösungen, die ihr schon eingesetzt habt.


Grüße

aadursun

[dhe]

Hm,
bei einem Accordion muss der User auch 3x klicken (wenn das erste geöffnet ist), um die verschiedenen Teile zu bearbeiten.

Also wenn du dein Formular als Accordion haben willst, ist meiner Meinung nach etwas Programmieraufwand von Nöten.
Du musst dein Formular in 4 Teilen aufbauen, ich würde dazu Fieldsets nutzen (in den Formulareinstellungen "Tabellenloses Layout" einstellen).

Die Überschrift den Fieldsets wird später dein Toggler des Accordions.

Danach musst du JavaScript Code einbetten, je nach deinem einsetzten Framework (MooTools oder jQuery) muss du den Klick auf einen Toggler die Animation auslösen.

Gruß

[legalstuff]

dhe,

das wäre aber schade, wenn dem so sein sollte.

Denn auch ich möchte in kürze eine mehrseitige Anmeldung realisieren und dachte auch an eine Accordion-Lösung, kann aber kein JS.

Dann müßte ich das ja schon von vorneherein begraben, wenn ich Dich richtig verstehe.

Oder hat da jemand eine andere Lösung?

Ein WebDesigner muss ja nicht zwingend ein JS-Programmierer sein.
Ich kann mir irgendwie nicht vorstellen, dass es dafür keine bessere Lösung gibt.

[dhe]

Naja, eine Quick'n'Dirty Lösung wäre es noch, das passende HTML einzufügen, damit ein Accordion entsteht.

Ein Accordion ist in Contao ja so aufgebaut:

<div class="ce_accordion">
  <div class="toggler">Accordion Name</div>
  <div class="accordion">
  
  <!-- Inhalt -->
  
  </div>
</div>

Du könntest also um deine gewünschten Text, Select etc ... Felder jeweils den Anfang und das Ende "wrappen". Nutze dazu das "HTML" Feld in deinem Formulareditor.
Um ein Accordion zu beginnen, fügst du in dein HTML Feld das hier ein:

<div class="ce_accordion">
  <div class="toggler">Accordion Name</div>
  <div class="accordion">

Nach den Input Feldern, die gruppiert werden sollten, wieder als HTML Feld das hier:

  </div>
</div>

"Accordion Name" tauscht du dann mit der Überschrift deines Accordion Tabs aus.

Gruß
dhe

PS: Um als Webdesigner durchzugehen, sollte man meiner Meinung nach HTML fließend und JS die Basics kennen und können.

[aadursun]

@dhe

habe es so gemacht, wie du es beschrieben hast, aber ohne Erfolg.
Die Accordions werden alle oben angezeigt; die Felder werden von den Acc. nicht umschlossen.


Ich habe auch versucht den Akkordeon Umschlag in verschiedensten Konstellationen hinzuzufügen, geht alles auch net.

Hier der Umschlag

<div class="toggler active" aria-expanded="true" role="tab" tabindex="0"> 1 </div>
<div class="accordion" style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: auto; visibility: visible; opacity: 1;" aria-hidden="false" role="tabpanel">
<div>