Contao (Teil 16): Formularfelder einfügen

Tutorials 14. August 2013 – 4 Kommentare

Das Grundgerüst des Formulars steht. Was nun noch fehlt, sind die eigentlichen Inhalte, also die Formularfelder. Diese werden von Contao in zahlreichen Varianten zur Verfügung gestellt und lassen sich ganz bequem über den Formulargenerator in Formulare einfügen.

Wir empfehlen:
Contao CMS-Training

Um mit der Definition der Formularfelder zu beginnen, ruft man Inhalte>Formulargenerator auf. Klickt bei dem angelegten Kontaktformular auf das Stiftsymbol. In dem daraufhin angezeigten Dialogfenster folgt man dem Link Neues Feld.

Da es sich um das erste Element dieses Formulars handelt, fällt die Positionierung leicht, man wählt schlichtweg Oben einfügen.

Werft nun zunächst einen Blick in das Auswahlfeld Feldtyp. Darüber wird im Endeffekt bestimmt, was für ein Formularfeld man einfügen will. Hier wird bereits deutlich, wie komplex der Formulargenerator tatsächlich ist. So werden eben nicht nur einfache Textfelder angeboten, auch Fieldset-Elemente und Sicherheitsabfragen sind verfügbar.

Um euch die Funktionsweise des Formulargenerators zu demonstrieren, wird zunächst ein einfaches Textfeld mit einer entsprechenden Beschriftung erstellt. Stellt dazu den Feldtyp Textfeld ein. Der Feldname wird von Contao ausschließlich intern verwendet, er muss allerdings eindeutig sein. Zugewiesen wird er zudem dem name-Attribut des betreffenden Formularelements im Frontend-Quellcode. Anders sieht es mit der Feldbezeichnung aus. Was man hier einträgt, wird tatsächlich auf der Webseite angezeigt. Gebt als Feldbezeichnung beispielsweise Name an.

Muss das Feld vom Benutzer ausgefüllt werden, aktiviert man die Option Pflichtfeld. Unter Eingabeprüfung kann man bestimmen, ob das jeweilige Feld validiert, also auf gültige Eingaben hin kontrolliert werden soll.

Mit Speichern und schließen legt man das Feld letztendlich an. Auf diese Weise könnt ihr nun die notwendigen Felder in das Formular einfügen. Ein typisches Formular könnte sich aus folgenden Elementen zusammensetzen:

Feld Name

Feldtyp = Textfeld
Feldname = name
Feldbezeichnung = Ihr Name
Pflichtfeld = Ja

Feld E-Mail

Feldtyp = Textfeld
Feldname = email
Feldbezeichnung = Ihre E-Mail-Adresse
Pflichtfeld = Ja
Eingabeprüfung = E-Mail-Adresse

Feld Nachricht

Feldtyp = Textarea
Feldname = nachricht
Feldbezeichnung = Ihre Nachricht
Pflichtfeld = Ja

Feld Abschicken

Feldtyp = Absendefeld
Bezeichnung der Absende-Schaltfläche = Abschicken

Diese Einstellungen genügen bereits, um ein entsprechendes Formular angezeigt zu bekommen. Nach dem Speichern ist das Formular zunächst im Backend zu sehen.

Im Frontend kann man allerdings noch nicht auf das Formular zugreifen, da es noch nicht in die betreffende Seite eingebunden wurde. Das wird jetzt nachgeholt.

Öffnet dazu Inhalte>Artikel. In der Artikelübersicht klickt man bei der Kontakte-Seite neben Kontakte [Hauptspalte] auf das Stiftsymbol. Wählt nun Neues Element und legt die gewünschte Position fest. Entscheidend ist in dem daraufhin angezeigten Dialogfenster das Feld Elementtyp, in dem unter Include-Elemente der Wert Formular eingestellt werden muss. Im Feld Formular wählt man das gewünschte Formular aus.

Mit Speichern und schließen kann man die Angaben übernehmen. Ein anschließender Blick ins Frontend der Seite liefert das gewünschte Ergebnis.

Ihr könnt hier schon einmal die Grundfunktion des Formulars testen. Wenn ihr beispielsweise eine fehlerhafte E-Mail-Adresse eintragt und das Formular absenden wollt, gibt es eine Fehlermeldung.

Das Absenden des Formulars klappt übrigens nur, wenn tatsächlich auch ein E-Mail-Versand oder das Speichern der Daten in der Datenbank möglich ist, ansonsten gibt es eine Fehlermeldung. (Mehr zu diesem Thema gleich im Anschluss).

Das Formular selbst kann dann natürlich via CSS gestaltet werden. Dazu wirft man zunächst wieder einen Blick in den Frontend-Quellcode.

<div class="ce_form tableless block">
 <form action="index.php/kontakte.html" id="f3" method="post" enctype="application/x-www-form-urlencoded">
 <div class="formbody">
 <input type="hidden" name="FORM_SUBMIT" value="auto_form_3">
 <input type="hidden" name="REQUEST_TOKEN" value="af9e97b46159d27357f26e463d850f27">
 <label for="ctrl_2" class="mandatory"><span class="invisible">Pflichtfeld</span> Ihr Name<span class="mandatory">*</span></label> 
 <input type="text" name="name" id="ctrl_2" class="text mandatory" value="" required><br>
 <label for="ctrl_3" class="mandatory"><span class="invisible">Pflichtfeld</span> Ihre E-Mail-Adresse<span class="mandatory">*</span></label> 
 <input type="text" name="email" id="ctrl_3" class="text mandatory" value="" required><br>
 <label for="ctrl_4" class="mandatory"><span class="invisible">Pflichtfeld</span> Ihre Nachricht<span class="mandatory">*</span></label> 
 <input type="text" name="nachricht" id="ctrl_4" class="text mandatory" value="" required><br>
 <div class="submit_container">
    <input type="submit" id="ctrl_5" class="submit" value="Abschicken"> 
 </div>
 </div>
 </form>
 </div>

