Nécessite : plugin Charitable Pro 1.8.17+
Plan de base et supérieur

Votre formulaire de don semble-t-il cassé lorsqu'une personne l'ouvre sur un téléphone ?

Les formulaires de Charitable sont déjà adaptatifs. Le problème vient généralement de votre thème ou constructeur de pages, dont les styles peuvent pousser un champ hors du bord, réduire un bouton ou casser la zone de paiement sur un petit écran.

DonationExpress résout ce problème. Sur un téléphone, il ouvre le formulaire de don réel de votre campagne dans une feuille plein écran que votre thème ne peut pas styliser. Les champs, les montants suggérés et les passerelles de paiement sont les mêmes, et le formulaire est identique sur tous les téléphones.

Ce guide explique quand utiliser DonationExpress, comment l'activer, comment styliser la feuille, quel reçu afficher et comment le prévisualiser sans téléphone. Les développeurs trouveront les hooks, filtres et exemples de code à la fin.

Beaucoup de personnes qui accèdent à votre formulaire depuis les réseaux sociaux, les e-mails ou les publicités sont sur un téléphone, donc un formulaire mobile épuré aide un plus grand nombre d'entre elles à finaliser leur don. DonationExpress est une fonctionnalité Bêta et est désactivée par défaut, donc rien ne change sur votre site tant que vous ne l'activez pas.

Ce que contient ce guide ?

Regardez la vidéo de configuration de DonationExpress

Ce court tutoriel montre DonationExpress en cours d'activation et un don passant par la feuille sur un téléphone.

Quand utiliser DonationExpress

DonationExpress est le plus utile dans ces situations.

• Votre thème ou constructeur de pages stylise le formulaire de don ou la fenêtre pop-up d'une manière qui semble cassée sur les téléphones.
• Vous voulez que les donateurs voient le même formulaire de don sur tous les appareils, quel que soit le téléphone qu'ils utilisent et quel que soit le thème que vous utilisez.
• Vous voulez que le formulaire mobile se charge rapidement, sans les scripts et styles de votre thème qui se chargent avec lui.
• Vous recevez des dons depuis les réseaux sociaux, les e-mails ou les publicités, où de nombreux visiteurs sont sur un téléphone et le premier aperçu de votre formulaire est important.

Même un thème d'organisation à but non lucratif bien conçu peut ajouter des styles qui entrent en conflit avec un formulaire sur un petit écran. Un formulaire qui semble cassé est l'une des raisons pour lesquelles les gens partent avant de donner, et nous abordons les autres dans comment empêcher les donateurs d'abandonner le formulaire de don.

Comment DonationExpress modifie le formulaire sur un téléphone

À gauche se trouve un formulaire de don sur un téléphone lorsque les styles du thème entrent en conflit avec lui. À droite se trouve la même campagne avec DonationExpress activé.

La feuille affiche le formulaire de don réel de votre campagne, avec les mêmes champs, montants suggérés et passerelles de paiement. Seul le style du thème a disparu.

Où trouver les paramètres de DonationExpress

Pour trouver les paramètres, rendez-vous sur Charitable » Paramètres » Général » Formulaire de don. Vous verrez 3 paramètres DonationExpress sous Options d'affichage.

• DonationExpress active la fonctionnalité et choisit quels boutons de don et formulaires l'utilisent.
• Style d'angle DonationExpress définit la forme des coins des boutons et des champs dans la feuille.
• DonationExpress Receipt définit ce que la feuille affiche après un don réussi.

Le style d'angle et les paramètres de reçu restent masqués tant que DonationExpress n'est pas réglé sur autre chose que Désactivé, car seule la feuille les utilise.

Comment configurer DonationExpress en 6 étapes

La configuration de DonationExpress prend quelques minutes. Chaque paramètre se trouve sur le même écran, et vous pouvez tester le résultat sans décrocher le téléphone.

1. Choisissez les formulaires de don qui utilisent DonationExpress

