Quelltext der Seite TYPO3 - Formulare nutzen

{{article
|type=Anleitung
|service=Service:Typo3
|targetgroup=Gäste, Angestellte, Studierende
|hasdisambig=Nein
}}
Diese Anleitung erklärt, wie Sie Formulare auf einer Webseite einbinden. Das Einfügen eines Formulars ist nicht in jedem Fall ganz einfach. Wenden Sie sich bei Problemen an den Webmaster Ihres Bereichs oder an [mailto:webmaster@uni-paderborn.de|webmaster@uni-paderborn.de].
<br>

Es stehen vier verschiedene Formulare zur Auswahl:
* Contact Data
* Contact Data external
* Contact Form
* Kontrollformular

==Kontaktformulare==
<bootstrap_accordion>
<bootstrap_panel heading="Contact Data" color="info">
[[Datei:Typo3-formular-13.png|links|mini|ohne|450px|Contact Data]]
</bootstrap_panel>

<bootstrap_panel heading="Contact Data external" color="info">
[[Datei:Typo3-formular-14.png|links|mini|ohne|450px|Contact Data External]]
</bootstrap_panel>

<bootstrap_panel heading="Contact Form" color="info">
[[Datei:Typo3-formular-12.png|links|mini|ohne|450px|Contact Form]]
</bootstrap_panel>

<bootstrap_panel heading="Kontrollformular" color="info">
<gallery>
Datei:Typo3-formular-15.png
Datei:Typo3-formular-16.png
Datei:Typo3-formular-17.png
Datei:Typo3-formular-18.png
</gallery>
</bootstrap_panel>
</bootstrap_accordion>

==Schritt-für-Schritt Anleitung==
Öffnen Sie die Seite, auf der Sie das Inhaltselement einfügen möchten.

[[Datei:Typo3-akkordeon-01.png|links|mini|ohne|450px|Inhaltselement hinzufügen]]
<br>
* Klicken Sie auf <code>+ Inhalt</code>, um ein neues Inhaltselement hinzuzufügen.
<br clear=all>

[[Datei:Typo3-formular-01.png|links|mini|ohne|450px]]
<br>
# Öffnen Sie den Tab '''"Formulare"'''.
# Wählen Sie '''"Formular"'''.
<br clear=all>


[[Datei:Typo3-formular-02.png|links|mini|ohne|450px]]
<br>
# Öffnen Sie den Tab '''"Allgemein"'''.
# Fügen Sie eine Überschrift für das Formular hinzu.
<br clear=all>


[[Datei:Typo3-formular-04.png|links|mini|ohne|450px]]
<br>
* Sie brauchen eine Datenschutzerklärung für das Formular.
* Öffnen Sie den Tab '''"UPB"'''.
* Verlinken Sie hier Ihre Datenschutzerklärung.
<br clear=all>

<bootstrap_accordion>
<bootstrap_panel heading="Hinweise zur Datenschutzerklärung">
Um das Formular speichern zu können, müssen Sie auf „UPB“ eine Webseite mit der Datenschutzerklärung für dieses Formular angeben. Erstellen Sie vorher auf einer gesonderten Webseite eine eigene "Datenschutzerklärung zum Formular" (notfalls zunächst einmal als leere Seite, die später mit Inhalten ausgefüllt wird), auf die dann im Web-Element „Formular“ verlinkt wird. Die allgemeine Datenschutzerklärung der Universität Paderborn darf hier nicht verlinkt werden, sie ist auf allen Webseiten der Universität ohnehin verlinkt. Die Datenschutzerklärung zum Formular ergänzt die allgemeine Datenschutzerklärung der Universität Paderborn bezüglich der Verarbeitung der über die Formularfelder gesammelten Daten. Informationen zum Erstellen einer solchen Seite finden Sie auf https://hilfe.uni-paderborn.de/DSGVO_-_Datenschutzerklaerung_zu_Formularen. Wählen Sie die Webseite mit der Datenschutzerklärung zu diesem Formular unter „Datenschutzerklärung“ aus, hier die Seite „Datenschutzerklärung zum Formular xyz“:
</bootstrap_panel>
</bootstrap_accordion>


[[Datei:Typo3-formular-03.png|links|mini|ohne|450px]]
<br>
* Wechseln Sie in den Tab '''"Plug-In"'''.
* Wählen Sie eine der 4 Formulardefinitionen aus.
<br clear=all>


[[Datei:Typo3-formular-05.png|links|mini|ohne|450px]]
<br>
* Durch das ausgewählte Formular ändern sich die verfügbaren Optionen.
* Klicken Sie auf '''"OK"''', um die Änderungen zu übernehmen.
<br clear=all>


