Erfordert: Charitable Pro Plugin 1.8.17+
Basisplan und höher

Sieht Ihr Spendenformular kaputt aus, wenn jemand es auf einem Handy öffnet?

Charitables Formulare sind bereits responsiv. Das Problem liegt normalerweise an Ihrem Theme oder Page Builder, deren Stile ein Feld vom Rand schieben, einen Button verkleinern oder den Zahlungsbereich auf einem kleinen Bildschirm kaputt machen.

DonationExpress behebt das. Auf einem Handy öffnet es das echte Spendenformular Ihrer Kampagne in einem Vollbild-Sheet, das Ihr Theme nicht gestalten kann. Die Felder, vorgeschlagenen Beträge und Zahlungs-Gateways sind alle gleich, und das Formular sieht auf jedem Handy gleich aus.

Diese Anleitung behandelt, wann DonationExpress verwendet werden sollte, wie man es einschaltet, wie man das Sheet gestaltet, welche Quittung angezeigt werden soll und wie man es ohne Handy in der Vorschau anzeigt. Entwickler finden die Hooks, Filter und Codebeispiele am Ende.

Viele Leute, die Ihr Formular über soziale Medien, E-Mail oder Anzeigen erreichen, sind auf einem Handy, daher hilft ein sauberes mobiles Formular mehr von ihnen, ihre Spende abzuschließen. DonationExpress ist eine Beta-Funktion und standardmäßig deaktiviert, sodass sich auf Ihrer Website nichts ändert, bis Sie es einschalten.

Was Sie in diesem Leitfaden erwartet

Das Einrichtungs-Video für DonationExpress ansehen

Diese kurze Anleitung zeigt, wie DonationExpress eingeschaltet wird und wie eine Spende über das Sheet auf einem Handy abgewickelt wird.

Wann DonationExpress verwendet werden sollte

DonationExpress hilft in diesen Situationen am meisten.

• Ihr Theme oder Page Builder gestaltet das Spendenformular oder Popup so, dass es auf Handys kaputt aussieht.
• Sie möchten, dass Spender auf jedem Gerät dasselbe Spendenformular sehen, egal welches Handy sie benutzen und welches Theme Sie verwenden.
• Sie möchten, dass das mobile Formular schnell geladen wird, ohne dass die Skripte und Stile Ihres Themes parallel dazu geladen werden.
• Sie erhalten Spenden von sozialen Medien, E-Mail oder Anzeigen, wo viele Besucher auf einem Handy sind und der erste Eindruck Ihres Formulars zählt.

Selbst ein gut gestaltetes Nonprofit-Theme kann Stile hinzufügen, die mit einem Formular auf einem kleinen Bildschirm kollidieren. Ein kaputt aussehendes Formular ist einer der Gründe, warum Leute gehen, bevor sie spenden, und die anderen Gründe behandeln wir in wie man verhindert, dass Spender das Spendenformular abbrechen.

Wie DonationExpress das Formular auf einem Telefon verändert

Links ist ein Spendenformular auf einem Handy, wenn Theme-Stile damit kollidieren. Rechts ist dieselbe Kampagne mit aktiviertem DonationExpress.

Das Sheet zeigt das echte Spendenformular Ihrer Kampagne mit denselben Feldern, vorgeschlagenen Beträgen und Zahlungs-Gateways. Nur das Theme-Styling fehlt.

Wo die DonationExpress-Einstellungen zu finden sind

Um die Einstellungen zu finden, gehen Sie zu Charitable » Einstellungen » Allgemein » Spendenformular. Unter Anzeigeoptionen sehen Sie 3 DonationExpress-Einstellungen.

• DonationExpress schaltet die Funktion ein und wählt aus, welche Spenden-Buttons und Formulare sie verwenden.
• DonationExpress Eckstil legt die Eckform für Buttons und Felder im Sheet fest.
• DonationExpress-Beleg legt fest, was das Fenster nach einer erfolgreichen Spende anzeigt.

