Erforderlich: Charitable Pro Plugin 1.8.19.1+
Basic-Tarif und höher

Möchtest du Spendern etwas direkt in deinem Spendenformular mitteilen, z. B. wofür ein Betrag verwendet wird oder wann ihre Quittung ankommt?

Ein Textblock platziert deine eigenen Worte in einem visuellen Spendenformular. Es ist nur zur Anzeige gedacht, sammelt also keine Informationen und fügt nichts zum Spendenprotokoll hinzu.

Diese Anleitung behandelt, wo das Feld zu finden ist, wie man einen Block hinzufügt und schreibt, seine Größen- und Farbeinstellungen, wie es mit der Formular-Typografie funktioniert, Fehlerbehebung und die Entwickler-Hooks.

Spender lesen das Formular genauer als jeden anderen Teil der Seite, da sie dort ihre Zahlungsdaten eingeben. Eine kurze Notiz an der richtigen Stelle kann ihre Frage beantworten, bevor sie abbrechen.

Was Sie in diesem Leitfaden erwartet

Sehen Sie sich das Video zum Textfeld-Block an

Dieses kurze Video zeigt, wie man einen Textblock zu einem Spendenformular hinzufügt und einrichtet.

Wann Sie einen Textfeld-Block in Ihrem Spendenformular verwenden sollten

Verwende einen Textblock für den Satz, den ein Spender an dieser Stelle im Formular benötigt.

• Einen Betrag erklären. „Eine Spende von 25 € deckt die Wasserfilterung für eine Familie für ein Jahr“ leistet neben den Beträgen mehr als auf der Kampagnenseite darüber.
• Erwartungen vor der Zahlung festlegen. Eine kurze Notiz kann besagen, dass Spenden sicher verarbeitet werden oder dass Quittungen innerhalb weniger Minuten per E-Mail eintreffen.
• Anzeige deiner Rückerstattungs- oder Stornierungsrichtlinie. Spender sehen sie dort, wo sie danach suchen, anstatt in einer Fußzeile.
• Anweisungen für ein ungewöhnliches Feld geben. Wenn du eine benutzerdefinierte Frage hinzugefügt hast, kann ein Textblock darüber sagen, warum du fragst.
• Auflistung, was die Kampagne abdeckt. Eine kurze Aufzählung liest sich schneller als ein langer Absatz.

Textfeld-Block vs. Texteingabe: Welches Feld Sie verwenden sollten

Das Charitable Pro Plugin 1.8.19.1 hat 2 Felder mit ähnlichen Namen, die entgegengesetzte Dinge tun. Es ist hilfreich, dies zu klären, bevor du baust.

	Was es tut	Tippt der Spender hinein?
Textblock	Er zeigt deinen Text dem Spender an.	Nein. Er sammelt nichts.
Texteingabe	Er sammelt eine lange schriftliche Antwort und speichert sie mit der Spende.	Ja.

Texteingabe hieß vor 1.8.19.1 Rich Text. Formulare, die es bereits verwenden, sind davon nicht betroffen, und deine Spender sehen keine Änderung.

In der Feldliste sitzen die beiden Felder mehrere Schaltflächen auseinander und haben unterschiedliche Symbole. Textblock hat ein Absatzzeichen und Texteingabe hat einen Stift.

Wo Sie das Textfeld-Block-Feld finden

Sie finden den Textblock in den Spalten des Spendenformulars im Kampagnen-Builder.

1. Öffnen Sie zunächst eine Kampagne im Kampagnen-Builder.
2. Wählen Sie Formular in der linken Seitenleiste.
3. Suchen Sie auf der Registerkarte Feld hinzufügen unter Formularfelder nach Textblock.

Hinweis: Wenn Sie die Registerkarte Formular nicht auswählen können, hat die Kampagne noch keine Vorlage. Wählen Sie zuerst eine auf der Registerkarte Vorlage aus.