Pour commencer, ouvrez le paramètre DonationExpress. Il propose 3 options, choisissez celle qui correspond aux formulaires que vous souhaitez modifier.

Option	Ce qu'il fait
Désactivé	DonationExpress est désactivé, et les formulaires de don s'affichent de manière normale sur les téléphones. C'est le réglage par défaut.
Boutons de don modaux uniquement	Seuls les boutons de don qui ouvrent une fenêtre contextuelle ou modale utilisent la feuille. Les formulaires placés directement sur une page ne sont pas modifiés.
Tous les formulaires de don	Chaque bouton de don, lien et formulaire sur page utilise la feuille sur un téléphone.

Choisissez Boutons de don modaux uniquement si vous aimez déjà l'apparence de vos formulaires sur page sur les téléphones et que vous souhaitez uniquement corriger la fenêtre contextuelle.

Choisissez Tous les formulaires de don si vous souhaitez que chaque don mobile passe par la feuille, quelle que soit la manière dont le donateur a accédé au formulaire. En cas de doute, commencez par celui-ci.

DonationExpress ne fonctionne que sur les écrans de 768 pixels de large ou moins. Sur les tablettes et les ordinateurs de bureau, vos formulaires s'affichent exactement comme aujourd'hui, et un développeur peut modifier cette largeur avec un filtre abordé dans la référence développeur ci-dessous.

2. Choisissez un style de coin pour DonationExpress

Une fois DonationExpress activé, le paramètre Style d'angle DonationExpress apparaît en dessous. Il contrôle à quel point les boutons et les champs de la feuille sont arrondis.

Style des coins	Apparence
Vifs	Les boutons et les champs ont des coins carrés.
Arrondis	Les boutons et les champs ont des coins légèrement arrondis. C'est le réglage par défaut.
Pilule	Les boutons et les champs sont entièrement arrondis, comme une pilule.

Voici la même feuille avec le style Pilule. Choisissez le style le plus proche des boutons du reste de votre site.

Le reste de l'apparence de la feuille provient des paramètres que vous avez déjà dans Charitable, car DonationExpress ne lit rien de votre thème.

• La couleur d'accentuation provient de votre paramètre Couleur de surbrillance par défaut du formulaire de don, sur le même écran Charitable » Paramètres » Général » Formulaire de don. Le bouton de don et la barre de progression dans la feuille l'utilisent.
• Le logo provient de votre logo d'e-mail dans Charitable » Paramètres » E-mails. Si vous en avez défini un, il s'affiche en haut de la feuille.

3. Choisissez le reçu DonationExpress

Ensuite, utilisez le paramètre DonationExpress Receipt pour choisir ce que les donateurs voient après avoir donné. Ce paramètre nécessite le plugin Charitable Pro 1.8.17.1 ou supérieur, alors mettez à jour d'abord si vous ne le voyez pas.

Style de reçu	Ce que le donateur voit
Célébration (épuré, minimaliste)	Le donateur voit un écran de remerciement avec une coche et des confettis. Il contient un bouton Partager, un bouton facultatif Faire un don mensuel, un bouton facultatif Télécharger le reçu PDF et un bouton Fermer. C'est le réglage par défaut.
Détaillé (épuré, ventilation par article)	Le donateur voit le même écran de célébration plus un tableau listant chaque campagne à laquelle il a donné et le total.
Page de reçu standard	La feuille se ferme et le donateur atterrit sur votre page de reçu normale, stylisée par votre thème, exactement comme il le ferait sans DonationExpress.

Les reçus de célébration et détaillés restent dans la feuille, de sorte que le donateur ne quitte jamais la mise en page épurée.

Quels boutons s'affichent sur le reçu DonationExpress

Certains boutons sur les reçus de célébration et détaillés ne s'affichent que lorsque la fonctionnalité correspondante est activée.