Die Einstellungen für Eckstil und Beleg bleiben verborgen, bis DonationExpress auf etwas anderes als Aus gesetzt ist, da nur das Fenster sie verwendet.

So richten Sie DonationExpress in 6 Schritten ein

Die Einrichtung von DonationExpress dauert ein paar Minuten. Jede Einstellung befindet sich auf demselben Bildschirm, und Sie können das Ergebnis testen, ohne ein Telefon in die Hand zu nehmen.

1. Wählen Sie aus, welche Spendenformulare DonationExpress verwenden sollen

Öffnen Sie zunächst die Einstellung DonationExpress. Sie hat 3 Optionen. Wählen Sie diejenige aus, die zu den Formularen passt, die Sie ändern möchten.

Option	Was es tut
Aus	DonationExpress ist deaktiviert, und Spendenformulare werden auf Mobiltelefonen auf normale Weise angezeigt. Dies ist die Standardeinstellung.
Nur Modal-Spenden-Schaltflächen	Nur Spenden-Buttons, die ein Popup oder Modal öffnen, verwenden das Fenster. Direkt auf einer Seite platzierte Formulare bleiben unberührt.
Alle Spendenformulare	Jeder Spenden-Button, jeder Link und jedes Formular auf der Seite verwendet das Fenster auf einem Mobiltelefon.

Wählen Sie Nur Modal-Spenden-Buttons, wenn Ihnen das Aussehen Ihrer Formulare auf der Seite auf Mobiltelefonen bereits gefällt und Sie nur das Popup korrigieren möchten.

Wählen Sie Alle Spendenformulare, wenn jede mobile Spende über das Fenster abgewickelt werden soll, unabhängig davon, wie der Spender das Formular erreicht hat. Wenn Sie sich nicht sicher sind, beginnen Sie mit dieser Option.

DonationExpress läuft nur auf Bildschirmen mit einer Breite von 768 Pixeln oder weniger. Auf Tablets und Desktops sehen Ihre Formulare genau so aus wie heute, und ein Entwickler kann diese Breite mit einem Filter ändern, der in der Entwicklerreferenz unten beschrieben ist.

2. Wählen Sie einen DonationExpress-Eckenstil

Sobald DonationExpress aktiviert ist, erscheint darunter die Einstellung DonationExpress Eckstil. Sie steuert, wie abgerundet die Buttons und Felder im Fenster sind.

Eckenstil	Aussehen
Scharf	Buttons und Felder haben eckige Ecken.
Abgerundet	Buttons und Felder haben leicht abgerundete Ecken. Dies ist die Standardeinstellung.
Pille	Buttons und Felder sind vollständig abgerundet, wie eine Pille.

Hier ist dasselbe Fenster im Pillenstil. Wählen Sie den Stil, der den Buttons auf dem Rest Ihrer Website am nächsten kommt.

Der Rest des Erscheinungsbilds des Fensters stammt aus Einstellungen, die Sie bereits in Charitable haben, da DonationExpress nichts aus Ihrem Theme liest.

• Die Akzentfarbe stammt aus Ihrer Einstellung für die Standard-Hervorhebungsfarbe des Spendenformulars auf demselben Bildschirm Charitable » Einstellungen » Allgemein » Spendenformular. Der Spenden-Button und die Fortschrittsleiste im Fenster verwenden sie.
• Das Logo stammt aus Ihrem E-Mail-Logo unter Charitable » Einstellungen » E-Mails. Wenn Sie eines festgelegt haben, wird es oben im Fenster angezeigt.

3. Wählen Sie die DonationExpress-Quittung

Verwenden Sie als Nächstes die Einstellung DonationExpress-Beleg, um auszuwählen, was Spender nach ihrer Spende sehen. Diese Einstellung erfordert das Plugin Charitable Pro 1.8.17.1 oder höher. Aktualisieren Sie also zuerst, wenn Sie sie nicht sehen.

