Nous avons remarqué quelque chose dans les formulaires de don de nos utilisateurs : nous voyons des gens travailler dur sur leur page de campagne, et le formulaire de don qui se trouve juste au milieu donnait l'impression d'appartenir à un autre site Web.

Mauvais bleu, mauvais coins, aucune relation avec le logo trois pouces au-dessus.

Nous voulions rendre aussi facile que possible pour quiconque au sein de votre organisation à but non lucratif de configurer un formulaire qui semble appartenir à votre site Web.

C'est donc sur cela que nous avons passé la majeure partie de cette version. Cela s'appelle l'onglet Styles, il se trouve dans le Constructeur de Campagne, et c'est le titre de Charitable Pro 1.8.17. 🎨

Dans le constructeur de campagne, vous le verrez juste à côté de l'onglet Général. Plongeons dans ce qu'il peut faire pour vous.

Pourquoi l'apparence de votre formulaire décide si les gens donnent

Voici la chose qui me tracassait pendant que je construisais cela : la confiance est essentiellement la transaction entière en ligne. Personne ne peut vous serrer la main ou lire votre langage corporel avant de vous donner un numéro de carte, donc la page doit faire ce travail à la place. Un formulaire qui semble étrange, comme une réflexion après coup attachée à votre site, introduit une demi-seconde de doute au moment où vous avez besoin du contraire.

Avec de nombreux outils de collecte de fonds, combler cet écart signifiait un CSS personnalisé, un développeur ou un ticket de support, ce qui explique pourquoi tant de bonnes campagnes sont livrées avec un formulaire qui correspond presque, mais pas tout à fait, à la marque de votre organisation à but non lucratif.

Je voulais que Charitable ne vous cause jamais ce problème. Le contrôle de la conception se trouve maintenant dans le constructeur, à côté de tout ce que vous gérez déjà, donc être à la marque est juste ce qui se passe par défaut.

Voyez-le en action

Voici à quoi cela ressemble la première fois que vous l'ouvrez :

Quand vous ressentirez la différence

Quelques-uns des moments auxquels j'ai pensé en construisant cela :

🎯 Un rafraîchissement de marque : Nouveau logo et nouvelles couleurs cette année ? Appliquez votre palette une fois en tant que Couleurs globales et chaque champ s'aligne, sans édition page par page.
🏢 Causes multiples, un site : Donnez à votre campagne de secours d'urgence un rouge urgent et à votre fonds de bourses un vert calme, chacun correspondant à son propre message.
✨ Un appel phare de fin d'année : Restylez le formulaire pour qu'il ressemble à un événement, avec un accent audacieux sur le bouton de don et un montant suggéré mis en évidence.
🤝 Travail client dans une agence : Fournissez à chaque client un formulaire qui correspond à sa marque sans écrire une ligne de CSS sur mesure par site.
♿ Une équipe soucieuse de l'accessibilité : Réduisez le mouvement à néant et laissez le constructeur honorer les visiteurs qui préfèrent un mouvement réduit, automatiquement.

Concevez sans développeur

L'onglet Styles se trouve dans le panneau de conception du Campaign Builder. Recherchez l'indicateur NOUVEAU si vous ne le voyez pas immédiatement. Chaque modification que vous apportez s'affiche instantanément dans l'aperçu en direct situé à côté. Pas de bouton d'enregistrement, pas de rafraîchissement, pas de doute sur son bon fonctionnement.

Nous avons fourni 4 préréglages car nous ne voulions pas que la première chose que vous voyiez soit une page vierge : Violet Intense, Bleu Océan, Vert Forêt et Rouge Intense. Choisissez-en un et vous obtiendrez un ensemble coordonné de couleurs, de typographie et de mouvements en un seul clic, quelque chose de concret sur lequel réagir et à ajuster au lieu de partir de zéro.

À partir de là, vous disposez de 9 couleurs globales pour créer les vôtres : Primaire, Secondaire, Arrière-plan, Texte, Arrière-plan du bouton, Texte du bouton, Barre de progression et couleurs de l'onglet de don. Définissez-les une fois et elles s'appliqueront à chaque campagne. La typographie fonctionne de la même manière. Choisissez une famille de polices (Défaut du thème, Sans-serif, Serif ou Monospace) et définissez les tailles des titres et du corps du texte sur Petit, Moyen ou Grand.

