Unsere auf TYPO3 basierende Website-Base beinhaltet eine Erweiterung, mit der Sie bequem Formulare bearbeiten und auf Ihrer Seite einbinden können. – Die sg_forms TYPO3 Extension liefert ein Backend Modul, mit dem man Formulare nach individuellen Wünschen und Bedürfnissen und ohne Programmierkenntnisse anlegen kann. Mit den dazugehörigen Inhaltselementen bzw. Plugins lassen sich die erstellten Formulare unkompliziert in die TYPO3 Seite integrieren. Sie sehen im Abschnitt weiter unten eine ausführliche Dokumentation zum Umgang mit dem TYPO3 Modul und im Anschluss ein Tutorial zu den Formular Inhaltselementen.

Backend Modul: Formulare

Im Modul Formulare erstellen und bearbeiten Sie angelegte Formulare. Sie werden diese nutzen, um Seiten-Besucher:innen eine Möglichkeit zu geben, Kontakt aufzunehmen oder sich z. B. zu einem Newsletter anzumelden.

Beim Bearbeiten von Formularen steht Ihnen frei, welche Informationen der Nutzer:innen hinterlassen muss und welche er freiwillig angeben kann. Bereits vorhandene Formulare können jederzeit angepasst und beliebig viele neue Formulare angelegt werden. Beim Erstellen von Formularen werden Sie schnell mit den Funktionen und der Arbeit mit diesem Modul vertraut werden.

Formular – Übersicht

Das erste, was Sie sehen, wenn Sie auf das Modul Formulare klicken, ist eine Übersicht aller vorhandenen Formulare. Sie können nun ein bestimmtes Formular bearbeiten, indem Sie auf das Stiftsymbol klicken. Mit dem zweiten Symbol duplizieren Sie ein Formular und mit dem Papierkorb-Symbol löschen Sie es.

Mit + Formularname oder dem +-Symbol über dem Inhaltsbereich erstellen Sie ein neues Formular.

Ein erstelltes Formular lässt sich beliebig oft verwenden. Dafür müssen Sie nur in der Seitenansicht (oder Listenansicht) ein Formular-Inhaltselement hinzufügen und das passende Formular in dem Plug-In auswählen. 

Formular erstellen

Als Erstes müssen Sie zwischen einem leeren und einem vordefinierten Formular wählen. Im leeren Formular müssen Sie nur noch einen Formularnamen und den Formularspeicher festlegen. Der Name kann jederzeit geändert werden. Bei einem vordefinierten Formular müssen Sie zusätzlich eine Ausgangsvorlage wählen. In unserer Website-Base finden Sie eine Vorlage für ein einfaches Kontaktformular, bestehend aus zwei Seiten/Schritten, die bereits einen Datenschutzhinweis enthält.

Nach Erstellen des Formulars gelangen Sie zur Bearbeitungsansicht.

Leeres Formular

Vordefiniertes Formular

Formulare bearbeiten

Links befindet sich die Spalte, in der ein Formular-Seitenbaum zu sehen ist. Eine Seite ist im leeren Formular automatisch angelegt. Im vordefinierten Formular finden Sie zwei Seiten. Seiten können jederzeit hinzugefügt oder gelöscht werden.

In der Mitte fügen Sie die einzelnen Formularelemente hinzu und wählen sie zum Bearbeiten aus. Jedes Element kann aber auch über den Formular-Baum angewählt werden. Wenn Sie im Formular-Seitenbaum eine Seite und kein einzelnes Element angewählt haben, sind in der Mitte einfach alle Elemente aufgelistet. Jedes Element kann in dieser Ansicht angeklickt werden, sodass Sie in die Einstellungen des Elementes (rechte Spalte) gelangen.

Im rechten Bereich werden Einstellungen zum Formular, den enthaltenen Seiten und den einzelnen Elementen angepasst.

Formular

