Spendenformular in deine Website einbetten
Binde ein GoodFunds-Spendenformular mit zwei Code-Schnipseln direkt auf deiner eigenen Website ein.
Du kannst dein GoodFunds-Spendenformular direkt auf deiner eigenen Website anzeigen — egal ob WordPress, Webflow, TYPO3 oder selbstgebaut. Dafür fügst du zwei kleine Code-Schnipsel ein: einmal den Installationscode und einmal den Embed-Code des Formulars.
Du brauchst keine Programmierkenntnisse. Du kopierst zwei Schnipsel aus GoodFunds und fügst sie an der richtigen Stelle deiner Website ein. Wer eine Website mit GoodFunds-Landing Pages baut, braucht das hier nicht — dort ist das Formular schon eingebaut.
So funktioniert es
Das Einbetten besteht aus zwei Teilen:
- Installationscode — ein
<script>-Tag, das die GoodFunds-Komponenten lädt. Den fügst du einmal pro Website ein. - Embed-Code — ein kurzes HTML-Element für genau dieses Spendenformular. Den fügst du auf jeder Seite ein, auf der das Formular erscheinen soll.
Schritt für Schritt
Spendenformular in GoodFunds erstellen
Erstelle in GoodFunds ein Conversion-Element vom Typ Spendenformular und gestalte es so, wie du es brauchst. Wie das geht, liest du unter Kampagne erstellen.
Reiter „Veröffentlichen" öffnen
Öffne dein Spendenformular und wechsle auf den Reiter Veröffentlichen (engl. Publishing). Dort findest du zwei Felder: Website-Installationscode und Embed-Code.
📸 Screenshot wird ergänzt.
Installationscode in deine Website einfügen
Kopiere den Website-Installationscode. Er sieht so aus:
<script type="text/javascript" src="https://manager.goodfunds.de/goodfunds-components.es.js"></script>Füge ihn einmal in deine Website ein — am besten im <head>-Bereich oder direkt vor dem
schließenden </body>-Tag. In vielen CMS gibt es dafür ein Feld wie „Eigener Code im Header" oder ein
HTML-Snippet-Element.
Kopiere den Code immer direkt aus deinem GoodFunds-Account. So passt die Adresse garantiert zu deiner Instanz.
Embed-Code an die gewünschte Stelle setzen
Kopiere den Embed-Code und füge ihn dort ein, wo das Formular erscheinen soll. Er sieht so aus:
<gf-donation-form componentId="abc123"></gf-donation-form>Die componentId ist bei deinem Formular bereits korrekt eingetragen — kopiere den Code unverändert.
Bietet dein Styleguide einen Dunkelmodus an, zeigt GoodFunds zusätzlich einen Embed-Code für Dark Mode:
<gf-donation-form componentId="abc123" theme="dark"></gf-donation-form>Speichern und testen
Speichere deine Website-Seite und öffne sie im Browser. Das Spendenformular sollte nun erscheinen. Mach einen Test: Lässt sich das Formular ausfüllen und absenden?
Live-Demo
So sieht ein eingebettetes Spendenformular auf einer Website aus:
🔧 Interaktive Live-Demo wird ergänzt. Sie nutzt denselben Embed-Code wie oben — geladen mit einer Demo-
componentId.
Tipps
- Aussehen anpassen: Farben, Schrift und Rundungen steuerst du über deinen Styleguide in GoodFunds — nicht über CSS auf deiner Website.
- Mehrere Formulare: Du kannst beliebig viele Formulare einbetten. Der Installationscode muss nur einmal pro Seite vorhanden sein, der Embed-Code pro Formular.
- Inhalte ändern: Anpassungen am Formular in GoodFunds erscheinen automatisch auf deiner Website — du musst den Code nicht erneut einfügen.
Häufige Fragen
Das Formular wird nicht angezeigt.
Prüfe, ob der Installationscode (das <script>-Tag) wirklich auf der Seite vorhanden ist. Ohne ihn
kann der Embed-Code nicht geladen werden.
Kann ich das Formular auch in einem Pop-up zeigen? Ja. Sprich uns an — neben dem eingebetteten Formular gibt es auch eine Button-Variante, die das Formular in einem Overlay öffnet.
Beeinflusst das Formular die Ladezeit meiner Website? Das Skript wird asynchron geladen und ist sehr klein. Auf die Ladezeit deiner Seite hat es praktisch keinen Einfluss.