Coole Sachen mit dem Dialog-Element, Teil 2

Moin!

Im Mai 2023 habe ich dir in der Flaschenpost von meinen Experimenten mit dem Dialog-Element erzählt. Und am Ende geschrieben, dass ich dir vielleicht ein anderes Mal von weiteren Versuchen berichte.

Heute ist dieses andere Mal. 😉

Vorher aber ein kurzer Blick zurück:

Früher gab es von uns die Erweiterung euf_overlay. Damit ließen sich in Contao Overlays bauen, die sich von selbst öffnen. Direkt beim Laden der Seite, nach 75 Prozent Scroll-Strecke oder genau dann, wenn jemand die Website verlassen wollte.

Weiterentwickelt haben wir sie nicht. Ungefragte Overlays gelten heute als schlechte Praxis, und auch Google sieht sie kritisch.

Das Problem war aber nie das Overlay. Das Problem war: Es kam ungefragt.

Wer dagegen auf „Mehr erfahren“ klickt, will mehr erfahren. Am liebsten, ohne dafür die Seite zu verlassen. In TORNADO öffnen wir Referenzen und News deshalb in einem Dialog.

Und in einem Kundenprojekt sollte ein mehrstufiges Anfrageformular per Button im Dialog aufgehen. Inklusive Bestätigung nach dem Absenden – im selben Fenster.

Das Tolle: Eine Erweiterung brauchst du dafür in Contao 5.3 nicht mehr. Ein Twig-Template reicht, und jede Elementgruppe wird zum Dialog. Was in die Gruppe passt, passt auch in den Dialog: Text, Bild, Video oder eben ein Formular. Geöffnet wird er über einen ganz normalen Link auf die ID der Gruppe.

Wie das geht, habe ich Schritt für Schritt in unserer Wissensdatenbank aufgeschrieben. Mit Template, JavaScript, SCSS und dem einen Haken, den Formulare im Dialog haben:

Beliebige Inhalte im Dialog: die Elementgruppe als Modal

Nutzt du das Dialog-Element inzwischen in deinen Projekten? Dann antworte mir gern auf diese Mail. Mich interessiert, wofür.

Erstma',
Dennis

PS: Wenn dich interessiert, wie wir die Schrittanzeige und die Icon-Auswahl im Formular gebaut haben, schreib mir. Dann greife ich das Thema in einer der nächsten Flaschenposten nochmal auf.