Formular erstellen und einbetten

INHALTSVERZEICHNIS

• Gut zu wissen
• Formular anlegen
  • Allgemeine Einstellungen konfigurieren
  • Abfragen konfigurieren
  • Transaktionseinstellungen konfigurieren
    • Art des Spendenformulars festlegen
    • Zahlungsrhythmen konfigurieren
    • Wunschtermin für Dauerspenden aktivieren
    • Freien Spendenbetrag erlauben
    • Zahlungsweisen auswählen
    • Gebührenübernahme anbieten
    • Posten zur Zweckbindung anbieten
    • Betragsvorschläge hinterlegen
  • Erfolgsseite konfigurieren
    • Automatische Erfolgsseite verwenden
    • Individuelle Erfolgsseite verwenden
  • Automatische Dankes-E-Mail einrichten
  • Animationen konfigurieren
  • Design anpassen
    • Farben und Design-Template auswählen
    • Individuelle Design-Anpassungen vornehmen
  • Wordings anpassen
  • Formular in der Vorschau prüfen
  • Formular auf Deiner Website einbetten

In diesem Artikel erfährst Du, wie Du ein Spendenformular in der FundraisingBox anlegst, konfigurierst und auf Deiner Website einbindest. Außerdem erhältst Du wichtige Hinweise, damit das Formular später zuverlässig funktioniert.

Gut zu wissen

• Die Tool-Tipps (das kleine "i" im grauen Kreis) innerhalb der FundraisingBox erklären einzelne Einstellungen und Felder direkt an der jeweiligen Stelle. Du brauchst einfach nur mit der Maus drüber zu schweben.
  
• Zu vielen Konfigurationsbereichen findest Du weiterführende Hilfe-Artikel über die verlinkten Hilfe-Center-Einträge (Das kleine "?" im blauen Kreis).
  
• Das Inhaltsverzeichnis auf der rechten Seite innerhalb der Formulareinstellungen ermöglicht Dir eine schnelle Navigation zwischen den einzelnen Bereichen.
• Für jede Einbettungsadresse wird ein eigenes Formular benötigt. Möchtest Du beispielsweise unterschiedliche Sprachversionen auf verschiedenen URLs bereitstellen, lege für jede URL ein separates Formular an.
• Für eine fehlerfreie Darstellung sollten Unterstützer*innen eine aktuelle Version eines unterstützten Webbrowsers verwenden.

Wenn Du prüfen möchtest, ob Deine Website JavaScript unterstützt, kannst Du den bereitgestellten JavaScript-Testcode auf der entsprechenden Seite einbinden. Beim Aufruf der Seite erhältst Du eine Rückmeldung, ob JavaScript aktiviert ist und das Formular eingebettet werden kann.

Formular anlegen

Lege zunächst ein neues Formular in Deiner FundraisingBox an.

1. Öffne im linken Menü den Bereich Formulare.
2. Klicke oben rechts auf den blauen Button Neues Formular anlegen.
   

Allgemeine Einstellungen konfigurieren

Im Bereich Allgemein legst Du die grundlegenden Eigenschaften Deines Formulars fest.

1. Formularname vergeben
   Wähle einen internen Namen, damit Du das Formular später leicht wiederfindest. Dieser Name ist für Besucher*innen Deiner Website nicht sichtbar.
2. Sprache auswählen
   Lege fest, in welcher Sprache das Formular angezeigt werden soll.
3. Einbettungsadresse hinterlegen
   Trage die vollständige URL der Seite ein, auf der Du das Formular später einbetten möchtest, zum Beispiel:
   
   https://www.meineorganisation.de/spenden

Hier ein Beispiel-Screenshot, wie die allgemeinen Einstellungen aussehen können:

Abfragen konfigurieren

Lege fest, welche Informationen Du im Spendenformular von Unterstützer*innen erfassen möchtest. Außerdem kannst Du bestimmen, welche Felder verpflichtend sind und wie das Formular auf mobilen Geräten dargestellt wird.

1. Abgefragte Felder auswählen
   Wähle aus, welche Angaben Spender*innen im Formular machen sollen.
2. Pflichtfelder festlegen
   Markiere alle Felder, die für den Abschluss einer Spende zwingend ausgefüllt werden müssen.
   
3. Felder auf mobilen Geräten ausblenden (optional)
   Falls erforderlich, kannst Du einzelne Formularfelder für die Anzeige auf Smartphones ausblenden.
   
