toujou
+49 911 23980-870

Formulare anlegen

In toujou steht Ihnen das TYPO3-Modul für Formulare in vollem Umfang zur Verfügung. In diesem Tutorial erfahren Sie, wie Sie Formulare anlegen und wo sich Ihr toujou-Backend-Menü von anderen TYPO3-Installationen unterscheidet. Wie Sie angelegte Formulare auf der Website integrieren, erläutern wir an dieser Stelle.
Anleitung   Video-Tutorials   Hinweise, Tipps & Tricks


Schritt für Schritt

Übersicht der Einträge

  • Mit Klick auf das Icon Formulare im Strukturbaum Ihrer Website erscheint eine Übersicht Ihrer Formulare. In toujou ist standardmäßig ein Kontaktformular angelegt.
  • Mit Klick auf den Titel eines Formulars können Sie dieses direkt bearbeiten.
  • Mit Klick auf + Formularname legen Sie ein neues Formular an. Es ploppt ein neues Fenster auf und Sie haben die Wahl zwischen einem leeren Formular und einem vordefinierten Formular. Ersteres legen Sie komplett neu an. Letzteres greift auf eine bestehende Anordnung von Elementen eines anderen Formulars zurück. Entscheiden Sie sich für das vordefinierte Formular, müssen Sie im nächsten Schritt das entsprechende Formular auswählen (siehe Screenshot).
  • Da es sich um ein äußerst umfangreiches Modul mit vielen individuell anpassbaren Feldern und Funktionen handelt, finden Sie alle notwendigen Schritte im Video-Tutorial detailliert erläutert.

Formular an (verschiedene) E-Mail Adressen schicken lassen

  • Möchten Sie ein Formular je nach Betreff/ an verschiedene Ansprechpartner schicken lassen, nutzen Sie dafür das Element Einfachauswahl (Single Select) im Bereich Elemente auswählen.
  • Benennen Sie das Feld, indem Sie im Feld Label den Text eingeben, beispielsweise Betreff / Kontaktgrund.
  • Tragen Sie unter Optionen im Feld Label den Betreff bzw. den Grund der Kontaktaufnahme ein, beispielsweise Suppport, Vertrieb o.ä. Hinterlegen Sie die dazugehörige E-Mail-Adresse im Feld Value. Speichern Sie die Einstellungen.
  • Im Finisher hinterlegen Sie als Zieladresse im Feld E-Mail Adresse im Bereich Empfänger das Feld Einfachauswahl (Single Select) mit den geschweiften Klammern, beispielsweise so: {singleselect-2}. Beachten Sie auch die weiteren Hinweise zum Finisher in den Hinweisen.
  • WICHTIG: Achten Sie zudem darauf, dass im Feld Adresse des Absenders noreply@domain.de (Domain mit eigener Domain austauschen) steht. Variablen wie {email-1} sollten in diesem Feld nicht verwendet werden.

Daten für mehrere Personen in einem Formular abfragen

  • Um bestimmte Informationen wie Name und E-Mail-Adresse für mehrere Personen innerhalb eines Formulars auf einmal abzufragen, nutzen Sie das Element Repeatable Container. Damit lassen sich alle im Container hinterlegten Elemente gebündelt mehrfach anzeigen.
  • Wählen Sie zunächst aus den Elementen im Formular die Option Repeatable Container aus. Klicken Sie das Element anschließend im Formular an (Screenshot rechts), sodass es blau umrahmt wird. Klicken Sie nun auf das +-Icon und wählen Sie die Option »innen« aus, um weitere Elemente in den Container hinzuzufügen. Bei der Auswahl und Anzahl der Elemente sind Sie frei.
  • Um weitere Elemente hinzuzufügen, können Sie alternativ auf das bereits hinzugefügte Element innerhalb des Containers klicken und das +-Icon wählen. 
  • Individualisieren Sie für User nutzbaren Container-Aktionen, indem Sie die Buttons zum Hinzufügen und Entfernen beschriften. Fügen Sie hierfür im Label Kopier-Button und Label Lösch-Button den gewünschten Text ein. Geben Sie dem Container einen Namen im Feld Repeatable Container. Über das Textfeld Maximale Anzahl an Kopien definieren Sie die Höchstzahl der Kopier-Möglichkeiten für User. 
  • Speichern Sie die Änderungen.

