5 Schritte zum einfachen Kontaktformular mit Contao

Ein einfaches Kontaktformular ist mit Contao und dem Formulargenerator in 5 einfachen Schritten schnell erstellt. Wir geben außerdem ein wenig CSS für das fertige Kontaktformular und ein paar Tips zur Usability und Datenschutz mit auf den Weg.

Einfaches Kontaktformular mit Contao erstellen Theme

Wer über seine Website eine einfache Kontaktaufnahme ermöglichen oder andere Daten erfassen möchte - vom Kontakt über einen Login bis hin zu einer einfachen Gutscheinanfrage - der benötigt Eingabefelder, die der User ausfüllen kann. Genau für diesen Fall gibt es in Contao den Formulargenerator. Mit dessen Hilfe können wir alle Arten von Eingabeformularen erstellen und die erfassten Daten in einer Datenbank speichern lassen, um sie an anderer Stelle weiterzuverarbeiten.

Der Formulargenerator ist leicht zu verstehen. In diesem Tutorial erstellen wir ein einfaches Kontaktformular in 5 einfachen Schritten und geben ein paar Tips, worauf geachtet werden sollte.

Zwei wichtige Anmerkungen gibt es im Zusammenhang von Formularen vorweg noch zu erwähnen:
1.) Wer Formulare einsetzt, sollte seine Contao Version auf dem aktuellen Stand halten. Formulare sind für Hacker immer der erste Angriffspunkt und einige der älteren Contao Versionen sind über das Formular tatsächlich angreifbar.
2.) Wer persönliche Benutzerdaten erfasst, sollte in jedem Fall eine HTTPS Verbindung für seine Website verwenden. Dieses ist mittlerweile sogar gesetzlich vorgeschrieben!

In 5 Schritten zum einfachen Contao - Kontaktformular

1. Zwei Seiten über die Seitenstruktur anlegen (Kontakt, Danke)

1. Zwei Seiten über die Seitenstruktur anlegen (Kontakt, Danke)
Wir gehen bei diesem Beispiel von einem einfachen Kontaktformular aus. Nach dem Ausfüllen und Absenden des Formulars soll der User auf eine Seite weitergeleitet werden, auf welcher sich für Senden der Daten bedankt wird.
Da wir die Seiten bei der Konfiguration des Formulars angeben werden, richten wir die Seiten vor der Formular-Erstellung ein. Dafür gehen wir in die Seitenstruktur von Contao und legen eine neue Seite mit dem Titel "Kontakt" an. Die Danke-Seite legen wir ebenfalls neu an und legen sie unter die Kontaktseite. Da diese Seite nur aufgerufen werden soll, nachdem ein Formular abgesendet wurde, wählen wir unter den "Experten-Einstellungen" auf dieser Seite die Option "Im Menü verstecken" und speichern anschließend unsere Einstellungen.

2. Neues Formular anlegen

Nun können wir in der Contao-Backendnavigation unter Inhalte > Formulargenerator ein "Neues Formular" anlegen. Als Titel geben wir sinngemäß "Kontaktformular" ein und wählen für die Weiterleitungsseite unsere soeben angelegte "Danke-Seite" aus.
Unter dem Punkt "Formular-Konfiguration" wählen wir die Option "Tabellenloses Layout" aus, dagegen ist die Option "HTML-Tags erlauben" für unser Beispiel erst einmal uninteressant.

Unter dem Reiter "Formulardaten versenden" wählen wir "Per E-Mail" versenden und müssen nun im nächsten Schritt die E-Mail-Adresse angeben, an welche die Formulardaten gesendet werden sollen, sowie den dazugehörigen Betreff.

Im nächsten Schritt können wir uns zudem entscheiden, in welchem Format die Daten gesendet werden (Rohdaten, XML-Datei, CSV-Datei, E-Mail) und ob leere Felder in der Mail ausgelassen werden sollen.