Quittungsstil	Was der Spender sieht
Feier (sauber, minimalistisch)	Der Spender sieht einen Dankeschön-Bildschirm mit einem Häkchen und Konfetti. Er enthält eine Schaltfläche zum Teilen, eine optionale Schaltfläche zum monatlichen Spenden und eine optionale Schaltfläche zum Herunterladen des PDF-Belegs sowie eine Schaltfläche zum Schließen. Dies ist die Standardeinstellung.
Detailliert (sauber, mit Einzelaufschlüsselung)	Der Spender sieht denselben Feierbildschirm plus eine Tabelle, die jede Kampagne auflistet, zu der er gespendet hat, und die Gesamtsumme.
Standard-Quittungsseite	Das Fenster schließt sich und der Spender landet auf Ihrer normalen Belegseite, die von Ihrem Theme gestaltet wurde, genau wie ohne DonationExpress.

Die Feier und detaillierten Belege bleiben im Fenster, sodass der Spender nie das saubere Layout verlässt.

Welche Schaltflächen auf der DonationExpress-Quittung angezeigt werden

Einige Schaltflächen auf den Belegen für Feiern und Details werden nur angezeigt, wenn die entsprechende Funktion aktiviert ist.

• Teilen öffnet das eigene Freigabemenü des Telefons, sodass Spender mit einem Fingertipp in sozialen Medien posten oder eine Nachricht senden können.
• Monatlich spenden wird nur angezeigt, wenn die Funktion Wiederkehrende Spenden von Charitable aktiv ist und die Spende eine einmalige Spende war. Es öffnet das Fenster erneut mit einer ausgewählten monatlichen Spende.
• PDF-Beleg herunterladen wird nur angezeigt, wenn die Funktion PDF-Belege von Charitable aktiv ist.

4. Speichern Sie Ihre DonationExpress-Einstellungen

Wenn alle 3 Einstellungen korrekt sind, scrollen Sie zum Ende der Seite und klicken Sie auf Änderungen speichern. Ihre Einstellungen sollten nun etwa so aussehen.

5. Vorschau von DonationExpress ohne Telefon

Sie benötigen kein Telefon, um das Fenster anzuzeigen. Wenn Sie als Administrator angemeldet sind, öffnen Sie diese URL in Ihrem Browser und ersetzen Sie NN durch eine Kampagnen-ID.

https://yoursite.com/wp-admin/?charitable_action=preview-mobile-form&campaign_id=NN

Es zeigt dasselbe designfreie Spendenformular an, das DonationExpress auf einem Telefon anzeigt. So können Sie Ihre Farben, Ihr Logo und den Eckstil auf einem Vollbildschirm überprüfen.

6. Testen Sie DonationExpress auf Ihrem Telefon

Öffnen Sie schließlich eine Ihrer Kampagnen auf Ihrem Telefon und tippen Sie auf die Schaltfläche Spenden. Das DonationExpress-Fenster sollte über der Seite gleiten, wie im nächsten Abschnitt gezeigt.

Wenn Sie ein Test-Zahlungsgateway verwenden, können Sie auch eine Testspende tätigen, um den Beleg anzuzeigen, den Sie in Schritt 3 ausgewählt haben.

Was Spender sehen, wenn DonationExpress aktiviert ist

Hier ist eine Kampagne auf einem Telefon mit ausgewählten Alle Spendenformulare. Die Kampagnenseite sieht wie zuvor aus, bis der Spender auf Jetzt spenden tippt.

Dieser Tipp öffnet das Fenster. Der Kampagnenname und die Fortschrittsleiste befinden sich oben, darunter die vorgeschlagenen Beträge.

Weiter unten gibt der Spender seine Daten ein und wählt eine Zahlungsmethode. Die Schaltfläche Spenden verwendet Ihre Akzentfarbe.

Nachdem die Spende abgeschlossen ist, erscheint der Beleg im selben Fenster. Dies ist der detaillierte Beleg mit einer aufgeschlüsselten Zeile für die Kampagne und dem Gesamtbetrag.

Der Spender verlässt Ihre Website nie. Wenn Sie weitere Ideen für die Seite rund um das Formular wünschen, lesen Sie unseren Leitfaden, wie Sie eine Spenden-Seite erstellen, die konvertiert.

