Mehrseitige Formulare in Contao erstellen
In diesem Blogbeitrag zeige ich euch wie man mehrseitige Formulare in Contao erstellen kann.
Erweiterung installieren
Als erstes muss dafür die Erweiterung Mehrseitige Formulare von Terminal42 installiert werden. Dafür meldest du dich im Contao Manager an, suchst unter dem Menüpunkt Entdecken nach dieser Erweiterung, klickst auf Hinzufügen, wechselst anschließend wieder zum Menüpunkt Pakete und startest die Installation über den Button Änderungen anwenden. Anschließend musst du noch das Install-Tool aufrufen und die Datenbank aktualisieren.
Formular anlegen
Nun legst du im Contao-Backend ein neues Formular mit den gewünschten Feldern an. Um Formularfelder auf einer neuen Seite darzustellen, platzierst du ein Element vom Typ Seitenumbruch, legst eine Bezeichnung für die Seite sowie für den Zurück- und Weiter-Button fest. Statt eines Absenden-Buttons muss am Ende des Formulars wieder ein Seitenumbruch-Element platziert werden. Statt Weiter kann man dann z. B. Absenden eintragen.
Elemente im Artikel platzieren
Das angelegte Formular kannst du nun in einem beliebigen Artikel platzieren. Zusätzlich ist es auch noch möglich die entsprechenden Schritte und einen Fortschrittsbalken anzuzeigen.
Um einen Fortschrittsbalken darzustellen, legst du ein HTML-Element mit folgendem Inhalt an. In den zwei Inserttags muss * noch durch die ID des eben angelegten Formulars ersetzt werden. Ebenfalls müssen noch die Leerzeichen zwischen den geschweiften Klammern entfernt werden, da sie sonst von Contao nicht interpretiert werden.
<div class="progress">
<div class="progress-bar">
<div class="progress-bar-inner" style="width:{ {mp_forms::*::percentage} }%"></div>
</div>
<div class="numbers">{ {mp_forms::*::numbers} }</div>
</div>Um die Schritte anzuzeigen legst du ein Modul vom Typ MPForms - Schritte an, wählst das Formular aus und platzierst es in dem Artikel.
Wenn man dann noch etwas CSS definiert, würde es z. B. im ODD Theme wie in den nachfolgenden Screenshots aussehen.
/*
* etwas eigenes CSS am Beispiel des ODD Theme
*/
.progress {
margin: 0 0 20px;
height: 30px;
position: relative;
}
.progress-bar {
width: 100%;
height: 100%;
background: #fff;
}
.progress .numbers {
position: absolute;
color: #fff;
font-size: 18px;
height: 100%;
padding: 0 10px;
}
.progress-bar-inner {
background: #A3CC00;
height: 100%;
}
.mod_mp_form_steps ul {
list-style: none;
padding: 0;
}
.mod_mp_form_steps ul li {
display: inline-block;
padding-right: 30px;
}
Wenn dir dieser Artikel gefallen hat, dann wirst du pdir lieben! Erfahre mehr, wie du pdir unterstützen kannst oder schau dir unsere Produkte an, lass dir den pdir-Unterschied zeigen!