4. Anreden verwalten
   Welche Anreden im Formular zur Auswahl stehen, legst Du in der separaten Konfiguration für zusätzliche Anreden fest.
5. Benutzerdefinierte Felder hinzufügen
   Bereits angelegte benutzerdefinierte Felder kannst Du verwenden, um organisationsspezifische Informationen abzufragen.

Ausführliche Informationen zu den einzelnen Formularfeldern findest Du im Hilfe-Artikel Spenderdaten im Formular abfragen.

Hier ein Beispiel-Screenshot für die Formularfelder:

Transaktionseinstellungen konfigurieren

In den Transaktionseinstellungen bestimmst Du, wie Spenden abgewickelt werden. Dazu gehören unter anderem Spendenbeträge, Zahlungsrhythmen, Zahlungsweisen und optionale Zusatzfunktionen.

Art des Spendenformulars festlegen

Wähle zunächst aus, wie Spendenbeträge im Formular verarbeitet werden sollen.

• Freies Spenden: Spender*innen geben einen beliebigen Betrag ein. Dieser wird im gewählten Zahlungsrhythmus eingezogen.
• Monatsbeträge: Der eingegebene Betrag wird mit 12 multipliziert und über zwölf Monate entsprechend dem gewählten Rhythmus verteilt.
• Jahresbeträge: Der eingegebene Betrag wird durch 12 geteilt und über zwölf Monate entsprechend dem gewählten Rhythmus eingezogen.

Zahlungsrhythmen konfigurieren

1. Aktiviere die gewünschten Zahlungsrhythmen indem Du die entsprechenden Haken setzt.
2. Ordne die Reihenfolge per Drag-and-Drop oder über die vorhandenen Steuerelemente an.
3. Lege bei Bedarf fest, welcher Rhythmus zuerst angezeigt wird.

Wunschtermin für Dauerspenden aktivieren

Optional kannst Du Spender*innen ermöglichen, einen gewünschten Abbuchungstag für Dauerspenden auszuwählen.

Zur Auswahl stehen:

• 5. des Monats
• 15. des Monats
• 25. des Monats

Freien Spendenbetrag erlauben

Aktiviere die Option Freien Betrag erlauben, wenn Spender*innen ihren Spendenbetrag selbst eingeben dürfen.

Zahlungsweisen auswählen

Im Formular werden alle Zahlungsweisen angezeigt, die Du zuvor in der FundraisingBox aktiviert hast.

Du kannst:

• Zahlungsarten aktivieren oder deaktivieren indem Du die Haken setzt oder wieder entfernst..
• Die Reihenfolge per Drag-and-Drop oder über die Pfeiltasten anpassen.

Tipp: Passe die Reihenfolge so an, dass zuerst die beliebtesten Zahlungsweisen kommen. In Deutschland ist dies in der Regel die Lastschrift.

Hier ein Beispiel-Screenshot, wie die Konfiguration und Reihenfolge der Zahlungsweisen aussehen kann:

Hinweis: Solltest Du Zahlungsweisen in Deinem Formular aktiviert haben, diese aber auf Deiner Website nicht angezeigt werden, wirf bitte einen Blick in folgenden Hilfe-Artikel: Zalhungsweisen werden nicht im Formular angezeigt

Gebührenübernahme anbieten

Du kannst Spender*innen die Möglichkeit geben, zusätzlich die Transaktionsgebühren zu übernehmen. Dadurch erhöht sich der Spendenbetrag entsprechend.

Weitere Informationen findest Du im Hilfe-Artikel zur Gebührenübernahme (Cover the fee).

Hier ein Beispiel-Screenshot, wie die Konfiguration für die Gebührenübernahme aussehen kann:

Posten zur Zweckbindung anbieten

Wenn Du Projekte angelegt hast, kannst Du diese als Posten dem Formular hinzufügen. Spender*innen können dann auswählen, welchem Posten ihre Spende zugeordnet werden soll. Optional kannst Du hier auch einen festen Betrag vorgeben.

Eine detaillierte Anleitung findest Du im Hilfe-Artikel: Formular mit Projekt-Auswahl

Die ausgewählten Projekte in den Posten lassen sich anschließend beispielsweise über folgende Funktionen auswerten:

• Smart-Suche
• Export
• Projektliste