Tipps, die es wert sind, beachtet zu werden

Diese Punkte helfen DonationExpress, reibungslos auf Ihrer Website zu laufen.

• DonationExpress zeigt das echte Formular der Kampagne an, sodass Ihre Felder, vorgeschlagenen Beträge und Gateways automatisch im Fenster erscheinen. Es muss nichts neu erstellt werden.
• Wenn Sie ein Caching- oder Optimierungs-Plugin verwenden, schließen Sie den Pfad /charitable-give/ vom Caching aus. Das Fenster benötigt jedes Mal frische Sicherheitstoken, wenn es geladen wird, genau wie Ihre normalen Spenden- und Belegseiten.
• Apple Pay und Google Pay funktionieren innerhalb des Fensters. Apple Pay benötigt weiterhin die Überprüfung Ihrer Domain bei Ihrem Zahlungsanbieter, genau wie beim normalen Formular.
• Aktivieren Sie es vor einem großen Spendenaufruf, wie z. B. einer unserer Ideen für den Giving Tuesday oder einer Instagram-Kampagne, damit jeder Spender, der auf einem Mobiltelefon ankommt, das saubere Formular erhält.
• DonationExpress befindet sich in der Beta-Version und ist standardmäßig deaktiviert, sodass sich bestehende Websites nicht ändern, bis Sie es aktivieren.

Fehlerbehebung bei DonationExpress

Wenn etwas nicht richtig aussieht, sind dies die üblichen Ursachen.

Das DonationExpress-Fenster wird auf meinem Handy nicht geöffnet

Überprüfen Sie zuerst, ob die Einstellung DonationExpress nicht auf „Aus“ gesetzt ist. Wenn sie auf „Nur Modal-Spenden-Buttons“ gesetzt ist, werden Formulare, die direkt auf einer Seite platziert sind, das Fenster nicht verwenden. Wechseln Sie daher zu „Alle Spendenformulare“.

Das Fenster öffnet sich auch nur auf Bildschirmen mit einer Breite von 768 Pixeln oder weniger. Ein großes Handy, das seitlich gedreht wird, kann breiter sein. Testen Sie es daher mit dem Handy aufrecht.

Das DonationExpress-Fenster zeigt einen Fehler an oder wird nicht gesendet

Dies liegt normalerweise daran, dass ein Caching-Plugin eine alte Kopie des Fensters bereitstellt. Schließen Sie den Pfad /charitable-give/ vom Caching aus, leeren Sie den Cache und versuchen Sie es erneut.

Apple Pay wird im DonationExpress-Fenster nicht angezeigt

Apple Pay benötigt eine Domain-Verifizierung bei Ihrem Zahlungsdienstleister. Wenn Apple Pay auch auf Ihrem normalen Spendenformular nicht angezeigt wird, schließen Sie zuerst die Domain-Verifizierung ab.

Die Schaltfläche "Monatlich machen" oder "PDF" fehlt

Diese Buttons werden nur angezeigt, wenn die entsprechende Funktion aktiv ist. „Mache es monatlich“ wird auch nur nach einer einmaligen Spende angezeigt und erscheint nie bei der Option „Standard-Empfangsbestätigungsseite“.

DonationExpress Entwicklerreferenz

DonationExpress rendert das tatsächliche Spendenformular der Kampagne in einem leeren, themenfreien Dokument, das von einem dedizierten Endpunkt bereitgestellt wird. Ein Vollbild-Overlay auf der übergeordneten Seite lädt dieses Dokument in einem iFrame. Eine kleine postMessage-Brücke hält die übergeordnete Seite und den Frame während des Spenden- und Empfangsablaufs synchron.

Wo der DonationExpress-Code liegt

