Contao (Teil 15): Formulare anlegen

Contao bringt einen eigenen Formulargenerator mit. Dieser ermöglicht die einfache Erstellung von durchaus anspruchsvollen Formularen. Die von den Besuchern eingetragenen Daten können dabei wahlweise per E-Mail verschickt oder in der Datenbank gespeichert werden. In diesem Tutorial wird das Formulargerüst erstellt. Die eigentlichen Formularinhalte werden dann im nächsten Tutorial eingefügt.

Wir empfehlen:
Contao CMS-Training

Dank des Formulargenerators lassen sich Formulare erstellen, ohne dass man sich mit HTML auskennen muss.

Aufgerufen wird das Tool über Inhalte>Formulargenerator.

In diesem Tutorial wird schrittweise ein Kontaktformular erstellt. Nach dem Absenden des Formulars werden die Benutzer auf eine Danke-Seite umgeleitet. Diese Seite solltet ihr als Erstes erstellen.

Ruft dazu Layout>Seitenstruktur auf und folgt dem Link Neue Seite. Die Danke-Seite wird als Unterseite von Kontakt definiert. Klickt also das Symbol mit dem nach rechts zeigenden Pfeil an. In dem sich öffnenden Dialogfenster werden die folgenden Einstellungen vorgenommen:

Seitenname = Danke
Seitentyp = Reguläre Seite
Robots-Tag = noindex, nofollow
Nicht durchsuchen aktivieren
In der Sitemap zeigen = Nie anzeigen
Im Menü verstecken aktivieren
Seite veröffentlichen aktivieren

Mit Speichern und schließen übernimmt man die Einstellungen. Insgesamt sollte die Seitenstruktur folgendermaßen aussehen:

Die Danke-Seite sollte man noch mit den entsprechenden Inhalten versehen. Ruft dazu Inhalte>Artikel auf und klickt bei Danke [Hauptspalte] auf das Stiftsymbol.

Folgt in dem sich öffnenden Fenster dem Link Neues Element. Nachdem die Position des Elements festgelegt ist, werden die folgenden Einstellungen vorgenommen:

Elementtyp = Überschrift
Überschrift = Herzlichen Dank für Ihre Nachricht.

Mit Speichern und neu übernimmt man die Angaben. Dem neuen Element weist man diese Eigenschaften zu:

Elementtyp = Text
Text = Wir nehmen schnellstmöglich Kontakt mit Ihnen auf.

Übernommen werden diese Angaben mit Speichern und schließen.

Das Formular anlegen

Die Danke- und die Kontakte-Seite stehen also. Nun geht es mit der Definition des eigentlichen Formulars weiter. Und dafür steht in Contao der Formulargenerator zur Verfügung, den ihr unter Inhalte aufrufen könnt.

Nach dem ersten Öffnen ist die Übersicht natürlich noch leer. Klickt daher direkt auf den Link Neues Formular.

In dem sich daraufhin öffnenden Fenster werden zunächst allgemeine Angaben zum Formular gemacht. Gebt als Titel Kontaktformular an. Verwendet wird der Titel von Contao ausschließlich für die interne Verwaltung und die Darstellung im Backend. Nehmt also einen Namen, mit dem ihr auch noch in ein paar Monaten etwas anfangen könnt. Ruft anschließend unter Weiterleitungsseite auf Auswahl ändern.

In dem sich öffnenden Fenster wird die zuvor erstellte Danke-Seite ausgewählt und mit Anwenden übernommen.

Contao erstellt auf Wunsch das Formular ohne Layouttabellen, was man durch Aktivieren der Option Tabellenloses Layout bestätigt.

Aktiviert man die Option HTML-Tags erlauben, kann in den Formularfeldern von den Besuchern für die Formatierung HTML-Syntax verwendet werden. Prinzipiell braucht man diese Option nicht zu aktivieren, da viele E-Mail-Clients ohnehin HTML-Elemente automatisch herausfiltern.

Nun könnt ihr festlegen, ob die Formulardaten per E-Mail verschickt werden sollen. Aktiviert man die Option Per E-Mail versenden, werden zusätzliche Felder eingeblendet.