Hier ein Beispiel-Screenshot, wie ein Posten in der Formular-Konfiguration aussehen kann:

Die Beschreibung ist im Spendenformular öffentlich sichtbar. Die Projektzuordnung hingegen ist ausschließlich intern in Eurem FundraisingBox-Account einsehbar und für Spendende nicht sichtbar.

Beim Betrag entscheidest Du selbst, ob ein fester Spendenbetrag vorgegeben werden soll oder ob die Spendenden den Betrag frei wählen können.

Betragsvorschläge hinterlegen

Optional kannst Du feste Spendenbeträge mit einer Beschreibung hinterlegen. So kannst Du zeigen, welche Wirkung unterschiedliche Spendensummen erzielen.

Hier ein Beispiel-Screenshot, wie Beitragsvorschläge aussehen können:

Erfolgsseite konfigurieren

Nach einer erfolgreichen Spende wird eine Erfolgsseite im Browser angezeigt. Du kannst entweder die automatische Erfolgsseite der FundraisingBox verwenden oder, je nach gebuchter FundraisingBox-Variante, eine eigene (individuelle) Erfolgsseite auf Deiner Website nutzen.

Automatische Erfolgsseite verwenden

1. Aktiviere die automatische Erfolgsseite, wenn Spender*innen nach Abschluss der Transaktion direkt im Formular eine Bestätigung sehen sollen.
2. Personalisiere die Erfolgsnachricht bei Bedarf mit Variablen im Bereich Wordings, um Spender*innen persönlich anzusprechen.
3. Lege fest, ob die Teilen-Funktion für Social Media, E-Mail oder einen Direktlink angezeigt werden soll.

Eine detaillierte Anleitung zur Konfiguration der automatischen Erfolgsseite findest Du in folgendem Hilfe-Artikel: Automatische Erfolgsseite konfigurieren

Individuelle Erfolgsseite verwenden

Abhängig von Deiner FundraisingBox-Variante kannst Du statt der automatischen Erfolgsseite eine eigene Landingpage auf Deiner Website verwenden. Diese Landingpage muss zuvor in Deinem Website-CMS angelegt werden, damit Du die URL in den Formular-Einstellungen angeben kannst.
Hier ein Beispiel-Screenshot, wie dies aussehen kann:

Tipp: Für einen noch individuelleren Dank, lassen sich auch Daten aus der Transaktion per Parameter an die individuelle Erfolgs-URL ergänzen und somit auf der Seite darstellen/nutzen, siehe: Individuelle Erfolgsseite nach einer Transaktion nutzen (z.B. für personalisiertes Danke und/oder Tracking)

Automatische Dankes-E-Mail einrichten

Nach einer erfolgreichen Spende kannst Du automatisch eine Dankes-E-Mail an Spender*innen versenden.

1. Lege die Absender-Adresse fest.
2. Wähle das gewünschte E-Mail-Template aus.
3. Speichere die Einstellungen, damit die E-Mail nach erfolgreichen Transaktionen automatisch versendet wird.

Weitere Informationen findest Du in den Hilfe-Artikeln zu:

• Out-of-the-box-E-Mailversand für Formular-Dankes-Mails
• E-Mail-Versand einrichten und Absender-Adressen aktivieren
• Automatische Dankes-E-Mail einstellen

Hier ein Beispiel-Screenshot, wie z.B. eine Konfiguration mit der Out-of-the-box-Dankes-E-Mail aussehen kann:

Animationen konfigurieren

Wenn Dein Formular das Design-Template Polaris verwendet, kannst Du verschiedene Animationen aktivieren, um besondere Ereignisse während des Spendenvorgangs hervorzuheben.

Animationen können beispielsweise ausgelöst werden:

• bei einer Dauerspende
• bei Großspenden
• wenn Spender*innen die Gebührenübernahme auswählen

Je nach Anlass stehen unterschiedliche Animationen zur Verfügung, beispielsweise Konfetti, Feuerwerk oder fliegende Herzen.

Hier ein Beispiel-Screenshot, wie die Konfiguration der Animationen aussehen kann:

Design anpassen

Im Bereich Design legst Du das Erscheinungsbild Deines Spendenformulars fest. Du kannst Farben auswählen, ein Design-Template verwenden und bei Bedarf eigene CSS- oder JavaScript-Anpassungen ergänzen.