Wenn Sie im Formular-Seitenbaum den Formularnamen auswählen, können Sie in der rechten Spalte allgemeine Informationen zum Formular anpassen.

  • Formularname: Der Formularname lässt sich jederzeit hier ändern.
  • Beschriftung des Absenden-Buttons: Das ist der Button, den Personen als letztes zum Bestätigen und Absenden ihrer Eingaben betätigen.
  • Unsichtbares reCaptcha verwenden: Unterscheidet Bots vom menschlichen Verhalten, ohne dass eine Interaktion mit Nutzenden notwendig ist.
  • Linkspam prüfen: Prüft Nachrichten danach, ob diese zu viele eindeutige URLs beinhalten, die dann als SPAM klassifiziert werden.
  • Finisher: Legen z. B. fest, wer nach dem Absenden benachrichtigt wird und wie mit den eingegebenen Informationen verfahren wird.

Finisher

Finisher legen fest, wie mit Informationen und Dateien umgegangen wird, wenn Nutzende ihre Angaben abschicken und wer darüber informiert werden soll. Sie sollten die Reihenfolge der Finisher beachten. Als Erstes sollten immer Nutzer:innen und Admin benachrichtigt werden. Wenn Sie hochgeladene Dateien nicht im System speichern möchten, folgt nach den E-Mails das Löschen der Uploads. Erst als Letztes steht der Finisher zur Weiterleitung der User:innen auf eine andere Seite. Dabei sollten Sie entweder auf eine interne Seite oder eine externe URL verweisen.

Mail Templates: E-Mail an den Nutzer der Webseite

Mit diesem Finisher werden User:innen unter der angegebenen Adresse kontaktiert. Dafür muss das E-Mail-Element im Formular bereits eingefügt sein (oder ein anderes Element, das eine E-Mail-Adresse beinhaltet). Wenn das Element vorhanden ist, lässt sich im erforderlichen Feld das Element mit der Adresse auswählen. Zusätzlich können Sie ein Mail-Template festlegen z. B. contact_user.

Mail Templates: E-Mail an den Admin der Webseite

Nach dem Absenden der Eingaben kann auch der Admin der Seite benachrichtigt werden. Dafür muss nur die entsprechende E-Mail-Adresse eingetragen werden. Auch hier können sie die Mail-Templates nutzen, in diesem Fall: contact_admin.

Uploads löschen

Verhindert das Speichern der hochgeladenen Dateien im System. Die Dateien werden dann nur als Anhang in den E-Mails mitgeschickt.

Forms - Nutzereingaben in der Datenbank Speichern

Normalerweise werden Nutzer:inneneingaben auf der Domain-Startseite gespeichert. Wenn Sie eine andere Seite festlegen möchten, müssen Sie in diesem Finisher die entsprechende Page-ID eintragen.

Weiterleitung zu einer Seite

Nach Absenden der Daten können Sie die Nutzenden auf eine intern gelegene Seite weiterleiten.

Zu einer URL weiterleiten

Oder Sie leiten ihn zu einer externen Seite z. B. eine Landing-Page. Tragen Sie hierfür einfach eine URL ein.

Finisher-Beispiel – Mail Templates: E-Mail an den Nutzer der Webseite

Formular-Schritt/Seite

Wenn Sie im Formular-Seitenbaum eine Seite angewählt haben, können Sie den Seitennamen sowie die Beschriftung des Vorherige- und des Nächste-Buttons festlegen. Diese Einstellungen müssen für jede einzelne Seite vorgenommen werden. Wo die Buttons dann auf der Seite zu sehen sind, zeigen die Frontend-Aufnahmen unseres Beispiel-Formulars.

Um einen neuen Schritt hinzuzufügen, klicken Sie im Formularbaum links auf den Button Neuen Schritt erstellen. Die Seite kann dann mit den Elementen Ihrer Wahl befüllt werden.

Formular-Element

