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.

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.

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.
• 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.

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)

1. Laden Sie die mitgelieferte Receiver-PHP-Datei einmalig auf Ihren externen Webserver hoch (Pfad und Zugangsdaten erhalten Sie unter Einstellungen › OctoPages › Remote-Deploy).
2. Tragen Sie in den Deploy-Einstellungen der Landingpage die Receiver-URL und den API-Schlüssel ein.
3. Klicken Sie auf Veröffentlichen und wählen Sie Externer Server.
4. Octoserv überträgt die HTML-Datei automatisch an den Receiver auf Ihrem Server.

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.

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.