Landingpages

Der Octoserv Landingpage-Builder ermöglicht es Ihnen, professionelle Landingpages ohne Programmierkenntnisse zu erstellen und direkt zu veröffentlichen. Alle Seiten werden als schlanke, schnelle HTML-Dateien ausgespielt – ideal für Kampagnen, Lead-Generierung und Produktvorstellungen. Erfasste Formulardaten landen automatisch als Kontakte in Ihrem Octoserv-CRM.

Wofür ist diese Funktion

Mit dem Landingpage-Builder erstellen Sie zielgerichtete Seiten für Ihre Marketing-Kampagnen. Anders als normale Webseiten sind Landingpages auf eine einzige Aktion ausgerichtet – zum Beispiel das Ausfüllen eines Kontaktformulars, das Anfordern eines Angebots oder die Anmeldung zu einem Event. Der integrierte Formular-Builder verbindet Ihre Landingpage direkt mit dem Octoserv-CRM, sodass neue Leads ohne manuellen Aufwand erfasst werden.

• Erstellung statischer HTML-Landingpages per Drag-and-Drop oder HTML-Import
• Automatische Übertragung von Formular-Einsendungen als CRM-Kontakte
• Veröffentlichung auf demselben Server oder auf einem externen Server
• DSGVO-konforme Einbindung eigener Webfonts und Bilder
• Tracking-Code-Verwaltung pro Seite (z. B. Tag Manager)

Unterseiten / Bereiche

So verwenden Sie Landingpages

Neue Landingpage erstellen

1. Navigieren Sie zu OctoPages › Landingpages.
2. Klicken Sie auf + Neue Landingpage. Der Editor öffnet sich und das Einstellungs-Panel klappt rechts automatisch auf.
3. Vergeben Sie im Panel unter Seite einen Internen Namen (nur für die interne Verwaltung sichtbar). Der Slug wird daraus automatisch erzeugt; die Öffentliche URL tragen Sie ein, sobald sie feststeht.
4. Klicken Sie unten im Panel auf ✓ Einstellungen speichern. Das Panel schließt sich und die Seite ist als Entwurf angelegt.
5. Wählen Sie den gewünschten Editor-Modus über die Reiter Builder oder HTML-Import.

Das Einstellungs-Panel

Der Knopf Einstellungen oben rechts öffnet das Panel am rechten Rand. Es enthält alles, was die Seite als Ganzes betrifft, in Karten untereinander. Drei Karten (SEO, Schema, KI-Handbuch) sind zunächst zugeklappt; ein Klick auf die Kopfzeile öffnet sie. Unten steht ✓ Einstellungen speichern.

Seite

Seiten-Layout

SEO & Metadaten

Schema & KI-Sichtbarkeit

Diese Angaben werden als Schema.org-Daten in die Seite geschrieben. Suchmaschinen und KI-Assistenten (ChatGPT, Gemini und andere) erkennen daran, welches Unternehmen hinter der Seite steht. Die Angaben müssen mit dem Impressum übereinstimmen.

KI-Handbuch (llms.txt)

Eine llms.txt beschreibt die Seite in einem festen Format für KI-Crawler. Nach dem Aktivieren erscheinen die Felder Zweck dieser Seite, Wichtige Entitäten, Grundprinzipien, Fakten zur Einordnung und Weitere Seiten. Schreiben Sie dort nüchtern, was die Seite ist und für wen; keine Werbesprache, keine Preise. Die Datei wird beim Deployen neben der Seite abgelegt.

Schriftarten

Hier laden Sie eigene Schriften hoch (woff2, woff, ttf, otf) und wählen sie für Fließtext und Überschriften. Details unter Webfonts.

Externe Veröffentlichung

Damit veröffentlichen Sie die Seite auf einem fremden Server ohne FTP: Receiver-URL eintragen, speichern, ZIP herunterladen, auf dem Zielserver hochladen. Anleitung unter Remote-Deploy.

Formular & Webhook

Tragen Sie hier eine Adresse ein, sendet jedes Formular der Seite seine Felder zusätzlich per POST dorthin, etwa an eine Automatisierung. Die CRM-Anbindung läuft davon unabhängig.

Modals und Rechtliches