Wenn ein Element angeklickt oder hinzugefügt wurde, sehen Sie einige Felder, die ausgefüllt werden können. Am wichtigsten sind das Label des Elements, der Platzhalter, die Festlegung, ob es sich um ein Pflichtfeld handelt und eventuell Validatoren.

Um ein neues Element hinzuzufügen, wählen Sie eine Seite/einen Schritt aus klicken im mittleren Bereich unten auf den Button Neues Element erstellen. Suchen Sie dann aus der Liste der Elemente das aus, was sie benötigen. Die verfügbaren Elemente sehen Sie im Screenshot zum leeren Formular.

Validatoren

Validatoren können einzelnen Formular-Elementen zugeschrieben werden. Sie kontrollieren oder beschränken die Eingabemögllichkeiten im Frontend. Nicht alle Validatoren sind für alle Elemente verfügbar. Manche Elemente enthalten automatisch einen Validator, so wie z. B. das E-Mail-Element, andere wiederum haben keine Validator-Auswahl. Optional können Sie jedem Validator eine Fehlermeldung hinzufügen, die erscheint, wenn die Validierung fehlschlägt. Folgende Validatoren sind vorhanden.

  • Alphanumerisch: Die Eingabe muss Buchstaben und Ziffern enthalten.
  • Nicht-XML-Text: Der Validator prüft, ob der angegebene Wert ein gültiger Text ist, also keine XML-Tags enthält.
  • Länge des Strings: Legen Sie eine minimale und eine maximale Zeichenanzahl der Eingabe fest.
  • E-Mail: Der Validator überprüft, ob die Eingabe der Form einer E-Mail-Adresse entspricht.
    • Das E-Mail-Element enthält automatisch diesen Validator.
  • Ganzzahl: Prüft, ob der angegebene Wert eine gültige ganze Zahl ist.
  • Fließkommazahl: Prüft, ob die Eingabe eine Fließkommazahl bzw. Gleitkommazahl ist.
  • Zahlenbereich: Geben Sie ein Minimum und/oder ein Maximum der Zahl an, die eingegeben werden können.
  • Zahl: Nur beim Element 'Zahl' vorhanden und ist automatisch ausgewählt.
  • Regulärer Ausdruck: Geben Sie einen validen regulären PHP-PCRE-Ausdruck ein. Der Validator prüft, ob die Eingabe dem Ausdruck entspricht.
    • Kann kontrollieren, ob z. B. angegebene Domain-Namen nur der Top-Level-Domain entsprechen.
  • Dateigröße: Sichert, dass keine zu großen Dateien hochgeladen werden. Geben Sie ein Minimum und ein Maximum an.
    • Dateien sollten nicht mehr als 10 MB groß sein.
    • Validator nur bei Datei- und Bildupload verfügbar. 
  • Datumsbereich: Legen Sie Anfangsdatum und Enddatum fest.
    • Nur beim Element 'Datum' vorhanden.
  • Anzahl der übermittelten Werte: Prüft, ob der angegebene Wert die angegebene Anzahl von Elementen enthält. 
  • Datum/Uhrzeit: Prüft, ob der angegebene Wert gültig ist. Es wird erwartet, dass die Datumszeichenfolge gemäß dem W3C-Standard formatiert ist, d.h. "YYYYY-MM-DDT###:###:##:##+###:##", z.B. "2005-08-15T15:52:01+00:00".
  • reCaptcha server-side validator: Nur beim Element 'Verborgen' verfügbar.

Hinweis auf die Datenschutzvereinbarung

Jedes Kontaktformular, das die Angabe von personenbezogenen Daten (z. B. Name oder E-Mail-Adresse) verlangt, muss einen Datenschutzhinweis beinhalten. Orientieren Sie sich bei der Konfiguration dieses Elementes an dem bereits angelegten Kontaktformular in der Website-Base. Im vordefinierten Formular, was ein einfaches Kontaktformular enthält, findet sich auch ein Datenschutzhinweis.

