Formidable, le générateur de formulaires

Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs.

Introduction

L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins avaient déjà été développés précédemment pour remplir cette fonction :

  • Forms &Tables, qui n’a pas été complètement porté pour SPIP 2.
  • et spip-formulaire créé par artego mais qui n’est 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éveloppeurs.

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éveloppeurs.
    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.

Installation

Le plugin nécessite les plugins suivants :

Il faut installer le plugin jQuery UI pour pouvoir déplacer les champs à la souris pendant la création d’un formulaire.

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>

À noter que dans un squelette, 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.

Le tableau en deuxième paramètre :

  1. #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 :

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

Pré remplir les champs depuis une ancienne réponse

Si les réponses sont enregistrées, on peut passer en troisième argument un identifiant de réponse.

  1. #FORMULAIRE_FORMIDABLE{contact,'',23}

pour modifier la réponse 23.

Champs oui-non et case unique

Pour rendre obligatoire la réponse « oui » à un champ de type oui-non ou 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 :

  1. 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.

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)

Dernière modification de cette page le 2 octobre 2018

Discussion

636 discussions

  • 10

    Bug avec l’affichage conditionnel d’un champ obligatoire.

    Bonjour.

    J’ignore si c’est lié à Formidable ou à Saisies mais la validation d’un formulaire ne fonctionne plus quand on a un champ obligatoire non affiché (donc non rempli) à cause d’un affichage conditionnel.

    Ça semble se faire sur tout type de champ (je l’ai vu sur des lignes de texte, radios, dates…). Mais, sur les checkbox, obligation + affichage conditionnel demandent carrément de cocher chaque case.

    Voir démo, avec ce YAML :

    id_formulaire: '106'
    identifiant: test_aff_si
    titre: 'Démo bug affichage conditionnel + champ obligatoire'
    descriptif: ''
    css: ''
    message_retour: ''
    saisies:
      - { options: { label: Choisis, explication: 'Fait apparaitre un champ obligatoire différent selon le choix', datas: "choix1|Noix\r\nchoix2|Fruit", obligatoire: on, nom: radio_1 }, identifiant: '@5c6293109cd5f', verifier: {  }, saisie: radio }
      - { options: { label: 'Choix de la noix', datas: "noix1|Noisette\r\nnoix2|Amande", choix_alternatif_label: 'Autre choix', afficher_si: '@radio_1@=="choix1"', obligatoire: on, nom: checkbox_1 }, identifiant: '@5c629355bf095', verifier: {  }, saisie: checkbox }
      - { options: { label: 'Choix du fruit', datas: "choix1|Myrtille\r\nchoix2|Framboise", choix_alternatif_label: 'Autre choix', afficher_si: '@radio_1@=="choix2"', obligatoire: on, nom: checkbox_2 }, identifiant: '@5c6293ee9757f', verifier: {  }, saisie: checkbox }
      - { options: { label: 'Affichage non conditionné', datas: "choix1|Polatouche\r\nchoix2|Tamia", choix_alternatif_label: 'Autre choix', obligatoire: on, nom: checkbox_3 }, identifiant: '@5c629530c97d0', verifier: {  }, saisie: checkbox }
    traitements: false
    public: non
    statut: publie
    date_creation: '2019-02-12 10:38:40'
    maj: '2019-02-12 10:44:49'
    apres: valeurs
    url_redirect: ''

    Arrivez-vous à reproduire ça ? Ou est-ce lié à ma config ?

    Merci d’avance et bonne journée.

    (SPIP 3.1.9, Formidable 3.34.9, Saisies pour formulaires 3.13.0)

    • c’est lié à HTML5. Je regarde ce qu’il en est.

    • Saisies 3.13.1 corrige cela. Il sera disponible en zip/par svp peu après midi.

    • Merci beaucoup ! Ça a déjà débloqué une bonne part de nos formulaires.

      Hélas, il reste un problème. Exemple :

      id_formulaire: '113'
      identifiant: complexe_ter
      titre: 'Démo complexe'
      descriptif: ''
      css: ''
      message_retour: ''
      saisies:
        - { options: { label: 'Je choisis', datas: "foo|Foo (bloquant)\r\nbar|Bar", obligatoire: on, nom: radio_12 }, identifiant: '@5b8fcae653a26', verifier: {  }, saisie: radio }
        - { options: { label: Foo, datas: "choix1|Choix 1\r\nchoix2|Choix 2", choix_alternatif_label: 'Autre choix', afficher_si: '@radio_12@=="foo"', obligatoire: on, nom: checkbox_1 }, identifiant: '@5b8fce27509ba', verifier: {  }, saisie: checkbox }
        - { options: { label: Identité, nom: fieldset_1 }, identifiant: '@575572e65e956', saisie: fieldset, saisies: [{ options: { label: Nom, type: text, size: '40', autocomplete: defaut, obligatoire: on, nom: input_2 }, identifiant: '@5755744a4049b', saisie: input }, { options: { label: 'Bar texte', type: text, afficher_si: '@radio_12@=="bar"', size: '40', autocomplete: defaut, obligatoire: on, nom: input_13 }, identifiant: '@5b8fd50fb6d07', verifier: {  }, saisie: input }, { options: { label: 'Foo date', heure_pas: '30', afficher_si: '@radio_12@=="foo"', obligatoire: on, nom: date_2 }, verifier: { type: date, options: { normaliser: datetime } }, identifiant: '@57557733db046', saisie: date }] }
        - { options: { label: 'Foo fieldset', afficher_si: '@radio_12@=="foo"', nom: fieldset_5 }, identifiant: '@575583dd03390', verifier: {  }, saisie: fieldset, saisies: [{ options: { label: Lapin ?, datas: "oui|Oui\r\nrepd|Réponse D", obligatoire: on, nom: radio_9 }, identifiant: '@5755862aa9f3a', verifier: {  }, saisie: radio }] }
      traitements: {  }
      public: non
      statut: publie
      date_creation: '2017-10-31 09:36:49'
      maj: '2019-02-12 14:38:18'
      apres: valeurs
      url_redirect: ''

      Le choix Foo fait apparaitre :
      -  un checkbox obligatoire
      -  un date obligatoire (dans un fieldset toujours affiché)
      -  un fieldset contenant un radio obligatoire.

      Si on choisit Bar, les champs date et radio liés à Foo bloquent la validation, mais pas le champ checkbox. Le problème disparait si on retire le champ radio du fieldset « Foo » (ou si on le remplace par un autre type de champ).

      Ça semble donc être lié à la présence d’un radio dans un fieldset à affichage conditionnel.

      Remarques complémentaires :
      -  Certains types de champs sont indiqués comme bloquants mais pas d’autres (voir pièce jointe).
      -  Un type de champ mis comme bloquant l’est aussi hors d’un fieldset (voir « Foo date » dans le haut de l’image jointe).

    • Oops… on ne voit pas bien l’image. La voici en lien.

      Merci d’avance. Je suis bien entendu à disposition s’il y a des questions.

    • Heu... avec l’exemple envoyé, je n’ai pas de problème. Mes radios ne bloquent rien... j’arrive à poster du moment que je remplis les champs affichés et marqués comme obligatoire...

    • Étrange.

      J’ai vidé les caches navigateur et Spip (y compris ./tmp/cache) et j’ai réimporté mon exemple ci-dessus.

      Si je coche Bar et remplis les champs nécessaires, le formulaire ne se valide pas. (Sous Firefox, si je coche ensuite Foo, je vois que ce sont les champs date et radio qui bloquent : ils sont encadrés de rouge.)

      J’ai essayé avec un Spip 3.2.3, pareil. Avec Chromium, pareil. :-/

    • ok, je sais. Il y a un problème au niveau du compresseur js interne. Comme pour les debug je le désactive, je voyais pas le problème. Je tente de corriger.

    • Bon,

      ce n’était pas lié à la compression js, mais j’ignore pourquoi je ne reproduisait pas chez moi.
      Enfin, j’ai fini par reproduire. La version 3.13.3 résoud normalement ce problème.

    • Merci beaucoup, ça semble fonctionner au poil. Mes collègues vont être contentes. :-)

      Belle journée. 🌞

    • tant mieux. N’hésite pas à signaler si problème similaire.

    Répondre à ce message

  • 11

    Bonjour à tous,

    J’essaie de surcharger formidable.html en y ajoutant un champs particulier à l’emplacement dédié. En testant avec l’exemple simple ci-dessous, le champs s’affiche bien sur la page, mais il n’est pas traité.

    [(#REM) ajouter les saisies supplementaires : extra et autre, a cet endroit ]
    #SAISIEinput, nom, label=Votre nom, obligatoire=oui

    Faut-il déclarer ce nouveau champs quelque part ? Ai-je oublié quelque chose ? Merci en tout cas de m’éclairer à ce sujet.

    • Il vaut mieux que tu expliques ce que tu cherches à faire.

      Le HTML d’un formulaire CVT c’est juste ce qui sera affiché à l’écran, pas du tout ce qui est reconnu par le formulaire. Pour ça il faut que le champ soit pris en compte dans la fonction charger(), dans la fonction verifier() et dans la fonction traiter()…

      De toute façon, le formulaire de Formidable sont gérés entièrement avec les saisies, donc si un champ doit être ajoutés c’est plutôt en s’insérant dans un pipeline et en ajoutant la saisie avec l’API qui permet de manipuler les saisies.

    • Merci pour ta réponse. Je pensais avoir trouvé un moyen simple d’ajouter une étape (le champs en question) à un formulaire formidable en utilisant les onglets bootstrap jQuery (bouton suivant sur le premier onglet, bouton valider sur le deuxième). Ceci après avoir tenter de trouver sans succès, une solution avec formidable et le formulaire CVT en plusieurs pages... Si tu as même une piste, je suis preneur ;)

    • Ajouter la fonctionnalité d’étapes c’est un truc qui est dans la todolist depuis le début, mais il y a pas mal de choses à faire. C’est plutôt dans Saisies que ça doit être intégré, en utilisant la foncitonnalité « cvt par étape » (par exemple en permettant de dire que les groupes à la racine serait des étapes, avec une option).

    • J’ai vu la todolist... Je recherche dans la voie que tu m’indiques et ne manquerait pas d’en faire part ici en cas de succès. Merci en tout cas Rasta, pour ton engagement. A bientôt.

    • Bonjour à tous,
      Finalement, je m’en suis sorti assez facilement en injectant le code HTML à l’aide de champs « explication », soit les balises des onglets bootstrap. J’obtiens ainsi un joli formulaire, coupé en deux onglets à l’endroit que je souhaite (reste à régler le focus sur l’onglet contenant des champs obligatoires et non renseignés).
      Vraiment formidable ;)

    • Hello,

      Ceci après avoir tenter de trouver une solution avec formidable et le formulaire CVT en plusieurs pages

      Il y a t-il eu depuis des évolutions à ce propos ?

      Cheers

    • non pas à ma connaissance

    • Ok. Merci pour ce retour (très) rapide.

      Pour info, je vais faire un formulaire ad-hoc avec ST (Saisies + Traitements) plutôt que CVT. (voir https://contrib.spip.net/Un-formulaire-C-V-T-avec-Saisies-par-l-exemple)

      C’est un peu plus rapide à faire qu’un CVT et surtout beaucoup plus facile à maintenir.

    • Comment ça « plutôt que CVT » ? Ça utilise CVT pareil, c’est juste une surcouche de plus haut niveau.

      Sinon pour le multi étapes, on en a parlé la semaine dernière avec Nico, parce qu’il va en avoir besoin dans deux mois je crois. Et du coup je lui ai dis que c’était dans la todo depuis le tout début et j’ai expliqué comment je voyais la conception depuis le départ (càd une option de saisies pour transformer les groupes de champs racines en étapes).

      Si j’ai le temps j’aimerais bien faire la partie API dans Saisies d’ici la fin de l’année, et comme ça yorait plus qu’à réfléchir à comment y donner accès dans Formidable ensuite.

    • Bonjour à tous et merci pour le travail accompli sur ce plugin.

      J’aimerais savoir où en est le projet d’un formulaire multi-étapes, si il va sortir sous peu, si il est abandonné...

      Merci

    • @Nomades on va y arriver, on va y arriver !

    Répondre à ce message

  • 4

    Bonjour
    J’ai un formulaire avec formidable dans lequel il faut inscrire une note (sur 15). Je souhaite que la moyenne des notes saisies précédemment s’affiche sur le questionnaire ou sur un article. Comment puis-je faire ?
    Merci pour votre aide !

    • Bonjour,

      pour bien répondre à votre question, j’aimerais savoir si vous connaissez ou pas les notions de programmation en SPIP.

    • Bonjour et merci de vous intéresser à mon problème.
      Je dois avouer être un débutant avec SPIP pour ce qui est de la programmation ( et tout le reste aussi d’ailleurs...)
      Mais s’il le faut, je peux tenter de me lancer avec quelques indications à suivre...

    • Je réalise que j’ai répondu sans être identifié. Cela pose peut-être problème.
      Je fais donc un copié-collé du message précédent :
      « Bonjour et merci de vous intéresser à mon problème.
      Je dois avouer être un débutant avec SPIP pour ce qui est de la programmation ( et tout le reste aussi d’ailleurs...)
      Mais s’il le faut, je peux tenter de me lancer avec quelques indications à suivre... »

    • Bonjour,

      désolé du retard, je n’avais pas internet.

      Le mieux serait de créer un modèle « moyenne » qui pourrait être applé dans le corps de l’article via le raccourcie <moyenne|>.

      Ce modèle, c’est un « squelette » SPIP, c’est à dire un simple fichier texte contenant quelques instructions, à créer (via ftp) dans un dossier modeles du dossiers squelettes (à créer le cas échéant).

      Dedans crer un fichier moyenne.html
      contenant les lignes suivantes

      #SET{total,0}
      <BOUCLE_reponses(FORMULAIRES_REPONSES){id_formulaire=30}>
      #SET{total,#GET{total}|plus{#VOIR_REPONSE{input_1,brut}}}
      </BOUCLE_reponses>
      [(#GET{total}|div{#TOTAL_BOUCLE})]
      </B_reponses>

      explication :
      -  l.1 on initialise une variable qui va additionner toutes les valeurs de champs
      -  l.2 on cherche toutes les réponses (publiées) du formulaire 30. Si votre formulaire porte un autre numéro, à modifier.
      -  l. 3 pour chaque réponse, on ajoute la valeur du champ input_1 (à modifier le cas échéant) au total
      -  l. 4 fin du boucle
      -  l. 5 on divise le total par le nombre de réponse, ce qui nous fait la moyenne.

      Si après, l’enjeu est d’avoir un système de note, peut être que le plugin « notation d’element » peu faire l’affaire.

    Répondre à ce message

  • 5

    Signalement de ce qui peut-être est un bogue de l’extension « Formidable » :
    L’activation de l’option de configuration « Autoriser la création de pages publique pour les formulaires » (outre que je ne comprend pas à quoi elle sert) désactive les onglets de paramétrage des champs on ne peut plus essentiels que sont « Description », « Utilisation », « Affichage », « Validation ».

    Et sinon, merci pour cette extension extra !

    • L’option sert à pouvoir accéder côté public aux formulaires « pour eux mêmes », sans les insérer dans le champ texte d’un article ou d’un autre objet SPIP.

      Cela étant
      1. Je ne vois pas pourquoi cela generait les réglages des champs
      2. Après tests, chez moi, cela ne bloque rien.

      Donc le problème doit être ailleurs....

    • Merci bien pour les explications.

      Pour le problème que j’avais remonté, j’ai testé en tant réel l’activation-désactivation de l’option et l’affichage-non affichage des onglets en fonction : il y a bien un lien dans ma configuration (mais de toute façon non bloquant puisqu’il suffit de désactiver, ne serait-ce que temporairement, pour retrouver les onglets).

    • il doit y avoir un truc indirect qui bloque, parce que moi aussi j’ai testé en activant ;-)

      Mais commencons par le commencement
      1. Quelle version de SPIP, de PHP et des plugins ?
      2. On est d’accord qu’on parle bien des onglets lors de la config d’un formulaire
      3. Que donne la console JS ?
      4. Est-ce que cela arrive sur tout les formulaires ?
      5. Est-ce que cela arrive si aucun plugin sauf formidable + ses dépendances sont activés ?

    • Juste une remarque sur l’explication « Autoriser la création de pages publiques pour les formulaires » : je la trouve peu parlante, voir trompeuse également. Cette option ne permet pas de « créer » des pages publiques, ça les active tout simplement.
      « Activer les pages publiques des formulaires » me semblerait plus clair.

    Répondre à ce message

  • 1

    html avant/après
    Pour faciliter la mise en forme des formulaires, est-ce qu’il ne pourrait pas être intéressant d’avoir dans le formulaire de configuration des champs une option supplémentaire permettant d’insérer du « code html avant » et du « code html après » (ou quelque chose d’équivalent).
    Avec la possibilité d’appliquer des classes sur les éléments, cela permettrait de pouvoir très facilement utiliser les éléments de grille des frameworks type foundation...

    • En fait Saisies permet d’ajouter à la fois des classes sur les champs eux-mêmes, et sur le conteneur (le div qui entoure chaque champ). Mais dans le constructeur, actuellement, on ne permet de configurer que les classes des champs, pas ceux des conteneurs. Faudrait sûrement ajouter ça déjà.

    Répondre à ce message

  • 1
    Etienne J

    Bonjour,

    Après recherche, il ne semble pas exister de fonctionnalité pour qu’un administrateur puisse modifier les réponses au formulaire depuis l’interface SPIP. Or, j’ai un formulaire avec près de 300 réponses, pour chacune desquelles je dois faire un suivi d’action. Pour cela, une saisie d’information par l’administrateur, soit dans un champ caché modifiable en administration, soit visible et modifiable depuis la liste des réponses, aurait parfaitement fait l’affaire. Dommage !
    Mais peut-être quelqu’un a-t-il une solution ? (J’ai envisagé l’utilisation de ’Champ extras’, mais les attributs n’apparaissent pas dans les réponses à formulaires et sont encore moins modifiables.

    Merci !

    • Oui je pense que ça devrait être ajouté à la todolist, sur l’objet « réponse », il faudrait à minima un champ « commentaires » pour les admins et modérateurs du formulaire.

    Répondre à ce message

  • 1

    Bonjour
    J’ai un formulaire où je demande l’adresse mail . Est-ce possible de renvoyer après validation du formulaire un récapitulatif des données envoyées à cette adresse ?
    merci

    • oui, il faut activer et configurer l’option d’accusé de réception dans le traitement « envoyer un mail »

    Répondre à ce message

  • 4

    Bonjour à tous et tous mes vœux pour 2019,

    j’ai installé le formulaire « formidable » et je n’arrive pas à trouver comment insérer mon adresse mail afin de recevoir les courriels de mes visiteurs, contrairement à « contact7 » qui le demandait automatiquement.

    Pouvez-vous m’aider svp, merci d’avance

    Frédéric

    Répondre à ce message

  • 1

    bonjour,
    je viens de charger formidable dans cette page

    Version 3.34.2
    (ZIP – 224.1 ko) SPIP 3.0, SPIP 3.1, SPIP 3.2
    quand je veux l’activer il me dit

    Le plugin Formidable dépend du plugin SAISIES ≥ 3.10.0.
    version que je ne trouve pas sur saisie ..

    Répondre à ce message

  • 1

    Bonjour,
    J’aimerai pouvoir pré remplir les champs d’un formulaire depuis une ancienne réponse en utilisant la commande proposée dans la documentation, commande à placer dans un squelette suivant l’exemple :
    #FORMULAIRE_FORMIDABLEcontact,’’,23
    Comment faire pour déclencher l’appel du formulaire à partir d’un article sous la forme :
    <formulaire_analyse|id_formulaire=34>
    Faut-il fabriquer un modèle pour insérer la commande ?
    J’ai essayé différentes formules, mais je n’y suis pas arrivé.
    Existe-t-il un exemple de squelette ou de modèle ?
    Merci pour votre aide
    abarge

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

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