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
198 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
    gillesq

    Bonjour,

    Je n’ai pas trouvé le moyen d’afficher autre chose que « obligatoire » (en fait un *) lorsqu’un champ est obligatoire.

    En cvt il est possible d’ajouter l’option « info_obligatoire=* », j’ai essayé naïvement d’exporter le formulaire en yaml puis de le réimporter après y avoir ajouté « info_obligatoire=* » mais cela n’a rien donné.

    Une idée ?

    • RastaPopoulos

      Ben si, il y a un champ de configuration pour ça pour chaque saisie. Dans l’onglet « Affichage » je crois.

      Cela dit, c’est très mauvais pas accessible de mettre juste « * » dans les champs obligatoires.

      Pour que cela soit accessible il faudrait au minimum :

      • Une phrase d’explication en début de formulaire
      • Une balise et un attribut title (par ex abbr) autour de l’étoile, pour indiquer un autre texte plus humain à chaque fois que l’étoile apparaît

      Mais la configuration actuelle permet juste de changer le texte, pas d’ajouter des balises et attributs.

    • gillesq

      Merci,
      J’avais cherché obstinément dans l’onglet « validation ».
      Je suis bien d’accord avec toi en ce qui concerne l’accessibilité mais on m’objecte la psychologie, alors ...

    Répondre à ce message

  • 1
    Pedro

    Bonjour,

    je souhaite pouvoir faire apparaître de manière conditionnelle certain champs...

    Lisez-vous le Monde : choix 1 = oui choix 2 = non

    si non, pourquoi ? choix 1 = pas le temps choix 2 = trop cher...

    la deuxième partie de ma question ne devant s’afficher que si l’on a répondus non à la question précédente...

    Je ne trouve aucune ionfo en ligne et les explication du plugin sont très légères sur le sujet

    Indiquez les conditions pour afficher le champ en fonction de la valeur des autres champs. L’identifiant des autres champs doit être mis entre @.
    Exemple @selection_1@==« Toto » conditionne l’affichage du champ à ce que le champ selection_1 ait pour valeur Toto.

    Par avance merci pour votre aide,

    Cordialement,

    Pedro

    • Johan

      Bonjour,

      Cette condition doit être mise dans l’onglet affichage de la configuration de la deuxième partie de votre question.

      Un aide mémoire pour les codes @champ@ apparaît quand vous cliquez sur « configurer les champs » .

      Cherchez dans cette liste le code pour le bouton radio de la première partie

      pour un champ de type oui/non --- @oui_non_1@==’on’
      pour un champ boutons radios — @radio_1@==’on’

      Le 1 est un chiffre incrémenté à la création et peut donc être différent pour vous

    Répondre à ce message

  • 11
    Pierre

    Je me posais une question sur Formidable à propos des boutons radio et/ou des listes déroulantes.

    Plutôt que de taper à la main une liste de choix « cle|valeur », est-il possible de fournir par ex un modele genre <listechoix> qui génèrerai cette liste à partir d’autres données (en l’occurence dans notre cas, on souhaite afficher des boutons radios pour choisir entre 2-3 dates qui sont saisies par l’utilisateur dans le back-office sur des brèves).
    Ou si quelqu’un a une autre idée géniale ? (après je sais que je pourrai faire un formulaire à la mano, mais étant donné qu’on a déjà tout fait avec Formidable …)

    • Maïeul

      c’est une idée intéressante, mais qui nécessiterait de modifier pas mal de chose au niveau du plugins saisis.

    • Pierre

      Donc j’en déduis que c’est pas possible ... snif.
      Vais devoir me repalucher un CVT ...

    • Maïeul

      si c’est possible. Mais pas en l’état actuel du code.

      Mais puisque tu sais faire un cvt, tu sais coder. Et comme le code du plugin saisie est libre, tu peux le modifier et apporter cela à la communauté...

    • Pierre

      Je ne surestime pas mes capacités ... j’ai déjà fait des CVT compliqués (qui créaient ce genre de chose pour des réservations à des ateliers dans un salon, avec inscription, nombre max d’inscrits par atelier et contrôle sur le fait qu’une personne ne s’inscrivait pas à 2 ateliers au même horaire), mais pour agir sur un plugin existant et déjà complexe, il faut comprendre, à mon humble avis, la séquence exact du traitement de Spip, les interactions entre plugins, les pipelines sans parler avant de la marche à franchir pour les aspects pratiques de ce type de dév, le système utilisé (SVN ?), les commits, les forks, .. bref pour l’instant, en l’état actuel de mon planning, ça me parait très chaud.
      Faudrait que j’ai une bonne 15aine devant moi pour apprendre à nager dans cet environnement :-(

    • RastaPopoulos

      Plus simplement, vu que tout est basé sur Saisies, et que c’est un cas assez particulier (aller chercher des dates stockées dans des brèves, ça ne doit pas être très courant), tu peux facilement te créer TA saisie à toi pour ton besoin.

      Il suffit d’un fichier saisies/masupersaisiequivachercherdanslesbreves.html avec le HTML du champ de formulaire et quelques variables #ENV. Et d’un autre fichier saisies/masupersaisiequivachercherdanslesbreves.yaml qui contient la description de la saisie : son nom, son icône éventuelle, et parfois une liste d’options décrites elles-mêmes en utilisant des saisies (prendre modèle sur les autres existantes).

      En deux fichiers avec très peu de lignes dedans, tu devrais pouvoir avoir un champ comme tu veux pour ton besoin.

    • Pierre

      Bonjour,
      Effectivement cela semble une possibilité.
      L’idée générale est de faire un select qui affiche les dates de publications de brèves (ce sont des réunions d’informations ou les gens doivent s’inscrire, on ne garde pas d’historique, l’utilisateur du site a juste à changer la date de pub de la brève pour annoncer la nouvelle réunion, il y a en a 2-3 d’avance, l’internaute lui doit choisir dans un menu déroulant type « select » la date qu’il souhaite choisir. J’ai déjà résolu le pbm une première fois avec un système en jquery, mais bcp d’utilisateurs oublient de cliquer sur la date qu’ils souhaitent. On a fait un 2e système avec un systeme complexe de champs checkbox, de hidden et de text disabled pour assurer la sélection et l’envoi des données par email ... bref c’est ça que j’essaye de simplifier ).
      J’ai parcouru les différents fichiers dans saisies, je pense qu’un bon candidat me semble être « secteur.html/yaml » pour faire un menu déroulant qui irait chercher ces dates de brèves ... cela te semble-t-il un bon pojnt de départ ? si oui je me lance :-)

    • RastaPopoulos

      Ben tu fais une saisie où tu boucles sur ce que tu veux pour produire des <option>, et dans « value » tu mets ce qui t’intéresses toi à garder.

      Par exemple :

      <option value="[(#DATE|affdate{Y-m-d})]">#TITRE</option>
    • Pierre

      Bonjour,
      Finalement grand merci pour m’avoir mis le pied à l’étrier !

      J’y suis arrivé sans trop de mal si ce n’est un truc vraiment pas documenté que j’ai eu du mal à disons ... débugger.

      Par le plus pur des hasards, étant donné que je voulais faire un select, j’ai donné à mon fichier le nom selecteur_date_breve.html/yaml ... grave erreur, car donner ce nom qui commence par « selecteur » enclenche un mécanisme qui ajoute une classe « selecteur_item » au li de la saisie, classe qui décale complètement le fenêtre d’édition de la saisie à gauche rendant par ex impossible d’éditer le label du champ.J’ai vraiment eu du mal à comprendre que c’était le nom du fichier même qui déclenchait ça ... Dès que je l’ai eu remplacé par « selection_ ... », tout est rentré dans l’ordre. M’a juste fallu 3 heures pour piger ça .

      Mais bon, la victoire fait oublier que le chemin était semé d’embûches :-) Encore merci.
      Pierre.

    • Maïeul

      salut,

      super que tu y sois arrivé ;-).

      Tu pourrais écrire un petit tutoriel sur le sujet, et le proposer sur contrib ?

    • Pierre

      Bonjour,

      Oui je peux faire ça ... la méthode c’est quoi ? Tu peux peut-être me passer ça en privé, évitons de trop encombrer ce forum fort utile :-)

    • Maïeul

      la méthode c’est :
      -  créer un compte sur contrib, si ce n’est deja fait (l’inscription est gratuite, en haut à droite)
      -  y écrire un article comme dans n’importe quel site spip
      -  le proposer à publication. On relit, on corrige au besoin, et zou !

      Ps : on peut mettre cela en public, ca peut servir à d’autres.

    Répondre à ce message

  • 6
    Jaseurv Boreal

    Bonjour,

    Un formulaire c’est bien , mais deux ou + en différentes langues c’est mieux !

    Dans un site avec secteurs en langues, et donc des lecteurs d’origines linguistiques diverses et variées, comment procéder pour que le formulaire proposé au lecteur s’affiche dans sa langue ?
    Comment faire ?

    Comment automatiser l’affichage d’un formulaire selon la langue du lecteur ?

    Merci de votre aide.

    • RastaPopoulos

      Ben si c’est pour le même formulaire (les mêmes champs), tu peux normalement utiliser <multi> dans tous les champs. Si ce n’est pas le même formulaire, ben là tu fais ce que tu veux dans tes squelettes ou tes articles, tu appelles un formulaire différent.

    • Jaseurv Boreal

      Merci
      j’oubliais que spip, c’est trés simple ! :-)
      Je n’y avais pas pensé pour les formulaires
      je vais tester avec 

      <multi>
    champ 1 [fr] 
    field 1 [en] 
     jomā 1 [lv] 
