Requis : plugin Charitable Pro 1.8.19.1+
Plan de base et supérieur

Voulez-vous dire quelque chose aux donateurs directement dans votre formulaire de don, comme ce que couvre un montant ou quand leur reçu arrivera ?

Un Bloc de texte insère vos propres mots dans un formulaire de don visuel. Il est uniquement destiné à l'affichage, il ne collecte aucune information et n'ajoute rien au dossier de don.

Ce guide couvre où trouver le champ, comment ajouter et écrire un bloc, ses paramètres de taille et de couleur, comment il fonctionne avec la typographie du formulaire, le dépannage et les crochets pour développeurs.

Les donateurs lisent le formulaire plus attentivement que toute autre partie de la page, car c'est là qu'ils saisissent leurs informations de paiement. Une courte note au bon endroit peut répondre à leur question avant qu'ils ne s'arrêtent.

Ce que contient ce guide ?

Regarder la vidéo sur le bloc de texte

Cette courte vidéo montre comment ajouter un bloc de texte à un formulaire de don et le configurer.

Quand utiliser un bloc de texte dans votre formulaire de don

Utilisez un bloc de texte pour la phrase dont un donateur a besoin à ce stade du formulaire.

• Expliquer un montant. « Un don de 25 $ couvre le filtre à eau d'une famille pendant un an » fait plus que de figurer à côté des montants que dans la page de campagne au-dessus d'eux.
• Définir les attentes avant le paiement. Une courte note peut indiquer que les dons sont traités en toute sécurité, ou que les reçus arrivent par e-mail en quelques minutes.
• Afficher votre politique de remboursement ou d'annulation. Les donateurs la voient là où ils la cherchent, plutôt que dans un pied de page.
• Donner des instructions pour un champ inhabituel. Si vous avez ajouté une question personnalisée, un bloc de texte au-dessus peut expliquer pourquoi vous la posez.
• Lister ce que la campagne couvre. Une courte liste à puces se lit plus rapidement qu'un long paragraphe.

Bloc de texte vs. Champ de texte : quel champ utiliser

Le plugin Charitable Pro 1.8.19.1 contient 2 champs aux noms similaires, et ils font des choses opposées. Il est utile de clarifier cela avant de construire.

	Ce qu'il fait	Le donateur tape-t-il dedans ?
Bloc de texte	Il affiche *votre* texte au donateur.	Non. Il ne collecte rien.
Champ de saisie de texte	Il collecte une longue réponse écrite et l'enregistre avec le don.	Oui.

Champ de saisie de texte s'appelait Texte enrichi avant la version 1.8.19.1. Les formulaires l'utilisant déjà ne sont pas affectés, et vos donateurs ne verront aucun changement.

Dans la liste des champs, les 2 champs sont séparés par plusieurs boutons et ont des icônes différentes. Le bloc de texte a un signe de paragraphe, et le champ de saisie de texte a un crayon.

Où trouver le champ Bloc de texte

Vous trouverez le Bloc de texte dans les champs du formulaire de don du constructeur de campagnes.

1. Pour commencer, ouvrez une campagne dans le générateur de campagnes.
2. Choisissez Formulaire dans la barre latérale gauche.
3. Sous l'onglet Ajouter un champ, recherchez dans Champs du formulaire l'option Bloc de texte.

Remarque : Si vous ne pouvez pas sélectionner l'onglet Formulaire, la campagne n'a pas encore de modèle. Choisissez-en un dans l'onglet Modèle d'abord.

Comment ajouter un bloc de texte à un formulaire de don

Faites glisser Bloc de texte depuis la liste des champs sur l'aperçu du formulaire, et déposez-le là où vous souhaitez que les mots apparaissent. L'aperçu se met à jour lorsque vous le déposez, vous pouvez donc voir immédiatement s'il est bien placé.

La liste des champs est l'endroit où vous choisissez les champs, et elle ne définit pas leur ordre. L'endroit où vous déposez le bloc décide où le donateur le verra, que ce soit au-dessus des montants, entre les montants et les champs de nom, ou juste avant la section de paiement.

Une fois le bloc sur le formulaire, ses paramètres s'ouvrent sous l'onglet Options du champ. Le panneau est intitulé Bloc de texte (ID : n), où n est l'ID du champ dans ce formulaire.

Comment rédiger le contenu d'un bloc de texte

La boîte Contenu est un petit éditeur de texte enrichi. Sa barre d'outils vous offre ces options.

• H2 ajoute un titre.
• Gras et italique ajoutent de l'emphase.
• Liste numérotée et liste à puces transforment les lignes en liste.
• Lien ajoute un lien au texte sélectionné.
• Effacer le formatage supprime le style du texte sélectionné.