So fügen Sie einen Textfeld-Block zu einem Spendenformular hinzu

Ziehen Sie Textblock aus der Feldliste in die Formularvorschau und legen Sie ihn dort ab, wo die Wörter erscheinen sollen. Die Vorschau aktualisiert sich, während Sie ihn ablegen, sodass Sie sofort sehen können, ob er an der richtigen Stelle sitzt.

Die Feldliste ist, wo Sie Felder auswählen, und sie legt ihre Reihenfolge nicht fest. Wo Sie den Block ablegen, bestimmt, wo der Spender ihn sieht, sei es über den Beträgen, zwischen den Beträgen und den Namensfeldern oder kurz vor dem Zahlungsbereich.

Sobald der Block im Formular ist, öffnen sich seine Einstellungen auf der Registerkarte Feldoptionen. Das Panel heißt Textblock (ID: n), wobei n die ID des Feldes in diesem Formular ist.

So schreiben Sie Inhalte für Textfeld-Blöcke

Das Feld Inhalt ist ein kleiner Rich-Text-Editor. Seine Symbolleiste bietet Ihnen diese Optionen.

• H2 fügt eine Überschrift hinzu.
• Fett und Kursiv fügen Hervorhebungen hinzu.
• Nummerierte Liste und Aufzählungsliste wandeln Zeilen in eine Liste um.
• Link fügt einen Link zum ausgewählten Text hinzu.
• Formatierung löschen entfernt die Formatierung vom ausgewählten Text.

Halten Sie einen Block kurz. Wenn Sie mehrere Absätze schreiben, gehören diese Worte wahrscheinlich auf die Kampagnenseite, wo Platz dafür ist.

So benennen Sie einen Textfeld-Block

Bezeichnung ist für Sie, nicht für den Spender. Sie benennt den Block im Builder, damit Sie ihn in einem Formular mit mehreren Blöcken wiederfinden können, und sie wird nie im Formular angezeigt.

Ein Formular mit 3 Blöcken, die alle „Textblock“ heißen, ist schwer zu handhaben. Benennen Sie jeden nach seinem Inhalt, z. B. „Warum 25 €“, „Rückerstattungsrichtlinie“ oder „Hinweis zu Spendenabzugsfähigkeit“.

So legen Sie die Schriftgröße des Textfeld-Blocks fest

Schriftgröße hat 4 Werte.

Wert	Auswirkung
Mittel (erben)	Sie folgt der Textgröße des Formulars.
Klein	Sie ist kleiner als der normale Text.
Groß	Sie ist größer als der normale Text.
Sehr groß	Sie ist die größte Größe.

Die Größen sind relativ zur Basisschriftgröße des Formulars, nicht feste Pixelwerte. Alles im Block skaliert zusammen, sodass eine Überschrift in einem großen Block immer noch größer ist als der Absatz darunter.

Profi-Tipp: Die Einstellung Mittel (erben) ist normalerweise richtig. Wählen Sie Groß, wenn ein Block die Funktion einer Überschrift erfüllt, und Klein für eine rechtliche Anmerkung, die vorhanden, aber unauffällig sein soll.

So legen Sie die Textfarbe des Textfeld-Blocks fest

Textfarbe legt die Farbe für alles in diesem Block fest. Lassen Sie sie leer, um die Textfarbe des Formulars zu verwenden, was die meisten Formulare benötigen, da ein Block, der sich an alles um ihn herum anpasst, als Teil des Formulars gelesen wird.

Verwenden Sie sie mit Bedacht. Ein einzelner Block in einer anderen Farbe zieht die Aufmerksamkeit auf sich, während 3 verschiedene Farben in einem Formular einfach kaputt aussehen.

So fügen Sie eine CSS-Klasse zu einem Textfeld-Block hinzu

CSS-Klasse fügt dem Wrapper des Blocks eine Klasse hinzu, damit Sie ihn über Ihr Theme gestalten können. Die Entwicklerreferenz unten enthält ein Beispiel.

