Landingpage Builder
Mit dem Landingpage Builder erstellen Sie professionelle Landingpages direkt in Octoserv – ohne zusätzliche Software. Jede Seite wird als eigenständige, schnell ladende Datei erzeugt und kann lokal gespeichert oder direkt auf Ihren Webserver übertragen werden.
Erste Schritte
Neue Seite anlegen
- Klicken Sie auf „+ Neue Seite“.
- Vergeben Sie einen Namen (nur zur internen Identifikation).
- Geben Sie einen Slug ein – daraus wird der Dateiname (z.B.
meine-kampagneergibtmeine-kampagne.html). - Bestätigen Sie – der Seiteneditor öffnet sich automatisch.
Seitenübersicht
In der Übersicht sehen Sie alle angelegten Landingpages. Für jede Seite stehen drei Aktionen zur Verfügung:
- Bearbeiten: Öffnet den Seiteneditor.
- Deployen: Veröffentlicht die Seite.
- Löschen: Entfernt die Seite aus dem System (bereits veröffentlichte Dateien auf dem Server bleiben erhalten).
Der Seiteneditor
Der Seiteneditor hat drei Tabs:
- Sektionen: Hier bauen Sie die Seite auf – Abschnitt für Abschnitt.
- Modals: Popup-Fenster, die über Buttons oder nach dem Formularabsenden erscheinen können.
- Formulare: Alle Formulare, die auf der Seite eingebunden werden sollen.
Verfügbare Sektionstypen
Eine Landingpage setzt sich aus einzelnen Sektionen zusammen. Folgende Typen stehen zur Verfügung:
| Name | Beschreibung | Geeignet für |
|---|---|---|
| Hero – Zentriert | Zentrierte Überschrift, Untertext und Buttons. | Klassischer Einstiegsbereich |
| Hero – Bild links/rechts | Text und Bild nebeneinander. | Produkt- oder Personen-Präsentationen |
| Hero – Vollbild | Hintergrundbild über die gesamte Höhe, Text darüber. | Maximale visuelle Wirkung |
| Hero – Animiert | Wie „Zentriert“ mit Einblend-Animation. | Aufmerksamkeit beim ersten Besuch |
| Hero – Cinematic | Großflächig mit starkem Bildkontrast. | Emotionale Markenbotschaften |
| Hero – Elegant / Elegant Multi | Reduziertes, hochwertiges Design. | Dienstleistungsangebote |
| Spalten (1–5) | Flexibler Mehrspalten-Bereich. | Frei gestaltbare Inhaltsblöcke |
| CTA-Banner | Auffallender Handlungsaufruf mit Buttons. | Aktionsaufrufe und Angebote |
| Infoboxen | 3–5 Kacheln mit Icon, Überschrift und Text. | Leistungsübersichten, Feature-Listen |
| Testimonials | Kundenstimmen mit Bild, Name und Zitat. | Vertrauensaufbau |
| Formular | Bindet ein erstelltes Formular ein. | Kontaktformulare, Anmeldungen |
| Footer | Abschluss mit Impressum- und Datenschutzlinks. | Empfohlen als letzte Sektion |
Sektionen verwalten
- Hinzufügen: Klicken Sie auf „+ Sektion hinzufügen“ und wählen Sie den gewünschten Typ.
- Verschieben: Mit den Pfeil-Buttons (↑ / ↓) ändern Sie die Reihenfolge.
- Bearbeiten: Klicken Sie auf eine Sektion, um Texte, Bilder, Farben und Abstände zu konfigurieren.
- Löschen: Über das Papierkorb-Symbol. Dieser Vorgang kann nicht rückgängig gemacht werden.
Formulare
Im Tab „Formulare“ erstellen Sie Kontaktformulare, die automatisch mit dem Octoserv-CRM verbunden sind – jeder Absender wird sofort als Kontakt angelegt.
Formular anlegen
- Wechseln Sie zum Tab „Formulare“.
- Klicken Sie auf „+ Neues Formular“.
- Vergeben Sie einen Namen und wählen Sie den Typ: Statisch (einstufig) oder Multi-Step (mehrstufig).
- Der Formular-Editor öffnet sich.
Verfügbare Feldtypen
| Typ | Beschreibung |
|---|---|
| Text | Einzeiliges Texteingabefeld. |
| E-Mail-Feld mit automatischer Formatprüfung. | |
| Telefon | Telefonnummer-Eingabefeld. |
| Zahl | Akzeptiert nur Zahlen. |
| Textbereich | Mehrzeiliges Textfeld (z.B. für Nachrichten). |
| Dropdown | Auswahlfeld mit vordefinierten Optionen. |
| Radio | Einfachauswahl aus mehreren Optionen. |
| Mehrfachauswahl | Mehrere Optionen gleichzeitig wählbar. |
| Datum | Datumsauswahl. |
| Adressfelder | Straße, PLZ, Ort, Bundesland, Land. |
| Versteckt | Unsichtbares Feld, das automatisch einen festen Wert übergibt. |
| Hinweistext | Zeigt einen Informationstext im Formular an (kein Eingabefeld). |
| Datei-Upload | Besucher können Dateien hochladen. Dateitypen, Größe und Anzahl sind einstellbar. |
CRM-Schnellauswahl
Der Editor bietet eine Schnellauswahl mit vordefinierten CRM-Feldern (Vorname, Nachname, E-Mail, Telefon, Firma, Adresse usw.). Diese Felder werden automatisch den richtigen Kontaktfeldern in Octoserv zugeordnet.
Datei-Upload-Feld
Besucher können Dateien direkt über das Formular hochladen. Sie legen fest:
- Erlaubte Dateitypen: Dokumente (PDF, DOC usw.), Bilder, Archive oder Medien.
- Maximale Dateigröße: 1 bis 100 MB pro Datei.
- Maximale Anzahl: 1 bis 20 Dateien.
Hochgeladene Dateien werden automatisch dem Kontakt in Octoserv zugeordnet und sind in der Kontaktansicht unter „Dateien“ abrufbar.
Bedingte Anzeige
Felder können abhängig vom Wert anderer Felder ein- oder ausgeblendet werden. Wählen Sie im Feldeditor den Reiter Bedingung und konfigurieren Sie das auslösende Feld, den Operator (gleich, ungleich, enthält, ist leer, ist nicht leer) und den Vergleichswert.
Formular-Design
Im Reiter „Design“ passen Sie alle visuellen Aspekte an: Farben, Abstände, Eckenradius, Beschriftungs-Styling, Platzhalter-Farbe, Fehlerfarbe und den kompletten Absende-Button.
Formular-Einstellungen
Spam-Schutz
- Honeypot (immer aktiv): Erkennt automatische Bots ohne Aufwand für echte Besucher.
- hCaptcha / reCAPTCHA v2 / reCAPTCHA v3: Zusätzlicher Schutz, erfordert die Eingabe von Schlüsseln.
DSGVO-Checkbox
Fügt eine Datenschutz-Zustimmungscheckbox hinzu. Text und Link sind frei konfigurierbar.
Was passiert nach dem Absenden?
- Nachricht anzeigen: Ein Dankestext wird angezeigt.
- Weiterleitung: Der Besucher wird automatisch zu einer anderen Seite weitergeleitet.
- Modal öffnen: Ein Popup-Fenster erscheint.
URL-Parameter-Vorbefüllung
Formularfelder können automatisch mit Werten aus der URL vorbefüllt werden. Besonders nützlich in Kombination mit E-Mail-Kampagnen: Fügen Sie in der E-Mail einen Link mit personalisiertem Parameter ein, damit das Formular bereits ausgefüllt erscheint.
Multi-Step Formulare
Multi-Step Formulare unterteilen längere Fragebögen in übersichtliche Schritte. Das erhöht die Abschlussrate, weil Besucher nicht von einem langen Formular abgeschreckt werden.
- Wählen Sie beim Anlegen den Typ „Multi-Step“.
- Fügen Sie im Editor Schritte hinzu. Jeder Schritt erhält einen Titel und eigene Felder.
- Ein Fortschrittsbalken zeigt dem Besucher, wie weit er ist.
- Zwischen den Schritten navigiert der Besucher über Zurück- und Weiter-Buttons.
Tracking & Datenschutz-Banner
Im Tab „Tracking“ konfigurieren Sie Analyse-Dienste für Ihre Landingpage. Jede Seite hat eine eigene Tracking-Konfiguration.
Verfügbare Tracking-Dienste
- Google Analytics 4: Tragen Sie Ihre Measurement-ID ein (Format:
G-XXXXXXXXXX). Wird erst nach Zustimmung im Consent-Banner aktiviert. - Meta Pixel: Geben Sie Ihre Pixel-ID ein. Wird ebenfalls erst nach Zustimmung aktiviert.
- Octoserv Analytics: Datenschutzkonform ohne Cookies – benötigt keinen Consent-Banner. Aktivierung per Site Key.
- YouTube-Videos: Optional kann die Einwilligung vor dem Abspielen verlangt werden.
Datenschutz-Consent-Banner
Sobald Google Analytics oder Meta Pixel aktiviert ist, erscheint der Bereich zur Konfiguration des Consent-Banners. Der Banner wird direkt in die Seite eingebettet – kein externes Plugin nötig.
Was Sie einstellen können:
- Links zu Datenschutzerklärung und Impressum
- Überschrift und Beschreibungstext
- Button-Beschriftungen („Alle akzeptieren“ / „Nur notwendige“)
- Logo, Farben, Hintergrund, Rahmen und Schriftgrößen
- Ein optionaler „Cookie-Einstellungen“-Button, über den Besucher ihre Entscheidung jederzeit ändern können
Tracking-Events bei Formularabsendung
Im Formular-Editor können Sie pro Formular konfigurieren, welche Tracking-Events beim Absenden ausgelöst werden (z.B. ein GA4-Event oder ein Meta-Pixel-Event). Diese Events werden nur ausgelöst, wenn der Besucher zuvor im Banner zugestimmt hat.
Formular in die Seite einbinden
- Wechseln Sie zum Tab „Sektionen“.
- Fügen Sie eine Sektion des Typs „Formular“ hinzu.
- Wählen Sie im Dropdown das gewünschte Formular aus.
Automatische CRM-Anbindung
Jedes Formular ist automatisch mit dem Octoserv-CRM verbunden. Wenn ein Besucher das Formular absendet, wird automatisch ein neuer Kontakt angelegt – oder ein bestehender aktualisiert, falls die E-Mail-Adresse bereits vorhanden ist.
Automatisierung nach Formularabsendung
Sie können einen Funnel (Automatisierungs-Workflow) einrichten, der bei jedem Formularabsenden startet – z.B. um automatisch eine Willkommens-E-Mail zu versenden.
- Navigieren Sie zu Marketing › Kampagnen.
- Fügen Sie einen neuen Startschritt hinzu und wählen Sie „Octoform“.
- Wählen Sie das gewünschte Formular aus.
- Speichern Sie den Funnel.
Seite veröffentlichen (Deployen)
Wenn die Seite fertig ist, klicken Sie auf den Deploy-Button. Dabei wird eine vollständige, eigenständige Datei erzeugt.
- Lokal speichern: Die Datei wird zum Download angeboten. Sie können sie manuell auf Ihren Server hochladen.
- Server-Deployment: Die Datei wird direkt auf Ihren Webserver übertragen. Dafür hinterlegen Sie in den Deployment-Einstellungen die Empfänger-URL, ein Sicherheits-Token und den Zielpfad.
Tracking-Codes werden automatisch eingebettet. Die erzeugte Datei funktioniert eigenständig – ohne Abhängigkeit von externen Systemen.
Anwendungsbeispiele
Leadgenerierung mit Whitepaper
- Neue Seite anlegen (Slug:
whitepaper). - Hero-Sektion mit Überschrift und Teaser-Text hinzufügen.
- Formular mit Vorname, E-Mail (per CRM-Schnellauswahl) und DSGVO-Checkbox anlegen.
- Erfolgsverhalten auf „Weiterleitung“ zur Download-Seite setzen.
- Formular-Sektion zur Seite hinzufügen und deployen.
- Optional: Funnel mit Octoform-Trigger einrichten, der das Whitepaper per E-Mail versendet.
Webinar-Anmeldung mit Multi-Step-Formular
- Landingpage mit Hero-Sektion und Infoboxen (Agenda-Punkte) anlegen.
- Multi-Step-Formular erstellen: Schritt 1 (Kontaktdaten), Schritt 2 (Details), Schritt 3 (Bestätigung).
- Fortschrittsbalken aktivieren.
- Seite deployen und den Anmelde-Link in Ihrer E-Mail-Kampagne verwenden.
Bewerbungsformular mit Datei-Upload
- Landingpage mit Stellenbeschreibung und CTA-Banner erstellen.
- Formular mit Kontaktfeldern und Datei-Upload-Feld anlegen (erlaubte Typen: Dokumente, max. 10 MB, max. 3 Dateien).
- Deployen. Bewerbungen mit Dateien erscheinen automatisch in der Kontaktansicht unter „Dateien“.