Modals sind Dialogfenster, die sich über einen Button öffnen, ohne die Seite zu verlassen: ein Kontaktformular, eine Preisliste, eine Galerie. Unter dem Reiter Modals legen Sie sie mit + Neues Modal an; ein Modal wird wie eine kleine Seite aus Sektionen gebaut. Jeder Button auf der Seite kann danach ein Modal öffnen. Für das Conversion-Tracking bekommt ein Modal einen virtuellen Seitenpfad, der beim Öffnen als Seitenaufruf gezählt wird.

Unter Rechtliches pflegen Sie Impressum und Datenschutzerklärung: Firmenname, Vertretungsberechtigte, Anschrift, Kontakt, Register- und Steuerangaben. Aus diesen Feldern erzeugt Octoserv die beiden Texte als Modals und verknüpft sie automatisch in der Fußzeile und im Cookie-Hinweis. Sie gelten für diese Seite; die Schema-Karte greift auf dieselben Angaben zurück.

Visueller Builder

Der visuelle Builder bietet einen Drag-and-Drop-Ansatz, bei dem Sie vorgefertigte Sektionen auf Ihre Seite ziehen und anschließend anpassen.

Sektionen hinzufügen

1. Öffnen Sie die gewünschte Landingpage im Editor.
2. Klicken Sie auf Sektion hinzufügen und wählen Sie einen Sektionstyp aus der Bibliothek:

• Hero – Großflächiger Einstiegsbereich mit Überschrift, Untertext und Call-to-Action-Button
• Features – Auflistung von Merkmalen oder Vorteilen mit Icons
• CTA – Handlungsaufforderungsbereich mit Button
• Testimonials – Kundenstimmen und Bewertungen
• Kontaktformular – Einbettbares Formular mit CRM-Anbindung
• Bild / Medien – Freifläche für Bilder oder eingebettete Videos
• Text – Freier Textblock
• Fußzeile – Seitenfuß mit Links und Impressumshinweis

3. Ziehen Sie Sektionen per Drag-and-Drop in die gewünschte Reihenfolge.
4. Klicken Sie auf eine Sektion, um Texte, Farben und Bilder direkt im Editor zu bearbeiten.
5. Speichern Sie zwischenzeitlich mit Speichern oben rechts. Ist das Einstellungs-Panel geöffnet, nutzen Sie ✓ Einstellungen speichern am unteren Panelrand – der Kopfbereich liegt dann hinter dem Panel.

Texte und Farben anpassen

