Formidable, le générateur de formulaires

Publié le : 23 janvier 2012 – Dernière modification le 19 mars 2024 – par Maïeul, RastaPopoulos – 3511 commentaires

1
2
3
4
5
199 votes

Un générateur de formulaires facilement configurable pour les non-informaticiennes et facilement extensible pour les développeur⋅euses.

Cette documentation est valable à partir de la version 6.1.0 de Formidable.

Introduction

Historiquement, deux plugins avaient déjà été développés précédemment pour gérer des formulaires :

  • Forms &Tables, qui n’a pas été complètement porté pour SPIP 2.
  • et spip-formulaire créé par artego mais qui n’était plus maintenu.

La question s’est donc posée : construire sur la base d’un des deux plugins ou repartir de zéro ?
Form &Table, très complet pour les utilisateurs, présentait l’inconvénient d’avoir un côté « fourre-tout » qui le rendait difficilement modifiable et difficile à personnaliser par les dévs.

Il a finalement été décidé de repartir de zéro pour proposer quelque chose :

  • de plus facile à utiliser pour les utilisateurs d’une part,
  • mais aussi de plus facile à personnaliser pour les développeur⋅euses.
    Avec le parti pris de se baser de préférence sur plusieurs petits plugins spécialisés et de tirer parti de la nouvelle norme CVT.

Interface utilisateur

L’utilisation basique de l’interface est abordée dans ce screencast : Mon premier formulaire pas à pas : c’est Formidable !

Appeler mon formulaire

Vous devez appeler le formulaire ayant le nom « formidable », en lui passant en paramètre l’identifiant de votre formulaire.

Dans un contenu

Utilisez le modèle <formulaire> classique : <formulaire|formidable|id=34> ou bien <formulaire|formidable|id=contact>

Dans un squelette


#FORMULAIRE_FORMIDABLE{34} ou bien #FORMULAIRE_FORMIDABLE{contact}

Afficher les résultats du formulaire

Dans un contenu

Utilisez le modèle <formulaire_analyse|id_formulaire=34>

Pré-remplir dynamiquement les champs d’un formulaire

À noter, vous avez la possibilité de surcharger dans l’appel, les valeurs par défaut des champs de votre formulaire. Pour cela, vous devez passer un tableau de nom=>valeur en deuxième paramètre. Vous pourrez trouver les noms de vos champs dans l’aide-mémoire situé sur la page de configuration des traitements.

Dans un contenu

Le tableau de valeurs dans un paramètre defaut sous forme d’une suite de chaînes « clé,valeur » séparée par des virgules :
<formulaire|formidable|id=contact|defaut=hidden1,valeur,input_5,autrevaleur>

Dans un squelette

Le tableau en deuxième paramètre :

#FORMULAIRE_FORMIDABLE{contact, #ARRAY{nom_du_champ, Ma valeur}}

C’est particulièrement utile pour remplir un champ caché avec une valeur dynamique venant du squelette :

#FORMULAIRE_FORMIDABLE{contact, #ARRAY{hidden_1, #ID_DOCUMENT}}

Autres options utilisable dans le squelette