Spam bei Formularen: Wie gehe ich vor?

  • In toujou sind standardmäßig Spamfilter mittels Honeypots eingebaut. Diese arbeiten im Hintergrund, wodurch ein aktiver Spamschutz für Formulare auf Ihrer Website besteht. Mitunter können Bots diesen Schutz allerdings umgehen. Dann bieten Captchas einen zusätzlichen Schutz. 
  • Um ein Captcha einem Formular hinzuzufügen, gehen Sie in der Modulleiste unter Formulare auf das entsprechende Formular, über das die Spamanfragen kommen. Klicken Sie auf das Bearbeiten-Icon (Stift). Es öffnet sich die Formular-Maske mit allen Bausteinen. 
  • Fügen Sie das Element Captcha hinzu, indem Sie zunächst auf "Neues Element hinzufügen klicken" und anschließend im Bereich Fortschrittene Elemente das Captcha-Element wählen. 
  • Positionieren Sie per Drag'n'Drop das Element gegebenenfalls an die gewünschte Stelle. 
  • Speichern Sie die Änderungen.

Anmerkung zum Speichern von User-Daten: Bitte beachten Sie, dass über das Formular erhobene User-Daten aus Datenschutzgründen nicht im Backend gespeichert werden können. Eine mögliche Lösung: Der Finisher »Email an Empfänger« verschickt die Daten bei jedem ausgefüllten Formular an die hinterlegen E-Mail-Adresse(n). Diese können Sie anschließend selbst speichern und verwalten. Alternativ stellt toujou eine Schnittstelle zu Mautic zur Verfügung. Bitte sprechen Sie unser Service-Team darauf bei Fragen an.


User-Uploads DSGVO-konform verwalten

TYPO3 bietet Ihnen die Möglichkeit, Dateien, die von Ihren Usern hochgeladen werden, im Backend-System zu speichern (Modul: Dateiliste). Sollten Sie keine Einwilligung einholen, Dateien (Bilder, Dokumente, etc.) Ihrer Websitebesucher vorzuhalten, kann dies jedoch – abhängig von Ihren Datenschutzbestimmungen – gegen die geltende DSGVO verstoßen. In diesem Falle hält das Formular-Modul einen so genannten Finisher bereit, der Sie vor Verstößen schützt. In den folgenden Schritten erläutern wir Ihnen die Einrichtung dieses Finishers.

Dateiuploads ermöglichen

  • Die folgenden Schritte sind nur dann nötig und möglich, wenn Sie Ihrem Formular ein Feld zum Upload von Dateien oder Bildern hinzugefügt haben.
  • In unserem Beispiel sehen Sie im Formularfenster (Mitte) das Feld Dateiupload.
  • Weitere Voraussetzung, damit Dateien Sie erreichen, ist der Einsatz des Finishers E-Mail senden (Empfänger). Ganz unten innerhalb dieses Finisher-Settings sehen Sie das bereits aktivierte Kästchen Uploads hinzufügen. Diese Einstellung sollten Sie nicht verändern.
  • Beachten Sie, dass das Datenlimit in toujou standardmäßig bei 128MB liegt. 

Speichern im TYPO3-System unterbinden

  • Der voreingestellte Speicherort in toujou für von Usern hochgeladenen Dateien ist der Ordner user_uploads. Wie oben beschrieben, ist nicht automatisch sichergestellt, dass Sie hochgeladene Dateien im System speichern dürfen.
  • Damit User Ihnen Dateien einzig als Anhänge einer über das Formular generierten E-Mail zustellen, können Sie die Speicherung hochgeladener Dateien im System unterbinden.
  • Hierzu wählen Sie auf der rechten Seite einen zusätzlichen Finisher aus dem Dropdown-Menü: Uploads löschen.

Finisher verschieben & korrekt anordnen

  • Jeder neue Finisher eines TYPO3-Formulars erscheint zunächst unter den bereits angewählten Finishern.
  • WICHTIG: Die Reihenfolge der von Ihnen gewählten Finisher ist entscheidend, um den Versand von Formularen zu gewährleisten. So ist der Finisher Zu einer Seite weiterleitenRedirect to a page IMMER an den Schluss zu setzen. Der Finisher Uploads löschen – Delete uploads ist immer NACH den Finisher E-Mail senden (Empfänger) – Email to receiver (you) zu setzen.
  • Für den Fall, dass Sie Dateiuploads ermöglichen, lautet die korrekte Reihenfolge demnach:
  1. E-Mail senden (Empfänger)
  2. Uploads löschen
  3. Zu einer Seite weiterleiten
  • Verschieben Sie Ihre gewählten Finisher gegebenenfalls per Drag and Drop an die richtige Stelle (siehe Screenshot).
  • Speichern Sie Ihre Änderungen.

Video-Tutorials via jweiland.net

Um externe Video-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung.

Weitere Informationen finden Sie in unserer Datenschutzerklärung.

Kontakt-Formular bearbeiten

Das in toujou mitgelieferte Formular für die Kontaktaufnahme bearbeiten (vor allem hinsichtlich der Finisherangaben).

Laufzeit: 5'55"

1'15'': Finisher-Einstellungen

2'05'': E-Mail an Empfänger 