Umschlossen ist das Formular von einem div-Bereich mit der Klasse ce_form. Innerhalb des form-Elements gibt es zudem ein div-Element mit der ID formbody. Mit diesem Wissen ausgestattet, kann man sich an die Formatierung des Formulars machen. Hier mal ein Beispiel, wie sich das Formular anpassen lässt:

.ce_form  {
    background-color: #eeeeff;
    padding: 20px;
    border: 1px solid silver;
 }
 label {
    width: 20em;
    display: block;
    float: left;
 }
 input:focus, textarea:focus {
    background-color: yellow;
 }

Ein Blick ins Frontend der Seite liefert das gewünschte Ergebnis.

Die Formulardaten in der Datenbank speichern

Wenn ihr lokal mit XAMPP arbeitet, fällt der Test des Formulars schwer, da auf einer lokalen Umgebung üblicherweise kein E-Mail-Server konfiguriert ist. Zwar bringt XAMPP mit Mercury einen entsprechenden Server mit, der sollte allerdings nur in Ausnahmefällen genutzt werden. Verwendet man nämlich einen E-Mail-Server, ohne sich wirklich gut(!) mit dessen Konfiguration auszukennen, wird der eigene Rechner schneller zur Spam-Schleuder, als man bis drei zählt. Wer das Formular testen will, sollte daher die Daten in der Datenbank speichern. Ruft dazu – wenn ihr mit XAMPP arbeitet – http://localhost/phpmyadmin im Browser auf. Wählt im linken Fensterbereich die Datenbank, in der ihr Contao installiert habt.

Ganz unten im Fenster findet ihr den Bereich Erzeuge Tabelle. Tragt dort einen Namen (z.B. tl_formulardaten) ein und gebt die Spaltenanzahl an. Die Anzahl der Spalten entspricht dabei der Anzahl der im Formular vorhandenen Felder, plus eine Spalte für die ID. Mit OK übernimmt man die Einstellungen. Im nächsten Fenster tragt ihr jeweils unter Name die Namen der Formularfelder ein. Erwartet werden die Namen, die ihr den Formularfeldern über die Feldname-Felder zugewiesen habt. Unter Typ könntet ihr Text einstellen. (Auf die anderen Spalten der Tabelle gehe ich an dieser Stelle nicht ein, da das schlichtweg zu umfangreich wäre).

Bei der ID-Spalte nehmt ihr die folgenden Einstellungen vor:

Name = id
Typ = INT
Länge/Wert = 10
Attribute = UNSIGNED
• Aktiviert das Kontrollkästchen A_I

Mit Speichern werden die Einstellungen übernommen.

Die neu erstellte Tabelle muss nun noch in den Formulareinstellungen unter Eingaben speichern ausgewählt werden. Anschließend werden die Daten des Formulars tatsächlich in dieser Tabelle gespeichert.

Die Daten auf der Kontaktseite anzeigen

Hilfreich ist es natürlich immer, wenn den Besuchern, die das Formular abgeschickt haben, auf der Danke-Seite die eingetragenen Werte nochmals angezeigt werden. Für Contao 2.x gibt es hier einige Erweiterungen wie beispielsweise moretags. Momentan ist leider keine dieser Erweiterungen für den Einsatz in Contao 3.x geeignet. Ihr solltet daher in jedem Fall in regelmäßigen Abständen überprüfen, ob es entsprechende Weiterentwicklungen gibt. Ruft dazu die Seite der Extension (z.B. https://contao.org/de/extension-list/view/moretags.50009.de.html) auf. Entscheidend ist der Bereich Abhängigkeiten dieser Erweiterung.

Wenn hier Contao 3.x aufgeführt ist, kann man die Erweiterung nutzen.

Wir empfehlen:
HTML5- & CSS3-Video-Training

Unsere Empfehlung für dich

Contao-CMS-Training

Contao-CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • Über 8 Stunden Video-Trainings zum beliebten CMS Contao
  • 40 Praxis-Lektionen in Text/Bild als PDF (über 470 Seiten)
  • Blog, Newsletter, Google Maps, Formulare, Suchmaschinenoptimierung, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training

4 Antworten zu “Contao (Teil 16): Formularfelder einfügen”

  1. Markus sagt:

    Hallo,
    danke für die guten Trainings welche Sie zur Verfügung gestellt haben. Ich stehe gerade beim dem Punkt das ich die Formular formatieren möchte, scheitere aber an der Stelle an welcher der CSS code angepasst werden soll.
    Über das Backend finde ich leider keine Option den CSS Code im Formular zu bearbeiten.
    Aktuell ist Contao 2.11 im Einsatz.

    Viele Grüße
    Markus

  2. Die Formulare lassen sich in Contao fürs Frontend schön anlegen, übersichtlich für den Nutzer. Der per Email verschickte Inhalt der Formulare kommt aber ziemlich unübersichtlich beim Empfänger an: schlichte Textmails.Gibt es Möglichkeiten, diese Mails an die Empfänger etwas zu gestalten? Hilfreich wäre es schon, wenn nach jeder Formularzeile eine Leerzeile käme.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Folgende HTML-Elemente sind erlaubt:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>