Datenschutzeinstellungen

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern.

In dieser Übersicht können Sie einzelne Cookies einer Kategorie oder ganze Kategorien an- und abwählen. Außerdem erhalten Sie weitere Informationen zu den verfügbaren Cookies.
Gruppe Essenziell
Name Contao CSRF Token
Technischer Name csrf_contao_csrf_token
Anbieter
Ablauf in Tagen 0
Datenschutz
Zweck Dient zum Schutz der Website vor Fälschungen von standortübergreifenden Anfragen. Nach dem Schließen des Browsers wird das Cookie wieder gelöscht
Erlaubt
Name Contao HTTPS CSRF Token
Technischer Name csrf_https-contao_csrf_token
Anbieter
Ablauf in Tagen 0
Datenschutz
Zweck Dient zum Schutz der verschlüsselten Website (HTTPS) vor Fälschungen von standortübergreifenden Anfragen. Nach dem Schließen des Browsers wird das Cookie wieder gelöscht
Erlaubt
Name PHP SESSION ID
Technischer Name PHPSESSID
Anbieter
Ablauf in Tagen 0
Datenschutz
Zweck Cookie von PHP (Programmiersprache), PHP Daten-Identifikator. Enthält nur einen Verweis auf die aktuelle Sitzung. Im Browser des Nutzers werden keine Informationen gespeichert und dieses Cookie kann nur von der aktuellen Website genutzt werden. Dieses Cookie wird vor allem in Formularen benutzt, um die Benutzerfreundlichkeit zu erhöhen. In Formulare eingegebene Daten werden z. B. kurzzeitig gespeichert, wenn ein Eingabefehler durch den Nutzer vorliegt und dieser eine Fehlermeldung erhält. Ansonsten müssten alle Daten erneut eingegeben werden.
Erlaubt
Name FE USER AUTH
Technischer Name FE_USER_AUTH
Anbieter
Ablauf in Tagen 0
Datenschutz
Zweck Speichert Informationen eines Besuchers, sobald er sich im Frontend einloggt.
Erlaubt
Gruppe Analyse
Name Google Tag Manager
Technischer Name
Anbieter
Ablauf in Tagen 30
Datenschutz
Zweck Analysedaten für Google
Erlaubt
Gruppe Externe Medien
Name Google Kalender
Technischer Name
Anbieter
Ablauf in Tagen 30
Datenschutz
Zweck Google Kalender für die Vermietung des Seminarraumes
Erlaubt
Name Openstreetmap
Technischer Name
Anbieter
Ablauf in Tagen 30
Datenschutz
Zweck Karte
Erlaubt
Name Youtube
Technischer Name
Anbieter
Ablauf in Tagen 30
Datenschutz
Zweck Youtube Video
Erlaubt

Der MARKENZOO erklärt, wie man in Contao Formulare erstellt!

Der MARKENZOO erklärt kurz und knapp, wie ein Formular in Contao erstellt. Unser Beispiel: das Kontaktformular auf unserer Markenzoo-Website. Schaut es euch an!

Wie lege ich in Contao ein Formular an?

#contaotutorial

In diesem Video erstellen wir ein Standard-Kontakt-Formular, wie ihr es auch auf unserer Markenzoo-Seite sehen könnt. Mit Namen, E-Mail-Adresse, einem Nachrichten-Feld und dem Absendebutton.

Schritt 1: die Weiterleitungsseite erstellen

Bevor wir jedoch mit dem Formular starten, benötigen wir zunächst eine Weiterleitungsseite: eine Seite, auf die der Benutzer geschickt wird, nachdem er das Kontaktformular abgesendet hat.

Dafür gehen wir als Erstes in die „Seitenstruktur“ und legen eine neue Seite an. Für die Übersichtlichkeit bietet es sich an, diese Seite innerhalb von der Seite zu platzieren, in der ihr das Formular einbinden wollt.

Nachdem die Weiterleitungsseite erstellt ist, füllen wir diese jetzt mit Inhalt. Das machen wir, indem wir auf „Artikel“ klicken und Inhaltselemente einfügen. Ich habe hier zum Beispiel einen kurzen Dankes-Text erstellt. Somit haben wir den Punkt Weiterleitungsseite abgeschlossen und können nun mit der Erstellung eines Formulars beginnen.

Schritt 2: das Formular anlegen

Dafür klicken wir links auf „Formulare“ und klicken jetzt oben auf „neu“ – also auf das Plus – und legen das neue Formular an. Hierfür geben wir als Erstes den Titel ein. Das wäre in unserem Fall „Kontakt“ und legen dann eine Weiterleitungsseite fest. Zum Schluss wählen wir die Seite, die wir gerade erstellt haben.

Als Nächstes wollen wir, das unsere Formulardaten versendet werden. Das heißt, wir klicken hier auf „Per E-Mail versenden“ und können jetzt die Empfängeradresse eingeben – hier könnte man auch mehrere nehmen, die man mit einem Komma trennen müsste. Außerdem geben wir den Betreff für die E-Mail ein.

Was wir noch wählen können, ist das Datenformat. Wenn ich hier jetzt einmal auf das Fragezeichen klicke, sehen wir noch andere Varianten, die es gibt. Für unseren Fall lassen wir die „Rohdaten“, wie sie voreingestellt sind, so stehen. Zusätzlich könnte man in den Experteneinstellungen eine „Klasse“ oder eine „Formular-ID“ vergeben, das kommt in unserem Fall jedoch nicht infrage. Wir klicken nun auf „Speichern und bearbeiten“.

