Möchten Sie ein echtes, funktionierendes Spendenformular auf Ihrer Homepage, einer Landingpage oder mitten in einem Blogbeitrag, ohne Shortcode und ohne Spender auf eine separate Seite zu schicken?

Der Spendenformular-Block macht genau das. Diese Anleitung führt Sie durch das Hinzufügen, Konfigurieren und Gestalten, damit er zu Ihrer Website passt.

Bevor Sie beginnen

Der Spendenformular-Block ist ein nativer WordPress-Block, der ein vollständiges, funktionierendes Charitable-Spendenformular direkt im Block-Editor auf jeder Seite oder jedem Beitrag rendert. Bevor Sie einen hinzufügen, stellen Sie sicher, dass Sie Folgendes haben:

• Charitable Pro 1.8.17 oder neuer installiert und aktiviert.
• Mindestens eine veröffentlichte Kampagne, es sei denn, Sie planen, den Block nur auf einer Kampagnenvorlage mit „Aktuelle Kampagne verwenden“ zu nutzen.

Wichtiger Hinweis: Der Spendenformular-Block ist in Charitable Pro verfügbar und nicht Teil des kostenlosen Lite-Plugins.

Wichtig: Platzieren Sie nur einen Spendenformular-Block pro Seite. Die serverseitige Darstellung und die Cache-Ausschlüsse von Charitable sind auf ein einzelnes Live-Formular pro Seite ausgelegt, und eine zweite Instanz ist für Spender unnötig und kann zu verwirrenden doppelten Einreichungen führen.

Hinzufügen des Spendenformular-Blocks zu einer Seite oder einem Beitrag

Der Block funktioniert wie jeder andere Block im WordPress-Editor, es gibt also keinen separaten Bildschirm oder Assistenten, den Sie lernen müssten.

1. Öffnen Sie die Seite oder den Beitrag, auf der/dem das Formular erscheinen soll, im WordPress-Block-Editor.
2. Klicken Sie auf den Block-Inserter (+) und suchen Sie nach Spendenformular.
3. Klicken Sie auf den Block Spendenformular, um ihn einzufügen.

Direkt nach dem Einfügen zeigt der Block einen Platzhalter an, der Sie auffordert, eine Kampagne auszuwählen. Er rendert erst ein Formular, wenn eine Kampagne ausgewählt wurde, das ist also der nächste Schritt.

Auswahl einer Kampagne

Der Block muss wissen, welches Spendenformular der Kampagne angezeigt werden soll. Dies stellen Sie in der Block-Einstellungen-Seitenleiste ein, nicht im Block selbst.

1. Wählen Sie den Block aus und öffnen Sie die Seitenleiste Block-Einstellungen (klicken Sie auf den Block, dann auf das Einstellungen-Symbol, falls die Seitenleiste noch nicht geöffnet ist).
2. Öffnen Sie unter Inhalt das Dropdown-Menü Kampagne.
3. Wählen Sie eine veröffentlichte Kampagne aus oder wählen Sie Aktuelle Kampagne verwenden.

Die beiden Optionen verhalten sich unterschiedlich:

• Eine benannte Kampagne – Der Block zeigt immer das Formular dieser Kampagne an, unabhängig davon, wo die Seite veröffentlicht wird. Verwenden Sie dies auf einer Homepage, einer Landingpage oder einem Blogbeitrag, der eine bestimmte Kampagne bewirbt.
• Aktuelle Kampagne verwenden – Der Block bindet sich dynamisch an die Kampagne, die der Besucher gerade ansieht. Verwenden Sie dies auf einer Kampagnenvorlage, damit jede Kampagne automatisch ein Spendenformular an derselben Stelle erhält, ohne jede Kampagne einzeln bearbeiten zu müssen.

Sobald eine Kampagne ausgewählt ist, zeigt der Block-Editor eine exakte Vorschau an: die tatsächlichen Spendenbeträge der Kampagne, den standardmäßig ausgewählten Betrag, das Feld für benutzerdefinierte Beträge, falls aktiviert, und die tatsächliche Reihenfolge der Felder. Es ist kein grauer Platzhalter, sodass das, was Sie beim Bearbeiten sehen, auch von Spendern gesehen wird.

Auswahl von Voll oder Minimal

Im Bereich Inhalt der Blockeinstellungen steuert das Dropdown-Menü Formulartyp, wie viel vom Formular angezeigt wird:

• Vollständig: Rendert das vollständige Spendenformular: Beträge, benutzerdefinierter Betrag, alle Spenderfelder und Zahlung. Verwenden Sie dies, wenn das Formular der Hauptfokus der Seite ist.
• Minimal: Ein kompaktes Layout nur mit Spendenbeträgen und Zahlung. Verwenden Sie dies in engeren Bereichen wie einer Seitenleiste, einer Fußzeile oder auf einer längeren Seite, wo ein vollständiges Formular zu wuchtig wäre.

Die Vorschau aktualisiert sich sofort, wenn Sie zwischen den beiden wechseln, sodass Sie vergleichen können, bevor Sie sich entscheiden.

Gestaltung des Formulars

Unter Inhalt bietet die Seitenleiste der Blockeinstellungen neunzehn Styling-Steuerelemente, die in fünf Abschnitte unterteilt sind. Keines davon erfordert CSS oder eine Theme-Datei, und jede Änderung aktualisiert die Live-Vorschau, während Sie sie vornehmen.