[[Datei:Typo3-formular-06.png|links|mini|ohne|450px]]
<br>
* Finisher sind Aktivitäten, welche nach dem Absenden eines Formular ausgeführt werden.
* Setzen Sie den Haken für '''"Finisher Einstellungen überschreiben"''' um die Einstellungen zu bearbeiten.
<br clear=all>


[[Datei:Typo3-formular-05.png|links|mini|ohne|450px]]
<br>
* Durch die Einstellung ändern sich die verfügbaren Optionen.
* Klicken Sie auf '''"OK"''', um die Änderungen zu übernehmen.
<br clear=all>

===Finisher Aktivitäten===
<bootstrap_accordion>
<bootstrap_panel heading="E-Mail an Empfänger (Sie)">
Sendet eine E-Mail an den Betreiber des Formulars mit den Daten des Formulars. 
</bootstrap_panel>

<bootstrap_panel heading="UPB - Protokol">
Schreibt die eingegebenen Daten in eine Datenbank, damit Sie diese später über den Formular-Exporter in eine CSV-Datei schreiben können. 
</bootstrap_panel>

<bootstrap_panel heading="UPB - Mail an den Absender">
Sendet eine E-Mail an den Webseiten-Besucher. 
</bootstrap_panel>

<bootstrap_panel heading="Bestätigung">
Hier können Sie entweder eine Textnachricht eingeben oder ein Inhaltselement auswählen, welches nach dem Absenden dem Webseitenbesucher angezeigt wird. 
</bootstrap_panel>
	
</bootstrap_accordion>


[[Datei:Typo3-formular-07.png|links|mini|ohne|450px|E-Mail an Empfänger (Sie)]]
<br>
* Passen Sie die Konfiguration an Ihre Bedürfnisse an.
* Geben Sie eine gültige E-Mail-Adresse an, sonst kommt es beim Absenden des Formulars zu einem Fehler.
<br clear=all>


[[Datei:Typo3-formular-08.png|links|mini|ohne|450px|UPB - Protokol]]
<br>
* In der Regel müssen Sie hier keine Angaben machen.
* Wenn Sie möchten, können Sie hier das '''Double-Opt-In-Verfahren''' aktivieren.
<br clear=all>


[[Datei:Typo3-formular-09.png|links|mini|ohne|450px|UPB - Mail an Absender]]
* Passen Sie die Konfiguration an Ihre Bedürfnisse an.
* Geben Sie eine gültige E-Mail-Adresse an, damit es beim Absenden des Formulars zu keinem Fehler kommt.
<br clear=all>

[[Datei:Typo3-formular-10.png|links|mini|ohne|450px|]]
<br clear=all>

[[Datei:Typo3-formular-11.png|links|mini|ohne|450px|Bestätigung]]
<br>
* Bestätigen Sie Ihre Eingaben.
<br clear=all>

==Kontrolle==
Nach der Konfiguration des Formulars sollten Sie Ihr Formular testen. Füllen Sie dazu das Formular ein- oder zweimal selbst aus und prüfen Sie das Verhalten: 
* Wurden die E-Mails korrekt versendet?
* Passen die Angaben und Überschriften?
* Anschließend sollten Sie einmal den Export durchführen und prüfen, ob die Daten korrekt enthalten sind (siehe Export).

Bei neuen Formularen, welche Sie beantragt haben, können Sie außerdem noch folgende Punkte prüfen: 
* Ist die Darstellung korrekt und sind alle Felder vorhanden?
* Stimmen die Texte und Bezeichner?
* Sind die Pflichtfelder richtig definiert?

==Siehe auch==
* [[TYPO3]]



<!--
==Alt==
== Was ist zu tun? ==
* Einbindung von Formularen und Datenschutzerklärung
* Was sind Finisher?
* Konfiguration der Finisher
* Testen
* Exportieren von Daten
* Löschen von Daten
* Mehrsprachigkeit
* Upload-Felder
<br clear=all>