L'animation propose également trois options : Aucune, Subtile ou Douce, pour la façon dont le formulaire et la barre de progression se déplacent. J'avoue que je suis revenu plusieurs fois sur cet onglet pendant que je le construisais, principalement parce que regarder une couleur se mettre à jour en temps réel n'a jamais vraiment lassé.

Styliser les champs individuels, jusque dans les détails

Parfois, un champ unique doit ressortir ou se fondre. Nous avons ajouté des styles de boîte par champ pour cela exactement, afin que vous ayez un contrôle réel sur les champs qui portent le plus de poids sur la page.

Sur les champs Texte et Liste, vous pouvez définir la couleur d'arrière-plan, le style de bordure (Aucune bordure, Bordure gauche uniquement ou Bordure complète), la couleur de la bordure, la largeur de la bordure, le rayon de la bordure et l'alignement, un champ à la fois. Le même style s'applique aux photos, aux comptes à rebours, à la barre de progression, aux onglets et à d'autres champs, de sorte que rien sur le formulaire ne reste figé comme s'il avait été expédié il y a des années.

Une option par défaut dont je suis particulièrement satisfait : la bordure d'accentuation d'un champ Liste puise automatiquement dans la couleur secondaire de votre campagne au lieu de prendre par défaut un bleu fixe. Vous n'avez pas à toucher ce champ pour qu'il corresponde déjà. Tout ce que vous définissez, jusqu'à la hauteur de ligne du corps du texte et la taille des titres, s'affiche sur le formulaire de don en direct, exactement comme vous l'avez conçu.

Premiers pas : styliser votre première campagne

Je me suis chronométré l'autre jour. Passer d'une campagne ouverte à un formulaire entièrement restylé a pris moins de cinq minutes, et cela inclut deux pauses pour hésiter sur une couleur. Vous pouvez personnaliser votre formulaire de don tout aussi rapidement. Voici le chemin que j'ai suivi.

1. Accédez à Campagnes dans wp-admin et ouvrez une campagne, ou créez-en une nouvelle, puis cliquez sur Modifier avec le constructeur.
2. Dans le constructeur, ouvrez le panneau Conception sur la droite et cliquez sur l'onglet Styles (recherchez l'indicateur NOUVEAU).
3. Sous Styles globaux, choisissez un préréglage de conception pour définir l'apparence générale, puis affinez vos couleurs globales, typographie et animations.
4. Cliquez sur n’importe quel champ dans l’aperçu pour ouvrir ses Styles de boîte et ajuster les bordures, l’arrière-plan et l’espacement de ce champ.
5. Regardez l’aperçu en direct se mettre à jour au fur et à mesure, puis Enregistrez. Votre nouveau style sera immédiatement appliqué à la page de la campagne.

Pour les agences et les développeurs

Étendez l’onglet Styles avec vos propres contrôles

Nous l’avons conçu pour être étendu, pas seulement utilisé. Enregistrez des contrôles personnalisés par champ en JavaScript via window.charitableDesignFieldControls, et intégrez le rendu côté serveur avec les actions charitable_design_styles_global et charitable_design_styles_field.

Tout pour une campagne se trouve dans une seule valeur méta campaign_style_tokens, il est donc facile à lire, à déplacer et à comprendre, que ce soit vous ou moi qui la regardions dans six mois.

Construit sur un système de jetons

Les couleurs, la typographie et l’animation sont stockées sous forme de jetons de conception au lieu de styles en ligne dispersés. C’était un choix délibéré de ma part. Cela maintient la sortie propre et rend une campagne portable si vous devez la déplacer ailleurs.

FAQ sur l’onglet Styles

Cela nécessite-t-il Charitable Pro ? 

Oui. Le générateur de campagnes, y compris l’onglet Styles, est une fonctionnalité de Charitable Pro et nécessite Charitable Pro 1.8.17 ou une version ultérieure.

Cela changera-t-il les campagnes que j’ai déjà créées ? 

Non, vos campagnes existantes conservent leur apparence. Les campagnes créées avant le système de jetons sont automatiquement migrées vers le nouveau système de Styles, sans perte de données, de sorte que rien ne casse et que tout reste modifiable.

Dois-je connaître le CSS ? 

Non, et c’était le but. Tout est visuel. Les développeurs peuvent toujours l’étendre avec des hooks et des filtres s’ils veulent aller plus loin, mais vous n’aurez jamais besoin de code juste pour l’utiliser.

Mon style sera-t-il correct sur mobile ? 

Oui. Les couleurs, la typographie et le style des champs de l’onglet Styles sont tous reportés sur le formulaire de don en direct, quelle que soit la taille de l’écran.