Stück	Ort
Bootstrap	Charitable_Mobile (includes/mobile/class-charitable-mobile.php), gestartet mit Priorität 9 bei init
Hilfsfunktionen	includes/mobile/charitable-mobile-functions.php
Einstellungen und Asset-Isolation	includes/mobile/charitable-mobile-hooks.php
Themenfreier Endpunkt	Charitable_Mobile_Form_Endpoint (includes/endpoints/class-charitable-mobile-form-endpoint.php)
Vorlagen	templates/mobile/form-mobile.php, templates/mobile/receipt-mobile.php
Assets	assets/css/charitable-mobile.css, assets/js/charitable-mobile-{sheet,bridge,receipt}.js

DonationExpress Endpunkte und URLs

Der Endpunkt registriert 2 Rewrite-Regeln und 2 Query-Variablen und wird bei template_redirect (Priorität 0) gerendert.

Zweck	Schöne Permalinks	Einfache Permalinks
Spendenformular	/charitable-give/{campaign_id}/	?charitable_mobile_form={campaign_id}
Empfangsbestätigung im Formular	/charitable-give/receipt/{donation_id}/	?charitable_mobile_receipt={donation_id}

Das Empfangsbestätigungsdokument ist mit charitable_user_can_access_donation() zugriffskontrolliert. Eine Anfrage für eine Spende, auf die der aktuelle Besucher keinen Zugriff hat, gibt eine 403 zurück.

DonationExpress Hilfsfunktionen

Funktion	Gibt zurück
charitable_mobile_get_mode()	Der aufgelöste Modus, der off, modal oder always ist.
charitable_mobile_is_enabled()	Ob das Formular überhaupt aktiviert ist (false, wenn der Modus off ist).
charitable_mobile_get_breakpoint()	Der mobile Breakpoint in Pixeln (standardmäßig 768).
charitable_mobile_get_form_url( $campaign_id, $args )	Die Theme-freie Formular-URL. $args akzeptiert amount und period.
charitable_mobile_get_receipt_url( $donation_id )	Die Theme-freie In-Sheet-Beleg-URL.
charitable_mobile_get_brand_tokens( $campaign_id )	array{ accent, logo, radius } aufgelöst aus den Charitable-Einstellungen.
charitable_mobile_get_receipt_style( $campaign_id )	Der aufgelöste Empfangsbestätigungsstil, der confetti, detailed oder redirect ist.

DonationExpress Filter

Filter	Standard	Zweck
charitable_mobile_mode	Gespeicherte Einstellung	Erzwingt den Modus im Code, z. B. pro Seite oder pro Kampagne. Gibt off, modal oder always zurück.
charitable_mobile_is_enabled	Abgeleitet vom Modus	Finales Ein/Aus-Gate. Gibt false zurück, um das Formular unabhängig vom Modus zu deaktivieren.
charitable_mobile_form_breakpoint	768	Der maximale Breiten-Breakpoint in Pixeln, der als mobil gilt.
charitable_mobile_brand_tokens	Aufgelöste Tokens	Überschreiben Sie accent, logo und radius, die zum Stylen des Fensters verwendet werden.
charitable_mobile_asset_is_allowed	true für Charitable- und Gateway-Assets	Erlauben oder schließen Sie ein bestimmtes Stil- oder Skript-Handle im leeren Dokument aus.
charitable_mobile_receipt_style	Gespeicherte Einstellung	Variiert den Belegstil pro Kampagne. Gibt confetti, detailed oder redirect zurück.
charitable_mobile_receipt_pdf_url	URL für PDF-Belege oder ''	Überschreiben Sie die PDF-Schaltflächen-URL oder geben Sie '' zurück, um sie auszublenden.
charitable_mobile_receipt_monthly_url	Monatliche Formular-URL oder ''	Überschreiben Sie die URL für „Mache es monatlich“ oder geben Sie '' zurück, um sie auszublenden.
charitable_mobile_receipt_check_icon	Standard-Häkchen-Markup	Tauschen Sie das Erfolgssymbol auf der Quittung aus.

DonationExpress Aktionen

Aktion	Läuft
charitable_mobile_form_head	Im <head> des reinen Dokuments, wo die Kopfzeilen-Assets von Charitable und dem Gateway ausgegeben werden.
charitable_mobile_form_footer	Vor dem schließenden </body> des reinen Dokuments, wo die Fußzeilen-Skripte ausgegeben werden.