• Formularcontainer: Hintergrundfarbe sowie ein Rahmen mit eigenem Stil, Breite und Farbe für die Box, die das gesamte Formular umschließt.
• Typografie: Textfarbe und Überschriftenfarbe für die Beschriftungen und Titel des Formulars.
• Betragsbuttons: Hintergrund, Hintergrund im ausgewählten Zustand, Textfarbe, Textfarbe im ausgewählten Zustand, Rahmenfarbe und Eckradius für die Spendenbetragsbuttons.

• Spenden-Button: Hintergrundfarbe, Hover-Hintergrundfarbe, Textfarbe und Eckradius für den Senden-Button.
• Akzente: Linkfarbe und die Farbe des Sternchens für Pflichtfelder, das kleine Detail, das leicht zu übersehen ist, aber auffällt, sobald es mit Ihrer Seite kollidiert.

Profi-Tipp: Legen Sie zuerst den Hintergrund und den Rahmen des Formularcontainers fest und arbeiten Sie sich dann durch Typografie, Betragsbuttons und Spenden-Button nach unten. Wenn der Container richtig ist, wissen Sie, wie viel Kontrast der Rest des Formulars benötigt.

Jede Blockinstanz erhält ihre eigenen, speziell für diesen Block generierten Stile. Wenn Sie einen Spendenformular-Block auf mehreren Seiten platzieren, kann jede davon komplett anders gestaltet werden, und keine davon wirkt sich auf andere aus.

Konvertierung eines bestehenden Shortcodes in den Block

Wenn Sie bereits eine Seite oder einen Beitrag mit dem Shortcode [charitable_donation_form] haben, müssen Sie ihn nicht entfernen und neu beginnen.

1. Öffnen Sie die Seite oder den Beitrag, der den Shortcode enthält, im Block-Editor.
2. Klicken Sie in den Shortcode-Block, der ihn enthält.

Der Shortcode wird automatisch in einen Spendenformular-Block konvertiert, der bereits auf dieselbe Kampagne verweist, die der Shortcode angegeben hat. Von dort aus können Sie ihn wie jeden anderen Spendenformular-Block gestalten oder seine Einstellungen ändern.

Hinweis: Der Shortcode selbst funktioniert weiterhin, wenn Sie ihn so belassen. Die Konvertierung erfolgt nur, wenn Sie den Block bearbeiten, der ihn enthält.

Veröffentlichung und was Spender sehen

Sobald Sie mit der Kampagne, dem Formulartyp und dem Styling zufrieden sind, klicken Sie auf Veröffentlichen oder Aktualisieren. Das Formular ist nun auf dieser Seite live.

Spender sehen dieselben Felder, Beträge und Zahlungsoptionen, die sie von der Standard-Spendenseite einer Kampagne erhalten würden, sicher auf dem Server gerendert, anstatt im Browser zusammengestellt zu werden. Es gibt nichts, worauf sie klicken müssen, um dorthin zu gelangen, und nichts Zusätzliches, das sie laden müssten.

Hinweis: Jede Seite, die einen Live-Spendenformular-Block enthält, wird automatisch vom Caching der gesamten Seite ausgeschlossen, sodass Spender immer ein aktuelles, funktionierendes Formular sehen. Sie müssen keinen manuellen Cache-Ausschluss hinzufügen.

FAQs zum Spendenformular-Block

Benötigt dies Charitable Pro?

Ja. Der Spendenformular-Block ist in Charitable Pro 1.8.17 enthalten und nicht im kostenlosen Lite-Plugin verfügbar.

Was ist der Unterschied zwischen Voll und Minimal?

Voll zeigt das vollständige Spendenformular mit allen Feldern. Minimal zeigt eine kompakte Version nur mit Spendenbeträgen und Zahlung, besser geeignet für Seitenleisten, Fußzeilen oder engere Bereiche.

Kann ich mehr als einen Spendenformular-Block auf derselben Seite hinzufügen?

Das können Sie, aber wir empfehlen einen pro Seite für die sauberste und schnellste Erfahrung. Jede Instanz ist unabhängig stilistisch abgegrenzt, sodass ein zweites Formular nicht die Farben des ersten erbt.

Funktioniert es mit meinem Block-Theme oder Full-Site-Editing?

Ja. Der Block verwendet die Standard-WordPress-Blockregistrierung und Ausrichtung, sodass er mit Block-Themes und Full-Site-Editing genauso funktioniert wie jeder andere Kernblock.

Ich habe eine Kampagne eingerichtet, aber das Formular zeigt meine benutzerdefinierten Felder nicht an.

Überprüfen Sie, ob die benutzerdefinierten Felder im Builder-Einstellungen der Kampagne zu deren Spendenformular hinzugefügt wurden. Der Block spiegelt immer die Felder wider, die die Kampagne selbst zum Sammeln konfiguriert hat.

Funktionieren meine vorhandenen Shortcodes immer noch?

Ja. Ein Shortcode funktioniert weiterhin, bis Sie den Block bearbeiten, der ihn enthält. Zu diesem Zeitpunkt wird er automatisch in einen Spendenformular-Block umgewandelt.

Das ist alles! Sie haben gelernt, wie Sie den Spendenformular-Block hinzufügen, konfigurieren und gestalten.

Als Nächstes möchten Sie vielleicht lesen, wie Sie Ihr WordPress-Spendenformular ohne Code anpassen oder mehr über die Spendenformulare von Charitable erfahren.