• Partager ouvre le menu de partage du téléphone, permettant aux donateurs de publier sur les réseaux sociaux ou d'envoyer un message en un seul clic.
• Faire un don mensuel ne s'affiche que lorsque la fonctionnalité Dons récurrents de Charitable est active et que le don était ponctuel. Cela rouvre la feuille avec un don mensuel sélectionné.
• Télécharger le reçu PDF ne s'affiche que lorsque la fonctionnalité Reçus PDF de Charitable est active.

4. Enregistrez vos paramètres DonationExpress

Lorsque les 3 paramètres sont corrects, faites défiler jusqu'en bas de la page et cliquez sur Enregistrer les modifications. Vos paramètres devraient maintenant ressembler à ceci.

5. Prévisualisez DonationExpress sans téléphone

Vous n'avez pas besoin d'un téléphone pour voir la feuille. Connecté en tant qu'administrateur, ouvrez cette URL dans votre navigateur et remplacez NN par l'ID d'une campagne.

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

Il affiche le même formulaire de don sans thème que DonationExpress affiche sur un téléphone. Ainsi, vous pouvez vérifier vos couleurs, votre logo et le style des coins sur un écran pleine taille.

6. Testez DonationExpress sur votre téléphone

Enfin, ouvrez l'une de vos campagnes sur votre téléphone et appuyez sur le bouton Faire un don. La feuille DonationExpress devrait glisser sur la page, comme montré dans la section suivante.

Si vous utilisez une passerelle de paiement en mode test, vous pouvez également effectuer un don de test pour voir le reçu que vous avez choisi à l'étape 3.

Ce que les donateurs voient lorsque DonationExpress est activé

Voici une campagne sur un téléphone avec Tous les formulaires de don sélectionnés. La page de campagne ressemble à ce qu'elle était avant, jusqu'à ce que le donateur appuie sur Faire un don maintenant.

Cette pression ouvre la feuille. Le nom de la campagne et la barre de progression se trouvent en haut, avec les montants suggérés en dessous.

Plus bas, le donateur remplit ses coordonnées et choisit un mode de paiement. Le bouton Faire un don utilise votre couleur de surbrillance.

Après que le don soit effectué, le reçu apparaît dans la même feuille. Celui-ci est le reçu détaillé, avec une ligne détaillée pour la campagne et le total.

Le donateur ne quitte jamais votre site. Si vous souhaitez plus d'idées pour la page autour du formulaire, lisez notre guide sur comment créer une page de don qui convertit.

Conseils à garder à l'esprit

Ces points aideront DonationExpress à fonctionner sans problème sur votre site.

• DonationExpress affiche le vrai formulaire de la campagne, donc vos champs, montants suggérés et passerelles apparaissent automatiquement dans la feuille. Il n'y a rien à reconstruire.
• Si vous utilisez un plugin de mise en cache ou d'optimisation, excluez le chemin /charitable-give/ de la mise en cache. La feuille a besoin de jetons de sécurité frais à chaque chargement, tout comme vos pages de don et de reçu normales.
• Apple Pay et Google Pay fonctionnent dans la feuille. Apple Pay nécessite toujours que votre domaine soit vérifié auprès de votre passerelle de paiement, comme sur le formulaire normal.
• Activez-la avant un grand appel, comme l'une de vos idées pour le Giving Tuesday ou une campagne Instagram, afin que chaque donateur arrivant sur un téléphone obtienne le formulaire épuré.
• DonationExpress est en version bêta et désactivé par défaut, donc les sites existants ne changent pas tant que vous ne l'activez pas.

Dépannage de DonationExpress

Si quelque chose ne semble pas correct, voici les causes habituelles.

La feuille DonationExpress ne s'ouvre pas sur mon téléphone

Vérifiez d'abord que le paramètre DonationExpress n'est pas défini sur Désactivé. S'il est défini sur Boutons de don modaux uniquement, les formulaires placés directement sur une page n'utiliseront pas la feuille, alors passez à Tous les formulaires de don.