Wählen wir unter dem Reiter "Formulardaten speichern" eine Zieltabelle, werden die gesendeten Daten zudem in der Datenbank gespeichert. Die dort gespeicherten Daten können wir dann an anderer Stelle wieder auslesen und ggf. je nach Anwendungsfall statistisch auswerten.

Unter "Experten-Einstellungen" geben wir nun noch die gewünschte Übertragungsmethode ein, in unserem Fall ist dies POST. Diese Übertragungsmethode hat gegenüber der GET-Variante den Vorteil, dass die Daten nicht in der URL übergeben werden. Das macht die Übertragung einerseits sicherer und wir können andererseits mehr, bzw. größere Datenmengen übertragen.
Die GET-Einstellung wird hingegen nur noch in Ausnahmefällen benötigt.

Auch die Option "HTML5-Validierung deaktivieren"ist für uns uninteressant: Moderne Browser bieten mit HTML5 eine automatische Prüfung der Eingabefelder an. Das bedeutet, dass der Browser den Benutzer das Formular nicht absenden lässt, wenn er zum Beispiel in einem Eingabefeld für eine URL eine ungültige Adresse eingegeben wurde.
Das Ganze funktioniert allerdings etwas leidlich. So lässt Firefox in seinem URL-Feld auch Eingaben ohne TLD zu. Demzufolge gibt uns Contao die Möglichkeit, die Validierung komplett auszuschalten und die Eingabeprüfung einfach selbst zu übernehmen. Für unser Beispiel genügt uns allerdings die default-Einstellung.

Nach dem Speichern und schließen haben wir damit auch schon unser erstes leeres Formular erstellt. Im nächsten Schritt legen wir nun die einzelnen Felder an.

3. Einzelne Formularfelder anlegen

Mit dem Stiftsymbol neben unserem soeben erstellten Formular können wir nun das erste "Neue Feld" erstellen. Hier bietet uns Contao bereits sehr viele verschiedene Möglichkeiten aus denen wir wählen können. Für unser einfaches Kontaktformular genügen uns zunächst die Felder Vorname, Nachname, E-Mail, ein Textfeld, sowie der Absenden-Button.

TIP

Fragen Sie nur Daten ab, die wirklich notwenig sind. Einerseits, weil Formulare eher benutzt werden, wenn der User möglichst wenig ausfüllen muss. Andererseits, weil bei der Erfassung von persönlichen Daten eine gesetzliche Verpflichtung zur Datensparsamkeit besteht.
Das bedeutet im amtsdeutsch, es dürfen nur jene Daten erfragt werden, die für die Ausführung des Geschäftsvorfalls unbedingt notwendig sind. Anders gesagt, das Geburtsdatum des Kunden darf nur eine Krankenkasse erfragen und speichern. Zum Warenverkauf ist dieses nicht notwendig und könnte sogar zu gegebenen Zeitpunkt von einem Konkurrenten abgemahnt werden.

Wir wählen also für das erste Feld, Vorname, den Feldtyp "Textfeld" und geben bei "Feldname" sinngemäß "Vorname" ein. Bei der "Feldkonfiguartion" können wir mit der Option "Pflichtfeld" auswählen, ob das Feld vom User vor dem Absenden des Formulars zwangsläufig ausgefüllt werden muss und ob eine Eingabeprüfung erfolgen soll. Ebenso kann hier ein Platzhalter angegeben werden.

Unter den "Experten-Einstellungen" finden wir weitere Konfigurationsmöglichkeiten und sinnvolle Vorgaben für unser Feld:
So könnten wir mit Hilfe der minimalen und maximalen Eingabenlänge ein Postleitzahlenfeld (für deutsche Postleitzahlen) so einstellen, dass nur fünfstellige Zahlen (in Kombination mit der Eingabeprüfung "numerische Zeichen") angenommen werden.

Über den Tab-Index können wir manuell die Abfolge der Eingabefelder angeben, wie diese mit dem Cursor durchsprungen werden.