Wie die Formatierung von Textfeld-Blöcken mit der Formular-Typografie funktioniert

Version 1.8.19.1 fügte auch Typografie-Einstellungen für visuelle Spendenformulare hinzu, unter Visueller Stil auf der Registerkarte Formularoptionen. Diese legen die Größe und Farbe für das *gesamte* Formular fest, einschließlich Textkörper, Labels und Hilfetext.

Die 2 Einstellungssets arbeiten wie folgt zusammen.

• Formularoptionen » Visueller Stil legt die Basis für alles im Formular fest.
• Schriftgröße und Textfarbe eines Textblocks überschreiben diese Basis nur für diesen Block.

Hinweis: Formulare, die Sie vor Version 1.8.19.1 erstellt haben, behalten ihre aktuelle Größe und Farbe, bis Sie eine der Typografie-Einstellungen ändern.

Was das Textfeld-Block-Feld nicht tut

Der Name kann etwas anderes vermuten lassen, daher hier, was ein Textblock weglässt.

• Er sammelt nichts. Nichts aus einem Textblock erreicht den Spenden-Datensatz, einen Export oder eine E-Mail. Um eine Antwort zu sammeln, verwenden Sie Texteingabe.
• Er ist nicht von sich aus bedingt. Er wird jedem Spender angezeigt, der dieses Formular sieht.
• Er akzeptiert kein beliebiges HTML oder Skripte. Inhalte werden beim Ein- und Ausgeben bereinigt, sodass eingefügtes Markup über die Formatierung des Werkzeugkastens hinaus entfernt werden kann. Wenn Sie Roh-Markup benötigen, verwenden Sie das HTML-Feld.

Beispiel: Ein Spendenformular, das seine eigenen Beträge erklärt

Nehmen wir an, eine Kampagne für sauberes Wasser bietet 25 $, 50 $ und 100 $ an, und das Team stellt fest, dass Spender beim Betragsschritt zögern. Hier ist das Formular, das die Frage beantwortet, die diese Spender stellen.

1. Fügen Sie eine kurze Einleitung über den Beträgen hinzu

Ziehen Sie einen Textblock ganz oben auf das Formular, über die Spendenbeträge. Nennen Sie ihn Warum diese Beträge und schreiben Sie in den Inhalt einen Satz ohne Überschrift.

Jeder Betrag unten deckt ein bestimmtes, kalkuliertes Arbeitspaket ab. Wählen Sie das, das passt.

Lassen Sie die Schriftgröße auf Mittel (erben), da dies normaler Textkörper ist, der eine normale Aufgabe erfüllt.

2. Fügen Sie eine Aufschlüsselung in Stichpunkten unter den Beträgen hinzu

Ziehen Sie einen zweiten Block unter die Beträge und nennen Sie ihn Wofür Ihre Spende verwendet wird. Verwenden Sie H2 für eine Überschrift und fügen Sie dann eine Aufzählungsliste hinzu.

Wohin Ihre Spende fließt

• 25 $ decken die Filterkartuschen eines Haushalts für ein Jahr ab.
• 50 $ decken die jährliche Wartung eines gemeinsamen Wasserhahns ab.
• 100 $ decken die Wasserprüfung für ein ganzes Dorf zweimal im Jahr ab.

So sieht dieser Block für einen Spender im Live-Formular aus.

Lassen Sie die Schriftgröße wieder auf Mittel (erben). Die Überschrift sticht bereits hervor, daher wäre es zu laut, den gesamten Block ebenfalls groß zu machen.

3. Fügen Sie eine kurze Notiz kurz vor der Zahlung hinzu

Ziehen Sie einen dritten Block direkt über den Zahlungsbereich. Nennen Sie ihn Hinweis zu Quittung und Rückerstattung, stellen Sie die Schriftgröße auf Klein und lassen Sie die Textfarbe leer.

