Formular-Einbettung: Technische Voraussetzungen und Fehlerbehebung

INHALTSVERZEICHNIS

• Warum wird mein Formular nicht angezeigt?
• Voraussetzungen für die Formular-Einbettung
• Vor der Fehlersuche: Einbettungscode überprüfen
• JavaScript kann nicht eingebunden werden
  • Typische Anzeichen
  • Mögliche Ursache
  • Lösung
• JavaScript ist eingebunden, das Formular wird jedoch nicht ausgeführt
  • Typische Anzeichen
  • Mögliche Ursache
  • Lösung
• Formular wird trotz eingebundenem JavaScript nicht angezeigt
  • Typische Anzeichen
  • Mögliche Ursachen
  • So behebst Du das Problem
• CMS blockiert iFrames
  • Typische Anzeichen
  • So behebst Du das Problem
• Sicherheitsrichtlinien blockieren Skripte oder Zahlungsdienste
  • Typische Anzeichen
  • So behebst Du das Problem
• JavaScript-Unterstützung des CMS prüfen
  • Wenn Dein CMS den Einbettungscode verändert
• Fehlermeldung: Einbettungsadresse stimmt nicht überein
  • Einbettungsadresse prüfen
  • Mehrere Domains oder URLs
  • Einbettung in Frames
• Fehlermeldung: FundraisingBox-Logo wurde nicht korrekt eingebunden
  • Einbettungsadresse erneut prüfen
  • Originalen Einbettungscode verwenden
  • CDN oder CMS verändert das Logo
  • Probleme durch Lazy Loading
  • Probleme mit WordPress-Plugins
• Formular wird ohne Fehlermeldung nicht oder an der falschen Stelle angezeigt
  • Cookie-Consent-Manager blockiert Local Storage
  • Typische Anzeichen
  • So behebst Du das Problem
• Ladezeit-Optimierungen verhindern das Laden des Formulars
  • Typische Anzeichen
  • Mögliche Ursachen
  • So behebst Du das Problem
• Best Practices für eine stabile Formular-Einbettung
• Häufige Probleme im Überblick
• Wenn das Problem weiterhin besteht

Warum wird mein Formular nicht angezeigt?

Wenn ein FundraisingBox-Formular auf Deiner Website nicht oder nicht korrekt angezeigt wird, liegt die Ursache häufig an der Einbindung oder an technischen Einschränkungen Deines Content-Management-Systems (CMS). In diesem Artikel erfährst Du, welche Voraussetzungen erfüllt sein müssen und wie Du typische Einbettungsprobleme Schritt für Schritt behebst.

Voraussetzungen für die Formular-Einbettung

Damit ein FundraisingBox-Formular vollständig geladen und ausgeführt werden kann, muss Dein CMS bestimmte technische Anforderungen erfüllen.

• JavaScript muss eingebunden und ausgeführt werden können.
• Das Einfügen von <script>-Tags muss erlaubt sein.
• iFrames dürfen nicht blockiert werden.
• Sicherheitsrichtlinien (z. B. Content Security Policy) dürfen externe Skripte und Zahlungsdienste nicht einschränken.

Vor der Fehlersuche: Einbettungscode überprüfen

Viele Darstellungsprobleme entstehen dadurch, dass der ursprüngliche Einbettungscode nachträglich verändert wurde, beispielsweise durch Plugins oder Funktionen Deines CMS.

Vergleiche deshalb zuerst den auf Deiner Website eingebundenen Code mit dem Einbettungscode aus der FundraisingBox.

1. Öffne die Seite mit Deinem Formular im Browser.
2. Rufe den Seitenquelltext auf. Nutze entweder STRG+U oder den Rechtsklick Deiner Maus und wähle "Seitenquelltext anzeigen" aus
   
3. Suche mit STRG+F nach dem Begriff FundraisingBox in Deinem Seitenquelltext.
4. Prüfe, ob der eingebundene Code mit dem ursprünglich bereitgestellten Einbettungscode übereinstimmt.

Den originalen Einbettungscode findest Du in Deinem FundraisingBox-Account links unter dem Menüpunkt Formulare. Öffne hier das gewünschte Formular mit Klick auf den Formularnamen und wechsle anschließend oben zum Reiter Einbettungscode.

JavaScript kann nicht eingebunden werden

Einige Website-Baukästen oder CMS erlauben keine eigenen JavaScript-Skripte. In diesem Fall kann das FundraisingBox-Formular nicht geladen werden.

Typische Anzeichen

• Das Formular erscheint gar nicht.
• Es wird lediglich ein leerer Bereich oder Platzhalter angezeigt.

Mögliche Ursache

Das CMS unterstützt keine freien HTML-Einbettungen oder blockiert <script>-Tags aus Sicherheitsgründen.

Lösung

1. Prüfe, ob Dein CMS eigene JavaScript-Skripte unterstützt.
2. Falls möglich, aktiviere die Einbindung externer Skripte.
3. Unterstützt Dein CMS globale Skripteinbindungen im Header, kann alternativ die dynamische Einbettung verwendet werden. Diese wird bei Bedarf durch den FundraisingBox-Support aktiviert.
4. Falls Du die Einstellung nicht findest, wende Dich an den Support Deines CMS-Anbieters.

JavaScript ist eingebunden, das Formular wird jedoch nicht ausgeführt

In manchen Fällen ist das Einbettungsskript zwar vorhanden, wird vom CMS jedoch nicht korrekt initialisiert.

Typische Anzeichen

• Das Formular bleibt leer.
• Der Einbettungscode ist vorhanden, erzeugt jedoch keine Ausgabe.
• In der Browser-Konsole erscheinen JavaScript-Fehlermeldungen.

Mögliche Ursache

Das CMS verhindert die Ausführung des Skripts oder verarbeitet nachgeladene Inhalte nicht korrekt. Dies tritt beispielsweise bei dynamisch erzeugten Seiten oder modernen Frontend-Frameworks auf.

Lösung

1. Lass bei Bedarf die dynamische Einbettung für Deinen FundraisingBox-Account aktivieren.
2. Erstelle auf der Seite einen <div>-Container mit der passenden Formular-ID.
3. Stelle sicher, dass das dynamische Skript das Formular an dieser Stelle einfügen kann.
4. Falls erforderlich, ziehe Deine IT oder den Support Deines CMS hinzu.

Formular wird trotz eingebundenem JavaScript nicht angezeigt

Ist das Einbettungsskript vorhanden, das Formular erscheint aber dennoch nicht, verhindern häufig Lazy-Loading-Mechanismen, Consent-Management-Plattformen oder dynamisch nachgeladene Inhalte die korrekte Initialisierung.

Typische Anzeichen

• Das Formular wird gar nicht oder erst mit Verzögerung angezeigt.
• Einzelne Elemente wie Logos oder Zahlungsarten fehlen.
• Das Formular erscheint nur nach einem Neuladen der Seite oder beim Scrollen.

Mögliche Ursachen

• Das CMS lädt Inhalte oder Bilder per Lazy Loading.
• Eine Consent-Management-Plattform blockiert Skripte bis zur Zustimmung der Besucher*innen.
• Ein JavaScript-Framework ersetzt oder verändert den DOM nach dem Laden der Seite.

So behebst Du das Problem

1. Prüfe, ob auf Deiner Website Lazy Loading oder asynchrones (async) Rendering aktiviert ist.
2. Kontrolliere, ob eine Consent-Management-Plattform externe Skripte blockiert.
3. Falls erforderlich, lasse die dynamische Einbettung für Deinen FundraisingBox-Account aktivieren.
4. Bleibt das Problem bestehen, wende Dich an den Support Deines CMS, damit die Lade- und Consent-Einstellungen geprüft werden.

CMS blockiert iFrames

Einige CMS oder Website-Baukästen verhindern grundsätzlich die Einbindung externer Inhalte über iFrames. In diesem Fall kann das FundraisingBox-Formular nicht dargestellt werden.

Typische Anzeichen

• Das Einbettungsskript ist vorhanden.
• Das Formular bleibt dennoch vollständig unsichtbar.

So behebst Du das Problem

1. Prüfe, ob Dein CMS externe iFrames zulässt.
2. Falls iFrames blockiert werden, aktiviere diese Funktion oder lasse sie durch Deinen CMS-Anbieter freischalten.

Sicherheitsrichtlinien blockieren Skripte oder Zahlungsdienste

Viele Websites verwenden Sicherheitsrichtlinien wie eine Content Security Policy (CSP). Sind diese zu restriktiv konfiguriert, können externe Skripte oder Zahlungsdienste nicht geladen werden.

Typische Anzeichen

• Das Formular wird angezeigt, Zahlungen funktionieren jedoch nicht.
• In der Browser-Konsole erscheinen Meldungen wie Refused to load script.

So behebst Du das Problem

1. Prüfe die Content-Security-Policy Deiner Website.
2. Ergänze die erforderlichen FundraisingBox-Domains in der Whitelist oder passe die Richtlinien entsprechend an.
3. Falls Du keinen Zugriff auf diese Einstellungen hast, kontaktiere den Support Deines CMS oder Hosting-Anbieters.

JavaScript-Unterstützung des CMS prüfen

Wenn Du vermutest, dass Dein CMS JavaScript nicht korrekt verarbeitet, kannst Du dies mit einem einfachen Test überprüfen.

Füge dazu folgenden Code auf der betreffenden Seite ein:

<script type="text/javascript"
src="https://www.fundraisingbox.com/assets/js/jstest.js">
</script>

Beim Aufruf der Seite erscheint eine Rückmeldung, ob JavaScript korrekt ausgeführt werden kann.

Wenn Dein CMS den Einbettungscode verändert

Einige CMS oder Plugins laden den Formularcode nicht direkt in den Quellcode der Seite, sondern über ein CDN oder andere Zwischensysteme. Dadurch kann die in der FundraisingBox hinterlegte Einbettungsadresse nicht mehr mit der tatsächlichen URL übereinstimmen.

In diesem Fall solltest Du:

• prüfen, wie Dein CMS externe Skripte verarbeitet,
• den Formularcode möglichst direkt in die gewünschte Seite einbinden und
• bei Fragen den Support Deines CMS kontaktieren.

Fehlermeldung: Einbettungsadresse stimmt nicht überein

Fehlermeldung: Die hinterlegte Einbettungsadresse stimmt nicht mit dieser Adresse überein. Bitte korrigieren Sie diese Einstellungen in Ihrer FundraisingBox.

Die Einbettungsadresse schützt Dein Formular davor, auf nicht freigegebenen Webseiten verwendet zu werden. Erscheint die Meldung, dass die hinterlegte Einbettungsadresse nicht mit der aktuellen Adresse übereinstimmt, solltest Du zunächst die Konfiguration überprüfen.

Einbettungsadresse prüfen

Vergleiche die in der FundraisingBox hinterlegte Einbettungsadresse mit der URL, auf der das Formular eingebunden ist.

Browser-URL abgleichen, wo das Formular (veröffentlicht) liegen wird
vs.
Formular-Einstellungen:

Diese müssen übereinstimmen und gleich sein!

Prüfe dabei insbesondere:

• die vollständige URL einschließlich Unterseite,
• die Verwendung von https://,
• ob die Domain exakt übereinstimmt.

Beispiel:

• Richtig: https://www.meineorganisation.de/spenden.html
• Nicht ausreichend: https://www.meineorganisation.de

Mehrere Domains oder URLs

Zeigst Du dasselbe Formular unter mehreren Domains oder unterschiedlichen URLs an, muss diese Konfiguration berücksichtigt werden.

Typische Beispiele sind:

• www.meineorganisation.de und meineorganisation.de
• verschiedene Domains mit identischem Inhalt
• mehrere URLs, die dieselbe Spendenseite aufrufen

Werden auf den verschiedenen URLs unterschiedliche Inhalte angezeigt, benötigst Du für jede Einbettungsadresse ein eigenes Formular.

Einbettung in Frames

Die Einbettung eines FundraisingBox-Formulars innerhalb von Frame-Seiten oder verschachtelten iFrames wird nicht unterstützt.

Dadurch können unter anderem folgende Probleme entstehen:

• die automatische Höhenanpassung funktioniert nicht,
• vorausgefüllte Formularfelder stehen nicht zur Verfügung,
• nach erfolgreicher Zahlung erfolgt die Rückleitung außerhalb des Frames.

Fehlermeldung: FundraisingBox-Logo wurde nicht korrekt eingebunden

Fehlermeldung: Das FundraisingBox-Logo wurde nicht korrekt eingebunden.

Alle FundraisingBox-Formulare enthalten ein kleines FundraisingBox-Logo im unteren Bereich. Dieses Logo ist Bestandteil des Einbettungscodes und muss unverändert eingebunden werden.

Kann das Logo nicht korrekt geladen oder wurde der Einbettungscode verändert, wird das Formular aus Sicherheitsgründen nicht angezeigt.

Einbettungsadresse erneut prüfen

Überprüfe zunächst, ob die konfigurierte Einbettungsadresse mit der tatsächlichen URL der Spendenseite übereinstimmt.

Originalen Einbettungscode verwenden

Verwende ausschließlich den Einbettungscode, der in Deiner FundraisingBox für das jeweilige Formular bereitgestellt wird.

CDN oder CMS verändert das Logo

Einige CMS oder Optimierungs-Plugins laden Bilder automatisch über ein Content Delivery Network (CDN). Dabei wird die ursprüngliche Bildadresse des FundraisingBox-Logos ersetzt.

Dadurch erkennt der Logo-Check das Logo nicht mehr und das Formular wird nicht geladen.

Deaktiviere in diesem Fall die automatische Verarbeitung oder den CDN-Upload für den FundraisingBox-Einbettungscode. Informationen dazu erhältst Du beim Anbieter Deines CMS.

Probleme durch Lazy Loading

Wird das FundraisingBox-Logo erst verzögert geladen, kann die Logo-Prüfung fehlschlagen.

Typische Ursachen sind Plugins oder Funktionen, die Bilder erst beim Scrollen laden.

Prüfe daher:

• ob für Bilder Lazy Loading aktiviert ist,
• ob das FundraisingBox-Logo vom Lazy Loading ausgeschlossen werden kann,
• ob im Browser-Quellcode CSS-Klassen wie lazy, lazy-load, skip-lazy oder no-lazy verwendet werden.

Probleme mit WordPress-Plugins

Einige WordPress-Plugins, beispielsweise Plugins zum Kennzeichnen externer Links, verändern den HTML-Code des FundraisingBox-Logos.

Dadurch kann die automatische Logo-Prüfung fehlschlagen und das Formular wird nach dem Laden wieder ausgeblendet.

Überprüfe in diesem Fall den tatsächlich gerenderten HTML-Code im Browser und nicht ausschließlich den Einbettungscode in Deinem CMS.

1. Öffne die Spendenseite mit Deinem Spendenformular im Browser.
2. Klicke mit der rechten Maustaste auf das FundraisingBox-Logo.
3. Wähle Untersuchen.
4. Prüfe, ob zusätzliche HTML-Elemente oder Bilder innerhalb des Logo-Links eingefügt wurden.

Entferne diese Änderungen oder konfiguriere das betreffende Plugin so, dass der Logo-Link unverändert bleibt.

Formular wird ohne Fehlermeldung nicht oder an der falschen Stelle angezeigt

Wird das Formular ohne sichtbare Fehlermeldung gar nicht angezeigt, erscheint es an einer falschen Position oder unterhalb des Footers, liegt die Ursache häufig an der Verarbeitung des Einbettungsskripts durch Dein CMS oder zusätzliche Optimierungs-Plugins.

Cookie-Consent-Manager blockiert Local Storage

FundraisingBox-Formulare verwenden Local Storage, um während des Ausfüllens temporäre Informationen wie Spendenbetrag, Zahlungsart oder persönliche Daten zu speichern. Diese Daten werden ausschließlich für die Dauer des Besuchs benötigt und beim Verlassen der Seite wieder entfernt.

Einige Consent-Management-Plattformen unterscheiden jedoch nicht zwischen Cookies und Local Storage. Dadurch wird auch der für das Formular notwendige Local Storage blockiert.

Typische Anzeichen

• Das Formular wird trotz korrekter Einbettung nicht angezeigt.
• Das Problem tritt erst nach Einführung oder Änderung eines Cookie-Banners auf.
• Nach Zustimmung im Consent-Banner funktioniert das Formular weiterhin nicht.

So behebst Du das Problem

1. Prüfe die Einstellungen Deiner Consent-Management-Plattform.
2. Stelle sicher, dass der für FundraisingBox benötigte Local Storage nicht blockiert wird.
3. Falls erforderlich, wende Dich an den Support des Anbieters Deiner Consent-Lösung.

Ladezeit-Optimierungen verhindern das Laden des Formulars

Viele Performance-Plugins verändern die Reihenfolge, in der JavaScript geladen wird. Dadurch kann das FundraisingBox-Einbettungsskript nicht mehr korrekt ausgeführt werden.

Typische Anzeichen

• Das Formular wurde früher korrekt angezeigt und funktioniert nach einem CMS- oder Plugin-Update nicht mehr.
• In der Browser-Konsole erscheint eine Meldung wie:

Failed to execute 'write' on 'Document':
It isn't possible to write into a document
from an asynchronously-loaded external script

(Screenshot bleibt an dieser Stelle erhalten.)

Mögliche Ursachen

• Plugins zur Ladezeitoptimierung (z. B. Autoptimize, Async JavaScript oder WP Rocket).
• Plugins zum Einbinden eigener CSS- oder JavaScript-Dateien.
• Theme-Anpassungen, die JavaScript-Dateien automatisch mit defer oder async laden.

In diesen Fällen ergänzt das Optimierungs-Plugin das FundraisingBox-Skript automatisch um Attribute wie defer. Dadurch kann das Formular nicht mehr synchron initialisiert werden.

So behebst Du das Problem

1. Identifiziere das Plugin oder die Optimierungsfunktion, die das Skript verändert.
2. Schließe den FundraisingBox-Einbettungscode von der Optimierung aus.
3. Alternativ kannst Du die Optimierung für Seiten mit FundraisingBox-Formularen deaktivieren.

Best Practices für eine stabile Formular-Einbettung

• Verwende immer den aktuellen Einbettungscode aus Deiner FundraisingBox.
• Ändere den Einbettungscode nur, wenn dies ausdrücklich in der Dokumentation beschrieben ist.
• Teste das Formular nach Änderungen am CMS, Theme oder installierten Plugins.
• Prüfe nach Updates von Optimierungs- oder Sicherheits-Plugins die Formularfunktion.
• Verwende für jede Spendenseite die passende Einbettungsadresse.
• Lass JavaScript, externe Ressourcen und Zahlungsdienste nicht durch Sicherheitsrichtlinien blockieren.

Häufige Probleme im Überblick

Wenn das Problem weiterhin besteht

Konnten die beschriebenen Maßnahmen das Problem nicht beheben, prüfe zunächst den eingebundenen Quellcode sowie die Browser-Konsole auf Fehlermeldungen. Halte außerdem Informationen zu Deinem CMS, installierten Plugins und den vorgenommenen Optimierungen bereit.

Mit diesen Angaben kann der FundraisingBox-Support die Ursache deutlich schneller eingrenzen.