> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/formulare-und-umfragen/formulare-auf-externen-websites-einbetten.md). # Formulare auf externen Websites einbetten Bette Formulare auf externen Websites ein, wähle Anzeige und Auslöser bewusst und prüfe den vollständigen Besucherablauf. ## Was du damit erreichst Ein Formular aus deinem ONE LOOP Standort kann direkt auf einer externen Website angezeigt werden. Besucher bleiben dabei auf der Website und die übermittelten Angaben stehen anschließend im Standort für Kontaktbearbeitung und Automatisierungen zur Verfügung. Du entscheidest dabei nicht nur, **wo** das Formular erscheint, sondern auch **wie**, **wann** und **wie lange** es Besuchern angezeigt wird. ## Einbindungscode erzeugen 1. Öffne **Websites** → **Formulare**. 2. Erstelle ein neues Formular oder öffne ein vorhandenes. 3. Prüfe Felder, Pflichtangaben und Darstellung. 4. Öffne den Tab **Integrieren**. 5. Wähle die gewünschte Einbettungsart und stelle die Anzeigeoptionen ein. 6. Wähle **Einbindungscode kopieren**. 7. Speichere den Code unverändert. Erzeuge für jedes unterschiedliche Formular einen eigenen Einbindungscode. Ändere Gestaltung und Inhalte im Formular-Editor, nicht durch unkontrollierte Änderungen im kopierten Code. ## Die passende Einbettungsart wählen ### Direkt im Inhalt Bei **Inline** erscheint das Formular an der gewählten Stelle im Seiteninhalt. Diese Variante passt gut für Kontakt-, Anmelde- oder Bewerbungsseiten, weil sie Besucherinnen und Besucher nicht unterbricht. ### Seitlich dauerhaft sichtbar Die **fixierte Seitenleiste** sitzt links oder rechts am Bildschirm und bleibt beim Scrollen sichtbar. Wähle sie nur, wenn das Formular nicht den eigentlichen Seiteninhalt verdecken soll. ### Seitlich behutsam einblenden Beim **seitlichen Einblenden** fährt das Formular von links oder rechts ins Bild. Diese Darstellung eignet sich für eine gezielte Einladung, ohne den gesamten Inhalt sofort zu überlagern. ### Seite und Minimierung festlegen Für die fixierte Seitenleiste und das seitliche Einblenden wählst du die gewünschte Bildschirmseite. Mit **Minimieren erlauben** darf eine Person das Formular zu einer kleinen Lasche verkleinern und bei Bedarf wieder öffnen. Gib für die minimierte Ansicht einen kurzen, verständlichen Titel ein, damit die Lasche ihren Zweck erklärt. Prüfe beide Positionen auf Desktop und Mobilgerät: Die Lasche oder das Formular darf weder wichtige Navigation noch den Absende-Button verdecken. ### Als Fenster über der Seite Ein **Pop-up** erscheint über dem Seiteninhalt und braucht eine bewusste Schließaktion. Nutze diese Variante sparsam und mit einem klaren Anlass, etwa nach dem Lesen eines Angebots. ## Höhe für nicht eingebettete Formulare festlegen Für Pop-up, seitliches Einblenden und die fixierte Seitenleiste kannst du eine eigene Fensterhöhe festlegen. Bei **Inline** steht diese Einstellung nicht zur Verfügung. Die Voreinstellung beträgt 500 Pixel. Zulässig ist jede ganze Zahl ab 1. Bestehende Einbindungen ohne eigene Höhenangabe funktionieren weiterhin wie bisher. Wähle eine Höhe, in der alle Pflichtfelder und der Absende-Button auf einem üblichen Bildschirm gut erreichbar bleiben. Prüfe die Darstellung anschließend auf Mobilgeräten und am Desktop. ## Einwilligung der Website berücksichtigen Bei einer Einbettung ist die Option **Cookie-Einwilligung der Website berücksichtigen** verfügbar. Aktiviere sie, wenn deine externe Website mit einem Einwilligungsbanner arbeitet und die Einbettung diese Einstellung beachten soll. Der verwendete Anbieter kann dabei automatisch erkannt werden. Teste die veröffentlichte Seite anschließend in einem privaten Browserfenster mit den bei dir vorgesehenen Einwilligungszuständen. So erkennst du, ob das Formular für Besucher wie geplant erscheint, ohne dabei bereits vorhandene Browserdaten zu verwenden. ## Festlegen, wann das Formular erscheint Unter den Auslöseoptionen wählst du eine der folgenden Regeln: * **Nach einem Scroll-Anteil:** Das Formular erscheint, nachdem ein definierter Anteil der Seite gelesen wurde. * **Nach einer Wartezeit:** Das Formular erscheint nach der festgelegten Anzahl von Sekunden. * **Immer anzeigen:** Das Formular ist ohne Auslöser sichtbar. Diese Einstellung bestimmt nur den Moment der Anzeige. Sie legt nicht fest, wie lange das Formular aktiv bleibt. ## Aktivierung und Deaktivierung steuern ### Aktivierung * **Ab dem festgelegten Besuch:** Das Formular erscheint erst ab einer bestimmten Anzahl von Seitenbesuchen. * **Immer aktiv:** Das Formular ist bei jedem Besuch aktiviert. ### Deaktivierung * **Nach einer festgelegten Anzahl von Anzeigen:** Nach dieser Anzahl wird das Formular nicht weiter eingeblendet. * **Nach einer übermittelten Antwort:** Nach dem Absenden einer Antwort wird das Formular nicht weiter angezeigt. * **Nie deaktivieren:** Das Formular bleibt aktiv. Auslöser, Aktivierung und Deaktivierung greifen zusammen. Du kannst beispielsweise ein Pop-up nach einer Wartezeit einblenden, erst ab dem zweiten Besuch aktivieren und nach einer übermittelten Antwort deaktivieren. ## Code auf der Website einfügen Füge den Code an der Stelle ein, an der das Formular erscheinen soll. Die genaue Bezeichnung unterscheidet sich je nach Website-System, häufig heißt sie „Eigener Code“, „HTML“, „Code einfügen“ oder „Widget einbetten“. Nach dem Einfügen speicherst du die Seite, veröffentlichst sie und prüfst sie im Browser. Wichtig: Ein bereits eingebundener Code aktualisiert sich nicht selbst. Änderst du Einbettungsart, Auslöser, Aktivierung, Deaktivierung oder Fensterhöhe, erzeuge einen neuen Einbindungscode und ersetze den bisherigen Code auf der Website vollständig. ## Formularlink statt Einbindungscode verwenden Im Bereich **Integrieren** kannst du neben dem Code auch den direkten Formularlink kopieren. Diesen Link kannst du beispielsweise in einer E-Mail, einem Social-Media-Beitrag oder einer Nachricht verwenden. Der Link zeigt das Formular direkt an und benötigt keinen HTML-Bereich auf deiner Website. ## Häufige Website-Systeme ### Squarespace Öffne die erweiterten Einstellungen und den Bereich zum Einfügen von Code. Für eine Einbindung auf allen Seiten fügst du den Code in Kopf- oder Fußbereich ein. Für eine einzelne Seite verwendest du den Codebereich dieser Seite. Anschließend speichern und veröffentlichen. Auf abschließenden Seiten lassen sich dort laut geprüfter Grundlage keine Formulare einbetten. ### Wix Öffne im Editor die Einbettungsoptionen, wähle ein Widget für eigenen Code, füge den Einbindungscode ein und aktualisiere die Seite. Prüfe die Vorschau vor dem Veröffentlichen. ### Shopify Öffne im Onlineshop die Theme-Verwaltung, bearbeite den Code des verwendeten Themes und füge den Einbindungscode im passenden Kopf- oder Fußbereich der Layout-Datei ein. Nimm vorher eine Sicherung des Themes vor und teste die veröffentlichte Seite. ### WordPress Öffne die gewünschte Seite im Editor und füge einen Block für eigenes HTML hinzu. Setze den Einbindungscode in diesen Block, aktualisiere die Seite und teste sie anschließend im Browser. ### Duda Öffne die Zielseite im Editor, ziehe ein HTML-Widget auf die Seite und füge den Einbindungscode darin ein. Speichere, veröffentliche und teste die Seite. ## Praxisbeispiel Ein Unternehmen nutzt eine externe Website und möchte Anfragen zentral im Standort bearbeiten. Auf der Leistungsseite soll ein Formular erst erscheinen, wenn Besucher die Hälfte der Seite gelesen haben. Das Team wählt ein seitliches Einblenden, legt eine passende Fensterhöhe fest und kopiert den erzeugten Code in den HTML-Bereich der Seite. Nach dem Veröffentlichen sendet es eine Testanfrage und prüft Kontakt, Formularantwort und den anschließenden Workflow. Wird später der Auslöser angepasst, ersetzt das Team auch den Einbindungscode auf der Website. ## Typische Fehler * **Code gekürzt oder verändert:** Kopiere ihn vollständig und unverändert. * **Neue Anzeigeoptionen nur im Editor gespeichert:** Erzeuge danach einen neuen Code und ersetze den alten auf der Website. * **Nur im Editor getestet:** Öffne die veröffentlichte Seite in einem privaten Browserfenster. * **Formular erscheint zu früh oder gar nicht:** Prüfe Auslöser, Aktivierung und Deaktivierung gemeinsam. * **Formular an der falschen Stelle eingebunden:** Prüfe Seite und Einbettungsart. * **Kontakt kommt nicht an:** Sende eine Testantwort und kontrolliere Formularantworten sowie Kontaktprofil. * **Theme-Code direkt geändert ohne Sicherung:** Sichere das Theme oder arbeite zuerst in einer Testversion. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/formulare-und-umfragen/formulare-auf-externen-websites-einbetten.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.