Wir landen gleich direkt in dem Formular, hier können wir jetzt starten und Felder hinzufügen. Um ein neues Feld anzulegen, klicken wir hier oben auf „neu“ und wählen nun, wo das Feld liegen soll. Unser erstes Feld, soll das Feld „Name“ werden. Dafür legen wir den Feldtyp „Textfeld“ fest. Wenn ihr euch hier nicht sicher seid, welcher Feldtyp der Beste ist, könnt ihr auf das Fragezeichen klicken. Dort wird der „Hilfeassistent“ aufgerufen, wo für jeden Feldtypen nochmal eine genaue Erklärung und Anwendung steht.

Als Nächstes legen wir den „Feldnamen“ fest, dieser dient zur Identifizierung. Das heißt, hier solltet ihr einen sinnvollen Namen nehmen. Dieser ist auch nur für das „Backend“, er wird im „Frontend“ nicht verwendet, dort wird die „Feldbezeichnung“ angezeigt. Die legen wir jetzt hier fest und geben einfach den Namen ein.

Als Nächstes kommen wir zu dem Feld „Konfigurationen“. Hier legen wir als Erstes fest, dass es ein Pflichtfeld ist, indem wir jetzt hier den Haken setzen. Wir könnten auch eine „Eingabeprüfung“ festlegen, was in unserem Fall aber nicht gebraucht wird. Zudem können wir auch einen Platzhaltertext eingeben. Das wäre dann ein Text, der angezeigt wird, bevor der Nutzer anfängt das Feld auszufüllen, zum Beispiel wie: „Hier bitte Ihren Namen eintragen“ oder „Bitte E-Mail-Adresse eintragen“.

Der nächste Punkt wären die „Experteneinstellungen“, hier müssen wir in unserem Fall jedoch nichts eingeben. Wir klicken jetzt einfach auf „Speichern und neu“.

Unser nächstes Feld, das wir anlegen wollen, ist das „E-Mail-Feld“. Dafür lassen wir den Feldtyp auf „Textfeld“ und geben einen Feldnamen ein, das wäre jetzt „E-Mail“ und als Feldbezeichnung geben wir auch einfach „E-Mail“ an. Danach kommen wir zu den Feldkonfigurationen. Hier setzen wir wieder den Haken bei „Pflichtfeld“ und diesmal nehmen wir aber eine Eingabeprüfung vor, und zwar wählen wir jetzt hier „E-Mail-Adresse“. Einen Platzhalter brauchen wir nicht und auch bei den Experteneinstellungen müssen wir keine Änderung vornehmen, hiermit wären wir auch schon mit dem E-Mail-Adresse-Feld fertig nun können wir wieder auf „Speichern und neu“ klicken.

Das nächste Feld, das wir brauchen, ist das „Nachrichtenfeld“. Dafür nehmen wir ein anderer Feldtyp, und zwar „Text Area“ – damit der Nutzer einfach ein bisschen mehr Platz hat, seinen Text einzugeben. Hier wählen wir jetzt wieder einen Feldnamen aus. In unserem Fall nehmen wir „Message“. Bei der Feldbezeichnung nehmen wir „Ihre Nachricht“. Wir setzten den Haken wieder bei Pflichtfeld, Eingabeprüfung und Platzhalter brauchen wir nicht. Wir könnten hier jetzt noch Konfigurationen für das Textfeld vornehmen mit Reihen und Spalten, das kann man aber genauso gut über das CSS lösen – in unserem Fall lass ich das jetzt weg und wir können auf „Speichern und neu“ klicken.

Was uns jetzt noch fehlt ist der Absendebutton ganz am Ende des Formulars. Dafür wählen wir bei dem Feldtyp „Absende-Feld“ aus und können jetzt die Bezeichnung der Absendeschaltfläche eingeben. Da nehmen wir jetzt einfach „Absenden“. Wir könnten das ganze jetzt auch als „Bildschaltfläche“ machen, das kommt jetzt aber in unserem Fall nicht infrage. Nun sind wir mit unserem Formular fertig und klicken auf „Speichern und schließen“ und haben somit alle Formularfelder erfolgreich angelegt.

Schritt 3: das Formular einbinden

Nachdem wir das Formular erstellt und alle Felder angelegt haben, müssen wir das Formular nur noch auf unserer Seite einbinden. Dafür haben wir die entsprechende Seite „Kontakt“ erstellt und auf der müssen wir das Formular integrieren, da sie derzeit noch leer ist. Dafür klicken wir hier oben auf „Artikel“ und bearbeiten jetzt die entsprechende Kontaktseite.

Bei dem „Elementtyp“ scrollen wir als Erstes runter zu den „Include-Elementen“ und wählen hier „Formular“ aus. Nun können wir bei den Include-Einstellungen das Formular, welches wir nehmen wollen, auswählen. Hier erscheinen auch alle Formulare, die wir im Formulargenerator erstellt haben. Wir wählen das „Kontaktformular“, denn das ist das, was wir gerade angelegt, und auf der Seite integriert haben wollen. Als Letztes klicken wir auf „Speichern und schließen“.

Nun haben wir erfolgreich ein Kontaktformular erstellt und das auf unserer Seite eingebunden.

Weitere Contao-Themen verständlich erklärt, findet ihr in unseren anderen Erklärvideos.

Zurück