Dokumentation

Hier findest du alle Informationen, die du benötigst, um Konfidoo Forms optimal zu nutzen. Von der ersten Einrichtung bis zu fortgeschrittenen Funktionen – unsere umfassende Dokumentation begleitet dich Schritt für Schritt.

Auf dieser Seite:

Übersicht

Integration in CMS- und Shop-Systeme

Als Link Einbinden

Als Element in eine Seite integrieren

Übersicht

Konfidoo-Formulare kannst du ganz einfach in jede bestehende Webseite integrieren. Wir bieten verschiedene Möglichkeiten zur Integration, sodass du die für dein System passende Variante wählen kannst.

Individuelle Webseiten: Einbindung über eine Web-Komponente (HTML & JavaScript).
E-Mails und andere Szenarien: Nutze einen einfachen Link zur Integration in Webseiten-Builder, E-Mails und andere Plattformen.
CMS- und Shop-Systeme: Direkte Integration über Plugins für gängige Systeme.

Integration in CMS- und Shop-Systeme

Für CMS- und Shop-Systeme bieten wir Plugins zur einfachen Einbindung.

WordPress-Integration

Das WordPress-Plugin ermöglicht die Integration über einen Content-Block direkt im Editor. Weitere Informationen findest du auf der Plugin-Seite.

Joomla!-Integration

Die Joomla!-Erweiterung ermöglicht die Integration über einen Short-Code direkt im Editor. Weitere Informationen findest du auf der Plugin-Seite.

Weitere Systeme

Falls du ein anderes CMS oder Shopsystem verwendest, unterstützen wir dich gerne bei der Integration. Kontaktiere uns einfach!

Als Link Einbinden

Die schnellste und einfachste Methode ist die Einbindung per Link. Hierbei wird das Formular über einen einfachen Hyperlink in eine Webseite, E-Mail oder sonstige Systeme eingefügt.

Vorgehensweise:

Füge den folgenden Code in den HTML-Quelltext deiner Webseite ein:

<a href="<link-ziel>">Formular öffnen</a>

💡 Tipps:

Das Attribut target="_blank" kann verwendet werden, um das Formular in einem neuen Tab oder Fenster zu öffnen.
Das konkrete Link-Ziel sowie ein individueller Code-Schnipsel stehen im jeweiligen Formular unter dem Menüpunkt Veröffentlichen zur Verfügung.

Als Element in eine Seite integrieren

Wenn du direkten Zugriff auf den HTML-Code deiner Webseite hast, kannst du das Formular als Web-Komponente einbetten. Diese Methode eignet sich besonders für individuelle Webseiten, die ohne CMS oder Shopsysteme betrieben werden.

Schritt 1: JavaScript einbinden

Damit die Web-Komponente funktioniert, muss zunächst das benötigte JavaScript in den <head>- oder <body>-Bereich der Seite eingefügt werden:

<script src="https://konfidoo.de/elements/v01/main.js"></script>

🚀 Tipp:

Der <script>-Tag kann entweder im <head> oder am Ende des <body>-Bereichs eingefügt werden.
Das JavaScript muss auf jeder Seite eingebunden werden, auf der eine Konfiguration angezeigt werden soll.

Schritt 2: Formular auf der Webseite einfügen

Nachdem das Skript geladen wurde, kannst du das Formular über den folgenden HTML-Code an der gewünschten Stelle einbinden:

Inline

<kfd-inline
  project="#projekt_id#"
  configuration="#formular_id#">
</kfd-inline>

kfd-inline ist die Standardvariante für eingebettete Formulare. Das Element nutzt Shadow DOM, damit Styles der Webseite und Styles des Formulars möglichst getrennt bleiben.

Falls deine Webseite die Formular-Styles bewusst selbst überschreiben soll oder Shadow DOM in deinem Umfeld Probleme verursacht, kannst du stattdessen kfd-inline-plain verwenden:

<kfd-inline-plain
  project="#projekt_id#"
  configuration="#formular_id#">
</kfd-inline-plain>

Zusätzlich gibt es Varianten für Formulare mit Startbereich oder Dialog:

<kfd-intro
  project="#projekt_id#"
  configuration="#formular_id#"
  title="Anfrage starten"
  subtitle="Beantworte ein paar kurze Fragen"
  btntext="Starten">
</kfd-intro>

<kfd-modal
  project="#projekt_id#"
  configuration="#formular_id#"
  btntext="Formular öffnen">
</kfd-modal>

Optionen

Du kannst das Verhalten der Web-Komponenten über HTML-Attribute steuern. Die folgenden Optionen gelten für kfd-inline, kfd-inline-plain, kfd-intro und kfd-modal.