Quittungen kommen innerhalb weniger Minuten per E-Mail an. Wenn Sie versehentlich spenden, kontaktieren Sie uns innerhalb von 14 Tagen und wir erstatten den vollen Betrag zurück.

4. Speichern und das Live-Formular überprüfen

Die Vorschau des Builders ist nah an der Live-Seite, aber nicht identisch, da die Typografie Ihres Themes im Frontend angewendet wird. Betrachten Sie immer das tatsächliche Formular, bevor Sie die Arbeit als erledigt betrachten.

Der zu kopierende Teil dieses Beispiels ist die Beschränkung. Sie verwendet 3 Blöcke, eine Überschrift, eine Größenänderung und keine Farbänderungen, und die Worte erledigen die Arbeit.

Wo Sie einen Textfeld-Block in Ihrem Spendenformular platzieren

Spender lesen einen Textblock in der Reihenfolge, in der sie ihn erreichen. Wo Sie ihn platzieren, ist wichtiger als alle Styling-Optionen.

Position	Gut für
Über den Beträgen	Er rahmt die Wahl ein, die der Spender gerade treffen wird.
Zwischen den Beträgen und den Spenderdetails	Er erklärt, was die Beträge kaufen, sobald sie sichtbar sind.
Neben einem ungewöhnlichen benutzerdefinierten Feld	Er erklärt, warum Sie diese Informationen anfordern.
Knapp über dem Zahlungsbereich	Er beruhigt Spender bezüglich Sicherheit, Quittungen und Rückerstattungen.
Ganz unten	Er enthält rechtliche Hinweise, die niemand vor der Entscheidung benötigt.

Textfeld-Blöcke in mehrstufigen Formularen

Wenn Ihr Formular in Schritte unterteilt ist, gehört ein Textblock zu dem Schritt, in den Sie ihn einfügen, und erscheint, wenn der Spender diesen Schritt erreicht. Jemand, der in Schritt 1 abbricht, sieht niemals eine Notiz in Schritt 3. Platzieren Sie also beruhigende Worte in dem Schritt, in dem Spender dazu neigen, abzubrechen.

Überschriften von Textfeld-Blöcken und Barrierefreiheit

Die Inhalts-Symbolleiste bietet H2. Screenreader und Suchmaschinen lesen Überschriften als Gliederung der Seite, sodass ein Formular mit mehreren H2-Blöcken als mehrere gleichwertige Abschnitte gelesen wird, was normalerweise korrekt ist.

Verwenden Sie die H2-Schaltfläche anstelle von fettem, großem Text, da sie ähnlich aussehen, aber unterschiedlich funktionieren. Und lassen Sie die Überschrift für einen einzelnen kurzen Satz weg, da eine Zeile Prosa ein Absatz ist.

Tipps, die Sie beachten sollten

Diese Gewohnheiten halten Ihre Textblöcke für Spender hilfreich und nicht im Weg.

• Fragen Sie, ob der Block eine Frage beantwortet. Jeder Block sollte etwas beantworten, das sich der Spender zu diesem Zeitpunkt im Formular bereits fragt.
• Halten Sie 2 Blöcke Abstand. Wenn 2 Blöcke nebeneinander liegen, ohne etwas dazwischen, sind sie eigentlich ein Block mit einem Absatzumbruch.
• Als einfacher Text einfügen. Formatieren Sie ihn anschließend mit der Symbolleiste, damit nichts von dem, was Sie einfügen, entfernt wird.
• Verwenden Sie eine CSS-Klasse für viele Kampagnen. Eine Klasse hält das Styling in einer einzigen Stylesheet, sodass es sich von Formular zu Formular nicht verschiebt.

Fehlerbehebung beim Textfeld-Block-Feld

Der Textfeld-Block-Button ist nicht in der Feldliste

Überprüfen Sie diese 3 Dinge in dieser Reihenfolge.