Für unser einfaches Formular können wir aber hier bereits "Speichern und schließen" wählen und für Nachname und E-Mail-Felder die ersten Schritte wiederholen. Für das Textfeld wählen wir als Feldtyp "Textarea" und belassen die Einstellungen bei "Reihen und Spalten" auf den default-Werten von Contao (4 | 60). Beim letzten Reiter "Absende-Schaltfläche" wählen wir die Option aus und fügen damit automatisch den Absenden-Button hinzu. Auch dieser benötigt noch eine Bezeichnung, z.B. "Senden".

Nun haben wir unser Formular bereits so weit konfiguriert, dass wir es in unsere Kontaktseite einsetzen können.

Textarea im Contao Kontaktformular hinzufuegen

4. Formular in Seite einsetzen

Das Formular wird direkt in den Artikel unserer Kontaktseite eingesetzt. Wir legen also in den Artikeln unserer Kontaktseite ein neues Element vom Typ "Formular" an und wählen unser Kontaktformular aus der Liste aus. Nach dem Speichern und Schließen können wir unsere Seite aufrufen und sehen die einzelnen Formularfelder. Jetzt können wir auch die erste Testmail senden. Nach dem Ausfüllen und Absenden werden wir automatisch auf unsere Danke-Seite weiter geleitet. Sofern wir noch keinen schönen Dank-Satz in den Artikel der Danke-Seite geschrieben haben, sehen wir jetzt vermutlich eine leere Seite -  das können wir aber ja nun ganz einfach noch nachholen...

5. CSS für ein einfaches Formular

Nach dem Einsetzen in die Seite fehlen natürlich noch ein paar Style-Angaben für das Formular. Mit den folgenden Zeilen CSS lässt sich folgendes Ergebnis erzielen. 

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 
/*---*/
/* Zentriert den äußeren div der Form auf der Seite */
/*---*/
.ce_form.tableless {
    width: 95%; 
    max-width: 1180px; 
    margin: 0 auto; 
    margin-top: 5%;
    font-family: Helvetica, Arial, sans-serif;
}
 
/*---*/
/* Styles für die input-Felder */
/*---*/
.widget.widget-text, .widget.widget-textarea {
    max-width: 500px;
    margin: 0 auto;
}
 
select, textarea, input[type="text"] {
    display: inline-block;
    height: 36px;
    margin-bottom: 10px;
    padding: 4px 6px;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    vertical-align: middle;
    border-radius: 0px;
    border: 1px solid #d0d0d0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
 
label, select, textarea, input[type="text"] {
width: 100%
}
 
label {
    font-size: 14px;
    color: #9a9a9a;
}
 
textarea {
height: 150px
}
 
 
/*---*/
/* Style für den submit-Button */
/*---*/
input[type="submit"] {  
    float: right;
    padding: 4px 12px;
    width: 200px;
    line-height: 26px;
    text-shadow: 0 1px 1px rgba(124, 124, 124, 0.75);
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    outline: none;  
    background: #b4e391;
    background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%);
    background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
    background: linear-gradient(to bottom, #b4e391 0%,#61c419 50%,#b4e391 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 );
    border: 1px solid #65C51F;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
zur Blogübersicht

Online Website Check

Einzelne Webseiten in wenigen Sekunden auf Fehler überprüfen, Optimierungspotenziale herausfinden und direkt verbessern. Kostenlos und anonym mit unserem Website Check Tools.

Hilfe & Support

Sie haben eine Contao Website und benötigen professionelle Unterstützung für Ihr Projekt im Bereich Webdesign, Programmierung, Software oder Online Marketing? Nehmen Sie Kontakt zu uns auf, wir freuen uns auf Sie.  

Cookie- & Analyse Einstellungen

Voreingestellt sind ausschließlich zulässige Cookies, für die keine Einwilligung benötigt wird. Analyse und Tracking, sowie weiteren funktionellen Cookies, können Sie unter "Mehr" durch Anwählen von "Ja" zustimmen.
Weitere Infos zu Cookies und Ihrem Datenschutz stellen wir Ihnen in der Datenschutzerklärung vor.

Verweigern
Akzeptieren
Mehr