Repeatable Container

Ein besonderes Formular-Element ist der Repeatable Container, in dem einzelne oder mehrere Elemente angelegt werden können. Dieser ermöglicht es User:innen mehrfach Angaben zu den Feldern im Container zu machen, bspw. mehrere Terminmöglichkeiten. Ein:e Benutzer:in kann die Angaben so oft wiederholen, wie benötigt – die maximale Anzahl der Wiederholungen legen Sie in den Element-Einstellungen fest. Ebenso lässt sich eine minimale Zahl an Wiederholungen festlegen. Hinzugefügte Zeilen können mit einem 'Entfernen'-Button wieder gelöscht werden. Sie legen die Button-Beschriftung fest, ebenso wie die Beschriftung des Buttons zum Wiederholen/Hinzufügen einer Angabe.

Beispiel Formular

Formular mit drei Seiten im Frontend. Welche Elemente verwendet wurden, ist in den Backendaufnahmen zu sehen.

Vorschau des Formulars im Backend

TYPO3 Inhaltselemente: Formulare

Formulare bieten Seitenbesuchern eine Möglichkeit mit der Seite zu interagieren oder in Kontakt mit den Seitenbetreibern zu treten. Das Einbinden der entsprechenden Inhaltselemente ist dabei unkompliziert und ist in wenigen Augenblicken abgeschlossen.

Formular

Das Inhaltselement Formular erlaubt es Besucher:innen Ihrer Seite Kontakt mit Ihnen aufzunehmen und eine Nachricht zu hinterlassen. In der Website-Base finden Sie ein Standard-Formular. Dieses können Sie im Modul Formulare anpassen oder darüber ein neues Formular erstellen.

Reiter Allgemein

Der Tab Allgemein verfügt über die gleichen Felder wie das Inhaltselement Nur Überschrift. In diesem Reiter entscheiden Sie also lediglich, ob das Formular eine Überschrift tragen soll.

Reiter Plug-In

Im Reiter Plug-In müssen Sie nur das entsprechende Formular auswählen. Wenn Sie nur eine Formulardefinition haben, wird die Auswahl nicht schwerfallen.

Nachdem Sie das Inhaltselement gespeichert haben, sieht das Formular im Frontend so oder so ähnlich aus, wie das untere Bild es zeigt.

Formular im Frontend

Indexsuche

Mit der Indexsuche können Besucher:innen Ihrer Seite gezielt nach den Informationen suchen, die sie benötigen. Das Inhaltselement Indexsuche ist ein Plug-In, also ein zusätzliches Element im TYPO3 System. Deswegen wird die Indexsuche im Inhaltsbereich mit dem Symbol für Plug-Ins markiert.

Reiter Allgemein

Der Tab Allgemein entspricht dem Inhaltselement Nur Überschrift. Sie legen hier also nur fest, ob das Inhaltselement einen Titel tragen soll.

Reiter Plug-In

Da es sich bei der Indexsuche, wie bereits erwähnt, um ein Plug-In handelt, ist es möglich diese hinzuzufügen, indem man ein allgemeines Plug-In einfügt. Anschließend muss das Plug-In ausgewählt werden, was bei dem Inhaltselement Indexsuche bereits automatisch aktiviert ist.

Die Indexsuche ist nach dem Erstellen und Speichern sofort einsatzbereit und sieht im Frontend so aus, wie es das untere Bild zeigt.

Indexsuche im Frontend

Sie wollen mehr wissen?

Alle Informationen zu den verfügbaren Editionen finden Sie auf der Webseite für unsere TYPO3 Website-Base. Sie haben die Möglichkeit eine Webseite zum Fixpreis erstellen zu lassen oder entscheiden sich für ein Website as a Service Paket, mit dem keine weiteren Kosten für Hosting oder Sicherheits- und Funktionsupdates auf Sie zukommen werden.