Gardez un bloc court. Si vous vous retrouvez à écrire plusieurs paragraphes, ces mots appartiennent probablement à la page de campagne, où il y a de la place pour eux.

Comment nommer un bloc de texte

Libellé est pour vous, pas pour le donateur. Il nomme le bloc dans le générateur afin que vous puissiez le retrouver dans un formulaire comportant plusieurs blocs, et il ne s'affiche jamais sur le formulaire.

Un formulaire avec 3 blocs tous nommés « Bloc de texte » est difficile à utiliser. Nommez chacun d'eux selon ce qu'il contient, par exemple « Pourquoi 25 $ », « Politique de remboursement » ou « Note sur le don déductible des impôts ».

Comment définir la taille de la police du bloc de texte

Taille de police a 4 valeurs.

Valeur	Effet
Moyen (hérité)	Il suit la taille du texte du corps du formulaire.
Petit	Il est plus petit que le texte du corps.
Grand	Il est plus grand que le texte du corps.
Très grand	C'est la plus grande taille.

Les tailles sont relatives à la taille de police de base du formulaire, pas à des valeurs fixes en pixels. Tout ce qui se trouve à l'intérieur du bloc s'adapte ensemble, donc un titre dans un bloc Grand est toujours plus grand que le paragraphe en dessous.

Astuce de pro : Le laisser sur Moyen (hérité) est généralement correct. Choisissez Grand lorsqu'un bloc remplit la fonction d'un titre, et Petit pour une note légale que vous souhaitez présenter mais discrètement.

Comment définir la couleur du texte du bloc de texte

Couleur du texte définit la couleur de tout ce qui se trouve dans ce bloc. Laissez-la vide pour utiliser la propre couleur de texte du formulaire, ce dont la plupart des formulaires ont besoin, car un bloc qui correspond à tout ce qui l'entoure est perçu comme faisant partie du formulaire.

Utilisez-la avec précaution. Un seul bloc de couleur différente attire le regard, tandis que 3 couleurs différentes dans un même formulaire semblent tout simplement incorrectes.

Comment ajouter une classe CSS à un bloc de texte

Classe CSS ajoute une classe à l'enveloppe du bloc afin que vous puissiez le styliser à partir de votre thème. La référence du développeur ci-dessous contient un exemple.

Comment le style du bloc de texte fonctionne avec la typographie du formulaire

La version 1.8.19.1 a également ajouté des paramètres de Typographie pour les formulaires de don visuels, sous Style visuel dans l'onglet Options du formulaire. Ceux-ci définissent la taille et la couleur pour l'ensemble du formulaire, y compris le texte du corps, les étiquettes et le texte d'aide.

Les 2 ensembles de paramètres fonctionnent ensemble de cette manière.

• Options du formulaire » Style visuel définit la base pour tout dans le formulaire.
• La taille de police et la couleur du texte propres à un bloc de texte remplacent cette base, pour ce bloc uniquement.

Remarque : Les formulaires que vous avez créés avant la version 1.8.19.1 conservent la taille et la couleur actuelles jusqu'à ce que vous modifiiez l'un des paramètres de typographie.

Ce que le champ Bloc de texte ne fait pas

Le nom peut suggérer le contraire, voici donc ce qu'un bloc de texte omet.

• Il ne collecte rien. Rien d'un bloc de texte n'atteint l'enregistrement du don, une exportation ou un e-mail. Pour collecter une réponse, utilisez Saisie de texte.
• Il n'est pas conditionnel en soi. Il s'affiche à chaque donateur qui voit ce formulaire.
• Il n'accepte pas de HTML ou de scripts arbitraires. Le contenu est assaini à l'entrée et à la sortie, de sorte que le balisage collé au-delà de la mise en forme de la barre d'outils peut être supprimé. Si vous avez besoin de balisage brut, utilisez le champ HTML.

Exemple : un formulaire de don qui explique ses propres montants

Disons qu'une campagne d'eau potable propose 25 $, 50 $ et 100 $, et que l'équipe constate que les donateurs hésitent à l'étape du montant. Voici le formulaire conçu pour répondre à la question que ces donateurs se posent.

1. Ajoutez une courte introduction au-dessus des montants

Faites glisser un bloc de texte tout en haut du formulaire, au-dessus des montants des dons. Intitulez-le Pourquoi ces montants, et dans Contenu, écrivez une phrase sans titre.

Chaque montant ci-dessous couvre une partie spécifique et chiffrée du travail. Choisissez celui qui convient.

Laissez la taille de police sur Moyen (hériter), car il s'agit d'un texte courant faisant un travail courant.