DonationExpress Admin-Vorschau-URL

?charitable_action=preview-mobile-form&campaign_id=NN leitet einen Administrator (manage_options) zur URL des formularbasierten Formulars für eine Kampagne weiter, damit das Blatt auf jeder Bildschirmgröße überprüft werden kann.

Codebeispiele zur Anpassung von DonationExpress

Fügen Sie einen dieser Snippets mit einem Code-Snippets-Plugin oder der functions.php-Datei Ihres Child-Themes hinzu.

DonationExpress für eine einzelne Landingpage erzwingen

add_filter(
    'charitable_mobile_mode',
    function ( $mode ) {
        if ( is_page( 'give-now' ) ) {
            return 'always';
        }
        return $mode;
    }
);

Erhöhen Sie den DonationExpress-Breakpoint für kleine Tablets

add_filter( 'charitable_mobile_form_breakpoint', fn() => 900 );

Überschreiben Sie die Akzentfarbe und den Radius der DonationExpress-Ecken

add_filter(
    'charitable_mobile_brand_tokens',
    function ( $tokens, $campaign_id ) {
        $tokens['accent'] = '#1e88e5';
        $tokens['radius'] = '4px';
        return $tokens;
    },
    10,
    2
);

Zeigen Sie die detaillierte DonationExpress-Quittung für eine Kampagne an

Dieser Snippet zeigt die detaillierte Empfangsbestätigung für Kampagne 1234 an und behält die Feier-Empfangsbestätigung für alle anderen bei.

add_filter(
    'charitable_mobile_receipt_style',
    function ( $style, $campaign_id ) {
        return 1234 === (int) $campaign_id ? 'detailed' : $style;
    },
    10,
    2
);

Erlaube ein zusätzliches Skript im DonationExpress-Dokument

Dieser Snippet lässt ein zusätzliches Skript-Handle, wie z. B. einen benutzerdefinierten Schriftart-Loader, im themenfreien Dokument laden.

add_filter(
    'charitable_mobile_asset_is_allowed',
    function ( $allowed, $handle ) {
        if ( 'my-font-loader' === $handle ) {
            return true;
        }
        return $allowed;
    },
    10,
    2
);

Zusammenfassung

Sie wissen jetzt, wie Sie DonationExpress aktivieren, auswählen, welche Formulare es verwenden, das Fenster gestalten, die Empfangsbestätigung auswählen, die Spender sehen, und alles ohne Handy in der Vorschau anzeigen. Ihre mobilen Spender erhalten auf jedem Handy das gleiche saubere Formular, unabhängig davon, welches Theme Sie verwenden.

Wenn Sie bei einem Schritt nicht weiterkommen, hilft Ihnen unser Support-Team gerne weiter.

Das könnten Sie auch interessieren

Diese Anleitungen und Blogbeiträge behandeln die Funktionen, die neben DonationExpress funktionieren, und die Kampagnen, bei denen es am meisten hilft.

• Spendenformular-Vorlagen. Erfahren Sie, wie Sie das Erscheinungsbild des Standard-Spendenformulars ändern, das auf Tablets und Desktops angezeigt wird.
• PDF-Belege. Richten Sie die PDF-Belege hinter der Schaltfläche „PDF-Beleg herunterladen“ im Formular ein.
• Wiederkehrende Spenden. Aktivieren Sie die monatlichen Spenden hinter der Schaltfläche „Monatlich machen“ im Formular.
• Apple Pay und Google Pay mit Stripe aktivieren. Verifizieren Sie Ihre Domain, damit Apple Pay im Formular angezeigt wird.
• Spendenformular erstellen. Erstellen Sie Schritt für Schritt das Kampagnenformular, das DonationExpress auf Mobiltelefonen anzeigt.
• Facebook-Anzeigen für Non-Profits. Planen Sie Anzeigen, die Nutzer zu Ihrer Kampagne leiten, wo die meisten Klicks auf einem Mobiltelefon erfolgen.