el campo 1 [es] 
...
</multi>
    • Jaseurv Boreal

      Avec une modification de mon formulaire contact pour séparer les langues, j’obtiens des différences a l’affichage. (voir image jointe)

      L’exemple ci-dessous est accessible en direct ici affiche tous les textes de langues dans la ligne explicative.
      mais par contre les libellés de champs sont bien différenciés par langue.

      <multi> [fr] Vous souhaitez transmettre une information, annoncer un évènement, devenir rédacteur sur le site, contacter un rédacteur, parler d'une correction ou un problème, merci d'avance.  [en] You want transmit information, announce an event, becoming writer on the site, contact an editor, talk of a correction or a problem, thank you in advance.     [lv] Jūs vēlaties nodot informāciju, paziņot notikumu, kļūstot rakstnieks uz vietas, sazinieties ar redaktoru, par korekcijas runāt vai problēma, paldies jau iepriekš. </multi>

      et autres champs supplémantaires :

      <multi> [fr] Ville : [en] City : [lv] Pilsēta :</multi>

<multi> [fr]  Pays  : [en]Country : [lv] Valsti :</multi>

<multi>[fr] Merci de votre message, vous avez connu le site par  [en] Thank you for your message, you know this website with [lv] Paldies par jūsu ziņu, jūs zināt, ar šo tīmekļa vietni </multi>

      Y aurait-il un truc a modifier ?

    • RastaPopoulos

      Euh ta capture d’écran ne correspond absolument pas au plugin Formidable. Donc je ne peux pas trop aider.

    • Jaseur Boreal

      Exact,

      C’est une adaptation utilisée dans le squelette ESCAL pour le formulaire contact.
      J’ai donc posé la question à Jean Christophe pour Escal.

      Je vais tester sur un Formidable formulaire, vu que maintenant il y a même la chanson , et j’dirais quoi ensuite.

    • RastaPopoulos

      Non mais c’est même pas une adaptation du plugin Formidable, c’est carrément pas le plugin Formidable du tout. Ça ressemble plutôt à Forms & Tables.

    Répondre à ce message

  • 2
    paolo

    Bonjour !

    Ayant construit un formulaire pour accueillir les inscriptions à une rencontre
    (http://www.taize.fr/en_article16037.html) je rencontre une difficulté à laquelle je n’avais pas pensé avant. Pour pouvoir bien utiliser les données, envoyer des réponses, etc., j’ai besoin d’accéder au réponses dans un format de tableur (trier, filtrer, etc.), un peu comme offre les formulaires Google.

    Est-ce que quelqu’un a déjà fait cela avec des données récoltés par un formulaire Formidable ? Comment est-ce qu’on s’y prend ?

    merci, Paolo

    • RastaPopoulos

      C’est déjà le cas. :)
      Tu vas dans les réponses, et normalement tu as un lien « exporter en CSV ».

    • paolo

      C’est magique. Merci ! (La première fois que j’ai regardé, j’ai atterri chez « Exporter l’analyse » - ce qui ne m’a pas satisfait.)

    Répondre à ce message

  • JPEG

    Ok ok, j’insère« formulaire|formidable|id=quelquechose » dans l’article. Je réfléchirais plus la prochaine fois...
    A+sans doute.
    JPaul

    Répondre à ce message

  • JPEG

    Bonjour,

    Sarka-SPIP 3.2.34 [76004]
    SPIP 3.0.11 [20757]
    PHP 5.4.11
    Formidable 1.8.4
    Site : http://amrtest.ouvaton.org/

    J’essaie d’insérer, ou de lier un formulaire de participation à une activité, (fait avec Formidable, que j’ai paramétré) dans un article. Je ne sais pas dans la conf, comment simplement le faire. (Sarka-SPIP ?, Formidable ?) (Je ne suis pas capable de tripoter les lignes de code évidemment... :).
    Merci de votre aide.

    Jean-Paul

    Répondre à ce message

  • 2
    rzawutang44

    Bonjour,

    Hebergé chez free, j’ai ce message d’erreur lors de l’étape finale d’enregistrement d’un formulaire (formidable v1.8.4 et spip v3.0.11) :
    Fatal error : Unsupported operand types in /mnt/130/sdb/1/5/(xxxxxx)/spip/plugins/formidable_1_0/formulaires/formidable.php on line 54

    Si vous souhaitez des informations complémentaires, je vous donnerais d’autres détails

    Cdt

    Répondre à ce message

  • Jean

    Bonjour,

    J’ai du enlever le type=« date » qui empêche le datepicker de fonctionner sous chrome (Modifié plugins/saisies/saisies/date.html l.54)

    Répondre à ce message

  • troon

    un chti bug en passant dans la page « configurer les traitements » le label « Enregistre les résultats du formulaire dans la base de données » a le même for que le label précédent, par conséquent quand on clique sur le label ça ouvre le bloc « envoyer par courriel »

    en espérant avoir été clair :)

    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