La feuille ne s'ouvre également que sur les écrans de 768 pixels de large ou moins. Un grand téléphone tourné sur le côté peut être plus large que cela, alors testez avec le téléphone à la verticale.

La feuille DonationExpress affiche une erreur ou ne se soumet pas

Il s'agit généralement d'un plugin de mise en cache qui sert une ancienne copie de la feuille. Excluez le chemin d'accès /charitable-give/ de la mise en cache, videz le cache et réessayez.

Apple Pay ne s'affiche pas dans la feuille DonationExpress

Apple Pay nécessite que votre domaine soit vérifié auprès de votre passerelle de paiement. Si Apple Pay ne s'affiche pas non plus sur votre formulaire de don normal, terminez d'abord la vérification du domaine.

Le bouton "Faire mensuellement" ou "PDF" est manquant

Ces boutons ne s'affichent que lorsque la fonctionnalité correspondante est active. Faire un don mensuel ne s'affiche également qu'après un don unique, et il ne s'affiche jamais sur l'option Page de reçu standard.

Référence développeur DonationExpress

DonationExpress rend le formulaire de don réel de la campagne à l'intérieur d'un document nu et sans thème servi à partir d'un point de terminaison dédié. Une superposition plein écran sur la page parente charge ce document dans un iframe. Un petit pont postMessage maintient la synchronisation entre le parent et le cadre tout au long du flux de don et de reçu.

Où se trouve le code DonationExpress

Pièce	Emplacement
Bootstrap	Charitable_Mobile (includes/mobile/class-charitable-mobile.php), démarré à la priorité 9 de init
Fonctions d'aide	includes/mobile/charitable-mobile-functions.php
Paramètres et isolation des ressources	includes/mobile/charitable-mobile-hooks.php
Point de terminaison sans thème	Charitable_Mobile_Form_Endpoint (includes/endpoints/class-charitable-mobile-form-endpoint.php)
Modèles	templates/mobile/form-mobile.php, templates/mobile/receipt-mobile.php
Ressources	assets/css/charitable-mobile.css, assets/js/charitable-mobile-{sheet,bridge,receipt}.js

Points d'accès et URL de DonationExpress

Le point de terminaison enregistre 2 règles de réécriture et 2 variables de requête, et s'affiche sur template_redirect (priorité 0).

Objectif	Permaliens personnalisés	Permaliens simples
Formulaire de don	/charitable-give/{campaign_id}/	?charitable_mobile_form={campaign_id}
Reçu dans la feuille	/charitable-give/receipt/{donation_id}/	?charitable_mobile_receipt={donation_id}

Le document de reçu est contrôlé d'accès avec charitable_user_can_access_donation(). Une requête pour un don auquel le visiteur actuel ne peut pas accéder renvoie un 403.

Fonctions d'aide DonationExpress

Fonction	Retours
charitable_mobile_get_mode()	Le mode résolu, qui est off, modal, ou always.
charitable_mobile_is_enabled()	Indique si la feuille est activée ou non (false lorsque le mode est off).
charitable_mobile_get_breakpoint()	Le point d'interruption mobile en pixels (768 par défaut).
charitable_mobile_get_form_url( $campaign_id, $args )	L'URL du formulaire sans thème. $args accepte amount et period.
charitable_mobile_get_receipt_url( $donation_id )	L'URL du reçu dans la feuille sans thème.
charitable_mobile_get_brand_tokens( $campaign_id )	array{ accent, logo, radius } résolu à partir des paramètres de Charitable.
charitable_mobile_get_receipt_style( $campaign_id )	Le style de reçu résolu, qui est confetti, detailed, ou redirect.

Filtres DonationExpress