Attribut	Werte	Standard	Beschreibung
`project`	Projekt-ID	–	(Pflicht) Die ID deines Projekts.
`configuration`	Formular-ID	–	(Pflicht) Die ID des Formulars.
`showtitle`	`"true"` / `"false"`	`"false"`	Zeigt den Formulartitel oberhalb des Formulars an.
`showpagelayout`	`"true"` / `"false"`	`"true"`	Blendet den äußeren Seiten-Rahmen (Header, Hintergrund, Schatten) ein oder aus.
`contentstyling`	`"true"` / `"false"`	`"true"`	Veraltet. Verwende stattdessen `showpagelayout`.
`ignorepagestyles`	`"true"` / `"false"`	`"false"`	Zeigt den Seiten-Rahmen, ignoriert aber alle CI-Farb- und Stil-Einstellungen des Projekts. Nützlich, wenn du eigenes CSS für den Rahmen verwenden möchtest.

Für kfd-intro und kfd-modal stehen zusätzlich diese Attribute zur Verfügung:

Attribut	Beschreibung
`title`	Titel oberhalb des Start- oder Dialog-Buttons.
`subtitle`	Ergänzender Text oberhalb des Start- oder Dialog-Buttons.
`btntext`	Beschriftung des Buttons.
`btnicon`	Icon des Buttons.
`btncls`	Zusätzliche CSS-Klasse für den Button auf der Host-Webseite.

Beispiel mit Optionen:

<kfd-inline
  project="#projekt_id#"
  configuration="#formular_id#"
  showtitle="true"
  showpagelayout="false"
  ignorepagestyles="true">
</kfd-inline>

Hinweis zu Styles: Verwende nach Möglichkeit kfd-inline. Diese Variante kapselt das Formular per Shadow DOM und verhindert dadurch viele Konflikte mit CSS der einbettenden Webseite. Nutze kfd-inline-plain nur, wenn du die Formular-Darstellung gezielt über die Webseite beeinflussen möchtest.

Problembehebung

Ist das JavaScript und der HTML-Tag korrekt eingebunden, wird die Konfiguration an der entsprechenden Stelle angezeigt. Falls die Konfiguration nicht wie erwartet angezeigt wird, gibt das System eine Fehlermeldung aus.

Fehlercodes:

Code 000 - Unbekannter Fehler
Interner Fehler – Bitte Support kontaktieren
Code 001 - Ungültige Parameter
Die Attribute project und configuration fehlen oder haben ungültige Werte.
Code 002 - Projekt kann nicht geladen werden
Interner Fehler – Bitte Support kontaktieren
Code 003 - Projekt wurde nicht gefunden
Der Wert im Attribut project ist nicht korrekt. Trage eine valide Projekt-ID ein.
Code 004 - Projekt wurde noch nicht verifiziert
Die Projektdaten wurden noch eingetragen oder noch nicht verifiziert. Prüfe die Projekt-Einstellungen.
Code 005 - Konfiguration kann nicht geladen werden
Interner Fehler – Bitte Support kontaktieren
Code 006 - Konfiguration wurde nicht gefunden
Die ID im Attribut configuration ist nicht korrekt. Trage eine valide Formular-ID ein.
Code 007 - Nur für autorisierte Benutzer sichtbar
Zugriff erfordert Anmeldung oder Berechtigung. Melden dich mit einem Benutzer des Projektes in einem anderen Fenster an und lade die Seite neu.

Weitere Schritte zur Fehlerbehebung

Wenn keine Fehlermeldung und keine Konfiguration angezeigt wird, solltest du die Einbindung des JavaScript oder HTML Codes überprüfen. Hierfür empfiehlt es sich, die Webseite mit den Entwicklertools des Browsers zu untersuchen. Gehe dabei wie folgt vor:

Webseite mit Konfiguration öffnen.
Nutze die Entwicklertools deines Browsers (z. B. Chrome: F12 drücken).
Überprüfe unter „Netzwerk“, ob das JavaScript ohne Fehler geladen wurde.
Falls das Skript korrekt geladen wurde, wähle mit dem „Inspektor“ den Bereich aus, an dem das Formular erscheinen sollte.
Prüfe, ob der HTML-Tag (z. B. <kfd-inline>) korrekt eingebunden ist.

Wie man die Entwicklertools öffnet (Beispiel Chrome)

📌 Hinweis: Eine detaillierte Anleitung zur Nutzung der Entwicklertools findest du in der offiziellen Dokumentation deines Browsers.