Constructeur de formulaires de dons visuels

Le constructeur de formulaires de dons visuels est un constructeur de formulaires par glisser-déposer qui vous permet de créer des formulaires de dons personnalisés pour les campagnes. Ce document fournit des détails techniques pour les développeurs, les concepteurs et les développeurs de thèmes travaillant avec le système de constructeur de formulaires visuels.

Table des matières

Accroches et filtres
Catégories et paramètres des champs
Options avancées
Logique conditionnelle
Formulaires en plusieurs étapes
Validation des champs
Rendu côté client
Intégration du thème
Duplication de champ
Limites et restrictions des champs
Ressources supplémentaires

Accroches et filtres

Les hooks et filtres PHP suivants sont disponibles pour étendre et personnaliser le constructeur de formulaires visuels :

Filtres de thème et de style

charitable_visual_form_theme_classes – Filtre les classes de thème visuel résolues (thème de densité)
- Paramètres : $result (tableau), $visual_theme (chaîne)
- Retourne : Tableau avec la clé density_theme
charitable_visual_form_theme_variables – Filtre la carte des variables de thème pour les formulaires visuels
- Paramètres : $result (tableau), $density_theme (chaîne)
- Retourne : Tableau avec la clé variables contenant les définitions de variables CSS
charitable_visual_form_default_styles – Filtre les styles par défaut pour les formulaires visuels
- Paramètres : $defaults (tableau), $context (chaîne)
- Retourne : Tableau des valeurs de style par défaut
charitable_visual_form_styles – Filtre le tableau complet des styles pour un formulaire
- Paramètres : $styles (tableau), $campaign_id (int), $form_data (tableau)
- Retourne : Tableau des styles modifié
charitable_visual_form_field_styles – Filtre les styles pour les champs individuels
- Paramètres : $field_styles (tableau), $field_id (chaîne), $field_data (tableau), $campaign_id (int)
- Retourne : Tableau des styles de champ modifié
charitable_visual_form_field_classes – Filtrer les classes CSS appliquées aux champs de formulaire
- Paramètres : $classes (array), $field_id (string), $field_data (array), $campaign_id (int)
- Retourne : Tableau des classes modifiées
charitable_visual_form_field_full_width – Déterminer si un champ doit avoir une largeur complète
- Paramètres : $is_full_width (bool), $field_id (string), $field_data (array), $campaign_id (int)
- Retourne : Booléen
charitable_visual_form_enable_theme_inheritance – Activer/désactiver l'héritage des styles du thème
- Paramètres : Aucun
- Retourne : Booléen (défaut : false)
charitable_visual_form_detected_theme_styles – Filtrer les styles de thème détectés
- Paramètres : $detected (array), $active_theme (string)
- Retourne : Tableau des styles détectés modifié
charitable_visual_form_theme_style_map – Mapper les styles de thème détectés aux variables du formulaire
- Paramètres : $mapped (array), $detected_styles (array), $theme_name (string)
- Retourne : Tableau de mappage modifié
charitable_visual_form_theme_fallback – Fournir des valeurs de repli pour les variables de thème
- Paramètres : $fallback (mixed), $form_variable (string), $detected_value (mixed), $context (string)
- Retourne : Valeur de repli ou null
charitable_visual_form_enable_elementor_inheritance – Activer/désactiver l'héritage des styles Elementor
- Paramètres : Aucun
- Retourne : Booléen (défaut : true)
charitable_visual_form_detected_elementor_styles – Filtrer les styles Elementor détectés
- Paramètres : $detected (array), $elementor_active (bool)
- Retourne : Tableau des styles détectés modifié
charitable_visual_form_elementor_style_map – Mapper les styles Elementor aux variables du formulaire
- Paramètres : $mapped (array), $detected_styles (array)
- Retourne : Tableau de mappage modifié

Filtres de formulaire multi-étapes

charitable_multistep_animation_type – Filtrer le type d'animation pour les formulaires multi-étapes
- Paramètres : $animation_type (string), $campaign_id (int)
- Retourne : Chaîne de type d'animation
charitable_multistep_prev_button_text – Filtrer le texte du bouton « Précédent »
- Paramètres : $text (string), $campaign_id (int)
- Retourne : Chaîne de texte du bouton
charitable_multistep_next_button_text – Filtrer le texte du bouton « Suivant »
- Paramètres : $text (string), $campaign_id (int)
- Retourne : Chaîne de texte du bouton
charitable_multistep_show_step_number – Contrôler si les numéros d’étape sont affichés
- Paramètres : $show (bool), $step_number (int), $campaign_id (int)
- Retourne : Booléen
charitable_multistep_step_label – Filtrer les étiquettes d’étape
- Paramètres : $label (string), $step_number (int), $campaign_id (int)
- Retourne : Chaîne d’étiquette d’étape

Actions sur les formulaires et les champs

charitable_donation_form_before_fields – Action déclenchée avant le rendu des champs du formulaire
- Paramètres : $current_form (array)
charitable_visual_form_before_payment_section – Action déclenchée avant le rendu de la section de paiement
- Paramètres : $current_form (array), $campaign_id (int), $visual_form_data (array), $section_index (int par référence)
charitable_visual_form_file_uploaded – Action déclenchée lorsqu’un fichier est téléchargé
- Paramètres : $attachment_id (int), $donation_id (int), $file_key (string)

Filtres spécifiques aux champs

charitable_visual_form_address_country_default – Filtrer le pays par défaut pour les champs d’adresse
- Paramètres : $default_country (string), $campaign_id (int), $field_data (array)
- Retourne : Chaîne de code pays
charitable_donation_form_gateway_fields – Filtrer les champs spécifiques à la passerelle
- Paramètres : $gateway_fields (array), $gateway (object)
- Retourne : Tableau de champs de passerelle modifié
charitable_html_field_allowed_html – Filtrer les balises HTML autorisées pour les champs HTML
- Paramètres : $allowed_html (string|array), $field_data (array), $field_id (string)
- Retourne : « default » ou tableau de HTML autorisé
charitable_checkbox_field_use_fieldset – Déterminer si les champs de case à cocher doivent utiliser un wrapper fieldset
- Paramètres : $use_fieldset (bool), $normalized_id (string), $render_data (array), $visual_field_data (array)
- Retourne : Booléen (défaut : false)
charitable_visual_form_donate_label – Filtrer l’étiquette du bouton « Faire un don »
- Paramètres : $donate_label (string), $campaign_id (int), $visual_form_data (array)
- Retourne : Chaîne de caractères pour le libellé du bouton

Filtres du constructeur de formulaires

charitable_default_visual_form_template – Filtrer le modèle de formulaire visuel par défaut
- Paramètres : $default_template (array), $campaign_id (int), $form_type (string)
- Retourne : Tableau de modèles
charitable_form_builder_load_fields – Filtrer la liste des types de champs à charger
- Paramètres : $form_fields (array)
- Retourne : Tableau de types de champs modifiés
charitable_builder_form_buttons – Filtrer les boutons de champs de formulaire dans la barre latérale du constructeur
- Paramètres : $fields (array)
- Retourne : Tableau de champs modifiés
charitable_builder_form_field_button_attributes – Filtrer les attributs des boutons de champs de formulaire
- Paramètres : $attributes (array), $field (array), $form_data (array)
- Retourne : Tableau d'attributs modifiés
charitable_visual_form_conditional_logic_enabled – Activer/désactiver la logique conditionnelle globalement
- Paramètres : $enabled (bool), $field_data (array)
- Retourne : Booléen (défaut : true)
charitable_visual_form_debug – Activer/désactiver le mode débogage pour les formulaires visuels
- Paramètres : $enable_debug (bool)
- Retourne : Booléen

Catégories et paramètres des champs

Les champs du constructeur de formulaires visuels sont organisés en trois catégories : Champs obligatoires, Champs de formulaire (réguliers) et Champs Pro.

Paramètres courants des champs

La plupart des champs prennent en charge les paramètres courants suivants (note : tous les champs n'ont pas tous ces paramètres) :

Libellé – Le libellé texte affiché aux utilisateurs sur le formulaire de don
Placeholder – Texte indicatif affiché dans les champs de saisie vides
Obligatoire – Indique si le champ doit être rempli avant la soumission du formulaire
Alignement – Alignement du champ (gauche, centre, droite) – non disponible sur tous les champs
Classe CSS – Classes CSS personnalisées pour la mise en forme – non disponible sur tous les champs

Champs requis

Ces champs sont essentiels pour les formulaires de don et ne peuvent généralement être ajoutés qu'une seule fois par formulaire.

Champs du nom du donateur

Type : champs-nom-donateur
Paramètres :
- Disposition (côte à côte ou empilé)
- Étiquette
- Aligner
- Classe CSS
Limite de champ : 1 par formulaire
Ne peut pas être dupliqué

Champ e-mail du donateur

Type : champ-email-donateur
Paramètres :
- Étiquette
- Aligner
- Classe CSS
Limite de champ : 1 par formulaire
Ne peut pas être dupliqué

Champs d'adresse

Type : champs-adresse
Paramètres :
- Étiquette
- Aligner
- Classe CSS
Limite de champ : 1 par formulaire
Ne peut pas être dupliqué
Remarque : Comprend les champs adresse, adresse ligne 2, ville, état, code postal et pays

Politique de confidentialité

Type : politique-confidentialite
Paramètres :
- Étiquette
- Aligner
- Classe CSS
Limite de champ : 1 par formulaire
Ne peut pas être dupliqué

Montants des dons

Type : montants-dons-suggérés
Paramètres :
- Étiquette
- Aligner
- Classe CSS
Limite de champ : 1 par formulaire
Ne peut pas être dupliqué
Remarque : Affiche les montants de dons suggérés à partir des paramètres de la campagne

Section de paiement

Type : section-paiement
Paramètres :
- Sélection de la passerelle (cases à cocher multi-sélections pour les passerelles de paiement disponibles)
- Étiquette
- Aligner
- Classe CSS
Limite de champ : 1 par formulaire
Ne peut pas être dupliqué

Champs de formulaire (Régulier)

Ce sont des champs de formulaire standard disponibles pour la création de formulaires de dons personnalisés.

Champ de texte unique

Type : texte-unique
Paramètres :
- Étiquette
- Espace réservé
- Obligatoire
- Valeur par défaut
- Aligner
- Classe CSS
- Options avancées

Type : déroulant
Paramètres :
- Étiquette
- Espace réservé
- Obligatoire
- Autoriser la sélection multiple (case à cocher)
- Gestion des options (ajouter/modifier/supprimer des options avec des paires valeur et étiquette)
- Option par défaut (sélection radio)
- Aligner
- Classe CSS
- Options avancées

Champ de case à cocher

Type : champ-case-à-cocher
Paramètres :
- Étiquette
- Obligatoire
- Gestion des options de cases à cocher (ajouter/modifier/supprimer des cases à cocher avec des paires de valeur et d'étiquette)
- Sélections par défaut (cases à cocher pour les options présélectionnées)
- Aligner
- Classe CSS
- Options avancées

Champ radio

Type : champ-radio
Paramètres :
- Étiquette
- Obligatoire
- Gestion des options radio (ajouter/modifier/supprimer des boutons radio avec des paires de valeur et d'étiquette)
- Sélection par défaut (sélection radio)
- Aligner
- Classe CSS
- Options avancées

Champ de zone de texte

Type : champ-zone-de-texte
Paramètres :
- Étiquette
- Espace réservé
- Obligatoire
- Lignes (nombre de lignes de la zone de texte)
- Longueur Maximale (limite de caractères)
- Aligner
- Classe CSS
- Options avancées

Champ d'e-mail

Type : champ-e-mail
Paramètres :
- Étiquette
- Espace réservé
- Obligatoire
- Aligner
- Classe CSS
- Options avancées

Champ Téléphone

Type : champ-téléphone
Paramètres :
- Étiquette
- Espace réservé
- Obligatoire
- Aligner
- Classe CSS
- Options avancées

Champ numérique

Type : champ-numérique
Paramètres :
- Étiquette
- Espace réservé
- Obligatoire
- Valeur Minimale (facultatif)
- Valeur Maximale (facultatif)
- Pas (valeur d'incrémentation/décrémentation)
- Aligner
- Classe CSS
- Options avancées

Champ de date

Type : champ-date
Paramètres :
- Étiquette
- Espace réservé
- Obligatoire
- Format de date
- Date Minimale (facultatif)
- Date Maximale (facultatif)
- Aligner
- Classe CSS
- Options avancées

Champ d'URL

Type : champ-url
Paramètres :
- Étiquette
- Espace réservé
- Obligatoire
- Aligner
- Classe CSS
- Options avancées

Champ de fichier

Type : champ-fichier
Paramètres :
- Étiquette
- Obligatoire
- Types de fichiers autorisés (sélection multiple)
- Taille Maximale du Fichier (Mo)
- Activer le recadrage d'image (pour JPEG/PNG uniquement)
- Aligner
- Classe CSS
- Options avancées

Champ Éditeur (WYSIWYG)

Type : champ-editeur
Paramètres :
- Étiquette
- Obligatoire
- Contenu de l'éditeur (éditeur de texte enrichi)
- Aligner
- Classe CSS
- Options avancées

Champ Titre

Type : champ-titre
Paramètres :
- Contenu Texte
- Niveau de Titre (H1-H6)
- Aligner
- Classe CSS
- Note : N'a pas d'options avancées

Champ Séparateur

Type : champ-separateur
Paramètres :
- Style (solide, tirets, pointillés)
- Largeur (pourcentage)
- Aligner
- Classe CSS
- Note : N'a pas d'options avancées

Champ Image

Type : champ-image
Paramètres :
- Sélection d'image
- Texte Alternatif
- URL du Lien (facultatif)
- Aligner
- Classe CSS
- Options avancées

Champ HTML

Type : champ-html
Paramètres :
- Contenu HTML (éditeur de code)
- Aligner
- Classe CSS
- Options avancées

Champ Shortcode

Type : champ-shortcode
Paramètres :
- Contenu Shortcode
- Aligner
- Classe CSS
- Note : N'a pas d'options avancées

Champ Masqué

Type : champ-masque
Paramètres :
- Nom du Champ
- Valeur par défaut
- Options avancées
- Note : N'a pas de paramètres d'étiquette, de placeholder, de requis, d'alignement ou de classe CSS

Champs Pro

Ces champs sont disponibles dans Charitable Pro et apparaissent dans la catégorie « Champs Pro ».

Champ Commentaire Donateur

Type : champ-commentaire-donateur
Paramètres :
- Étiquette
- Espace réservé
- Obligatoire
- Lignes (nombre de lignes de la zone de texte)
- Longueur Maximale (limite de caractères)
- Aligner
- Classe CSS
- Options avancées
Note : Nécessite que les commentaires des donateurs soient activés dans les paramètres de Charitable.

Champ Code de parrainage

Type : champ-code-parrainage
Paramètres :
- Étiquette
- Espace réservé
- Obligatoire
- Aligner
- Classe CSS
- Options avancées
Note : Nécessite que les parrainages de donateurs soient activés dans les paramètres de Charitable.

Options avancées

Les options avancées sont disponibles sur la plupart des champs de formulaire (à l'exception de ceux mentionnés ci-dessus). Ces options contrôlent la manière dont les données des champs sont traitées et affichées dans divers contextes.

Afficher dans l'export

Lorsqu'il est activé, les données de ce champ seront incluses dans les exportations et les rapports de dons. Ceci est utile pour les champs contenant des informations importantes sur les donateurs que vous souhaitez suivre et analyser.

Détails techniques : Les données du champ sont stockées dans les métadonnées du don et incluses lorsque les fonctions d'exportation interrogent les données du don. L'option doit être activée pour que les données de ce champ apparaissent dans les exportations CSV et autres outils de reporting.

Afficher dans l'e-mail

Lorsqu'il est activé, une balise d'e-mail est créée pour ce champ, qui peut être utilisée dans les modèles d'e-mail. Le format de la balise est généralement {field_field_id} ou une balise personnalisée basée sur le nom du champ.

Détails techniques : Les balises d'e-mail sont enregistrées auprès du système d'e-mail de Charitable et peuvent être utilisées dans les e-mails de reçu de don, les notifications d'administrateur et d'autres modèles d'e-mail. La valeur du champ est automatiquement formatée et insérée lors de l'envoi de l'e-mail.

Afficher dans les métadonnées

Lorsqu'il est activé, les données de ce champ seront affichées sur la page des détails du don dans l'administration, sous la section des métadonnées du don. Cela permet aux administrateurs de visualiser les données des champs personnalisés lors de l'examen des dons.

Détails techniques : Les données du champ sont affichées dans la boîte de métadonnées du don sur l'écran de modification des dons de l'administration WordPress. Cela offre un moyen pratique de visualiser toutes les données des champs personnalisés associées à un don sans avoir à exporter ou interroger la base de données.

Note : Certains champs (comme le champ de commentaire du donateur et le champ de code de parrainage) ont l'option « Afficher dans les métadonnées » activée par défaut et ne peuvent pas être désactivés, car ces informations sont considérées comme essentielles pour les enregistrements de dons.

Logique conditionnelle

La logique conditionnelle vous permet d'afficher ou de masquer des champs en fonction des valeurs d'autres champs. Cela crée des formulaires dynamiques et interactifs qui s'adaptent en fonction des saisies de l'utilisateur.

Comment ça marche

La logique conditionnelle utilise un système basé sur des règles où vous pouvez :

Activer la logique conditionnelle – Activer/désactiver la logique conditionnelle pour n'importe quel champ
Définir le type d'action – Choisir d'« Afficher » ou de « Masquer » le champ lorsque les conditions sont remplies
Créer des règles – Définir des conditions basées sur les valeurs d'autres champs
Grouper les règles – Utiliser la logique ET/OU pour créer des conditions complexes

Structure des règles

Champ – Sélectionner le champ à vérifier
Opérateur – Choisir l'opérateur de comparaison (égal à, différent de, contient, etc.)
Valeur – Entrer la valeur à comparer

Groupes logiques

Les règles peuvent être regroupées en utilisant :

ET – Toutes les règles d'un groupe doivent être vraies
OU – N'importe quelle règle d'un groupe peut être vraie (groupes séparés)

Implémentation technique

La logique conditionnelle est évaluée côté client à l'aide de JavaScript. Les règles sont stockées dans le tableau conditionals du champ et le drapeau booléen conditional_logic. Le système prend en charge l'évaluation en temps réel à mesure que les utilisateurs interagissent avec le formulaire.

Filtre : charitable_visual_form_conditional_logic_enabled – Peut être utilisé pour désactiver la logique conditionnelle globalement ou pour des champs spécifiques.

Formulaires en plusieurs étapes

Les formulaires multi-étapes vous permettent de diviser les formulaires de don en plusieurs pages ou étapes, améliorant l'expérience utilisateur pour les formulaires plus longs.

Types de formulaires

Formulaire en une seule page – Tous les champs sur une seule page (par défaut)
Formulaire multi-étapes – Champs divisés sur plusieurs étapes/diapositives

Gestion des étapes

Étapes minimum : 2 étapes requises pour les formulaires multi-étapes
Étapes maximum : 4 étapes autorisées
Étiquettes d'étape : Chaque étape peut avoir une étiquette personnalisée
Navigation par étape : Boutons Précédent/Suivant avec texte personnalisable
Indicateurs de progression : Les indicateurs de progression visuels montrent l'achèvement du formulaire

Configuration des étapes

Les étapes (également appelées « diapositives ») sont gérées dans le panneau Options du formulaire. Vous pouvez :

Ajouter de nouvelles étapes
Supprimer des étapes (minimum 2 requises)
Renommer des étapes
Réorganiser des étapes
Attribuer des champs à des étapes spécifiques

Navigation

Bouton Précédent – Naviguer vers l'étape précédente (caché à la première étape)
Bouton Suivant – Naviguer vers l'étape suivante (valide l'étape actuelle avant de continuer)
Bouton Envoyer – Visible uniquement à la dernière étape
En-têtes d'étape – En-têtes d'étape cliquables optionnels pour la navigation (peuvent être désactivés)

Validation

Chaque étape est validée avant de permettre la progression vers l'étape suivante. Seuls les champs avec lesquels on a interagi sont validés, évitant ainsi les erreurs de validation prématurées.

Animation

Les transitions d'étape peuvent être animées. Le type d'animation peut être filtré à l'aide de charitable_multistep_animation_type.

Filtres :

charitable_multistep_prev_button_text – Personnaliser le texte du bouton « Précédent »
charitable_multistep_next_button_text – Personnaliser le texte du bouton « Suivant »
charitable_multistep_show_step_number – Contrôler l'affichage du numéro d'étape
charitable_multistep_step_label – Personnaliser les étiquettes d'étape

Validation des champs

La validation des champs garantit que les utilisateurs fournissent des informations correctes et complètes avant la soumission du formulaire.

Types de validation

Validation de champ obligatoire – Garantit que les champs obligatoires ne sont pas vides
Validation de format – Valide le format du champ (e-mail, URL, nombre, etc.)
Validation de plage – Valide les valeurs min/max pour les champs numériques et de date
Validation de fichier – Valide le type de fichier, la taille et d'autres contraintes de téléchargement
Validation personnalisée – Règles de validation spécifiques au champ

Moment de la validation

À la soumission – La validation complète du formulaire se produit lorsque le bouton de soumission est cliqué
Au passage d'étape – Les formulaires multi-étapes valident l'étape actuelle avant de permettre l'étape suivante
En temps réel – Certains champs peuvent être validés pendant que l'utilisateur tape (selon le navigateur)

Actions de validation

Chaque type de champ possède une méthode validate() qui est appelée via l'action charitable_form_process_validate_{field_type}. Les erreurs de validation sont affichées aux utilisateurs et empêchent la soumission du formulaire jusqu'à leur résolution.

Affichage des erreurs

Les erreurs de validation sont affichées :

Sous le champ qui a échoué à la validation
Dans un résumé en haut du formulaire (en cas d'erreurs multiples)
Avec des messages d'erreur clairs et conviviaux

Rendu côté client

Le constructeur de formulaires visuels utilise un système de rendu spécialisé qui convertit les données de champ du constructeur en formulaires HTML fonctionnels sur le frontend.

Processus de rendu

Récupération des données du formulaire – La configuration du formulaire est chargée à partir des métadonnées de la campagne
Enregistrement des champs – Les champs sont enregistrés auprès de l'API des champs de dons de Charitable
Rendu des modèles – Les champs sont rendus à l'aide de modèles tenant compte du thème
Application des styles – Les classes CSS et les styles en ligne sont appliqués en fonction des paramètres du formulaire
Initialisation JavaScript – Le JavaScript frontend gère les interactions et la validation

Classes de rendu

Les formulaires reçoivent des classes CSS basées sur :

Type de formulaire (une page ou plusieurs étapes)
Sélection du thème
Paramètres de densité
Classes CSS personnalisées

Conteneurs de champs

Chaque champ est encapsulé dans des conteneurs qui offrent :

Espacement et mise en page cohérents
Support d'alignement
Comportement réactif
Intégration du thème

Rendu multi-étapes

Les formulaires multi-étapes sont rendus avec :

Des conteneurs d'étape qui s'affichent/se masquent en fonction de l'étape actuelle
Des contrôles de navigation
Des indicateurs de progression
Validation spécifique à l'étape

Intégration du thème

Le constructeur de formulaires visuel inclut une intégration thématique sophistiquée qui adapte automatiquement les formulaires pour correspondre aux styles de votre thème WordPress actif ou de votre constructeur de pages.

Détection du thème

Le système détecte automatiquement :

Thème WordPress actif
Styles du constructeur de pages Elementor (si actif)
Schémas de couleurs et typographie du thème

Héritage des styles

Les formulaires peuvent hériter des styles de :

Thèmes WordPress – Détecte et applique automatiquement les couleurs, polices et espacements du thème
Elementor – Hérite des paramètres de couleurs globales et de typographie d'Elementor
Variables CSS personnalisées – Utilise les propriétés personnalisées CSS pour un thématisation facile

Variables CSS

Les formulaires utilisent des propriétés personnalisées CSS (variables) pour le style, permettant une personnalisation facile :

--charitable-field-gap – Espacement entre les champs
--charitable-input-padding-y – Rembourrage vertical pour les entrées
--charitable-input-padding-x – Padding horizontal pour les champs
--charitable-input-border-color – Couleur de la bordure des champs
--charitable-input-border-radius – Rayon de la bordure des champs
--charitable-focus-ring-color – Couleur de l’anneau de mise au point
Et plus encore…

Classes de thème

Les formulaires reçoivent des classes CSS spécifiques au thème qui permettent aux développeurs de thèmes de cibler les formulaires avec des styles personnalisés :

Classes de densité (base, espacé)
Classes spécifiques au thème
Classes de type de formulaire (unique, multi-étapes)

Pour les développeurs de thèmes

Pour personnaliser les formulaires visuels dans votre thème :

Utiliser les variables CSS – Remplacez les propriétés personnalisées CSS dans votre feuille de style de thème
Cibler les classes de thème – Utilisez les classes de thème appliquées aux formulaires pour un style spécifique
Utiliser les filtres – Accrochez-vous aux filtres de détection de thème pour personnaliser l’héritage des styles
Classes CSS personnalisées – Ajoutez des classes CSS personnalisées aux champs via le paramètre Classe CSS

Filtres pour l’intégration de thèmes

charitable_visual_form_theme_classes – Modifier les classes de thème
charitable_visual_form_theme_variables – Personnaliser les variables CSS
charitable_visual_form_enable_theme_inheritance – Activer/désactiver l’héritage du thème
charitable_visual_form_detected_theme_styles – Modifier les styles de thème détectés
charitable_visual_form_theme_style_map – Personnaliser la cartographie des styles
charitable_visual_form_theme_fallback – Fournir des valeurs de repli

Pour les concepteurs

Le générateur de formulaires visuels fournit :

Style cohérent – Les formulaires correspondent automatiquement au design de votre site
Mise en page réactive – Les formulaires s’adaptent aux différentes tailles d’écran
Accessibilité – Les formulaires suivent les meilleures pratiques d’accessibilité
Options de personnalisation – Paramètres faciles à utiliser pour les couleurs, l’espacement et la mise en page

Thèmes de densité

Deux options de densité sont disponibles :

Base – Espacement standard (par défaut)
Spaced – Espacement accru pour une meilleure lisibilité

La densité affecte les espacements des champs, le remplissage des entrées et l'espacement général du formulaire.

Duplication de champ

Les champs peuvent être dupliqués pour créer rapidement des champs similaires avec les mêmes paramètres.

Processus de duplication

Cliquez sur l'icône de duplication sur n'importe quel champ
Choisissez le mode de duplication :
- Copier les paramètres – Duplique le champ avec tous les paramètres (sauf la logique conditionnelle et les options avancées)
- Utiliser les valeurs par défaut – Crée un nouveau champ avec les paramètres par défaut mais conserve l'étiquette d'origine (avec « (Copie) » ajouté)

Ce qui est dupliqué

Lors de la copie des paramètres :

Étiquette du champ (avec « (Copie) » ajouté si ce n'est pas déjà présent)
Type de champ
Tous les paramètres spécifiques au champ (options, espaces réservés, etc.)
Statut requis
Alignement
Classes CSS
Valeurs par défaut

Ce qui n'est PAS dupliqué

Logique conditionnelle (toujours réinitialisée)
Options avancées (toujours réinitialisées)
ID du champ (un nouvel ID unique attribué)

Gestion des ID de champ

Chaque champ dupliqué reçoit un nouvel ID de champ unique. Le système utilise des transitoires pour suivre le prochain ID de champ disponible et éviter les conflits.

Limites et restrictions des champs

Certains champs ont des restrictions sur le nombre de fois où ils peuvent être ajoutés à un formulaire.

Champs avec limites

Les champs suivants ne peuvent être ajoutés qu'une seule fois par formulaire :

Champs de nom de donateur (max_allowed: 1)
Champ d'e-mail du donateur (max_allowed: 1)
Champs d'adresse (max_allowed: 1)
Politique de confidentialité (max_allowed: 1)
Montants des dons (max_allowed: 1)
Section de paiement (max_autorisé : 1)

Champs ne pouvant pas être dupliqués

Certains champs ne peuvent pas être dupliqués même s'ils n'ont pas de limite stricte :

Tous les champs requis listés ci-dessus
Section de paiement

Limites de formulaire multi-étapes

Étapes minimum : 2 étapes requises pour les formulaires multi-étapes
Étapes maximum : 4 étapes autorisées

Disponibilité des champs

Certains champs nécessitent des paramètres spécifiques pour être activés :

Champ de commentaire du donateur – Nécessite que les commentaires des donateurs soient activés dans Charitable → Paramètres → Donateurs
Champ de code de parrainage – Nécessite que les parrainages de donateurs soient activés dans Charitable → Paramètres → Donateurs

Ces champs seront désactivés dans le constructeur si les paramètres requis ne sont pas activés, avec une fenêtre modale expliquant comment les activer.

Limitation de la saisie des dons par l'administrateur

Important : Lors de l'ajout manuel d'un don dans l'administration WordPress (via Dons → Ajouter), les champs personnalisés du constructeur de formulaires visuels ne sont pas pris en charge ni affichés.

Seuls les dons soumis via le formulaire frontal captureront et stockeront les données des champs personnalisés. Les dons créés par l'administrateur n'auront pas accès à :

Champs de formulaire personnalisés ajoutés via le constructeur visuel
Validation spécifique aux champs
Stockage des données des champs personnalisés
Paramètres des options avancées

Cette limitation existe car l'interface de saisie des dons par l'administrateur utilise le formulaire de don standard de Charitable, et non le système de constructeur de formulaires visuels. Les champs personnalisés créés dans le constructeur visuel ne sont traités et stockés que lorsque les dons sont soumis via le formulaire frontal.

Ressources supplémentaires

Pour plus d'informations sur l'extension du constructeur de formulaires visuels :

Documentation du développeur Charitable
Documentation des Hooks et Filtres WordPress
Dépôt GitHub Charitable

Version du document : 1.0 Dernière mise à jour : 28 novembre 2025

Documentation Charitable

Ressources populaires

Constructeur visuel de formulaires de don