Filtre	Défaut	Objectif
charitable_mobile_mode	Paramètre enregistré	Force le mode dans le code, par exemple par page ou par campagne. Retourne off, modal, ou always.
charitable_mobile_is_enabled	Dérivé du mode	Porte d'activation/désactivation finale. Retourne false pour désactiver la feuille quel que soit le mode.
charitable_mobile_form_breakpoint	768	Le point d'interruption de largeur maximale, en pixels, qui est considéré comme mobile.
charitable_mobile_brand_tokens	Jetons résolus	Remplacez l'accent, le logo, et le radius utilisés pour styliser la feuille.
charitable_mobile_asset_is_allowed	true pour les actifs de Charitable et de passerelle	Autorisez ou excluez un identifiant de style ou de script spécifique dans le document nu.
charitable_mobile_receipt_style	Paramètre enregistré	Varie le style du reçu par campagne. Retourne confetti, detailed, ou redirect.
charitable_mobile_receipt_pdf_url	URL des reçus PDF ou ''	Remplacez l'URL du bouton PDF, ou renvoyez '' pour le masquer.
charitable_mobile_receipt_monthly_url	URL du formulaire mensuel ou ''	Remplacez l'URL Faire un don mensuel, ou renvoyez '' pour la masquer.
charitable_mobile_receipt_check_icon	Marquage de la coche par défaut	Échangez l'icône de succès affichée sur le reçu.

Actions DonationExpress

Action	S'exécute
charitable_mobile_form_head	Dans l' <head> du document nu, où les ressources d'en-tête de Charitable et de la passerelle sont imprimées.
charitable_mobile_form_footer	Avant la fermeture </body> du document nu, où les scripts de pied de page sont imprimés.

URL de prévisualisation administrateur DonationExpress

?charitable_action=preview-mobile-form&campaign_id=NN redirige un administrateur (manage_options) vers l'URL du formulaire sans thème pour une campagne, afin que la feuille puisse être examinée sur n'importe quelle taille d'écran.

Exemples de code pour personnaliser DonationExpress

Ajoutez l'un de ces extraits avec un plugin d'extraits de code ou le fichier functions.php de votre thème enfant.

Forcer l'activation de DonationExpress pour une seule page de destination

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

Augmenter le point d'interruption de DonationExpress pour les petites tablettes

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

Remplacer la couleur d'accentuation et le rayon du coin de DonationExpress

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

Afficher le reçu détaillé DonationExpress pour une campagne

Cet extrait affiche le reçu détaillé pour la campagne 1234 et conserve le reçu de célébration partout ailleurs.

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

Autoriser un script supplémentaire dans le document DonationExpress

Cet extrait permet à un identifiant de script supplémentaire, tel qu'un chargeur de police personnalisé, de se charger dans le document sans thème.

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

En résumé

Vous savez maintenant comment activer DonationExpress, choisir les formulaires qui l'utilisent, styliser la feuille, choisir le reçu que les donateurs voient, et tout prévisualiser sans téléphone. Vos donateurs mobiles recevront le même formulaire épuré sur tous les téléphones, quel que soit le thème que vous utilisez.

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

Vous pourriez aussi vouloir lire

Ces guides et articles de blog couvrent les fonctionnalités qui fonctionnent avec DonationExpress, et les campagnes où il est le plus utile.

• Modèles de formulaire de don. Apprenez à modifier l'apparence du formulaire de don standard qui s'affiche sur les tablettes et les ordinateurs de bureau.
• Reçus PDF. Configurez les reçus PDF derrière le bouton Télécharger le reçu PDF dans la feuille.
• Dons récurrents. Activez les dons mensuels derrière le bouton Faire un don mensuel dans la feuille.
• Comment activer Apple Pay et Google Pay avec Stripe. Vérifiez votre domaine pour qu'Apple Pay s'affiche dans la feuille.
• Comment créer un formulaire de don. Créez le formulaire de campagne que DonationExpress affiche sur les téléphones, étape par étape.
• Publicités Facebook pour les organisations à but non lucratif. Planifiez des publicités qui envoient les gens vers votre campagne, où la plupart des clics arrivent sur un téléphone.