2'39'': Adresse und Name des Empfängers

3'34'': Reply-to-Adresse, CC und BCC-Optionen

5'09'': Format der E-Mail

Um externe Video-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung.

Weitere Informationen finden Sie in unserer Datenschutzerklärung.

Neues Formular erstellen

Wie Sie ein individuelles Formular erstellen und worauf Sie für die Funktionalität achten müssen.

Laufzeit: 23'59''

1'38'': Elemente hinzufügen (z.B. Text, E-Mail-Adresse, Telefonnummer, Bilderauswahl)

9'36'': Formular in der Frontend-Ansicht

10'06'': Einzelne Seiten beschriften (bei mehrseitigen Formularen)

11'42'': Finisher anlegen (Empfänger)

17'21'': Weitere Finisher-Optionen

19'55'': Formular auf Seite einbauen

Anmerkung zum Video »Kontakt-Formular bearbeiten«: Achten Sie darauf, dass im Feld E-Mail Adresse des Absenders stets die Adresse der  Domain (z.B. noreply@domain.de) steht. Die ab Minute 3'05'' beschriebene Anwendung »text-2« ist nicht mehr üblich.

Anmerkung zum Video »Neues Formular erstellen«: Sind im Finisher für ein Feld (z.B. CC und BCC) keine Dropddown-Möglichkeiten gegeben, können Sie jederzeit das gewünschte Zielfeld manuell ins Eingabefeld eintragen. Nutzen Sie dafür den Namen des Bausteins im Formuar, beispielsweise »text-1«. 

Allgemeine Anmerkung: Möchten Sie ein Geburtsdatum im Formular abfragen, raten wir zur Verwendung eines Textfeldes mit einem Platzhalter. Möchten Sie zwei Inhalte nebeneinander anzeigen, nutzen Sie das Element Grid-Zeile (Grid row) im Bereich der Containerelemente. Dabei können Sie auch die Verhältnisse für Desktop und mobile angeben. 


Hinweise, Tipps & Tricks

Wer TYPO3 kennt, weiß, dass viele Wege nach Rom führen. toujou ist TYPO3. Wir weisen Sie an dieser Stelle auf wichtige Informationen und den einen oder anderen Kniff hin, den Sie bei der Erstellung und Bearbeitung Ihrer Website beachten sollten.

In toujou fügen Sie ein fertig gestelltes Fomular über die Elementbibliothek als Content-Element auf der Website ein. Im Reiter Widgets steht Ihnen dafür das Element Mailform zur Verfügung. Eine Vorab-Ansicht des standardmäßig eingestellten Kontaktformulars finden Sie hier.

Bitte beachten Sie, dass Sie beim Hinzufügen eines Finishers Redirect to a page (wie im Video demonstriert) Besucher entweder zu einer bestehenden Seite Ihres Seitenbaums (z.B. der Startseite) oder zu einer eigens erstellten Formularbestätigungs-Seite umleiten. Wie man neue Seiten erstellt, haben wir im Tutorial Seiten/Navigation anlegen für Sie erläutert.

Reihenfolge der Finisher: Nutzen mehrere Finisher für ein Formular, achten Sie darauf, dass der Finisher Redirect to a page immer am Ende der Auflistung aller Finisher steht. Denn mit diesem Finisher beendet das System stets alle Finisher-Aktionen. 

Sollten E-Mails trotz korrekt hinterlegter Daten im Finisher nicht bei Ihnen ankommen, bitten wir um Übermittlung der SMTP-Daten. Damit sind die Daten gemeint, die zum Senden und Empfangen von E-Mails im Internet verwendet werden. Konkret benötigen wir:

  • Benutzername/Kontoname: Ihre E-Mail-Adresse
  • Passwort: Ihre persönliches Kennwort
  • Ein-/Ausgangsserver: Zu finden auf der Website des E-Mail-Providers
  • Port (in der Regel Port 25)

Um ein mehrschrittiges Formular (z.B. wie bei unserer Demo-Anfrage) zu erstellen, fügen Sie die einzelnen Schritte dem Formular über den Button “Neuen Schritt erstellen” hinzu. Für die einzelnen Bausteine innerhalb eines Schrittes gehen Sie wie beschrieben vor. 


Verknüpfte Elemente

Elemente aus der toujou-Elementbibliothek, die mit diesen Einstellungen in Verbindung stehen. 

Mailform


Website-Vorlagen für verschiedene Branchen toujou.de

Schnell gestalten und bequem verwalten

Testen Sie in einer kostenlosen und unverbindlichen Demo alle Möglichkeiten mit toujou. 

Wählen Sie aus zahlreichen Website-Vorlagen für unterschiedliche Branchen oder erstellen Sie Ihre professionelle Firmenwebsite von Grund auf selbst.

Direkt loslegen