In das Feld Empfänger-Adresse tragt ihr üblicherweise eure eigene E-Mail-Adresse ein. An die hier hinterlegte Adresse werden die Formulardaten geschickt. Das, was ihr in das Betreff-Feld eintragt, wird dann tatsächlich als Betreffzeile der jeweiligen E-Mails genommen.

Wichtig ist zudem das Feld Datenformat. Denn darüber legt man letztendlich fest, in welcher Form die Daten übermittelt werden sollen. Standardmäßig ist Rohdaten eingestellt.

Dadurch bekommt ihr die eingetragenen Formulardaten als normalen Text in der E-Mail zugeschickt. Alternativ dazu kann man sich die Daten auch im XML- und CSV-Format zusenden lassen. Ebenso könnt ihr E-Mail einstellen. Bei dieser Variante werden von Contao allerdings ausschließlich solche Formularfelder beim Versand berücksichtigt, welche die Namen Name, E-Mail, Subject, CC oder Message haben. Zudem können Anhänge mit verschickt werden. In der E-Mail ist dann tatsächlich nur das enthalten, was im Feld Message steht. Aus den anderen Daten generiert Contao den E-Mail-Header.

Die Daten in der Datenbank speichern

Ihr könnt durch Aktivierung der Option Eingaben speichern dafür sorgen, dass Contao die Formulardaten in der Datenbank speichert. Sobald man das Kontrollkästchen aktiviert, ist ein zusätzliches Auswahlfeld zu sehen.

Darüber lässt sich die Datenbanktabelle auswählen, in der die Formulardaten gespeichert werden sollen. Aber Achtung, mit dem Angeben der Tabelle ist es nicht getan. Tatsächlich müsst ihr die Zieltabelle anpassen. In dieser muss nämlich für jedes Formularfeld ein eigenes Tabellenfeld definiert werden. Das geht dann übrigens nicht direkt in Contao, sondern muss über ein entsprechendes Tool wie beispielsweise phpMyAdmin erledigt werden.

Die Übertragungsmethode

Im Bereich Experten-Einstellungen verbirgt sich das Feld Übertragungsmethode.

Standardmäßig ist in diesem Feld POST eingestellt. Alternativ dazu könnt ihr auch die GET-Methode wählen. In diesem Zusammenhang taucht immer wieder die Frage nach der richtigen Übertragungsmethode auf. Bei GET werden die Daten vom Browser direkt über die Adresse übergeben.

http://www.psd-tutorials.de/formular_verarbeiten.php?name=Michael

Das ist so natürlich zunächst einmal legitim. Problematisch wird das Ganze allerdings, wenn beispielsweise sensible Daten wie Passwörter übertragen werden. Weiterer Nachteil von GET ist die Begrenzung der übertragbaren Datenmenge. Tatsächlich können nämlich nur so viele Zeichen übertragen werden, wie auch in die Adresszeile des Browsers passen.

Mehr als 1024 Zeichen sind hier oftmals nicht möglich. Das reicht für kleinere Nachrichten, umfangreichere könnt ihr dann nicht empfangen. Grund genug also, POST zu verwenden. (Wobei hier der Hinweis nicht fehlen darf, dass auch POST nicht sicher ist, wenn es um die Übertragung der Daten geht. Allerdings sehen die URLs einfach hübscher aus, weil darin keine Parameter enthalten sind).

GET hat allerdings durchaus auch Vorteile. So können die Zielseiten direkt als Lesezeichen/Bookmarks hinterlegt werden. Die Daten sind dann tatsächlich unverändert erreichbar. Bei POST sind die Daten hingegen nicht verfügbar.

Mit Speichern und schließen wird das Formular angelegt. Daraufhin landet man in der Übersicht, in der alle bislang erstellten Formulare zu sehen sind. Hier könnt ihr bei Bedarf die Formulare über das Stiftsymbol erneut zum Bearbeiten aufrufen.

Damit ist das Formular erstellt. Was jetzt noch fehlt, sind die eigentlichen Formularfelder. Mehr zu diesem Thema dann im nächsten Tutorial.

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