Formulareditor
Der Formulareditor ermöglicht es Ihnen, professionelle Webformulare per Drag & Drop zu erstellen und zu verwalten – ganz ohne Programmierkenntnisse. Eingereichte Formulardaten werden direkt in Ihrem Octoserv-Konto gespeichert und können automatisch Kontakte im CRM anlegen oder aktualisieren. So erfassen Sie Leads, Anfragen und Anmeldungen zentral an einem Ort.
Wofür ist diese Funktion
Mit dem Formulareditor erstellen Sie beliebig viele Formulare für Ihre Website oder Landingpages. Die ausgefüllten Formulardaten laufen direkt in Octoserv ein, werden übersichtlich archiviert und können ausgewertet werden. Durch die CRM-Feld-Zuordnung entfällt die manuelle Übertragung von Kontaktdaten – neue Einreichungen werden vollautomatisch zu Kontakten verarbeitet.
Unterseiten / Bereiche
| Bereich | Beschreibung |
|---|---|
| Formulare | Formulare erstellen, bearbeiten und verwalten. Hier bauen Sie Ihr Formular per Drag & Drop zusammen und konfigurieren Felder, Schritte und CRM-Zuordnungen. |
| Einreichungen | Alle eingegangenen Formulardaten auf einen Blick. Filtern, durchsuchen und als CSV exportieren. |
| Reports | Auswertungen zu Conversion-Raten und Einreichungsvolumen – um den Erfolg Ihrer Formulare zu messen. |
So verwenden Sie den Formulareditor
Neues Formular erstellen
- Öffnen Sie den Bereich Formulareditor › Formulare.
- Klicken Sie oben rechts auf Neues Formular.
- Vergeben Sie einen aussagekräftigen internen Namen für das Formular und bestätigen Sie mit Erstellen.
- Sie befinden sich nun im Drag & Drop-Editor. Ziehen Sie gewünschte Feldtypen aus der linken Seitenleiste in den Formular-Bereich.
- Klicken Sie auf ein eingefügtes Feld, um dessen Eigenschaften (Bezeichnung, Pflichtfeld, Platzhaltertext) in der rechten Seitenleiste anzupassen.
- Ordnen Sie die Felder durch Ziehen in die gewünschte Reihenfolge.
- Klicken Sie auf Speichern, um Ihre Änderungen zu sichern.
Verfügbare Feldtypen
Im Formulareditor stehen folgende Feldtypen zur Verfügung:
- Text – einzeiliges Freitextfeld
- E-Mail – E-Mail-Adresse mit Formatvalidierung
- Telefon – Telefonnummer
- Dropdown – Auswahlmenü mit vordefinierten Optionen
- Checkbox – einzelne oder mehrere Auswahlkästchen
- Datei-Upload – Dateianhang durch den Besucher
- Datum – Datumsauswahl mit Kalender
- Mehrzeilig – großes Texteingabefeld für längere Nachrichten
Multi-Step-Formulare
Für längere Formulare empfiehlt sich die Aufteilung in mehrere Schritte (Steps). So wirkt das Formular übersichtlicher und die Abschlussrate steigt.
- Öffnen Sie das gewünschte Formular im Editor.
- Klicken Sie auf Schritt hinzufügen in der oberen Werkzeugleiste.
- Weisen Sie jedem Schritt die passenden Felder zu, indem Sie diese in den jeweiligen Schritt ziehen.
- Vergeben Sie optional einen Schritt-Titel, der dem Besucher als Fortschrittsanzeige angezeigt wird.
- Speichern Sie das Formular.
Felder anordnen (verschieben)
Die Reihenfolge der Formularfelder lässt sich frei anpassen. Fassen Sie ein Feld irgendwo am Kopf der Feld-Zeile an und ziehen Sie es an die gewünschte Position – eine farbige Linie zeigt dabei an, wo das Feld landet. Sie können auch über die erste bzw. unter die letzte Zeile ablegen. Die neue Reihenfolge wird mit dem Speichern übernommen – auch für automatisch eingefügte Felder (z. B. aus dem Fragebogen- oder Terminplaner-Baustein).
Mehrere Felder auf einmal verschieben: Jede Feld-Zeile hat links ein Kästchen zum Markieren. Sobald Sie Felder markiert haben, können Sie sie über die Leiste oberhalb der Feldliste geschlossen bewegen:
- Alle – markiert bzw. entmarkiert sämtliche Felder auf einmal.
- ⇡ Anfang und ⇣ Ende – setzt die Markierung geschlossen an den Anfang bzw. ans Ende der Liste.
- ↑ und ↓ – verschiebt die Markierung um jeweils eine Position.
- Aufheben – hebt die Markierung wieder auf.
Ziehen Sie eine markierte Zeile, wandert die gesamte Markierung mit. Das spart bei längeren Fragebögen viel Arbeit: 20 Felder lassen sich so mit einem Klick nach oben holen, statt jedes einzeln zu ziehen. Die Positionsnummern werden nach jedem Verschieben, Hinzufügen und Löschen automatisch neu vergeben.
Optionen nebeneinander (Radio & Checkbox)
Bei Auswahl- und Checkbox-Feldern (Radio, Checkbox-Gruppe sowie die Terminplaner-Felder) können Sie die Antwort-Optionen wahlweise nebeneinander statt untereinander anzeigen – praktisch für kurze Auswahlen wie Ja/Nein. Öffnen Sie das Feld und aktivieren Sie in den Feld-Einstellungen Optionen nebeneinander. Bei vielen Optionen brechen diese automatisch in die nächste Zeile um.
Fragebogen-Baustein
Mit dem Fragebogen-Baustein fragen Sie im Formular mehrere Fragen mit festen Antwortmöglichkeiten ab (Standard: Ja/Nein) – ideal für einen kurzen Selbstcheck. Beim Absenden fasst Octoserv alle Antworten und eine automatische Einschätzung in einem einzigen Textfeld am Kontakt zusammen. Sie können bis zu 25 Fragen anlegen.
- Öffnen Sie das Formular und klappen Sie den Abschnitt Fragebogen auf.
- Aktivieren Sie Fragebogen aktivieren.
- Füllen Sie den Kopfbereich: eine kleine Augenbraue (z. B. „Kurzcheck“), eine Überschrift und einen Vorspann, der kurz erklärt, worum es geht. Alle drei sind optional – was Sie leer lassen, erscheint nicht.
- Legen Sie je Frage eine Kategorie (kleine Überschrift), den Fragetext, optional eigene Antworten (kommagetrennt; leer = Ja/Nein) und optional einen Hinweis unter der Kategorie an. Mit + Frage fügen Sie weitere Fragen hinzu.
- Soll eine Frage nicht beantwortet werden müssen, setzen Sie darunter das Häkchen Antwort ist freiwillig.
- Optional: eine Fußnote unter den Fragen – etwa ein Satz dazu, warum es diesen Check gibt.
- Hinterlegen Sie unter Einschätzung, welche Antwort als „Hebel“ zählt (Standard „Nein“) und ab wie vielen davon die oberste Stufe gilt. Die drei Stufen sind mit den konkreten Zahlen beschriftet – etwa „Viele Hebel – ab 3× Nein“. Je Stufe tragen Sie eine Überschrift und einen Text ein.
- Vergeben Sie unter Ergebnis-Feld den Namen des Textfelds, in dem das Ergebnis am Kontakt gespeichert wird.
- Speichern Sie das Formular. Octoserv legt das Ergebnisfeld automatisch an und fügt alle Bausteine ins Formular ein – sie erscheinen sofort in der Feldliste.
So sieht der Fragebogen für den Interessenten aus – hier gemeinsam mit den Terminplaner-Feldern:
Zusammenlaufen: Nein · Nachfassen: Nein
Einschätzung: Sie haben eine solide Grundlage. (2× Nein)
Einschätzung direkt im Formular zeigen
Standardmäßig sieht nur Ihr Team die Einschätzung – sie landet als Text am Kontakt. Sie können sie aber auch dem Interessenten zeigen: Setzen Sie unter Einschätzung das Häkchen Einschätzung im Formular anzeigen.
Sobald alle Fragen beantwortet sind, erscheint dann zwischen den Fragen und den Kontaktfeldern ein Ergebnisblock mit der Überschrift und dem Text der passenden Stufe. Ändert der Interessent eine Antwort, passt sich der Block sofort an. Über dem Block können Sie eine Augenbraue setzen, etwa „Ihre Einschätzung“.
Antworten als Schaltflächen
Mit dem Häkchen Antworten als Schaltflächen unter den Fragen erscheinen die Antwortmöglichkeiten als ruhige, eckige Schaltflächen statt als runde Chips – die gewählte Antwort wird farbig gefüllt. Das wirkt bei kurzen Ja/Nein-Fragebögen aufgeräumter.
Terminplaner-Baustein
Der Terminplaner-Baustein macht aus dem Formular eine präferenzbasierte Terminanfrage: Der Interessent wählt bevorzugte Wochentage und ein Zeitfenster, Octoserv schlägt daraus automatisch freie Termine vor und versendet sie. Aktivieren und konfigurieren Sie ihn direkt im Abschnitt Terminplaner des Formulars – die beiden Präferenzfelder werden dabei automatisch angelegt und ins Formular eingefügt.
Die ausführliche Beschreibung finden Sie unter Terminvorschläge aus Formularen.
Termin optional anbieten (nur Nachricht senden)
Standardmäßig muss jeder, der das Formular absendet, Wochentage und Zeitfenster angeben. Wer nur eine Frage stellen möchte, kommt damit nicht durch. Mit dem Schalter Termin optional anbieten im Abschnitt Terminplaner lösen Sie das:
- Über den Terminfeldern erscheint eine Checkbox, deren Beschriftung Sie frei wählen (Vorgabe: „Ich möchte einen Terminvorschlag erhalten“).
- Ist sie angehakt, verhält sich das Formular wie bisher: Wochentage und Zeitfenster sind sichtbar und Pflicht.
- Nimmt der Interessent das Häkchen weg, klappt der Terminteil ein, die Pflichtangaben entfallen – und es werden keine Terminvorschläge erzeugt und versendet. Die Anfrage kommt als reine Nachricht an.
Zwei weitere Einstellungen dazu:
- Standardmäßig angehakt – empfohlen. Ist die Checkbox leer vorbelegt, ist der Terminteil beim Öffnen eingeklappt und wird leicht übersehen.
- Ohne Termin ist die Nachricht Pflicht – verhindert Absendungen, die weder einen Terminwunsch noch eine Nachricht enthalten.
Ob jemand einen Termin wollte, sehen Sie später am Kontakt: Die Entscheidung wird als eigenes Feld mitgespeichert.
Benachrichtigung bei jeder Absendung
Im Abschnitt Benachrichtigung legen Sie pro Formular fest, ob Sie beim Absenden eine E-Mail bekommen. Die Mail enthält alle übermittelten Angaben und einen Link zum Kontakt.
- Empfänger – leer lassen, dann geht die Mail an die in Octoserv hinterlegte Adresse. Mehrere Adressen trennen Sie durch Komma.
- Kopie (CC) – alle Empfänger sehen sich gegenseitig.
- Blindkopie (BCC) – Empfänger im Blindkopie-Feld sehen die übrigen Adressen nicht.
- Betreff – leer lassen für „Neue Formularanfrage: <Formularname>“. Mit
{formular}setzen Sie den Formularnamen an eine beliebige Stelle, mit{first},{last}oder{anrede}Angaben des Kontakts (seit 2.53.5).
Diese Mail ist unabhängig von der Terminplaner-Mail: die geht an den zuständigen Mitarbeiter und nur dann, wenn jemand tatsächlich einen Termin angefragt hat. Die Benachrichtigung hier kommt bei jeder Absendung, auch bei einer reinen Nachricht.
CRM-Feld-Zuordnung
Jedes Formularfeld kann direkt einem Kontaktfeld in Octoserv zugeordnet werden. Wird ein Formular abgeschickt, legt Octoserv anhand der gemappten Felder automatisch einen neuen Kontakt an – oder aktualisiert einen bereits vorhandenen Kontakt, sofern die E-Mail-Adresse bereits im System bekannt ist.
Zuordnung einrichten
- Öffnen Sie das gewünschte Formular im Editor.
- Klicken Sie auf ein Formularfeld, das einem CRM-Kontaktfeld entsprechen soll (z. B. das E-Mail-Feld).
- Wählen Sie in der rechten Seitenleiste unter CRM-Zuordnung das passende Kontaktfeld aus dem Dropdown aus.
- Wiederholen Sie diesen Schritt für alle weiteren Felder, die Sie zuordnen möchten.
- Speichern Sie das Formular.
Standardfelder landen automatisch im richtigen Kontaktfeld
Die gebräuchlichsten Kontaktfelder ordnet Octoserv von selbst zu – Sie müssen dafür nichts einstellen. Sobald ein Formularfeld eines dieser Standardfelder ist, landet der eingegebene Wert beim Absenden direkt im passenden Kontaktfeld (und aktualisiert einen bestehenden Kontakt, wenn die E-Mail-Adresse bereits bekannt ist):
- Vorname und Nachname
- E-Mail-Adresse
- Telefon (Festnetz) und Mobil
- Firma, Position und Webseite
- Adresse: Straße, Adresszusatz, PLZ, Ort, Bundesland/Region, Land
- Geburtstag
Das gilt für alle Einbettungsvarianten (Kurzcode, direkte Einbettung, iFrame und die selbst gehostete Variante) und auch für bereits bestehende Formulare – ohne dass Sie die Formulare neu anlegen müssen. Die manuelle CRM-Zuordnung aus dem vorherigen Abschnitt brauchen Sie nur noch für eigene, selbst angelegte Kontaktfelder.
Formular auf externen Seiten einbetten
Fertige Formulare können auf beliebigen Websites eingebettet werden. Octoserv stellt dafür zwei Einbettungsmethoden bereit:
| Methode | Geeignet für | Besonderheit |
|---|---|---|
| iFrame | Alle Websites, auch ohne JavaScript-Unterstützung | Formular wird in einem eigenen Rahmen dargestellt; Styling ist von der Zielseite isoliert |
| JavaScript | Websites mit aktivem JavaScript | Formular integriert sich nahtlos ins Layout der Zielseite; CSS der Zielseite kann angewendet werden |
| Rawcode (HTML) | Eigene Seiten, bei denen Sie das Markup selbst weiterverarbeiten möchten | Das komplette Formular-HTML zum Kopieren – auf einer fremden Seite frei stylebar; das Absenden läuft weiterhin über Octoserv |
Einbettcode kopieren
- Navigieren Sie zu Formulareditor › Formulare und öffnen Sie das gewünschte Formular.
- Klicken Sie oben rechts auf Einbetten.
- Wählen Sie die gewünschte Methode: iFrame, JavaScript oder Rawcode.
- Kopieren Sie den angezeigten Code-Schnipsel (beim Rawcode über Rawcode kopieren).
- Fügen Sie den Code an der gewünschten Stelle im Quellcode Ihrer Website ein.
Neben iFrame und JavaScript finden Sie hier auch den Rawcode – das komplette Formular-HTML zum Selbst-Einbauen auf einer fremden Seite.
Einreichungen
Im Bereich Einreichungen sehen Sie alle abgeschickten Formulardaten in chronologischer Reihenfolge. Jede Einreichung zeigt Datum, Uhrzeit sowie alle ausgefüllten Felder.
Filtern und Exportieren
- Nutzen Sie die Filterleiste oben, um Einreichungen nach Formular, Zeitraum oder Suchbegriff einzugrenzen.
- Klicken Sie auf CSV exportieren, um die gefilterten Einreichungen als Tabellendatei herunterzuladen – z. B. für die Weiterverarbeitung in einem Tabellenkalkulationsprogramm.
Reports
Der Bereich Reports gibt Ihnen einen Überblick über die Performance Ihrer Formulare.
- Einreichungsvolumen – Wie viele Formulare wurden im gewählten Zeitraum abgeschickt?
- Conversion-Rate – Welcher Anteil der Formular-Aufrufe hat zu einer vollständigen Einreichung geführt?
Wählen Sie oben im Report-Bereich den gewünschten Zeitraum sowie das Formular aus, um die Auswertung anzupassen. Die Diagramme aktualisieren sich automatisch.
Voraussetzungen
- Sie benötigen einen aktiven Octoserv-Zugang mit entsprechenden Benutzerrechten für den Formulareditor.
- Um Formulare auf externen Websites einzubetten, benötigen Sie Zugriff auf den Quellcode oder das CMS der jeweiligen Website.
- Für die automatische Kontaktanlage über die CRM-Feld-Zuordnung muss das Formular mindestens ein E-Mail-Feld enthalten, das dem CRM-Kontaktfeld E-Mail zugeordnet ist.
Formular-Landingpages im Flow-Editor
Wenn Sie Formulare als Formular-Step im Flow-Editor verwenden, stehen Ihnen erweiterte Funktionen zur Verfügung, die über den Formulareditor hinausgehen:
- Eigene Landingpage mit frei wählbarem Template, Titel, Sidebar-Inhalten, Ansprechpartner und individuellem Farbdesign
- Eigene Dankeseite mit demselben Layout-System, individuell gestaltbar
- Tracking & Consent mit OctoLytics, Google Analytics (GA4) und Meta Pixel, inklusive DSGVO-konformem Consent-Banner
Die vollständige Dokumentation zu diesen Funktionen finden Sie unter:
Flow-Editor › Formular-Landingpages