== Einbindung von Formularen und Datenschutzerklärung  ==
Vor dem Einbinden eines Formulars erstellen Sie eine Seite für Ihre Formular-Datenschutzerklärung oder Sie nutzen eine vorhandene Seite in Ihrem Bereich. Weitere Informationen dazu finden Sie im [[DSGVO - Datenschutzerklaerung zu Formularen|Hilfe-Wiki]].<br>
[[Datei:TYPO3Formular1.png|links|mini|ohne|700px]]
<br>
* Zum Einbinden von Formularen nutzen Sie das Inhaltselement '''"Formular"''' im Reiter "'''Formulare"'''. 

<br clear=all>

Nach einem Klick auf '''"Formular"''' erhalten Sie folgende Ansicht:
[[Datei:TYPO3Formular2.png|links|mini|ohne|700px]]
<br>
In dem Reiter '''"UPB"''' müssen Sie zunächst eine '''Seite für Ihre Datenschutzerklärung''' auswählen. Andernfalls lässt sich das Formular-Inhaltselement nicht speichern. 
<br clear=all>

[[Datei:TYPO3Formular3.png|links|mini|ohne|700px]]
<br>
In dem Reiter '''"Plugin"''' können Sie dann das '''gewünschte Formular''' auswählen.
<br clear=all>

=== Unterschiedliche Formulare ===
Je nach Bereich haben TYPO3-Redakteure Zugriff auf '''unterschiedliche Formulare'''. Bitte beachten Sie, dass es je nach Formular sein kann, dass die beauftragende Stelle das Formular ändert bzw. ändern lässt. Zweckendfremden Sie also bitte keine Formulare, nur weil die darin enthaltenen Felder zu ihrem Anliegen passen. Prüfen Sie den Namen des Formulars. Entspricht dieser Ihrer Intention? Dann sollten Sie dieses Formular nutzen können. Sprechen Sie ggf. mit Ihrem zuständigen Administratoren-Team oder beantragen Sie ein Formular für Ihre Zwecke.
 
Alle Redakteure können folgende '''Standard-Formulare''' nutzen:

==== Kontakt-Formular ====
[[Datei:TYPO3Formular4.png|links|mini|ohne|600px]]
<br>
Hier können Sie Vor- und Nachname, E-Mail-Adresse und ein Nachrichten-Textfeld eintragen.
<br clear=all>

==== Kontakt-Daten-Formular ====
[[Datei:TYPO3Formular5.png|links|mini|ohne|600px]]
<br> 
Hier können Sie Vor- und Nachname sowie die E-Mail-Adresse eintragen.
<br clear=all>

==== Kontakt-Daten extern ====
[[Datei:TYPO3Formular6.png|links|mini|ohne|600px]]
<br>
Hier können Sie Vor- und Nachname, E-Mail-Adresse, Organisation/Firma und Position/Abteilung eintragen.
<br clear=all>

== Was sind Finisher? ==
[[Datei:TYPO3Formular7.png|links|mini|ohne|600px]]
<br> 
Finisher sind Aktivitäten, welche nach dem Absenden eines Formulars ausgeführt werden.
<br clear=all>

{| class="wikitable"
|-
| E-Mail an Empfänger || Sendet eine E-Mail an den Betreiber des Formulars mit den Daten des Formulars.
|-
| Protokol-Finisher || Schreibt die eingegebenen Daten in eine Datenbank, damit Sie diese später über den Formular-Exporter in eine CSV-Datei schreiben können.
|-
| UPB - E-Mail an den Absender || Sendet eine E-Mail an den Webseiten-Besucher.
|-
| Bestätigung || Hier können Sie entweder eine Textnachricht eingeben oder ein Inhaltselement auswählen, welches nach dem Absenden dem Webseitenbesucher angezeigt wird.
|}
<br clear=all>

=== E-Mail an Empfänger ===
[[Datei:TYPO3Formular8.png|links|mini|ohne|600px]]
<br>
* Passen Sie die Konfiguration an Ihre Bedürfnisse an. 
* Insbesondere die '''E-Mail-Adressen''' sind anzupassen, da die hier verwendeten Default-Angaben keine gültigen Adressen sind und somit beim Absenden des Formulars ein Fehler auftreten würde.
<br clear=all>

=== Protokol-Finisher ===
[[Datei:TYPO3Formular9.png|links|mini|ohne|600px]]
<br>
In der Regel müssen Sie hier '''keine Angaben''' machen, es sei denn Sie wollen das '''Double-Opt-In-Verfahren''' nutzen.
<br clear=all>

[[Datei:TYPO3Formular10.png|links|mini|ohne|600px]]
<br>
So können Sie das '''Double-Opt-In-Verfahren''' nutzen.
<br clear=all>

=== UPB - E-Mail an den Absender ===
[[Datei:TYPO3Formular11.png|links|mini|ohne|600px]]
<br>
* Passen Sie die '''Konfiguration an Ihre Bedürfnisse''' an. 
* Insbesondere die E-Mail-Adressen sind anzupassen, da die hier verwendeten Default-Angaben keine gültigen Adressen sind und somit beim Absenden des Formulars ein Fehler auftreten würde.
[[Datei:TYPO3Formular12.png|links|mini|ohne|600px]]
<br clear=all>

=== Bestätigung ===
[[Datei:TYPO3Formular13.png|links|mini|ohne|600px]]
<br>
Bestätigen Sie hier Ihre Eingaben.
<br clear=all>

== Testen ==
Nach der Konfiguration des Formulars sollten Sie ihr Formular testen. Füllen Sie dazu das Formular ein- oder zweimal selbst aus und '''prüfen Sie das Verhalten''': 
 
* Wurden die E-Mails korrekt versendet? 
* Passen die Angaben und Überschriften? 
* Anschließend sollten Sie einmal den Export durchführen und prüfen, ob die Daten korrekt enthalten sind (siehe Export).
 
Bei '''neuen Formularen''', welche Sie beantragt haben, können Sie außerdem noch folgende Punkte prüfen:
 
* Ist die Darstellung korrekt und sind alle Felder vorhanden?
* Stimmen die Texte und Bezeichner?
* Sind die Pflichtfelder richtig definiert?
<br clear=all>

== Exportieren von Daten ==
[[Datei:TYPO3Formular14.png|links|mini|ohne|600px]]
<br>
Um die Daten des Formulars zu erhalten, öffnen Sie in TYPO3 das Modul '''"Formular-Exporter"'''.
<br clear=all>

[[Datei:TYPO3Formular15.png|links|mini|ohne|600px]]
<br>
Wählen Sie die '''Seite''', welche das Formular enthält.
<br clear=all>

[[Datei:TYPO3Formular16.png|links|mini|ohne|600px]]
<br >
* Im Hauptbereich sehen Sie dann diese Ausgabe.
* Nach einem Klick auf '''"Exportieren"''' wird Ihnen eine CSV-Datei zum Download angeboten.
<br clear=all>

[[Datei:TYPO3Formular17.png|links|mini|ohne|600px]]
<br>
* Öffnen Sie nun z.B. '''Excel''' und erstellen Sie dort ein neues leeres Dokument. 
* Über den Reiter '''"Daten"''' und die Schaltfläche '''"Aus Text/CSV"''' können Sie die Daten '''importieren'''.
<br clear=all>
 
[[Datei:TYPO3Formukar18.png|links|mini|ohne|600px]]
<br>
* Es öffnet sich ein Wizard. 
* Achten Sie hier insbesondere darauf, dass Sie als '''Dateiursprung Unicode (UTF-8)''' auswählen. Ansonsten werden z.B. Umlaute falsch dargestellt. 
* Klicken Sie im Wizard dann auf '''"Laden"'''. 
* Der Import ist '''abgeschlossen'''. 
* Zur weiteren Bearbeitung empfiehlt es sich das Dokument als Excel-Datei zu speichern (xlsx).
<br clear=all>

== Löschen von Daten ==
In Ihrer Datenschutzerklärung haben Sie erläutert, über welchen Zeitraum Sie die Daten speichern. Mit Ablauf dieser Frist müssen Sie die Daten löschen. 
[[Datei:TYPO3Formular19.png|links|mini|ohne|600px]]
<br>
Über das Modul '''"Liste"''' können Sie sich alle '''Log-Einträge''' der Formularangaben auflisten lassen.
<br clear=all>

[[Datei:TYPO3Formular20.png|links|mini|ohne|600px]]
<br>
* Um einen Eintrag zu löschen, nutzen Sie wie gewohnt die '''Mülleimer-Schaltfläche'''. Mehrere Einträge können Sie über die Zwischenablage von TYPO3 entfernen.
* '''Hinweis:''' Eine Darstellung der Inhalte ist im Listenmodul nicht möglich. 
* Sollten Sie ein Formular mit Dateiupload-Feld nutzen, so löschen Sie auch die Dokumente in dem entsprechenden Ordner.
<br clear=all>

[[Datei:TYPO3Formular21.png|links|mini|ohne|600px]]
<br>
Alternativ können Sie natürlich auch die '''Seite mit dem Formular löschen''', sofern Sie diese nicht mehr benötigen.
<br clear=all>

== Mehrsprachigkeit ==
Die Standard-Formulare sind mehrsprachig. Leider ist dies derzeit nur für globale Formulare (wie z.B. das Kontaktformular) möglich. Benötigen Sie ein Formular in mehreren Sprachen, so erstellt das ZIM je Sprache ein Formular.
<br clear=all>

== Upload-Felder ==
* Wenn Ihr Formular '''ein oder mehrere Upload-Felder''' enthält, müssen Sie dem '''ZIM diese mitteilen''', damit wir Ihnen einen entsprechenden Dateiordner konfigurieren können, welcher dann die Dateien des Formulars enthält.
* Wenn dies noch nicht geschehen ist, sehen Sie einen '''Hinweis''' in der Webseitenausgabe des Formulars.
<br clear=all>