1. Klicken Sie auf das Textelement oder den Farbbereich, den Sie ändern möchten.
2. Im rechten Einstellungsbereich erscheinen die verfügbaren Optionen (Schriftgröße, Farbe, Ausrichtung).
3. Farben können als Hex-Wert (#ffffff) oder über den Farbwähler eingegeben werden.

Bilder einbinden

1. Klicken Sie auf ein Bildelement in einer Sektion.
2. Wählen Sie Bild auswählen, um die Bilderbibliothek dieser Seite zu öffnen.
3. Laden Sie neue Bilder per Drag-and-Drop oder über Bild hochladen hoch.
4. Wählen Sie das gewünschte Bild und bestätigen Sie mit Übernehmen.

Native Felder vs. HTML-Blöcke

Beim Aufbau einer Seite – ob manuell oder per Import – gibt es zwei Arten, wie Sektionsinhalte gespeichert werden:

Native Felder (visuell editierbar)

Alle Felder, die der Builder direkt kennt, sind im Editor vollständig bearbeitbar:

• Hintergrundfarbe, Textfarbe – über den Farbwähler anpassbar
• Hintergrundbild, Position – per Bildauswahl und Regler einstellbar
• Abstands-Felder (oben, rechts, unten, links) – als Zahlwert in px einstellbar
• Overlay-Farbe und -Stärke – für einen farbigen Schleier über einem Hintergrundbild
• Spalten-Hintergrundbilder – jede Spalte kann ein eigenes Hintergrundbild haben
• Spaltenbreiten – relative Verteilung (z.B. 55 % / 45 %)
• Anker-ID – für direkte Verlinkung auf eine Sektion (#kontakt)
• Textinhalt einer Spalte – wenn der Spaltentyp auf Text steht

HTML-Blöcke (eingefroren)

Wenn eine Spalte auf den Typ HTML gesetzt ist, wird ihr Inhalt als Rohtext gespeichert und direkt ausgegeben. Das ermöglicht komplexe Layouts oder benutzerdefiniertes Markup – allerdings mit einem wichtigen Unterschied:

• HTML-Inhalte sind im visuellen Editor nicht editierbar. Änderungen müssen direkt im HTML-Code vorgenommen werden.
• Section-Level-Felder (Hintergrundfarbe, Abstände, Bild) bleiben davon unberührt – sie sind immer über den Editor anpassbar.

HTML-Import

Der HTML-Import-Modus richtet sich an Nutzer, die eine fertige HTML-Vorlage – zum Beispiel aus einem externen Editor – einbinden möchten.

1. Wählen Sie beim Erstellen oder in den Seiteneinstellungen den Modus HTML-Import.
2. Fügen Sie Ihren vollständigen HTML-Code in das Eingabefeld ein.
3. Klicken Sie auf Importieren.
4. Octoserv ergänzt automatisch den konfigurierten Tracking-Code (siehe Abschnitt Tracking-Manager).
5. Prüfen Sie die Vorschau und veröffentlichen Sie die Seite.

Formular-Builder

Der Formular-Builder ermöglicht die Einbindung von Kontaktformularen direkt auf Ihrer Landingpage. Ausgefüllte Formulare werden automatisch als neue Kontakte im Octoserv-CRM gespeichert.

Formular konfigurieren

1. Fügen Sie im visuellen Builder die Sektion Kontaktformular ein oder öffnen Sie ein bestehendes Formular über Formular bearbeiten.
2. Klicken Sie auf Feld hinzufügen und wählen Sie den Feldtyp:

• Textfeld (einzeilig)
• Textbereich (mehrzeilig)
• E-Mail
• Telefon
• Auswahlliste
• Checkbox
• Datum

3. Legen Sie für jedes Feld die Bezeichnung (Feldname auf der Seite) und den Platzhaltertext fest.
4. Aktivieren Sie bei Pflichtfeldern die Option Erforderlich.
5. Ordnen Sie jedem Feld ein CRM-Zielfeld zu (z. B. Vorname, Nachname, E-Mail-Adresse, Telefon, Notiz).
6. Speichern Sie das Formular mit Änderungen speichern.

Weiterleitungsseite nach dem Absenden

1. Öffnen Sie die Formulareinstellungen.
2. Geben Sie unter Weiterleitung nach Absenden eine URL ein (z. B. eine Dankeschön-Seite).
3. Alternativ aktivieren Sie Bestätigungsmeldung anzeigen und formulieren Ihren Bestätigungstext.

Standardfelder landen im richtigen Kontaktfeld

Der Landingpage-Formular-Builder arbeitet nach denselben Regeln wie der Formulareditor: Die gängigen Kontaktfelder – Vorname, Nachname, E-Mail, Telefon, Mobil, Firma sowie die vollständige Adresse (Straße, Adresszusatz, PLZ, Ort, Region, Land) – werden zuverlässig in das passende Kontaktfeld geschrieben. Ein mehrzeiliges Nachricht-Feld wird als Notiz am Kontakt gespeichert. So stimmen die Daten im CRM, egal ob der Lead über ein Flow-Formular oder eine Landingpage kommt.

Spam-Schutz und Tracking – zentral geregelt

Spam-Schutz und Conversion-Tracking müssen Sie nicht mehr pro Formular einrichten. Beides wird einmal zentral in den Einstellungen hinterlegt und gilt dann für alle Formulare gleich – auf Landingpages genau wie im Formulareditor:

• Spam-Schutz: Honeypot und Captcha-Anbieter (z. B. reCAPTCHA, hCaptcha oder Cloudflare Turnstile) legen Sie unter Einstellungen → Sicherheit → Formular-Schutz fest. Im Formular-Builder tragen Sie keine Schlüssel mehr ein. Ob Sie bei einer Absendung eine E-Mail erhalten, legen Sie dort im Abschnitt Benachrichtigung fest – mit Empfänger, Kopie, Blindkopie und Betreff, genau wie im Formulareditor. Bei Cloudflare Turnstile wählen Sie dort zusätzlich die Darstellung: „Nur bei Bedarf einblenden“ lässt die Prüfung still durchlaufen und zeigt das Widget erst, wenn jemand wirklich klicken muss – das Formular bleibt frei von einem leeren Kasten. „Immer sichtbar“ lässt den Hinweis dauerhaft stehen.
• Tracking: Ihre Pixel/Mess-IDs (z. B. GA4, Meta Pixel, Google Ads) hinterlegen Sie zentral in den Tracking-Einstellungen. Beim Absenden feuert das Formular automatisch die passenden Conversion-Ereignisse.

Der Builder zeigt Ihnen in den Bereichen Spam-Schutz und Tracking nur noch als Status an, ob und welcher Schutz bzw. welche Pixel aktiv sind – ohne Eingabefelder. So ist auf einen Blick klar, was greift, und es kann kein widersprüchliches Doppel-Setup mehr entstehen.

Mehrseitiges Formular mit Schritten

Ein langes Formular teilen Sie wie im Flow-Editor mit dem Spezialfeld Seitenumbruch in Schritte: Fügen Sie den Umbruch an der Stelle ein, an der ein neuer Schritt beginnen soll, und tragen Sie als Titel den Namen des folgenden Schritts ein. Damit auch der erste Schritt einen Namen bekommt, setzen Sie einen Seitenumbruch ganz an den Anfang. Haben alle Schritte einen Titel, steht über dem Formular eine Legende mit allen Schritten – erledigte Schritte sind anklickbar, vorwärts geht es nur über Weiter, das zuvor die Pflichtfelder des aktuellen Schritts prüft. Fehlt ein Titel, erscheint die Zeile „Schritt X von N“. Farben und Beschriftungen der Schaltflächen legen Sie im Bereich Einstellungen → Schritte fest. Der bisherige Typ Multi-Step mit getrennten Feldlisten bleibt erhalten und zeigt jetzt ebenfalls Schritt-Titel und Legende.

Zugangsdaten sicher empfangen

Das Spezialfeld Zugangsdaten funktioniert genau wie im Flow-Editor (siehe Zugangsdaten sicher empfangen): Das Label wird zum Titel des Eintrags im Tresor der Firma, Sie wählen die Kategorie und legen bis zu drei Felder mit eigener Bezeichnung fest, vertrauliche Werte mit dem Häkchen geheim. Die Werte werden im Browser verschlüsselt und landen nur im Tresor der Firma, nicht im Kontakt und nicht in Mails. Das Firmenfeld verschwindet, wenn der Besucher erkannt ist und einer Firma angehört (wie bei Nur abfragen, wenn noch leer). Anonyme Besucher geben den Firmennamen an; Octoserv ordnet sie einer vorhandenen Firma zu oder legt sie an. Der Verantwortliche der Firma bekommt einen Hinweis per Mail, ohne die Werte. Ein Formular kann ein Feld Zugangsdaten enthalten.

Weitere Feldoptionen wie im Flow-Editor

• Nur abfragen, wenn noch leer: Ist der Besucher über einen Superlink oder einen Link aus einer Octoserv-E-Mail erkannt und der Wert am Kontakt bekannt, wird das Feld ausgeblendet und mit dem bekannten Wert mitgesendet. Anonyme Besucher sehen das Feld wie gewohnt. Der Link braucht keine Werte in der Adresse. Liegt die Landingpage auf derselben Domain wie Octoserv, zeigt der Superlink einfach auf die Seite. Liegt sie auf einer anderen Domain, verwenden Sie als Zieladresse des Superlinks die Durchgangsadresse, die der Formular-Editor unter Einstellungen → Erkannte Links zum Kopieren anbietet – sie erkennt den Kontakt und leitet ihn mit einem kurzlebigen Schlüssel zur Seite weiter. Beim Testen: Wer angemeldet ist, gilt selbst als erkannter Kontakt, in der Vorschau verschwinden dann die eigenen bekannten Felder. Die Knöpfe Vorschau als anonymer Besucher und Vorschau als dieser Kontakt (Kontakt-ID eintragen) an derselben Stelle zeigen die Seite so, wie ein Besucher bzw. ein bestimmter Kontakt sie sieht.
• Datei-Upload – Zusammen max.: begrenzt die Summe aller Dateien einer Absendung. Steht hier eine Zahl, nennt das Formular nur sie.
• Auch ohne Flow kommt jede Anfrage an: Gibt es für das Formular keinen aktiven Flow mit dem Auslöser „Octoform“, legt Octoserv den Kontakt trotzdem an, speichert die Einsendung, schickt die Benachrichtigung an die Empfänger des Formulars (ohne Empfänger an die hinterlegte Absenderadresse) und vermerkt die Anfrage im Journal des Kontakts. Ein Flow ist nur nötig, wenn danach weitere Schritte laufen sollen.
• Benachrichtigung: hochgeladene Dateien gehen als Anhang mit (abschaltbar). Unter Antwortmail an den Absender schicken Sie dem Absender dieselbe Übersicht seiner Angaben mit eigenem Betreff und Anschreiben, auf Wunsch mit den Dateien.
• Terminplaner – Termin optional anbieten: ein Haken im Formular entscheidet, ob Wochentage und Zeitfenster abgefragt und Termine vorgeschlagen werden. Ohne Haken schickt der Besucher nur seine Nachricht; auf Wunsch wird sie dann zum Pflichtfeld.
• Optionen nebeneinander bei Auswahlfeldern, Rahmen um das Feld im Feld-Design, Hinweistext mit Fett, Kursiv und Unterstrichen, und eine bedingte Anzeige, die im veröffentlichten Formular greift.

Webfonts

Octoserv unterstützt den Upload eigener Schriftarten. Damit werden Schriften ausschließlich vom eigenen Server ausgeliefert – kein externer Abruf, keine Übertragung von Nutzerdaten an Dritte.

1. Navigieren Sie zu OctoPages › Webfonts.
2. Klicken Sie auf Schriftart hochladen.
3. Laden Sie die Schriftdateien im Format .woff oder .woff2 hoch.
4. Vergeben Sie einen Anzeigenamen für die interne Auswahl.
5. Die Schriftart steht anschließend im visuellen Builder unter den Schriftarteneinstellungen zur Verfügung.

Tracking-Manager

Der Tracking-Manager ermöglicht die Einbindung externer JS-Snippets pro Seite – zum Beispiel für Tag Manager, Conversion-Tracking oder Analyse-Pixel.

1. Öffnen Sie die gewünschte Landingpage und wechseln Sie zum Reiter Tracking.
2. Klicken Sie auf Snippet hinzufügen.
3. Fügen Sie Ihren JavaScript-Code in das Eingabefeld ein.
4. Wählen Sie die Position der Einbindung: <head> oder <body> (Ende).
5. Speichern Sie das Snippet.

Das Snippet wird bei jeder Veröffentlichung automatisch in die erzeugte HTML-Datei integriert – auch im HTML-Import-Modus.

Analyse-Dienste der Seite

Im selben Reiter Tracking schalten Sie für jede Landingpage einzeln die Analyse-Dienste ein:

• Google Analytics (GA4): Measurement-ID im Format G-XXXXXXXXXX. Läuft erst nach Zustimmung im Datenschutz-Banner.
• Google Ads Conversion: Conversion-ID Ihres Google-Ads-Kontos.
• Meta Pixel: Pixel-ID. Läuft ebenfalls erst nach Zustimmung.
• YouTube-Videos: Auf Wunsch startet ein Video erst, wenn der Besucher zugestimmt hat. Bis dahin sieht er ein Vorschaubild zum Anklicken.
• Octoserv Analytics: Misst ohne Cookies und braucht deshalb keinen Datenschutz-Banner. Sie wählen die Website aus, der Site Key wird eingetragen.

Datenschutz-Banner

Sobald ein Dienst aktiv ist, der eine Zustimmung braucht, bietet der Reiter den Datenschutz-Banner an. Er wird direkt in die Seite eingebaut, Sie brauchen kein zusätzliches Werkzeug.

• Links: Datenschutzerklärung und Impressum, jeweils als Modal der Seite oder als Adresse. Ein Modal hat Vorrang.
• Texte: Überschrift, Beschreibung und die Beschriftung der beiden Knöpfe („Alle akzeptieren“ und „Nur notwendige“).
• Gestaltung: Farben, Schriftgrößen und Rahmen des Banners.
• Später ändern: Ein Knopf „Cookie-Einstellungen“ auf der Seite lässt Besucher ihre Entscheidung jederzeit ändern.

Deploy – Seite veröffentlichen

Landingpages können auf zwei Wegen veröffentlicht werden: lokal auf demselben Server wie Octoserv oder auf einem externen Server.

Lokales Deploy

1. Öffnen Sie die Landingpage und klicken Sie auf Veröffentlichen.
2. Wählen Sie als Ziel Lokaler Server.
3. Bestätigen Sie mit Jetzt veröffentlichen.
4. Die fertige HTML-Datei ist unter der konfigurierten URL erreichbar.

Remote-Deploy (externer Server)

Soll die Seite auf einem fremden Webserver liegen (etwa unter der Domain des Kunden), richten Sie einmalig den Receiver ein, ein kleines Empfängerskript, das Octoserv die fertige Seite übergibt. FTP oder SSH brauchen Sie dafür nicht.

1. Öffnen Sie das Einstellungs-Panel, Karte Externe Veröffentlichung.
2. Tragen Sie als Receiver-URL die Domain oder Adresse ein, unter der die Seite liegen soll (z. B. https://angebot.kundendomain.de). Der Pfad zum Skript wird automatisch ergänzt.
3. Speichern Sie die Einstellungen. Octoserv erzeugt dabei den Receiver-Token, mit dem sich die Übertragung ausweist.
4. Klicken Sie auf octo-receiver.zip herunterladen und laden Sie den Inhalt des Archivs in das Wurzelverzeichnis des Zielservers hoch. Der Token ist im Archiv bereits eingetragen.
5. Klicken Sie auf Verbindung testen. Meldet Octoserv Erfolg, klicken Sie oben auf Deployen: Die Seite wird an den Receiver übertragen.

Alle späteren Änderungen gehen über dieselbe Verbindung raus; das Archiv laden Sie nur einmal hoch. Geben Sie den Token nicht weiter. Er bleibt auch bestehen, wenn Sie die Receiver-URL ändern. Ändern Sie den Token selbst, laden Sie das Archiv danach neu hoch.

Status: Entwurf und Veröffentlicht

Jede Landingpage befindet sich in einem von zwei Zuständen:

Um eine veröffentlichte Seite zu aktualisieren, nehmen Sie die gewünschten Änderungen im Editor vor und klicken Sie erneut auf Veröffentlichen. Die bestehende Seite wird überschrieben.

Um eine Seite vom Netz zu nehmen, setzen Sie den Status auf Entwurf zurück und bestätigen Sie das Zurückziehen des Deployments.

Anwendungsbeispiele

Leadgenerierung mit Whitepaper

1. Neue Landingpage anlegen (Slug z. B. whitepaper).
2. Einstiegsbereich mit Überschrift und kurzem Text hinzufügen.
3. Formular mit Vorname, E-Mail und Datenschutz-Checkbox anlegen. Die Standardfelder landen automatisch im richtigen Kontaktfeld.
4. Nach dem Absenden auf die Download-Seite weiterleiten.
5. Seite veröffentlichen.
6. Optional: eine Kampagne einrichten, die nach dem Absenden das Whitepaper per E-Mail verschickt.

Webinar-Anmeldung in mehreren Schritten

1. Landingpage mit Einstiegsbereich und den Agenda-Punkten anlegen.
2. Ein mehrseitiges Formular bauen: Schritt 1 Kontaktdaten, Schritt 2 Details, Schritt 3 Bestätigung.
3. Seite veröffentlichen und den Anmelde-Link in Ihrer E-Mail-Kampagne verwenden.

Bewerbungsformular mit Datei-Upload

1. Landingpage mit Stellenbeschreibung und Handlungsaufruf erstellen.
2. Formular mit Kontaktfeldern und einem Datei-Feld anlegen, zum Beispiel nur Dokumente, höchstens drei Dateien.
3. Veröffentlichen. Die Bewerbungen erscheinen mit ihren Dateien in der Kontaktakte.

Voraussetzungen

• Das Modul OctoPages muss aktiviert sein.
• Die API-Schlüssel für OctoPages müssen unter Einstellungen › OctoPages konfiguriert sein.
• Für Remote-Deploy: Die Receiver-PHP-Datei muss einmalig auf dem Zielserver eingerichtet und die Receiver-URL in den Deploy-Einstellungen hinterlegt sein.
• Für die CRM-Formularanbindung: Mindestens ein CRM-Kontaktfeld muss im Formular-Builder zugeordnet sein.