2. Ajoutez une liste à puces ci-dessous les montants

Faites glisser un deuxième bloc sous les montants et intitulez-le Ce que chaque don finance. Utilisez H2 pour un titre, puis ajoutez une liste à puces.

Où va votre don

• 25 $ couvrent les cartouches de filtre d'un ménage pendant un an.
• 50 $ couvrent l'entretien annuel d'un point d'eau partagé.
• 100 $ couvrent l'analyse de l'eau pour un village entier, deux fois par an.

Voici à quoi ressemble ce bloc pour un donateur sur le formulaire en direct.

Gardez la taille de police sur Moyen (hériter) à nouveau. Le titre ressort déjà, donc rendre tout le bloc Grand serait trop criard.

3. Ajoutez une note discrète juste avant le paiement

Faites glisser un troisième bloc directement au-dessus de la section de paiement. Intitulez-le Note de reçu et de remboursement, réglez la taille de police sur Petit et laissez la couleur du texte vide.

Les reçus arrivent par e-mail en quelques minutes. Si vous donnez par erreur, contactez-nous dans les 14 jours et nous vous rembourserons intégralement.

4. Enregistrez et vérifiez le formulaire en direct

L'aperçu du constructeur est proche de la page en direct mais pas identique, car la typographie de votre thème s'applique sur le front-end. Regardez toujours le formulaire réel avant de considérer le travail comme terminé.

La partie à copier de cet exemple est la retenue. Il utilise 3 blocs, un titre, un changement de taille et aucun changement de couleur, et les mots font le travail.

Où placer un bloc de texte dans votre formulaire de don

Les donateurs lisent un bloc de texte dans l'ordre où ils le rencontrent, donc où vous le placez est plus important que les options de style.

Position	Idéal pour
Au-dessus des montants	Cela encadre le choix que le donateur est sur le point de faire.
Entre les montants et les détails du donateur	Cela explique ce que les montants permettent d'acheter, une fois qu'ils sont visibles.
À côté d'un champ personnalisé inhabituel	Cela explique pourquoi vous demandez cette information.
Juste avant la section de paiement	Cela rassure les donateurs concernant la sécurité, les reçus et les remboursements.
Tout en bas	Cela contient des notes légales dont personne n'a besoin avant de prendre une décision.

Blocs de texte sur les formulaires en plusieurs étapes

Si votre formulaire est divisé en étapes, un bloc de texte appartient à l'étape dans laquelle vous le placez et apparaît lorsque le donateur atteint cette étape. Quelqu'un qui quitte à l'étape 1 ne voit jamais une note à l'étape 3, alors placez des mots rassurants à l'étape où les donateurs ont tendance à s'arrêter.

Titres des blocs de texte et accessibilité

La barre d'outils Contenu propose H2. Les lecteurs d'écran et les moteurs de recherche lisent les titres comme un plan de la page, donc un formulaire avec plusieurs blocs H2 se lit comme plusieurs sections égales, ce qui est généralement correct.

Utilisez le bouton H2 plutôt que le gras, un grand texte, car ils se ressemblent mais se comportent différemment. Et évitez le titre pour une seule phrase courte, car une ligne de prose est un paragraphe.

Conseils à garder à l'esprit

Ces habitudes maintiennent vos blocs de texte utiles aux donateurs plutôt que de les gêner.

• Demandez si le bloc répond à une question. Chaque bloc doit répondre à quelque chose que le donateur se demande déjà à ce stade du formulaire.
• Laissez 2 blocs d'écart. Si 2 blocs sont côte à côte sans rien entre eux, ils constituent en réalité un seul bloc avec une rupture de paragraphe.
• Collez en texte brut. Formatez ensuite avec la barre d'outils, afin que rien de ce que vous collez ne soit supprimé.
• Utilisez une classe CSS sur plusieurs campagnes. Une classe maintient le style dans une seule feuille de style, de sorte qu'il ne dérive pas d'un formulaire à l'autre.

Dépannage du champ Bloc de texte

Le bouton Bloc de texte n'est pas dans la liste des champs

Vérifiez ces 3 choses, dans l'ordre.

1. Vous êtes dans l'onglet Formulaire, pas dans l'onglet Conception ou Paramètres. Les champs de mise en page de campagne et les champs de formulaire de don sont 2 listes distinctes, et le bloc de texte se trouve dans celle du formulaire de don.
2. Le plugin Charitable Pro est actif. Le constructeur visuel de formulaires de don, et donc le bloc de texte, n'est disponible que dans la version payante de Charitable.
3. Vous utilisez la version 1.8.19.1 ou ultérieure. Les versions antérieures n'ont pas le champ Bloc de texte.

