In diesem Dokument wird beschrieben, wie ein fertiges Spendenformular auf Basis einer vorhandenen Spendenproduktvorlage erstellt, angepasst und mit einem Spendenprodukt verknüpft wird. Dabei werden Formularfelder hinzugefügt, bearbeitet und gelöscht, CSS-Designs angepasst, Gültigkeits- und Sichtbarkeitsregeln konfiguriert sowie Spendenprodukte mit Betragsvorschlägen, Zahlungsarten und Dankeseiten eingerichtet.
Step 1: Basis-Spendenproduktvorlage auswählen #
Datadialog stellt unter Spendenproduktvorlagen eine Basis-Vorlage zur Verfügung, in der alle für die Bezahlung notwendigen Systemfelder bereits korrekt enthalten sind. Diese Vorlage dient als Ausgangspunkt für neue Spendenformulare, damit alle relevanten Zahlungsinformationen technisch richtig eingebunden sind.
Wenn ein neues Formularprojekt gestartet wird, kann diese Standardvorlage ausgewählt werden.
Alternativ können auch komplett neue Spendenproduktvorlagen erstellt werden; in diesem Fall müssen die benötigten Pflicht- und Zahlungsfelder manuell hinzugefügt werden.
Step 2: Aufbau eines Spendenformulars verstehen #
Als Beispiel dient eine vorhandene Spendenproduktvorlage.
Diese Vorlage ist als einseitiges Checkout aufgebaut. Bestimmte Felder sind als Pflichtfelder definiert (z. B. Nachname, Vorname, E‑Mail), weitere Felder sind optional frei wählbar. Zusätzlich können in der Vorlage die Zahlungsart ausgewählt und anschließend die Spende ausgelöst werden.
Der Aufbau umfasst:
- Systemfelder bei den Produktvorlagen (z. B. für Zahlungsabwicklung)
- Seitenstruktur des fertigen Formulars (ein- oder mehrseitig)
- Pflicht- und optionale Felder
Bei Zahlungen ist immer mindestens eine zweite Seite vorgesehen, da diese für den eigentlichen Bezahlvorgang benötigt wird.
Darüber hinaus können bei Bedarf weitere Seiten ergänzt werden, etwa für zusätzliche Informationen oder Bestätigungen.
Step 3: Systemfelder hinzufügen und per Drag & Drop anordnen #
Systemfelder können über die Oberfläche hinzugefügt werden. Dazu im Editor ein neues Feld über die Plus-Funktion einfügen.
Das neu hinzugefügte Feld erscheint zunächst am unteren Ende der Felderliste und kann anschließend per Drag & Drop an die gewünschte Position in der Spendenproduktvorlage verschoben werden.
Nach dem Einfügen und Anordnen der Felder sollte die Vorlage gespeichert werden.
Anschließend kann über die Vorschau geprüft werden, wie das neue Feld in der Vorlage dargestellt wird.
Nach dem Speichern und einem Neuladen der Seite (F5) wird das neue Feld in der Vorschau sichtbar und kann dort getestet und bearbeitet werden.
Step 4: Formularfelder löschen #
Wenn ein Feld nicht mehr benötigt wird, kann es wieder entfernt werden. Dazu im Editor das entsprechende Feld auswählen und löschen.
So bleibt die Vorlage übersichtlich und enthält nur die tatsächlich benötigten Eingabefelder.
Step 5: Feldeigenschaften öffnen und Grundkonfiguration vornehmen #
Jedes Feld in der Spendenproduktvorlage besitzt umfangreiche Eigenschaften, die über einen Doppelklick auf das Feld geöffnet werden können.
In den Feldeigenschaften stehen unter anderem folgende Optionen zur Verfügung:
- Feldtyp bzw. Art des Textes
- Kennzeichnung als Systemfeld (grau hinterlegt, Name nicht änderbar)
- Zuweisung von CSS-Klassen zur individuellen Gestaltung
- Freie Wahl der Feldbeschriftung
- Eintrag eines Platzhalters im Feld (z. B. Beispieltext)
Zusätzlich können Hinweise über ein Icon hinterlegt werden, z. B. „Bitte hier den Nachnamen eintragen“. Außerdem lassen sich Sichtbarkeits- und Gültigkeitsregeln definieren. Für bestimmte Systemfelder (z. B. Nachname) ist bereits eine Systemgültigkeit hinterlegt, sodass diese Felder zwingend ausgefüllt werden müssen.
Es kann außerdem eingestellt werden, ob es sich um ein Pflichtfeld handelt.
Diese Information ist insbesondere für Barrierefreiheit und Nutzerführung wichtig.
Step 6: Info-Icon-Hinweise ein- und ausblenden #
Wenn in den Feldeigenschaften ein Hinweistext beim Icon hinterlegt wird, kann dieser nach dem Übernehmen und Speichern in der Vorlage angezeigt werden.
Nach dem Speichern und einem Aktualisieren der Seite (F5) erscheint beim entsprechenden Feld (z. B. Nachname) ein Informationssymbol. Beim Klick auf dieses Icon wird der hinterlegte Hinweistext angezeigt.
Wenn dieser Hinweis nicht mehr benötigt wird, kann er wieder entfernt werden. Dazu in die Feldeigenschaften wechseln, den Hinweis löschen, anschließend übernehmen und speichern.
Auf diese Weise können Felder flexibel um Hinweise ergänzt oder von ihnen befreit werden.
Step 7: CSS global oder formularspezifisch definieren #
Jedes fertige Formular kann mit einem eigenen CSS-Design versehen werden, außerdem gibt es globale CSS-Einstellungen.
Es besteht die Möglichkeit,
- ein generelles CSS für alle Spendenproduktvorlagen zu definieren
- oder ein spezielles CSS nur für eine einzelne Vorlage zu hinterlegen.
Für den Zweck dieser Anleitung wurde das CSS direkt bei jeweiligen Vorlage gespeichert.
Dort können Stil, Farben und weitere Layout-Eigenschaften gezielt angepasst werden.
Step 8: Button-Farbe per CSS anpassen #
Wenn beispielsweise die Farbe des Spenden-Buttons geändert werden soll, kann im CSS gezielt nach dem Button-Element gesucht werden.
Ist der Button aktuell etwa orange, kann im CSS die entsprechende Farbdefinition geändert werden. Dabei ist auf eine korrekte CSS-Syntax zu achten (z. B. fehlende Strichpunkte korrigieren).
Nach dem Speichern der CSS-Änderung wird der Button in der Spendenproduktvorlage in der neuen Farbe (z. B. grün) dargestellt. Wer mit CSS vertraut ist, kann so zahlreiche Details anpassen und ändern.
Diese Anpassungen können entweder für eine einzelne Vorlage oder für alle Vorlagen gleichzeitig vorgenommen werden.
Step 9: Wichtige Funktionen im Kopfbereich nutzen #
Nach dem Speichern der Spendenproduktvorlage stehen im oberen Bereich des Editors mehrere zentrale Funktionen zur Verfügung.
Dazu gehören:
- Vorlage duplizieren (Kopie einer bestehenden Vorlage erstellen)
- Vorlagen-Style (CSS) bearbeiten
- Vorlage freischalten/veröffentlichen (Online-Schaltung)
Eine Vorlage kann nur angezeigt werden, wenn sie online geschaltet ist. Im Statusbereich wird angezeigt, ob die Vorlage veröffentlicht ist.
Zusätzlich gibt es die Möglichkeit, eine Spendenproduktvorlage in ein anderes Format zu konvertieren oder vollständig zu löschen.
Step 10: Gültigkeitsprüfungen und Token-Zugriff konfigurieren #
Über die weiteren Optionen können Gültigkeitsprüfungen und deren Anzeige gesteuert werden. Hier lässt sich festlegen, wo im fertigen Formular Fehlermeldungen oder Gültigkeitshinweise erscheinen sollen.
Wenn Gültigkeiten für Felder hinterlegt wurden, kann definiert werden, an welcher Stelle im Formular diese Rückmeldungen sichtbar sind (z. B. direkt unter dem Feld).
Wird beispielsweise beim Nachnamen nichts eingegeben, erscheint die Gültigkeitsprüfung unterhalb des Feldes.
Diese Anzeigeoption kann individuell gewählt werden.
Außerdem kann festgelegt werden, dass für den Zugriff auf eine Spendenproduktvorlage ein Token erforderlich ist. In diesem Fall lässt sich die Vorlage nur über einen speziellen Link oder QR-Code öffnen, z. B. aus einem Newsletter oder Mailing. Das fertige Formular wird dann mit den bekannten Daten bereits vorausgefüllt.
Step 11: Vorlage verlassen und duplizieren #
Wenn alle gewünschten Änderungen vorgenommen wurden, kann der Editor verlassen werden.
Zuvor sollten alle Anpassungen gespeichert werden.
Um eine neue Spendenproduktvorlage auf Basis einer bestehenden anzulegen, kann diese Vorlage geöffnet
und über die Funktion „Duplizieren“ kopiert werden.
Im nächsten Schritt wird ein neuer, eindeutiger Name vergeben. Beispielsweise kann die neue Vorlage als „kurzes Checkout mit Telefonnummer“ benannt werden.
Nach Bestätigung der Duplizierung wird die neue Vorlage gespeichert.
Es steht dann als eigenständige Variante zur weiteren Bearbeitung zur Verfügung.
Step 12: Felder in der duplizierten Vorlage reduzieren #
In der duplizierten Vorlage können nicht benötigte Felder entfernt werden, um ein kürzeres Checkout zu gestalten. So können etwa die Felder „Straße“ und „Hausnummer“
gelöscht werden.
Weitere überflüssige Felder können ebenso entfernt werden.
Nach dem Speichern und Aktualisieren (F5) ist die Vorlage entsprechend verschlankt, und die entfernten Felder werden nicht mehr angezeigt.
Step 13: Telefonnummer als Pflichtfeld hinzufügen und validieren #
Für eine besondere Aktion soll in der Vorlage nun zusätzlich das Feld „Telefonnummer“ aufgenommen und als Pflichtfeld verwendet werden.
Das Feld „Telefonnummer“ wird in die Vorlage eingefügt und anschließend per Doppelklick geöffnet, um die Eigenschaften zu bearbeiten.
In den Feldeigenschaften kann der Feldname kopiert werden, und es wird eine Gültigkeitsregel definiert: Wenn die Telefonnummer leer ist, soll eine entsprechende Fehlermeldung erscheinen (z. B. „Telefonnummer eintragen“).
Diese Regel wird als Sichtfeld eingerichtet und die Gültigkeit wird direkt beim Feld angezeigt.
Nach Übernehmen und Speichern
sowie einem Aktualisieren (F5) ist in der Vorschau ersichtlich, dass die Telefonnummer als Pflichtfeld behandelt wird. Beim Verlassen des Feldes ohne Eingabe erscheint die definierte Fehlermeldung.
Step 14: Spendenprodukt-Reiter öffnen und neues Spendenprodukt anlegen #
Nachdem die Spendenproduktvorlage vorbereitet ist, wird es mit einem Spendenprodukt verknüpft. Dazu wird in die Registerkarte „Spendenprodukte“ gewechselt.
Dort kann über „Neu“ ein neues Spendenprodukt angelegt werden.
Im Spendenprodukt stehen mehrere Konfigurationsmöglichkeiten zur Verfügung:
- Anzeigename des Produkts (z. B. „Test mit Telefonnummer“), der auf der Webseite dargestellt wird
- Zuordnung zum CDS im Fundraising Studio (Speicherort für die Spenden-Daten)
Es gibt zwei Varianten:
- Auswahl eines Ordners, in dem automatisch eine neue Liste mit dem unten vergebenen Namen erstellt wird.
- Auswahl einer bereits bestehenden Liste, der das Spendenprodukt zugeordnet wird.
Für dieses Beispiel wird eine neue Liste angelegt.
Dazu wird im CDS-Ordner die passende Struktur ausgewählt,
und der Zielordner gesucht,
unter dem dann die Vorlage
mit dem Namen „Test mit Telefonnummer 26“ angelegt wird.
Optional kann eingestellt werden, dass jedes Jahr automatisch eine neue Liste für das Produkt angelegt wird.
Step 15: Gruppen, Spendenproduktvorlage und Danke-Seiten konfigurieren #
Im Spendenprodukt können verschiedene Gruppen zugeordnet werden, etwa für Patenschaften oder andere Vertragsarten. So kann beispielsweise eine Gruppe „Eisbärpatenschaft“ definiert werden,
um bestimmte Spendenarten zu klassifizieren.
Anschließend wird die Spendenproduktvorlage ausgewählt, also die zuvor erstellte Vorlage.
Es stehen verschiedene Vorlagen zur Auswahl, darunter auch die Variante mit dem Feld „Telefonnummer“, die hier gezielt ausgewählt wird.
Die Weiterleitung nach erfolgreicher Spende wird über eine Danke-Seite gesteuert. Hier kann entweder eine externe URL, z. B. datadialog.net/danke, angegeben werden,
oder eine interne Danke-Seite.
Bei einer internen Danke-Seite wird in der Spendenproduktvorlage eine zusätzliche Seite angelegt, auf der die Dankesinformation gespeichert wird (weitere Informationen dazu in einem separaten Video).
Zusätzlich kann optional eine Abbruchseite definiert werden, auf die bei Fehlern oder abgebrochenen Zahlungen weitergeleitet wird.
Step 16: Betragsvorschläge, Mindestbetrag, Intervalle und Zahlungsarten definieren #
Im Bereich „Vorschläge“ wird festgelegt, welche Beträge Spenderinnen und Spender standardmäßig sehen sollen.
Beispielsweise können Vorschlagsbeträge von 10, 50 und 100 definiert werden. Zudem wird ein Mindestbeitrag konfiguriert, etwa 5, damit das Formular erst ab diesem Betrag abgeschickt werden kann. Ein empfohlener Standardvorschlag (z. B. 50) kann ebenfalls eingestellt werden.
Es lässt sich festlegen, ob auch andere, frei eingegebene Beträge erlaubt sind, solange sie den Mindestbetrag (z. B. 5) nicht unterschreiten.
Weiter wird bestimmt, welche Zahlungsintervalle möglich sind (z. B. einmalig, monatlich etc.).
Ebenso wird definiert, welche Bezahlarten für dieses Spendenprodukt zur Verfügung stehen (z. B. Kreditkarte, SEPA, PayPal).
Zusätzlich gibt es die Option, eine Download-URL zu hinterlegen, über die nach erfolgreicher Spende z. B. eine Broschüre oder ein Dokument bereitgestellt werden kann. Außerdem kann das Produkt beschrieben werden.
Im Beschreibungstext (Rich-Text-Editor) können Informationen zum Produkt eingegeben werden, z. B. „Das ist ein Testformular. Bitte hier die Infos eingeben.“
Formatierungen wie Fettschrift stehen ebenfalls zur Verfügung.
Step 17: Produktbild hochladen und Einbettungs-URL setzen #
Dem Spendenprodukt kann ein Bild hinzugefügt werden.
Über den Editor kann eine Datei hochgeladen werden.
Nach Klick auf „Hochladen“ öffnet sich der Dateimanager des Systems, in dem eine passende Bilddatei ausgewählt werden kann (z. B. „Test“).
Das markierte Bild wird anschließend mit „OK“ bestätigt.
Jetzt ist das Bild mit dem Spendenprodukt verknüpft.
Wichtig ist außerdem die Einbettungs-URL.
Hier wird die URL der Webseite eingetragen, auf der das fertige Formular später eingebettet ist. Diese Information kann bei Bedarf auch nachträglich ergänzt oder angepasst werden.
Step 18: Spendenprodukt speichern und aktivieren #
Nachdem alle Einstellungen vorgenommen wurden, wird das Spendenprodukt gespeichert.
Damit das Spendenprodukt öffentlich nutzbar ist, muss es aktiviert werden. Dies geschieht, indem die Option „Ja“ bei der Aktivierung ausgewählt wird.
Damit ist das Spendenprodukt freigeschaltet und mit der zuvor konfigurierten Spendenproduktvorlage nutzbar.