1. Sie befinden sich auf der Registerkarte Formular, nicht auf der Registerkarte Design oder Einstellungen. Die Kampagnenlayoutfelder und die Spendenformularfelder sind 2 separate Listen, und Textblock befindet sich in der Liste des Spendenformulars.
2. Das Charitable Pro Plugin ist aktiv. Der visuelle Spendenformular-Builder und damit Textblock sind nur in der kostenpflichtigen Version von Charitable enthalten.
3. Sie verwenden Version 1.8.19.1 oder neuer. Frühere Versionen haben kein Textblock-Feld.

Der Textfeld-Block zeigt dem Spender nichts an

Ein Textblock mit einem leeren Inhalt-Feld hat nichts anzuzeigen, also zeigt er nichts an. Öffnen Sie den Block auf der Registerkarte Feldoptionen und geben Sie etwas in Inhalt ein.

Die Überschrift des Textfeld-Blocks sieht nicht wie eine Überschrift aus

Verwenden Sie die H2-Schaltfläche in der Inhalts-Symbolleiste, anstatt Text fett und groß zu machen. Fettgedruckter Text in großer Schriftgröße sieht im Editor wie eine Überschrift aus, ist aber immer noch ein Absatz, und Ihr Theme wird ihn nicht als Überschrift formatieren.

Die Einstellung für die Schriftgröße scheint nichts zu ändern

Die Schriftgröße ist relativ zur Basisgröße des Formulars. Wenn die normale Textgröße des Formulars bereits unter Formularoptionen » Visueller Stil groß ist, wirkt der Schritt von Mittel zu Groß kleiner als erwartet. Überprüfen Sie daher zuerst diese Basisgröße.

Einige eingefügte Formatierungen sind verschwunden

Inhalte werden bereinigt, sodass Formatierungen, die über die Symbolleiste hinausgehen, entfernt werden. Text aus einem Textverarbeitungsprogramm enthält oft Markup, das nicht erhalten bleibt. Fügen Sie ihn daher als einfachen Text ein und formatieren Sie ihn stattdessen mit der Symbolleiste.

Der Textfeld-Block wird im Builder angezeigt, aber nicht auf der Live-Seite

Speichern Sie die Kampagne. Die Vorschau des Builders zeigt ungespeicherte Änderungen an, die Live-Seite jedoch nicht.

Wenn sie gespeichert ist und immer noch fehlt, bestätigen Sie, dass die Kampagne das visuelle Spendenformular anstelle des Legacy-Formulars verwendet. Ein visuelles Formular benötigt seine Pflichtfelder, und ein Formular, dem diese fehlen, greift auf das klassische Layout zurück, das keine Textblöcke enthält.

Ich möchte, dass ein Textfeld-Block nur für bestimmte Spender angezeigt wird

Ein Textblock kann dies nicht allein. Er wird für jeden angezeigt, der das Formular sieht.

Entwicklerreferenz für das Textblock-Feld

Textblock-Hooks und -Filter

Der Typ-Slug des Feldes ist text-block-field und erscheint innerhalb der Hook-Namen.

// Filter the rendered output of a Text Block before it reaches the page.
// $html          string  the block's markup
// $campaign_data array   the campaign's builder data
apply_filters( 'charitable_campaign_builder_text-block-field_field_display', $html, $campaign_data );

// Runs at the top and bottom of the block's settings panel in the builder.
// $field_id      int     the field's id within the form
// $campaign_data array   the campaign's builder data
do_action( 'charitable_builder_text-block-field_settings_display_start', $field_id, $campaign_data );
do_action( 'charitable_builder_text-block-field_settings_display_end', $field_id, $campaign_data );

Beachten Sie die Bindestriche. Die Hook-Namen verwenden den Typ-Slug genau so, wie er geschrieben ist, mit Bindestrichen und nicht mit Unterstrichen.

Wie Textblock-Inhalte bereinigt werden

Inhalte werden zweimal wp_kses_post() durchlaufen, einmal im Browser, während Sie tippen, und erneut in PHP, bevor sie gespeichert oder gerendert werden. Alles, was wp_kses_post() nicht zulässt, wird in keiner Richtung erhalten bleiben. Planen Sie daher keinen Workflow, der vom Speichern von Markup über diese Zulassung hinaus abhängt.

Überschreibe die Textblock-Vorlage in deinem Theme

Ein Textblock wird über die Vorlagen des visuellen Spendenformulars gerendert. Um sein Markup zu ändern, überschreiben Sie die Vorlage des Spendenformulars auf die übliche Charitable-Weise, indem Sie die Vorlage in your-theme/charitable/ kopieren und dort bearbeiten.

Codebeispiel zum Hinzufügen einer Standardnotiz zu jedem Textblock

add_filter(
    'charitable_campaign_builder_text-block-field_field_display',
    function ( $html, $campaign_data ) {
        return $html . '<p class="my-standard-note">Donations are processed securely.</p>';
    },
    10,
    2
);

Codebeispiel zum Stylen eines Textblocks mit einer CSS-Klasse

Setzen Sie CSS-Klasse auf dem Block auf refund-policy und fügen Sie dann dies zu Ihrem Theme hinzu.

.charitable-form .refund-policy {
    font-size: 0.85em;
    color: #6b6b6b;
    border-top: 1px solid #e5e5e5;
    padding-top: 12px;
}

Dies ist der sauberere Weg, wenn Sie das gleiche Aussehen über viele Kampagnen hinweg wünschen. Sie setzen die Klasse einmal pro Block und behalten die Formatierung in einer einzigen Stylesheet bei, anstatt Schriftgröße und Textfarbe bei jedem Formular von Hand einzustellen.

Codebeispiel zum Finden jeder Kampagne, die einen Textblock verwendet

$campaigns = get_posts( array(
    'post_type'      => 'campaign',
    'post_status'    => array( 'publish', 'draft' ),
    'posts_per_page' => -1,
    'fields'         => 'ids',
) );

foreach ( $campaigns as $campaign_id ) {
    $forms  = get_post_meta( $campaign_id, 'donation_forms', true );
    $active = get_post_meta( $campaign_id, 'active_donation_form', true );
    $fields = isset( $forms[ $active ]['fields'] ) ? $forms[ $active ]['fields'] : array();

    foreach ( (array) $fields as $field ) {
        if ( isset( $field['type'] ) && 'text-block-field' === $field['type'] ) {
            // $campaign_id uses a Text Block.
            break;
        }
    }
}

Beachten Sie, dass post_status explizit übergeben wird. Ein get_posts()-Aufruf für Kampagnen ohne diese Angabe wird nicht den Erwartungen entsprechen.

Zusammenfassung

Sie wissen jetzt, wie Sie einen Textblock zu einem Spendenformular hinzufügen, ihn schreiben und formatieren und ihn dort platzieren, wo Spender ihn lesen werden. Ihre Formulare können nun die Fragen der Spender beantworten, in dem Moment, in dem sie sie stellen.

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

Das könnten Sie auch interessieren

Diese Anleitungen behandeln den Rest des visuellen Spendenformular-Builders.

• Visueller Spendenformular-Builder. Sehen Sie jedes Feld und jede Einstellung, die der Formular-Builder bietet.
• Verwendung des visuellen Spendenformular-Builders. Erstellen Sie ein visuelles Spendenformular von Anfang bis Ende.
• Wechseln von Spendenformular-Vorlagen. Ändern Sie, welche Vorlage ein Spendenformular verwendet.
• Anpassen von Spendenformularen mit Code-Snippets mit WPCode. Fügen Sie die Filter auf dieser Seite hinzu, ohne Theme-Dateien zu bearbeiten.