Le bloc de texte ne montre rien au donateur

Un bloc de texte avec une boîte de Contenu vide n'a rien à afficher, donc il n'affiche rien. Ouvrez le bloc dans l'onglet Options de champ et tapez quelque chose dans Contenu.

Le titre du bloc de texte ne ressemble pas à un titre

Utilisez le bouton H2 de la barre d'outils Contenu plutôt que de rendre le texte gras et grand. Le texte en gras avec une taille de police grande ressemble à un titre dans l'éditeur, mais c'est toujours un paragraphe, et votre thème ne le stylisera pas comme un titre.

Le réglage de la taille de la police ne semble rien changer

La taille de la police est relative à la taille de base du formulaire. Si le texte du corps du formulaire est déjà grand sous Options du formulaire » Style visuel, le passage de Moyen à Grand semble plus petit que prévu, alors vérifiez d'abord cette ligne de base.

Certains formats collés ont disparu

Le contenu est assaini, donc la mise en forme au-delà de ce que produit la barre d’outils est supprimée. Le texte d’un traitement de texte contient souvent des balises qui ne survivent pas, alors collez-le en texte brut et mettez-le en forme avec la barre d’outils à la place.

Le bloc de texte s'affiche dans le constructeur mais pas sur la page en direct

Enregistrez la campagne. L’aperçu du constructeur montre les modifications non enregistrées, mais la page en direct non.

S’il est enregistré et toujours manquant, confirmez que la campagne utilise le formulaire de don visuel plutôt que l’ancien formulaire. Un formulaire visuel a besoin de ses champs obligatoires, et un formulaire qui en est dépourvu revient à la mise en page classique, qui ne contient pas de blocs de texte.

Je veux qu'un bloc de texte ne s'affiche que pour certains donateurs

Un bloc de texte ne peut pas faire cela tout seul. Il s’affiche à tous ceux qui voient le formulaire.

Référence développeur pour le champ Bloc de texte

Crochets et filtres de bloc de texte

Le slug du type de champ est text-block-field, et il apparaît à l’intérieur des noms d’accroche.

// 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 );

Notez les tirets. Les noms d’accroche utilisent le slug de type exactement comme il est écrit, avec des tirets et non des underscores.

Comment le contenu du bloc de texte est assaini

Le contenu passe deux fois par wp_kses_post(), une fois dans le navigateur pendant que vous tapez et une autre fois en PHP avant d’être stocké ou rendu. Tout ce que wp_kses_post() refuse ne survivra dans aucun des deux sens, alors ne prévoyez pas de flux de travail qui dépend du stockage de balises au-delà de cette autorisation.

Remplacez le modèle de bloc de texte dans votre thème

Un bloc de texte est rendu via les modèles de formulaire de don visuel. Pour modifier sa balise, remplacez le modèle de formulaire de don de la manière habituelle de Charitable, en copiant le modèle dans votre-thème/charitable/ et en le modifiant là.

Exemple de code pour ajouter une note standard à chaque bloc de texte

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
);

Exemple de code pour styliser un bloc de texte avec une classe CSS

Définissez Classe CSS sur le bloc à refund-policy, puis ajoutez ceci à votre thème.

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

C’est la voie la plus propre lorsque vous souhaitez le même aspect sur de nombreuses campagnes. Vous définissez la classe une fois par bloc et conservez le style dans une seule feuille de style, plutôt que de définir la taille de la police et la couleur du texte à la main sur chaque formulaire.

Exemple de code pour trouver toutes les campagnes utilisant un bloc de texte

$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;
        }
    }
}

Notez que post_status est passé explicitement. Un appel get_posts() sur des campagnes sans cela ne correspondra pas à ce que vous attendez.

En résumé

Vous savez maintenant comment ajouter un bloc de texte à un formulaire de don, l’écrire et le styliser, et le placer là où les donateurs le liront. Vos formulaires peuvent maintenant répondre aux questions des donateurs au moment où ils les posent.

Si vous êtes bloqué à une étape, notre équipe de support est heureuse de vous aider.

Vous pourriez aussi vouloir lire

Ces guides couvrent le reste du constructeur de formulaire de don visuel.

• Constructeur de formulaire de don visuel. Voyez chaque champ et paramètre que le constructeur de formulaire offre.
• Comment utiliser le constructeur de formulaire de don visuel. Créez un formulaire de don visuel du début à la fin.
• Comment changer les modèles de formulaire de don. Modifiez le modèle qu’un formulaire de don utilise.
• Personnalisation des formulaires de don avec des extraits de code à l’aide de WPCode. Ajoutez les filtres de cette page sans modifier les fichiers du thème.