Il est possible de passer des options comme troisième argument du formulaire, sous forme de tableau (#ARRAY).

Options possible comme troisième argument de #FORMULAIRE_FORMIDABLE
Nom de l’optionFonctionType
forcer_modif Permet de forcer la modification d’une réponse, même si non autorisé Booléen
id_formulaires_reponses Identifiant de la réponse à modifier Entier
no_ajax Désactiver l’ajax sur le formulaire Booléen
traiter_email_destinataires Destinataires pour le traitement Tableau (#ARRAY) d’emails ou liste d’emails séparés par des virgules
traiter_email_destinataires_methode Indique si traiter_email_destinataires doit remplacer les emails déjà configurés dans le traitement ou les ajouter Au choix 'remplacer' ou 'ajouter' (valeur par défaut)
url_redirect Url de redirection Chaine

Exemple d’un formulaire Formidable dont l’identifiant est contact_libre et dont l’email destinataire est dans le champ email de la table de votre objet #EMAIL de la table spip_contacts ….

<div class="ajax">
#FORMULAIRE_FORMIDABLE{contact_libre,'',#ARRAY{traiter_email_destinataires,#EMAIL}}
</div>

Case unique

Pour rendre obligatoire la réponse oui à une case unique (pour la validation de conditions d’utilisation par exemple), il faut simplement rendre le champ obligatoire.

Courriels de notification

Une option des traitements proposés permet d’envoyer un mail de notification automatiquement, à chaque saisie d’un formulaire.

Le squelette par défaut employé pour la mise en forme de ces mails est plugins/formidable/notifications/formulaire_email.html. Vous pouvez le copier dans le répertoire ’notifications’ de votre squelette et l’y modifier à votre guise. Cette modification vaudra pour tous les formulaires.

Pour utiliser un squelette spécifique pour les mails de notification de l’un seulement des formulaires définis avec Formidable, il suffit d’ajouter son squelette dans le répertoire ’notifications’ de votre dossier squelettes, mais en ajoutant l’identifiant.

IDENTIFIANT étant l’identifiant du formulaire défini dans Formidable, les squelettes doivent se nommer :
formulaire_IDENTIFIANT_email.html pour le mail aux destinataires
formulaire_IDENTIFIANT_accuse.html pour l’accusé de réception du visiteur

Conservation des IP

Les adresse IP des personnes répondant aux formulaires sont stockées en base de donnée. Depuis la version 1.5 (SPIP 3) / 0.7 (SPIP < 3), elle sont automatiquement hashé, de manière à ce que l’IP ne soit plus reconnaissable, au bout de 124 jours (environ 4 mois).

Pour changer ce délai, vous pouvez redéfinir la constante _CNIL_PERIODE dans votre fichier mes_options.php.

Par exemple :

define('_CNIL_PERIODE', 24*3600);

permet de hasher les IP toutes les 24 heures.

Si vous voulez désactiver le hashage, mettez la valeur à 0.

Envoi de fichiers

Lire l’article complémentaire : Envoyer des fichiers avec un formulaire Formidable.

Mise en forme des saisies

Le plugin ne prévoit aucun réglage de mise en forme des saisies : c’est à chaque squelette d’avoir ses styles. Il respecte cependant la convention d’écriture des formulaire SPIP. Il permet d’ajouter des classes spécifiques sur les saisies.

Affichage des réponses sous forme de tableau

Le plugin Formidable Tablesorter permet d’afficher sous forme de tableau les réponses, dans l’espace privé, avec possibilité de tri et de filtre.

Voir aussi sur le wiki


-  Complément de doc et exemples sur les boucles et balises de formidable
-  Exemples de stylage CSS d’un formulaire Formidable
-  todoFormidable
-  Formidable, présentation aux Grottes (2010)

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

811 discussions

  • 2
    Ras Rubenxela

    Bonjour
    Pour un site j’utilise l’option de conservation des messages en BDD.
    Est t-il possible de récupérer dans un squelette de l’espace public les données des formulaires enregistrées ?
    Merci

    Répondre à ce message

  • 14
    Ploufplouf

    Bonjour,

    Dans un formulaire je voudrais ajouter la possibilité de charger un ou plusieurs documents, j’ai donc ajouté le plugin CVT upload.
    Le problème est que je voudrais que les champs de téléchargement ne s’affiche que si une case est cochée car si je mets ( documents maximum cela affiche les 5 lignes et que c’est pas très beau et cela rallonge le formulaire d’autant.
    J’ai beau essayer de mettre une condition d’affichage dans la configuration de mes champs en affichage conditionnel mais cela ne fonctionne pas.
    Il y a t-il possibilité de faire apparaitre qu’une seule ligne et que quand le 1er fichier est choisi d’avoir un bouton « Ajouter un autre document » pour faire apparaître la seconde ligne si nécessaire ?
    Ou il y a til une astuce pour que l’affichage conditionnel fonctionne si la case est cochée pour faire apparaitre les champs de téléchargemnet ?
    Merci par avance.

    • Maïeul

      Salut,

      il y a deux points que tu souligne
      1. L’affichage conditionnel qui ne marcherait pas sur cvt-upload. J’avoue être sceptique, mais envoie moi quand même un export yaml de ton formulaire, je vérifierai s’il n’y a pas un bug
      2. L’amélioration de l’affichage de cvt-upload pour ne pas tout afficher d’un coup. L’idée est bonne, faut juste que j’ai le temps de me consacrer à cela (ou que tu le fasse toi si tu a des compétences js)

    • Ploufplouf

      Malheureusement je n’ai pas les compétences requises en JS... Je bidouille tout au plus... je ne saurai même pas dans quel fichier gérer ça ;)

      Pour le yaml voici l’extrait :
      saisies : ...

      - { 
  options: { label: 'Case unique', label_case: 'Je souhaite joindre une ou plusieurs pièces complémentaires', valeur_oui: on, nom: case_1 },
  identifiant: '@58d14db250e41', 
  saisie: case 
}
- { 
  options: { label: Fichier(s), nb_fichiers: '5', label_fichiers_individuels: on, afficher_si: '@case_1@=="on"', afficher_si_remplissage: '@case_1@=="on"', nom: fichiers_1 }, 
  verifier: {type: fichiers, options: {mime: tout_mime }},
  identifiant: '@5a7987f5e738e', 
  saisie: fichiers 
}

      ...

      je supposes que cet extrait suffit ?

    • Maïeul

      pas vraiment car pour le moment on ne peut pas importer juste partiellement une saisie.

      Donc le mieux serait que tu m’envoie par corrueil (monprenomsanstrema@monprenomsanstrema.net) entièrement de yaml

    • Ploufplouf

      Envoyé.
      Merci.

    • Maïeul

      Je viens de regarder. Le problème est que tu rempli a la fois « affichage conditionnel » et « affichage conditionnel lors du remplissage ».

      Ce qui est inutile. Si tu remplis le premier, alors inutile de remplir le second.
      Attention : il faut que tu modifie cela pour tout tes champs, donc y compris « Vos informations » qui a des affichages conditionnels.

      La différence entre les deux est expliquée, mais hyper clairement. Le premier conditionne l’affichage lors du remplissage et lors de l’affichage des résultats, le second uniquement lors de l’affichage des résultats.

      Je prépare des commits :
      -  pour être plus explicite
      -  pour éviter les problèmes si les deux sont remplis

    • RastaPopoulos

      Justement les deux ne doivent pas être remplis, et pour moi (et des users qui m’ont demandé) c’est une énorme confusion. Ça alourdit l’interface pour rien à mon avis et ça perturbe les gens car c’est trop proche tout ça pour une différence minime.

      Je ne comprends pas du tout pourquoi il n’y a pas un unique champ pour remplir les tests, et ensuite une simple case à cocher pour activer le truc ajouté dérogatoire. Je ne tombe pas souvent dessus et du coup j’oublie, mais à chaque fois je veux te demander. Ce serait tellement plus simple à mon avis…

    • Maïeul

      Bah en fait c’est juste que j’y avais pas pensé quand j’avais ajouté cela, mais ton interface est effectivement plus logique. Le problème est que maintenant que c’est lancé, je ne sais pas comment s’en sortir pour faire la migration.

    • Ploufplouf

      Merci beaucoup, ça marche ;)

    • Maïeul

      Les version 3.6.0 de formidable / 2.22.0 de saisies suppriment ce deuxième champ afficher_si au profit d’une case à cocher.

      Une migration (testée en local) est executée lors de la mise à jour de formidable. Dans le cas où la personne aurait rempli les deux champs, on fusionne avec un « && » (en espérant que personne n’ai eu l’idée d’avoir deux critères différents pour les deux champs...)

    • 1138

      Merci, Maïeul, pour cette modif.

      Cependant, dans un formulaire, j’avais mis une condition dans un champ « Affichage conditionnel lors du remplissage ». Après mise à jour de Formidable et de Saisies, la condition n’apparait pas dans « Affichage conditionnel », et le bouton n’est pas coché.

      Mais ça continue à fonctionner comme avant : le formulaire prend bien en compte la condition (sauf qu’on ne peut plus modifier le critère, vu qu’il n’apparait plus…) Heureusement, j’ai fait ça sur un Spip de tests.

      Bon week-end.

      1138.

      Spip 3.1.7, PHP 5.3.3 (Aïe ! je me rends compte que je dois contacter mon hébergeur.)

    • Maïeul

      Est-tu bien passé par la page des plugins pour qu’il fasse la mise à jour de la base au moment de la mise à jour du plugin ?

      Si tel était le cas, peux tu m’envoyer un export .yaml de ton fichier ?

    • 1138

      Oui, je suis bien passé par la page de gestion des plugins.

      Par contre, en regardant un autre formulaire, j’ai vu que la migration avait correctement fonctionné. Différences notables entre les deux formulaires :
      -  Le 1er (celui avec le bug) n’avait aucune réponse. Le 2e, si.
      -  Dans le 1er, le champ à afficher est une ligne de texte. Dans le 2e, c’est un bloc de texte.
      -  Dans le 1er, il est obligatoire de remplir le champ quand il est affiché. Dans le 2e, non.

      Je t’envoie tout ça.

    • Maïeul

      Fausse alerte, c’était un problème de cache.

    • 1138

      Merci à Maïeul pour son débuggage par e-mail. 👍

      C’était un problème de cache : j’étais en mode « Modifier votre formulaire » pour voir les affichages conditionnels utilisés. Après les mises à jour, les options du formulaire étaient restées en cache de mon navigateur.

    Répondre à ce message

  • 5
    Ras Rubenxela

    Bonjour,
    A l’affichage de mon formulaire j’aimerais que certains champs soient pré-remplis en fonction de la session (j’utilise un formulaire pour finaliser une commande)

    Pour faire simple je voudrais pouvoir récupérer la valeur #SESSION{nom} dans un champ "nom du formulaire.

    J’ai bien entendu essayé de placer cette balise #SESSION{nom} dans le champ valeur à la création du champ de formulaire mais cela ne fonctionne pas.

    Est-ce faisable avec formidable ?

    Répondre à ce message

  • 4
    Ras Rubenxela

    Bonjour
    cela fait deux fois que je me trouve confronté à ce problème. la première fois je l’avais contourné en changeant de méthode .

    J’ai ajouté deux champs de dates à sélectionner en indiquant également l’ajout de l’heure.
    Pas de soucis d’affichage dans le formulaire mais les données ne sont jamais transmises, j’ai toujours « sans réponse », dans tous les cas de figure.

    Le champ était obligatoire, j’ai testé sans obligation, rien n’y fait.

    • Ras Rubenxela

      Par contre si je supprime l’insertion des horaires, cela fonctionne bien.

    • RastaPopoulos

      Je viens de tester, je suis en 3.2, avec tout à jour, j’ai mis deux champs dates différents avec horaires. Et tout s’est bien enregistré dans les réponses.

    • Ras Rubenxela

      Mince je ne comprends pas !! j’ai beau tout essayer dans tous les sens dès que je demande l’intégration du champ horaire ça me renvoie systématiquement « sans réponse ». je suis aussi sous la dernière version mise à jour.

      Je vais tester un autre formulaire avec seulement les champs de date et horaires afin de voir si cela fonctionne et donc éventuellement si d’autres champs entre en interaction (???)

    • Ras Rubenxela

      j’ai donc recréé un autre formulaire afin d’effectuer des tests.
      -  si je créé donc un form avec date et heure seulement, sans aucun autre champ cela fonctionne bien.
      -  si je créé un form avec 1er champ créé + autres champs divers après ça fonctionne
      -  si je duplique mon form de base en ne laissant que date et heure ça ne fonctionne pas
      -  si je recréé mon form en commençant par le champ date + heure puis ensuite mes autres champs, ça fonctionne

      donc en somme j’ai l’impression que pour pouvoir utiliser date + heure il faut créer ces champs en 1er !

    Répondre à ce message

  • 3
    UOL-WM

    Bonjour

    depuis une MAJ récente du browser, les champs date et heure ne semblent pas compatibles avec chrome et firefox (retour d’erreur de type « le format de la date n’est pas accepté »)
    est ce lié à la bibliothèque javascript ? une incompatibilité HTML 5 ?

    En vous remerciant de votre éclairage et de ce super PlugIn

    Michel

    • UOL-WM

      Bonjour

      pour préciser ma demande j’ai en fait un double date picker , un généré par inc-dateur.html et un autre qui semble généré par le navigateur

      Merci de votre aide

    • UOL-WM

      Bon et bien je me réponds à moi même, des fois que cela puisse servir autrui...

      Le problème est réglé dans saisies/date.html en passant
      type=#HTML5| ?text,text

      De fait le jqueryUI reprend le dessus et le champs date de formidable est à nouveau opérationnel

      Michel

    • Ras Rubenxela

      Bonjour Michel
      Je ne trouve pas le fichier saisies/date.html tu es sûr de sa dénomination ?

      Pour ma part j’ai ajouté un champ date + heure et le résultat de la sélection n’est pas envoyé. J’ai systématiquement « sans réponse »

      Merci
      Alex

    Répondre à ce message

  • 2
    alexisz

    Bonjour,

    Dans la configuration « Configurer les traitements », je suggère de modifier le label « Courriel de l’envoyeur » par un message plus précis, genre « Courriel de l’envoyeur pour accusé de réception ». En effet c’est aux adresse de ce champs que sont envoyer les accusés de réception (formidable/notifications/formulaire_accuse.html) et on a du se plonger dans le code pour comprendre que c’était ce champs qui utilisait l’accusé de réception.

    Merci

    • Maïeul

      Heu non, on peut très bien envoyer un mail sans qu’un accusé de réception soit envoyé par ailleurs. Donc courriel de l’envoyeur fonctionne parfaitement.

      Plus loins dans le formulaire de config il est écrit « Envoyer aussi un courriel à l’adresse de l’envoyeur avec un message de confirmation. » ce qui est très clair : le courriel utilisé comme envoyeur pour le contact avec le proprio du site sera aussi utilisé comme destinataire pour l’accusé de réception. Par contre on pourrait changer ce libellé pour dire « Envoyer aussi un accusé de réception au courriel de l’envoyeur » pour utiliser partout le terme « accusé de reception ».

    • RastaPopoulos

      J’allais dit qu’on pourrait cacher les options d’accusé de réception si la config de courriel de l’envoyeur n’est pas remplie, mais en fait non c’est nul car ça ne permet pas de le découvrir du coup et donc de se dire qu’on doit remplir la config de courriel.

      Mais par contre, cette config de courriel c’est pas que pour l’accusé forcément donc non il ne faut pas spécialement changer son nom.

    Répondre à ce message

  • 5
    1138

    Bonjour.

    Est-il possible de supprimer (ou désactiver) des choix dans une liste de boutons radio ou de cases multiples, en fonction de ce qui est déjà rempli ?

    Mon cas : je crée un formulaire où des personnes peuvent choisir deux éléments, par ordre de préférence, dans une liste de 10 items. Solution actuelle : je fais deux listes radio (« Premier choix » et « Second choix »).

    Problème : rien n’empêche une personne de cocher deux fois la même chose. D’où ma recherche pour cacher ou désactiver – dans la 2e liste – le choix déjà coché dans la 1re.

    Illustration. Quand « Noisette » est coché pour un premier choix, il n’est plus disponible dans le second :

    Mentionnez deux choix, par ordre de préférence.
    Premier choix
    ○ Amande
    ◉ Noisette
    ○ Pistache

    Second choix
    ○ Amande
    ○ Noisette
    ○ Pistache

    Y a-t-il moyen de faire ça ? Ou voyez-vous une autre manière de présenter ce genre de formulaire ? (Oui, j’ai pensé à faire dix 2es listes radio, avec affichage conditionnel. Mais ça augmente d’autant la base de données et, surtout, ça rend peu lisible le tableau exporté.)

    Merci d’avance pour vos suggestions et bonne année !

    1138.

    • RastaPopoulos

      Ça reste en JS et donc si les gens veulent vraiment, avec l’outil de dev du navigateur, ils peuvent hacker le truc, mais le plus simple que je vois moi, c’est de faire plutôt une liste de cases à cocher, et de rajouter un peu de JS dans votre page pour mettre en « disabled » les cases non cochées dès lors qu’il y en a 2 cochées (et inversement). Et donc obliger à décocher une des 2 déjà cochées pour choisir autre chose. Ça me parait le plus ergonomique.

      Après la même chose peut être fait avec tes deux listes de radios, mais là aussi en ajoutant un JS dans la page. Détecter que la value « noisette » est déjà cochée dans la première liste et donc mettre en « disabled » le radio de même value dans la seconde liste.

      Bon dans les deux cas faut développer quelques lignes de JS dans la page en plus.

    • 1138

      Ça reste en JS et donc si les gens veulent vraiment, avec l’outil de dev du navigateur, ils peuvent hacker le truc. Bien entendu mais, quand bien même une personne le ferait, ce ne serait pas dramatique pour nous.

      Pour la solution de cases, ça ne permet hélas pas de choisir un ordre de préférence.

      Je pense donc tester avec les deux listes radio + JS (ça me fera une application pratique pour toucher un peu à du javascript). Je rêvais simplement qu’il y ait une fonctionnalité non documentée dans Formidable pour l’affichage conditionnel des items de listes 😉.

      Merci pour le retour !

    • 1138

      Si jamais d’autres personnes cherchent à faire la même chose, voici ce que j’ai fait.

      Mes deux listes de radios sont identiques (En pratique, les items doivent avoir la même clé.) Seule différence : ajouter la classe ordre_pref1 pour la 1re et ordre_pref2 pour la 2de.

      J’ajoute de code JQuery suivant dans mes scripts :

      $(document).ready(function(){
	// Quand, dans un formulaire avec deux listes radio identiques,
	// on coche un item dans la première, ça désactive le même dans la seconde.
	$('.ordre_pref1 input').change(function() {
		var ordre_pref = $(this).val() ;
		var ordre_pref_desac = $('.ordre_pref2 input[value='+ordre_pref+']') ;
		$('.ordre_pref2 input').attr('disabled',false);
		$('.ordre_pref2 label').css({"color": "inherit"});
		ordre_pref_desac.attr('disabled',true);
		ordre_pref_desac.prop('checked', false);
		ordre_pref_desac.next('label').css({"color": "#999"});
	});
});

      … et ça roule :-)

      OK, c’est peut-être un peu n’importe quoi, ça peut faire de trucs étrange si on l’applique à des cases à cocher, etc. Mais c’est mon premier JavaScript, même que j’ai mis un après-midi pour le faire :-D

    • beno

      Bonjour 1138,

      A tout hasard, une autre piste : Formidable gère les « affichage si certaines conditions »...
      As-tu essayé ?

    • 1138

      Bonjour, beno.

      Oui, je connais l‘affichage conditionnel de Formidable. Mais, sauf erreur de ma part, il ne porte que sur un champ entier (bloc de texte, ligne de texte, boutons radio, cases à cocher, etc.) et non sur un élément de ces champs (dans mon cas, un bouton radio parmi ses pairs).

      J’aurais bien aimé qu’il y ait une telle fonction cachée dans Formidable mais, bon, ça m’a fait une initiation au JavaScript. ;-)

    Répondre à ce message

  • Thomas EGLI

    Champ s’affiche dans formulaire, mais pas dans mail récapitulatif des résultats

    Bonjour,

    j’utilise fortement Formidable et il nous est fort utile.

    Cependant maintenant que nous avons avancé un peu dans l’utilisation de tout son potentiel, nous rencontrons un soucis que nous n’avions pas rencontré avant.

    Les conditions d’affichages du champ de type @checkbox_4@==« 10 » donnent entière satisfaction sur l’affichage du formulaire, mais dans le mail qui poste les résultats, une partie d’entre eux apparaissent, et une autre partie d’entre eux n’apparaissent pas ! Pourtant le fichier excel exporté montre que les champs ont bien été remplis et conservés au moment de la validation du formulaire et les conditions d’affichages ont été renseignés de la même manière.

    Nous avons remarqué que dans /ecrire l’article qui contient ce formulaire n’a pas de footer de la page /ecrire, alors que les articles qui ont un autre formulaire dedans, ont bien le footer.

    Avez-vous déjà rencontré ce problème ?

    Sans l’avoir déjà rencontré, avez-vous une idée de ce qui pourrait être à l’origine de ça, dans le plugin formidable ou dans autre chose ?

    Nous tournons sur SPIP 3.0.22 avec Formidable 3.5.6

    Merci par avance,

    Répondre à ce message

  • 2
    nuages

    Est-il possible de prévoir l’envoi de document (par exemple PDF) ou image à partir du formulaire. L’idée serait de permettre à l’utilisateur de télécharger un doc envoyé au gestionnaire du site via un formulaire.

    Répondre à ce message

  • 14
    Jaseur Boréal

    Bonjour,

    Comment mettre en forme agréable,
    Les formulaires réalisés avec Formidable ?

    Je galère sans trouver, et firebug ne m’aide pas beaucoup pour trouver les bonnes sources et solutions afin de régler l’apparence des formulaires.
    J’ai besoin de comprendre avec un ou plusieurs exemples ...

    Y a-t-il quelque part un (ou des) exemple(s) concret(s) expliquant :
    Comment saisir les CSS dans la case « Classes CSS supplémentaires » et ainsi gérer les réglages d’affichage d’un champ de formulaire ?

    Par exemple :

    1. Comment aligner la case choix avec la ligne de texte ?
      Dans la copie-écran de la prévisualisation publique ci-dessous, les « cases choix » d’une liste s’affichent au dessus de chaque item, plutôt que de se mettre sur la gauche du texte des items. Coté privé, en configuration du formulaire, les cases « choix » s’affichent pourtant alignées sur la gauche du texte.
    1. Comment régler la dimension des caractères des textes du formulaire ?
      Ils s’affichent minuscules par rapport au reste des textes.

    Merci pour toutes vos suggestions et solutions.

    @+

    • RastaPopoulos

      Salut
      il n’y a strictement aucune classe particulière de prévu, le champ permet juste de remplir des classes à ajouter, pour que ça se retrouver dans le HTML à la fin. Mais il n’a pas de classe pré-définie, ce n’est absolument pas l’objet du plugin.

      Le plugin ne fait que générer du bon HTML, exactement suivant la norme des formulaires de SPIP, qui est décrit dans la documentation : https://www.spip.net/fr_article3791.html

      Après, pour styler comme tu veux, ça n’a rien de spécifique aux formulaires, ça vaut pour absolument n’importe quel élément HTML : c’est au thème graphique de prévoir des formulaires stylés de tel ou tel manière. Et si c’est toi qui fait ton thème graphique, bah c’est à toi de le prévoir. Donc en connaissant CSS, mais ce n’est pas l’objet du plugin ni de sa documentation d’apprendre CSS aux gens. :)

      Déjà pour tous les radios et cases à cocher, c’est censé être dans des « .choix », donc bah il faut dire que les « label » qui sont dans les « .choix », donc « .choix label » sont affichés en ligne et pas en bloc, donc « display:inline ; ». Mais ce n’est qu’un exemple…

      Si c’est toi qui fait ton thème graphique, c’est que tu sais faire du CSS, donc pas de problème. Si tu utilises un thème déjà existants et que tes formulaires sont tous pétés, c’est que ce thème n’est pas complet, et les gens qui ont fait ce thème ont oublié de styler les formulaires de SPIP. Car Formidable ne génère rien de spécifique à Formidable, ça ne fait que générer suivant la norme officiel par défaut des formulaires SPIP.

    • Jaseur Boréal

      Bonsoir,
      Merci cette rapide réponse.

      J’ai bien tenté de surcharger /perso.css avec :

      /* améliorations formulaires de Formidable */