Hinweis: Die Option für individuelles JavaScript und HTML stehen nicht in allen FundraisingBox-Vertragsvarianten zur Verfügung. Bei Fragen hierzu wende Dich gerne an unseren Support.

Farben und Design-Template auswählen

1. Wähle die Farbe aus, die unter anderem für Überschriften und Schaltflächen verwendet werden soll. Du kannst auch einen eigenen Hex-Code einfügen.
   
   
   
2. Wähle ein Design-Template für Dein Formular aus. Für eine moderne Darstellung und eine optimale Nutzung auf mobilen Geräten empfehlen wir das Design-Template Polaris.
   

Individuelle Design-Anpassungen vornehmen

Wenn Du das Formular weiter anpassen möchtest, kannst Du über die erweiterten Design-Einstellungen eigenes CSS hinterlegen. Je nach FundraisingBox-Variante sind außerdem individuelle JavaScript- und HTML-Anpassungen möglich.

1. Klicke auf de Button "Erweiterte Design-Einstellungen anzeigen".
2. Trage Deinen CSS-Code im linken Feld Eigenes Stylesheet (CSS) ein.
3. Ergänze bei Bedarf im rechten Feld eigenes JavaScript, HTML oder Tracking-Codes.

Hinweis: Bevor Du umfangreiche individuelle Anpassungen über Code umsetzt, empfehlen wir eine kurze Rücksprache mit unserem Support-Team. Denn: Wir entwickeln unsere Formularlösungen aktuell neu und können Dich beraten, welche Ansätze für neue Projekte langfristig sinnvoll sind.

Hier ein Beispiel-Screenshot, wie dieser Bereich aussieht, wenn Dir beide Optionen zur Verfügung stehen

Speichere anschließend Deine Änderungen. Nach dem Speichern stehen Dir zusätzlich die Reiter Wordings, Vorschau und Einbettungscode zur Verfügung.

Wordings anpassen

Im Reiter Wordings kannst Du die im Formular angezeigten Texte individuell anpassen. So lässt sich die Sprache des Formulars an den Stil Deiner Organisation anpassen.

1. Öffne den Reiter Wordings.
2. Prüfe, welche Texte Du individuell anpassen möchtest.
3. Speichere Deine Änderungen.

Findest Du unter Wordings für einen bestimmten Bereich Deines Formulars keine Möglichkeit, Texte oder Beschriftungen anzupassen, kannst Du individuelle Änderungen auch mithilfe von eigenem JavaScript, HTML und CSS umsetzen.

Hier ein Screenshot, wie der Reiter Wordings oben in der Menü-Leiste aussieht:

Formular in der Vorschau prüfen

Nutze die Vorschau, um Dein Formular vor der Veröffentlichung zu kontrollieren.

1. Öffne den Reiter Vorschau.
2. Prüfe, ob alle Einstellungen wie gewünscht übernommen wurden.
3. Kontrolliere zusätzlich die Vorschau der automatischen Erfolgs- und Abbruchseite über die entsprechenden Tabs oben.

Hier ein Beispiel-Screenshot, wie die Formular-Vorschau aussehen kann:

Formular auf Deiner Website einbetten

Nachdem Du das Formular eingerichtet und alles gespeichert hast, kannst Du es auf Deiner Website veröffentlichen.

1. Öffne den Reiter Einbettungscode.
2. Kopiere den angezeigten Einbettungscode unverändert.
3. Füge den Code an der gewünschten Stelle in Deinem CMS oder direkt im HTML-Quellcode Deiner Website ein.
4. Speichere die Änderungen auf Deiner Website.
5. Rufe anschließend die hinterlegte Einbettungsadresse im Browser auf und prüfe, ob das Formular korrekt angezeigt wird.

Im folgenden Screenshot siehst Du, wo sich in der oberen Menüleiste der Reiter „Einbettungscode“ befindet und wie die Übersicht mit dem Einbettungscode aussieht:

Änderungen an den Formulareinstellungen werden automatisch übernommen. Du musst den Einbettungscode nach späteren Anpassungen nicht erneut auf Deiner Website einfügen.

Wird das Formular nach dem Einbinden nicht angezeigt oder erscheint eine Fehlermeldung, prüfe die möglichen Ursachen im folgenden Hilfe-Artikel: Formular-Einbettung: Technische Voraussetzungen und Fehlerbehebung