Formulareditor

1. Wofuer ist diese Funktion

Der Formulareditor bietet eine zentrale Verwaltungsoberflaeche fuer alle Webformulare innerhalb von Octoserv. Er integriert das Plugin Fluent Forms nahtlos in die Octoserv-Oberflaeche, sodass Formulare erstellt, bearbeitet, deren Eintraege eingesehen und Berichte ausgewertet werden koennen -- alles ohne die Octoserv-Umgebung zu verlassen.

Der Formulareditor ist ueber den Navigationspunkt "Formulareditor" in der Sidebar erreichbar und gliedert sich in drei Unterseiten:

Alle drei Unterseiten sind iFrame-basierte Integrationen der entsprechenden Fluent-Forms-Verwaltungsseiten. Die WordPress-Admin-Oberflaeche (Adminbar, Seitenmenue, Footer) wird dabei ausgeblendet, sodass nur die relevanten Fluent-Forms-Inhalte innerhalb des Octoserv-Layouts sichtbar sind.

Im Unterschied zu anderen Octoserv-Modulen wie z.B. dem Newsletter oder den Kontakten, die eigene Octoserv-Logik implementieren, delegiert der Formulareditor die gesamte Funktionalitaet an Fluent Forms. Octoserv stellt lediglich den einheitlichen Rahmen (Sidebar-Navigation, Design-Anpassung, Ladeanzeige) bereit.

2. Ziel und Vorteil

• Einheitliche Oberflaeche: Formulare werden direkt innerhalb der Octoserv-Umgebung verwaltet. Der Benutzer muss nicht in das WordPress-Backend wechseln, um Formulare zu bearbeiten oder Eintraege einzusehen.
• Nahtlose Integration: Die Fluent-Forms-Oberflaeche wird per iFrame eingebettet und visuell an das Octoserv-Design angepasst. Die WordPress-Adminleiste, das Seitenmenue und der Footer werden automatisch ausgeblendet.
• Drei spezialisierte Ansichten: Die Aufteilung in Formulare, Eintraege und Reports ermoeglicht einen schnellen Zugriff auf den jeweils benoetigten Funktionsbereich, ohne durch verschachtelte Menues navigieren zu muessen.
• Voller Funktionsumfang: Der gesamte Funktionsumfang von Fluent Forms steht zur Verfuegung -- inklusive Drag-and-Drop-Formularerstellung, bedingte Logik, Mehrseitenformulare und Integrationen.
• Automatische Ladeanzeige: Waehrend die iFrame-Inhalte geladen werden, zeigt ein animierter Ladeindikator den Ladezustand an. Bei Fehlern wird eine verstaendliche Fehlermeldung angezeigt.
• Kontextbezogene Hilfe: Jede Unterseite bietet einen Hilfe-Button, der die zugehoerige Dokumentation oeffnet.

3. Detaillierte Funktionsbeschreibung

3.1 Technische Architektur

Alle drei Unterseiten des Formulareditors folgen demselben technischen Muster:

1. Template-Datei: Jede Unterseite hat ein eigenes PHP-Template (templates/forms/list.php, templates/forms/entries.php, templates/forms/reports.php).
2. iFrame-Einbettung: Die jeweilige Fluent-Forms-Admin-Seite wird per iFrame geladen.
3. CSS-Injection: Nach dem Laden des iFrames wird per JavaScript CSS in das iFrame-Dokument injiziert, um die WordPress-Admin-Elemente auszublenden und das Erscheinungsbild an Octoserv anzupassen.
4. Ladeanzeige: Eine Ladeanimation (Spinner) wird angezeigt, bis der iFrame vollstaendig geladen ist. Anschliessend wird der Spinner ausgeblendet und der iFrame sichtbar gemacht.
5. Fehlerbehandlung: Falls der iFrame nicht geladen werden kann, wird eine Fehlermeldung angezeigt ("Fehler beim Laden...").

3.2 Unterseite: Formulare

Navigationspunkt: "Formulare"
Seitentitel: "Formulare"
iFrame-Quelle: admin.php?page=fluent_forms (Fluent Forms Hauptseite)
Hilfe-Schluessel: formulare

Diese Unterseite zeigt die Hauptverwaltung von Fluent Forms. Hier koennen:

• Bestehende Formulare in einer Uebersichtsliste eingesehen werden.
• Neue Formulare erstellt werden (ueber den Fluent-Forms-eigenen Formularersteller).
• Formulare bearbeitet, dupliziert oder geloescht werden.
• Formulareinstellungen wie Bestaetigungs-E-Mails, Weiterleitungen und Integrationen konfiguriert werden.
• Formular-Shortcodes kopiert werden, um Formulare in Seiten oder Beitraege einzubinden.

Der Fluent-Forms-Header (.ff_header) wird im iFrame ausgeblendet, um eine schlankere Darstellung zu erzielen.

3.3 Unterseite: Eintraege

Navigationspunkt: "Formulareintraege"
Seitentitel: "Formulareintraege"
iFrame-Quelle: admin.php?page=fluent_forms_all_entries (Fluent Forms Eintraege)
Hilfe-Schluessel: formular-eintraege

Diese Unterseite zeigt eine zentrale Uebersicht aller eingegangenen Formulareintraege ueber alle Formulare hinweg. Hier koennen:

• Alle Eintraege chronologisch aufgelistet und gefiltert werden.
• Einzelne Eintraege im Detail eingesehen werden (eingegebene Felddaten, Zeitstempel, IP-Adresse etc.).
• Eintraege als gelesen/ungelesen markiert werden.
• Eintraege exportiert oder geloescht werden.
• Nach bestimmten Formularen gefiltert werden, um nur Eintraege eines spezifischen Formulars zu sehen.

3.4 Unterseite: Reports

Navigationspunkt: "Formularberichte"
Seitentitel: "Formularberichte"
iFrame-Quelle: admin.php?page=fluent_forms_reports (Fluent Forms Reports)
Hilfe-Schluessel: formulare

Diese Unterseite zeigt statistische Auswertungen und Berichte zu den Formularaktivitaeten. Hier koennen:

• Uebersichtliche Statistiken zu Formularaufrufen, Abschlussraten und Konversionsraten eingesehen werden.
• Zeitbasierte Auswertungen (z.B. Eintraege pro Tag, pro Woche, pro Monat) betrachtet werden.
• Die Performance einzelner Formulare verglichen werden.
• Trends und Muster in der Formularnutzung erkannt werden.

3.5 CSS-Injection und Design-Anpassung

Alle drei Unterseiten verwenden denselben CSS-Injection-Mechanismus. Folgende WordPress-Admin-Elemente werden im iFrame ausgeblendet:

Der verbleibende Inhaltsbereich (#wpcontent, #wpbody) wird auf volle Breite gesetzt und mit weissem Hintergrund dargestellt.

3.6 Ladeverhalten

Der Ladevorgang laeuft fuer alle drei Unterseiten identisch ab:

1. Die Seite wird geoeffnet. Ein Spinner mit dem Text "Einen Moment bitte. Die Ansicht wird geladen." wird angezeigt.
2. Der iFrame beginnt im Hintergrund zu laden (initial mit display: none).
3. Sobald das load-Event des iFrames ausgeloest wird, wird das CSS injiziert.
4. Der Spinner wird mit einer sanften Ueberblendung (200ms Fadeout) ausgeblendet.
5. Der iFrame wird mit einer sanften Ueberblendung (200ms Fadein) eingeblendet.
6. Falls der iFrame nicht geladen werden kann (Error-Event), wird anstelle des Spinners eine Fehlermeldung in Rot angezeigt.

4. Benutzerdokumentation / Anwendung

4.1 Formulare verwalten

1. In der Sidebar auf "Formulareditor" und dann auf "Formulare" klicken.
2. Die Fluent-Forms-Uebersicht wird geladen und zeigt alle vorhandenen Formulare.
3. Um ein neues Formular zu erstellen, den "Erstellen"-Button in der Fluent-Forms-Oberflaeche nutzen.
4. Um ein bestehendes Formular zu bearbeiten, in der Liste auf den Formularnamen oder den Bearbeiten-Link klicken.
5. Der Fluent-Forms-Editor oeffnet sich innerhalb des iFrames und bietet den vollstaendigen Drag-and-Drop-Editor.

4.2 Formulareintraege einsehen

1. In der Sidebar auf "Formulareditor" und dann auf "Eintraege" klicken.
2. Die Eintraege-Uebersicht zeigt alle eingegangenen Formulareintraege.
3. Ueber die Filter koennen Eintraege nach Formular, Status oder Zeitraum eingegrenzt werden.
4. Auf einen Eintrag klicken, um die vollstaendigen Details einzusehen.
5. Bei Bedarf koennen Eintraege exportiert oder einzeln geloescht werden.

4.3 Formularberichte ansehen

1. In der Sidebar auf "Formulareditor" und dann auf "Reports" klicken.
2. Die Reports-Seite zeigt Statistiken und Diagramme zu den Formularaktivitaeten.
3. Verschiedene Zeitraeume und Formulare koennen ausgewaehlt werden, um die Auswertung anzupassen.

4.4 Fehlerbehebung

Falls eine Unterseite nicht geladen werden kann und die Fehlermeldung "Fehler beim Laden der Formulare/Eintraege/Berichte. Bitte laden Sie die Seite neu." erscheint:

1. Die Seite im Browser neu laden (F5 oder Strg+R).
2. Sicherstellen, dass das Plugin Fluent Forms aktiviert ist.
3. Falls das Problem weiterhin besteht, pruefen, ob der aktuelle Benutzer ausreichende Berechtigungen fuer den Zugriff auf Fluent Forms hat.

5. Anwendungsbeispiele

Beispiel 1: Kontaktformular fuer die Website erstellen

Ein Unternehmen moechte ein Kontaktformular auf der Website einbinden, damit Interessenten Anfragen stellen koennen.

Vorgehen:

1. Unter "Formulareditor" > "Formulare" ein neues Formular erstellen.
2. Im Fluent-Forms-Editor die gewuenschten Felder hinzufuegen (Name, E-Mail, Nachricht, Telefonnummer).
3. Eine Bestaetigungs-E-Mail konfigurieren, die dem Absender nach dem Einreichen zugesendet wird.
4. Eine Benachrichtigungs-E-Mail einrichten, die das Vertriebsteam ueber neue Anfragen informiert.
5. Das Formular speichern und den generierten Shortcode in eine WordPress-Seite einfuegen.
6. Eingehende Anfragen koennen anschliessend unter "Formulareditor" > "Eintraege" eingesehen werden.

Beispiel 2: Messeregistrierung auswerten

Ein Unternehmen hat ein Anmeldeformular fuer eine Messe erstellt und moechte die Anmeldezahlen ueberwachen.

Vorgehen:

1. Unter "Formulareditor" > "Reports" die Berichtsseite oeffnen.
2. Das Messeregistrierungsformular in der Auswertung auswaehlen.
3. Die Gesamtzahl der Anmeldungen und den zeitlichen Verlauf pruefen.
4. Bei Bedarf unter "Formulareditor" > "Eintraege" die einzelnen Anmeldungen im Detail einsehen (z.B. um eine Teilnehmerliste zu exportieren).

Beispiel 3: Mehrere Formulare zentral verwalten

Ein Unternehmen nutzt verschiedene Formulare: Kontaktformular, Newsletter-Anmeldung, Feedback-Bogen und Veranstaltungsregistrierung.

Vorgehen:

1. Unter "Formulareditor" > "Formulare" alle Formulare in einer Uebersichtsliste einsehen.
2. Formulare nach Bedarf bearbeiten -- z.B. das Kontaktformular um ein Dropdown-Feld fuer die Abteilung erweitern.
3. Unter "Formulareditor" > "Eintraege" alle Eintraege ueber alle Formulare hinweg pruefen und bei Bedarf nach einem bestimmten Formular filtern.
4. Unter "Formulareditor" > "Reports" die Performance der einzelnen Formulare vergleichen, um zu sehen, welches Formular die hoechste Abschlussrate hat.