Puis-je réutiliser un style sur plusieurs campagnes ? 

Appliquez le même Préréglage de conception et les mêmes Couleurs globales à n’importe quelle campagne pour conserver une apparence cohérente et fidèle à la marque, tandis que toute campagne qui a besoin de se démarquer est libre de le faire.

Commencer avec l’onglet Styles

L’onglet Styles est maintenant disponible dans Charitable Pro 1.8.17. Ouvrez une campagne, cliquez sur l’onglet Styles et voyez à quelle vitesse votre formulaire commencera à ressembler à ce qu’il vous appartient vraiment.

Lire la documentation sur les styles du constructeur de campagne →

Plus dans Charitable Pro 1.8.17

L’onglet Styles était la chose la plus importante de cette version, mais ce n’était pas la seule chose qui a été livrée.

Nouveautés également :

• Les modèles Beacon
• Champ Hero de campagne
• Le bloc Gutenberg Formulaire de don
• Montants de don visuels avec images par montant
• Nouveaux widgets de collecte de fonds pour Elementor, WPBakery et Divi.

Nouveautés dans Charitable

Nous avons également lancé plusieurs fonctionnalités et améliorations puissantes récemment :

Nous ajoutons constamment à Charitable des fonctionnalités et des améliorations conçues pour vous aider à collecter plus et à mieux servir vos donateurs. Découvrez tout ce que nous avons publié dans le Journal des modifications de Charitable.

Pas encore utilisateur de Charitable Pro ? Inscrivez-vous aujourd'hui et bénéficiez jusqu'à 50 % de réduction sur votre plan. Nous sommes convaincus que vous aimerez collecter des fonds avec Charitable. Si, pour une raison quelconque, Charitable ne vous convient pas, nous vous rembourserons votre achat grâce à notre garantie de remboursement de 14 jours. Obtenez Charitable Pro dès maintenant »

Si vous avez des questions ou si vous souhaitez de l’aide pour la configuration, notre équipe de support est prête à vous aider à donner le meilleur look à vos campagnes.

Restez connecté pour plus de ressources pour les organisations à but non lucratif

Pour plus de tutoriels et de vidéos adaptés aux organisations à but non lucratif, abonnez-vous à notre chaîne YouTube. Nous publions régulièrement des conseils d'experts, des guides étape par étape sur les dons en ligne, des stratégies de collecte de fonds et des ressources pratiques pour aider votre organisation à réussir.

🗞️ Recevez des conseils hebdomadaires et des guides exclusifs dans votre boîte de réception
Rejoignez notre newsletter →  

🎥 Regardez des tutoriels étape par étape et des histoires de réussite
Abonnez-vous à notre chaîne YouTube →  

👩🏽‍💻 Connectez-vous avec notre communauté et obtenez des informations quotidiennes sur les organisations à but non lucratif
Suivez-nous sur LinkedIn →

🥳 Reels amusants et informations sur les organisations à but non lucratif
Suivez-nous sur Instagram → 

👀 Vidéos perspicaces et amusantes pour vous aider à développer votre cause
Suivez-nous sur TikTok→  

🌎 Abonnez-vous et suivez pour des conseils généraux sur la collecte de fonds
Obtenez des conseils sur la collecte de fonds sur TikTok → 

Ressources puissantes pour la collecte de fonds

🤖 Utilisez Charitable avec votre assistant IA

Voir Charitable + IA →

⬇️ Téléchargez des stratégies éprouvées, des idées de campagnes et des outils d'experts
Obtenez le kit de collecte de fonds →  

💸 Obtenez des ressources gratuites pour la collecte de fonds
Rendez-vous sur le Hub de collecte de fonds Charitable →

🤔 Des questions sur Charitable ?
FAQ Charitable →

🏎️ Essayez Charitable
Créez votre démo Charitable →

Comprendre les termes et le jargon des organisations à but non lucratif
Glossaire des organisations à but non lucratif→

% Vous recherchez des offres et des réductions pour les organisations à but non lucratif ?
Meilleures offres et réductions pour les organisations à but non lucratif →

David Bisset Chef de projet

David est le chef de projet de Charitable depuis 2022. David travaille avec plusieurs organisations à but non lucratif (dont une gérée par sa femme) tout en gérant et développant les fonctionnalités, le support et le marketing pour Charitable. Il travaille avec WordPress depuis 2006 et a été l'organisateur principal de plusieurs conférences, événements et rencontres.

Voir la biographie complète