.choix {font-size: 1.6rem }
.choix label { display:inline; }
.choix { display:inline; }

      et j’obtiens dans l’espace public prévisualisé tous les items à la suite les uns des autres (copie écran ci-dessous) le bouton à cocher est bien à coté du texte, mais tout est à la suite. Alors que dans l’espace privé , case-à-cocher + item sont sur la même ligne, avec un retour à la ligne en fin de texte.

      Je tourne en rond ... sans résultats .
      Une suggestion ?

    • RastaPopoulos

      Bah oui, pourquoi tu mets les « .choix » en inline ? Eux ils doivent rester en bloc l’un en dessous de l’autre. Enfin par défaut en tout cas, pour le cas de base.

    • Jaseur Boréal

      Bonjour,
      merci pour les pistes de compréhension.

      En fait, je galère entre les cascades de tous ces « .mots » de réglages des formulaires
      (.choix , .choix label, .label, .input, .textarea, .button, .... , )

      J’ai bien testé des réglages pour certaine pages de formulaires, sans effets, car ils s’annulent sur d’autres pages

      Où trouver la liste de ces termes qui règlent dans spip l’apparence des formulaires ?

      Pour les formulaires de spip & ceux de « Formidable », je tourne en rond.
      Dans quelle feuille.css globale faire les réglages des formulaires ?

      Dans mes bousculades en cascade avec les bribes d’infos cueillies par-ci, par-là ... Je n’ai pas encore trouvé où sont les informations, ni trouvé d’exemples qui eux seraient bien agréables, afin d’apprendre
      ..... - Comment aligner une case choix avec la ligne de texte ?
      ..... - Comment régler la dimension des caractères des textes d’un formulaire ?
      ..... - Comment agrandir et centrer les bouton de tous les formulaires ?

      Le débutant que je suis découvre seulement que CSS voulait dire « Cascading Style Sheet, » = Feuilles de style en cascade. Et comprendre comment cette cascade intervient n’est pas intuitif.
      Je me doute que certains réglages viennent annuler d’autres réglages.

      Merci de vos informations, suggestions et explications
      @+

    • JLuc

      Un exemple de stylage ici t’aidera peut être à y voir plus clair.

    • Jaseur Boréal

      Merci JLuc

    • RastaPopoulos

      Où trouver la liste de ces termes qui règlent dans spip l’apparence des formulaires ?

      Je t’ai déjà donné le lien de la documentation officielle de la structure des formulaires SPIP dans ma toute première réponse.

    • Le Jaseur Boréal

      Bonne année, que 2018 vous apporte la joie & à ceux qui vous entourent , vous permette de faire la paix avec le passé, vous offre de savourer chaque moment présent avec bienveillance & vous enthousiasme chaque jour vers des réussites multipliées ...

      Merci pour le lien transmis dans la première réponse, mais je ne dois pas être très futé, car je n’y ai pas encore trouvé comment solutionner mon besoin d’aligner & centrer correctement les boutons par exemple ( copie image jointe ).

      Mon exemple direct et concret à visualiser en adaptant le navigateur sur ce lien entre deux formulaires, l’un contact, l’autre formidable : https://www.lettonie-francija.fr/spip.php?page=contact&lang=fr

      En CSS, j’ai pourtant dans la feuille perso.css

      /* styler les boutons de type submit ("envoyer" ou "valider" */
input[type="submit"]{
        .../...
	border-radius:5px;
	display:inline-block;
	width: 60%;
        margin : auto;
	vertical-align:left; 
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:1.8rem;
	font-weight:bold;
	padding: 5px 0;
	text-decoration:none;
	text-shadow:0px 0px 0px #810e05;
}

      Quand un bouton s’aligne à droite, l’autre s’aligne à gauche, mais au milieu entre les deux j’ai essayé des tas de combinaisons, sans parvenir à ce que ces boutons soient centrés, adaptables en largeur selon l’affichage, et de dimension similaire ...

      Il y a comme une escalade de cascades qui me perturbent ;-))

      merci pour toutes solutions concrètes suggérées.

    • RastaPopoulos

      Il n’y a aucun rapport entre le lien donné et l’alignement, et il n’y a pas de raison qu’il y en ait puisque j’ai cité explicitement la phrase :

      Où trouver la liste de ces termes qui règlent dans spip l’apparence des formulaires ?

      Et ce lien en question donne parfaitement la réponse à CETTE question. Dans cette documentation il y a la liste de la structuration HTML et classes CSS des formulaires SPIP.

      Pour ce qui est de l’alignement, ce n’est pas vraiment l’objet de cette documentation d’apprendre les placements CSS (car ça vaut pour tout, ça n’a rien de spécifique aux balises de formulaire). Après il n ’y a pas une solution unique et surtout ce n’est pas une réponse théorique, c’est forcément en rapport avec le thème CSS *déjà* en place sur le site, et qui a donc peut-être déjà des styles appliqués, donc forcément c’est du cas par cas précis.

      Déjà si tu mets des largeurs en pourcentage, forcément ça n’a pas la même taille partout, suivant la colonne dans laquelle c’est placé. Faut mettre width auto, et que ça prenne la taille du texte qui est à l’intérieur. Et si parfois c’est trop petit il faut mettre un plancher avec min-width par exemple. Enfin il y a plein de choses possibles.

    • Jaseur Boréal

      Merci pour le « min-width » que je ne connaissais pas.
      Je ne suis pas plus avancé, quand au positionnement des boutons, qui se mettent à droite ou à gauche selon l’air du temps ... et quand on modifie la largeur de l’affichage du navigateur, ils sortent du cadre dans lequel ils devraient etre ...
      C’est bien là où je suis bloqué sans comprendre ni trouver de solution .

      Que faut-il faire pour que les boutons s’affichent au milieu et ne sortent pas du cadre selon les écrans utilisés ?

    • JLuc

      Si tu ne trouves pas réponse ici, c’est probablement que ça sort du cadre du support SPIP. Il faut te former à l’emploi des css.

    • Le Jaseur Boréal

      Merci de vos très agréables & formatrices suggestions ...

      Peut-être suis-je seul à me préoccuper d’améliorer l’affichage « adaptatif » selon les écrans des formidables questionnaires sous spip ?

      Si mes questions gênent ou dérangent, ce n’est pas ma volonté, qui est d’apprendre à utiliser spip et ses questionnaires pour un affichage optimisé sur tous les écrans, mais surtout partager ces questionnements en forum, car les réponses faites aux uns, servent toujours aux autres.

      Dois-je traduire : « Si tu ne sais pas bien régler l’affichage des formidables questionnaires SPIP et tout le tralala ... va donc voir ailleurs pour t’informer et te former, ... , car ici on n’est pas capable de t’expliquer comment faire, ni t’informer » .... ?

      Si je trouve ailleurs réponse à mes questions techniques, quelle sera l’utilité d’apporter les solutions dans ce forum ?

      Cordialement

    • Maïeul

      Le problème est essentiellement que ton problème ne concerne pas directement formidable, mais le questionnement sur l’affichage des formulaires en responsive. Ce qui relève du CSS et non de l’action de formidable.

      Les personnes qui maintiennent formidable n’ont pas un temps illimité, et préfèrent, ce qui est parfaitement légitime, se concentrer sur l’aspect fonctionel de Formidable.

      C’est pour cela qu’ils te suggèrent d’aller demander de l’aide sur des forums / des sites spécialisés en CSS. Ce n’est pas pour dire que ta question n’est pas pertinente (on a toujours des questions et des problèmes pertinents) mais que le lieu n’est pas forcément le plus adaptés pour répondre à ta question.

      Je te suggère par exemple les forums d’Alsacréations qui seront mieux t’aider car il y a des gens spécialistes de CSS là.

      Et une fois que tu auras trouvés une solution (qui correspondra à ton besoin) tu pourra écrire, si tu veux, un article sous forme de tutoriel sur contrib.

    • RastaPopoulos

      Encore une fois, il n’y a aucune spécificité des « formidables questionnaires ». Ça suit à 100% la structuration officielle de TOUS les formulaires de SPIP. Absolument rien de propre à ce plugin précis.

      Donc si ça merdouille, c’est que le thème graphique gère mal tous les formulaires, pas juste les formulaires de Formidable spécialement. Et bien gérer l’affichage des formulaires, bah c’est le boulot du thème (et donc de celui ou celle qui maintient ce thème), que ce soit un thème générique partagé ou le thème privé propre à un site unique.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom