SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 229 visiteurs en ce moment

Accueil > Administration et BDD > Forms & Tables > plugin Forms : création de formulaires

plugin Forms : création de formulaires

25 octobre 2006 – par Cerdic, Franck Ducas, L’instit – 706 commentaires

Toutes les versions de cet article : [français] [italiano]

54 votes

Il y a d’autres usages et possibilités (sondages et code avec unserialize), qui seront détaillés dans d’autres articles.

Installation et activation du plugin

Comme pour tous les plugins (voir Les plugins), vous avez installé ce plugin par ftp puis vous l’avez activé dans l’interface de gestion des plugins (Configuration > Gestion des Plugins > cocher la case "Formulaires") :

Initialisation du formulaire

  1. Passez la souris sur "Edition" puis cliquez sur l’icône "Formulaires et sondages" ;
  2. Cliquez sur "Créer un nouveau formulaire" ;
  3. Donnez un titre, éventuellement un descriptif, et indiquez une adresse email où seront envoyées les réponses au formulaire rempli en ligne par vos utilisateurs ;
  4. choisissez "Ce formulaire n’est pas un sondage" (c’est le seul exemple abordé dans ce document) puis validez ; La validation initialise la création du formulaire. Vous pourrez ensuite aborder la seconde phase, celle de la définition des champs du formulaire.
  5. la même page s’affiche donc apres la validation, mais en bas vous trouverez un sélecteur des types de champs que vous pourrez afficher dans votre formulaire.

Création des champs de saisie

Choisissez les champs dont vous avez besoin, nommez les, puis ajoutez chaque élément, un par un ; voici le détail des champs possibles :

    1. ligne de texte crée un champ de saisie sur une seule ligne
    2. texte crée un champ de saisie sur plusieurs lignes
    3. adresse mail crée un champ de saisie d’adresse mail avec la mention "Veuillez entrer une adresse e-mail valide (de type vous@fournisseur.com)"
    4. adresse web crée un champ de saisie d’adresse web avec la mention "Veuillez entrer une adresse Web valide (de type http://www.monsite.com/...)". D’autre part, on peut choisir de vérifier la validité du site.
    5. choix unique insère un choix entre autant d’item que l’on souhaite de style "bouton radio" un seul bouton pourra être coché.
    6. choix multiple insère les classiques choix à cocher avec possibilités de plusieurs choix (cases carrées). Pour ces deux derniers types de champs, le changement est proposé après la création du champ pour transformation d’un type vers l’autre.
    7. fichier à télécharger permet à l’utilisateur de joindre un fichier. Le concepteur du formulaire fixe la taille maxi en ko du fichier.
    8. mots-clés ajoute automatiquement une liste de cases à cocher de type "choix multiples" correspondants à tous les mots-clés d’un groupe de mots-clés. Le choix entre les groupes de mots-clés est proposé au concepteur du formulaire. ex : j’ai un groupe de mots-clés nommé "Thématiques". En choisissant ce groupe lors de la création du formulaire, j’insère automatiquement une série de cases à cocher avec tous les mots-clés de ce groupe, soit Communauté, Culture, Développement, Licences libres, Logiciels libres.
    9. nouveau bloc de questions crée un nouveau cadre qui entourera tous les champs qui suivront jusqu’à l’insertion d’un autre champ "bloc de questions"
    10. message d’explication insère un texte de votre choix, donc par exemple pour écrire vos questions ou commenter votre formulaire.

Il est possible de modifier l’ordre des champs en cliquant sur les flèches "monter" ou "descendre" en vis à vis de chacun.
Un apercu du formulaire est visible dans le cartouche, en cliquant sue le petit triangle devant APPARENCE DU FORMULAIRE

Lorsque vous avez intégré tous les composants souhaités , cliquez sur "Retour" en haut de la page. Votre formulaire est créé. Pour le publier il faut maintenant l’inclure dans un article

Vous insérez donc ce formulaire dans un article, à la manière d’une insertion d’image : lorsque vous créez ou modifiez un article, vos formulaires se trouvent à gauche de votre article et vous n’avez qu’à coller le code du formulaire voulu dans le corps de votre article (comme pour une image <img1>)
Ex : Dans ce site, <form1> inséré dans un article donnera le formulaire comme ceci : <form1>

Afficher un formulaire dans un squelette

Vous pouvez également afficher un formulaire directement dans les squelettes en utilisant la notation suivante :

  1. [(#MODELE{form}{id_form=1})]

Afficher un sondage dans un squelette

Pour afficher un sondage, il faudra procéder en deux étapes et utiliser un <INCLURE> pour bien gérer le cache.

1) Créer un squelette par exemple sondage.html

  1. #CACHE{0}
  2. [(#MODELE{form}{id_form=1})]

Télécharger

2) Inclure ce squelette ou vous voulez (disons sur la page d’accueil)

  1. <INCLURE{fond=sondage}>

Vous pouvez consulter les réponses que vos utilisateurs ont envoyées :

  • En consultant l’interface privé : en passant votre souris sur "Forum", puis sur "Suivi des réponses" (les réponses sont sur le même mode que les signatures des pétitions).
  • En recevant les réponses par email : Si vous avez indiqué une adresse mail dans la configuration de votre formulaire (plus haut), vous recevrez également le contenu du formulaire par mail (pour autant que votre serveur vous autorise à envoyer des mails).
  • En Exportant les réponses au format CSV : Vous avez également la possibilité de télécharger le fichier des données collectées au format csv pour excel. Sur la page Edition > Formulaire et sondage > Votre Formulaire : une fois que votre formulaire est publié et que vous avez collecté des réponses, apparait à gauche de l’interface de modification du formulaire, un bloc de consultation des réponses
    • > voir les réponses (consultation modération cf forum) -> télécharger les réponses (récupération de l’ensemble des données sous forme d’un fichier csv pour excel)

Récupérer les informations du formulaire dans une boucle

Vous pouvez récupérer les infos générales de vos formulaires en utilisant la boucle suivante :

  1. <BOUCLE_formulaire(FORMS)>
  2. #TITRE
  3. </BOUCLE_formulaire>

Télécharger

  • Soit « FORMS » = le nom de la table
  • #TITRE = le titre du formulaire

Un exemple complet de l’utilisation des boucles de formulaires est visible dans le plugin, dans le squelette de génération du formulaire (formulaires/forms.html)

Les balises disponibles sont #DESCRIPTIF, #SONDAGE (attention ne sera plus supporté dans forms2), #EMAIL (données serialisées, non utilisable simplement), #CHAMPCONFIRM (nom du champ email dont la valeur est utilisee pour envoyer un mail de confirmation), et #TEXTE (texte pour l’envoi du mail de confirmation)

Pour accéder aux informations concernant les champs des formulaires, 2 autres boucles sont utilisées :

La boucle FORMS_CHAMPS permet d’acceder aux infos d’un champ :

  1. <BOUCLE_champs(FORMS_CHAMPS){id_form}{par cle}>
  2. [(#TYPE|=={ligne}|?{' ',''})
  3. <input type='text' name='#CHAMP' id='#CHAMP' value=""
  4. class='[(#OBLIGATOIRE|=={oui}|?{forml,formo})]' size='40' />
  5. ]
  6. </BOUCLE_champs>

Télécharger

Cet exemple simplifie issu de formulaires/forms_structure.html affiche l’input des champs de type ligne d’un formulaire

La boucle FORMS_CHAMPS_CHOIX permet d’acceder aux choix possibles pour un champ etendu de type choix multiple ou unique. Voici un autre exemple simplifié, issu de formulaires/forms_champs_multiple.html

  1. <BOUCLE_f(FORMS){id_form}>
  2. <BOUCLE_champs(FORMS_CHAMPS){id_form}{cle}>
  3. <BOUCLE_choix(FORMS_CHAMPS_CHOIX){id_form}{cle}{par num titre,titre}>
  4. <span class='spip_form_choix_multiple'>
  5. &nbsp; <input type='checkbox' name='#CHAMP[]' id='#CHOIX' value='#CHOIX' />
  6. <label for='#CHOIX'>[(#TITRE|supprimer_numero)]</label>
  7. </span>
  8. </BOUCLE_choix>
  9. </BOUCLE_champs>
  10. </BOUCLE_f>

Télécharger

Récupération des données des formulaires créés via des boucles

Les réponses au formulaire sont elles stockées dans la table spip_reponses et spip_reponses_champs. Pour une réponse donnée, vous avez un enregistrement dans spip_reponses, associé a n enregistrements de spip_reponses_champs ayant le meme id_reponse. Donc vous pouvez éventuellement récupérer les réponses par des boucles sur ces tables. Toutefois, les données des champs de type choix ne sont pas stockées en clair mais en tant que numero de choix (à peu de choses près), et il faut utiliser les boucles decrites ci-dessus pour les interpreter.
Un exemple de squelette affichant une réponse en clair est fourni avec le plugin (forms_reponse.html, a la racine du plugin).
Ces boucles sont d’un niveau d’utilisation avancées du fait de leurs interdependances.

Exemple : afficher les données lors du retour de validation d’un formulaire
Dans cet exemple on cherche à afficher les données d’un formulaire dans une page article lorsque l’utilisateur vient de valider un formulaire intégré dans un article avec le modèle <formXX>.
Pour cela on modifie le squelette article.html en ajoutant à l’endroit où doivent apparaître les résultats (par ex. juste après la balise #TEXTE l’un des deux exemples suivant :

  • Premier exemple : afficher les données qui viennent d’êtres saisies par l’utilisateur :
    1. <BOUCLE_feinte(ARTICLES){0,1}>[(#ENV{ajout_reponse}|?{' ',''})]</BOUCLE_feinte>
    2. <br><strong>Affiche les donn&eacute;es qui viennent d'&egrave;tres remplies:</strong><br>
    3. <BOUCLE_reponses(FORMS_DONNEES){id_donnee}>
    4. <BOUCLE_champs(FORMS_CHAMPS){id_form}{par rang}>
    5. #TITRE : <span class='#_reponses:EDIT{#CHAMP}'>#LESVALEURS{','}</span>
    6. </BOUCLE_champs>
    7. </BOUCLE_reponses>
    8. </B_feinte>

    Télécharger

  • Deuxième exemple : afficher l’ensemble des données saisies pour ce formulaire :
    1. <BOUCLE_feinte(ARTICLES){0,1}>[(#ENV{ajout_reponse}|?{' ',''})]</BOUCLE_feinte>
    2. <br><strong>Affiche l'ensemble des donn&eacute;es saisies:</strong><br>
    3. <BOUCLE_reponses2(FORMS_DONNEES){par id_donnee}>
    4. R&eacute;ponse #ID_DONNEE:<br>
    5. <BOUCLE_champs2(FORMS_CHAMPS){id_form=#ENV{ajout_reponse}}{par rang}>
    6. #TITRE : <span class='#_reponses:EDIT{#CHAMP}'>#LESVALEURS{','}</span><br>
    7. </BOUCLE_champs2>
    8. <br>
    9. </BOUCLE_reponses2>
    10. </B_feinte>

    Télécharger

    Note : dans les 2 cas on utilise une BOUCLE_feinte qui permet de tester la présence du critère d’environnement ajout_reponse pour n’afficher les résultats que si la page est chargée en retour d’une validation du formulaire. Pour plus d’infos sur les boucles feintes, voir le paragraphe "Parties optionnelles des balises" dans cet article : http://www.weblog.eliaz.fr/article6...

Utiliser la fonctionnalité de liaison (dépendance) entre plusieurs formulaires

Il est possible de rendre un formulaire dépendant du remplissage d’un autre formulaire : c’est le rôle du champ "Formulaires obligatoires pour la saisie de celui-ci" de l’onglet Propriété d’un formulaire.
Cette fonctionnalité permet typiquement de faire quelque chose du style :

  • l’utilisateur arrive sur un article qui présente un premier formulaire (<form1> pour cet exemple) : il le rempli et le valide.
  • une fois cette validation faite, l’article se ré-affiche avec un deuxième formulaire (<form2> par ex.) qu’il peut alors remplir (le premier formulaire n’est plus visible).
  • une fois celui-ci validé, un troisième formulaire s’affiche (<form3>).

Mode opératoire :

  • créer les 3 formulaires
  • dans le champ Formulaires obligatoires pour la saisie de celui-ci de <form2>, on indique 1 (le numéro du formulaire de l’étape 1).
  • dans le champ Formulaires obligatoires pour la saisie de celui-ci de <form3>, on indique 1,2 (le numéro du formulaire de l’étape 1 et de celui de l’étape 2, séparés par une virgule).
  • Créer l’article qui contiendra l’enchaînement de ces 3 formulaires (un seul article), et mettre dans le texte de celui-ci <form3> uniquement !
    L’idée c’est que pour que <form3> s’affiche, il sera nécessaire d’avoir rempli <form1> puis <form2>, qui seront automatiquement insérés à la place de <form3> l’un après l’autre. Il ne faut donc pas faire d’appel direct au modèles <form1> et <form2>.

Remarques

  • si vous voulez que vos tests fonctionnent, il est nécessaire de vider les données saisies liées à votre compte utilisateur pour les 2 premiers formulaires et de supprimer les cookies spipcookie_form_1 et spipcookie_form_2 avant chaque essai (installez firecookie en plus de Firebug dans votre FireFox afin de simplifier cette opération).
  • apparament il doit y avoir un léger problème dans la prise en compte de l’étape qui vient d’être validée puisqu’en réalité, lorsque l’article est réaffiché à la validation d’un formulaire, il est nécessaire de recharger la page pour que le formulaire suivant apparaisse (recalcul pas nécessaire, simplement rechargement de la page)... Et cela même avec un #CACHE{0} dans le squelette de l’article qui contient les formulaires.
    Si vous avez des infos pour contourner ce problème, merci de laisser un message dans le forum attaché à cet article !

P.-S.

La version pour spip 1.9.1 est disponible en telechargement sur la zone.

Spip 1.9.2

La nouvelle version du plugin s’appelle forms&tables. Elle est compatible 1.9.1 & 1.9.2, et est en téléchargement ici

Spip 2.0

Une nouvelle version du plugin pour SPIP 2.0 est désormais disponible : Forms&Tables 2.0

Dernière modification de cette page le 4 juin 2012

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 18 juillet 2015 à 19:21, par Pascual En réponse à : plugin Forms : création de formulaires

    Signalement d’un petit bug (plugin version 1_9_1 v.304 et v.305) :

    Suite au passage en SPIP 1.9.2p pour permettre de faire tourner le site sur PHP 5.4 (v.38) : Dans tous les formulaires, je ne peux plus me servir du champ « Choix multiple » en le rendant OBLIGATOIRE sinon, il m’affiche invariablement [Obligatoire] et [veuillez remplir ce champ] en rouge MÊME si une case est bien cochée... et le formulaire n’est pas transmis... Sic...

    Seule solution pour que le formulaire soit fonctionnel : Désactiver l’option [Obligatoire] pour ce champ.

    Si quelqu’un peut corriger ce (petit) problème, je l’en remercie par avance.

    Cordialement

    Répondre à ce message

  • Le 18 janvier 2012 à 14:50, par guidoune En réponse à : plugin Forms : création de formulaires

    Bonjour,

    J’ai un soucis avec le champs numéro de téléphone dans mon formulaire. Lorsqu’une personne remplit ce champs avec son numéro téléphone par exemple : 0221652145, le chiffre 0 disparait dans les réponses dans le mail à l’administrateur. Une solution pour ce problème merci.

    Cordialement.

    • Le 23 janvier 2012 à 13:42, par guidoune En réponse à : plugin Forms : création de formulaires

      Je me permets de faire un up pour ce sujet, en effet je me suis penché sur la question et n’ai pas trouvé de solution. J’ai changé le type du champs valeur dans la base de donné en champs numérique mais rien n’y fait, le 0 disparait....

      Comment puis-je configurer cette fonction sql_quote() qui protège les données des formulaires de l’espace public ?

      Ou comment faire pour configurer le champs téléphone pour y insérer par exemple un espace ou un point automatiquement ce qui transformerais la valeur de ce champs en chaînes de caractères alpha-numériques ? Je vois pas comment faire cela, est ce possible ?

      En tout cas merci pour ce plugin qui serait vraiment parfait sans ce petite problème et merci d’avance aux aides éventuelles qui seraient vraiment le bienvenue.

    • Le 9 février 2015 à 10:26, par Jeremimst En réponse à : plugin Forms : création de formulaires

      Très bon plugin qui correspond exactement à ce que je cherchais (notamment au niveau de la modification possible des réponses après validation, ET le choix du format d’export)
      En revanche, je n’ai pas trouvé comment faire pour que le 0 en début d’un champ soit conservé dans la base... (j’ai essayé avec tous les types ! ! )
      (SPIP3.0/mysql)
      merci !

    Répondre à ce message

  • Le 27 mars 2013 à 22:33, par djimel En réponse à : plugin Forms : création de formulaires

    SPIP 2.1.17
    Merci pour ce super plugin !
    Mais je n’ai pas les bouton « monter-descendre » sur les champs pour les déplacer ???

    • Le 28 mars 2013 à 11:43, par jeanmarie En réponse à : plugin Forms : création de formulaires

      Salut,

      j’utilise ce plugin bien pratique pour gérer l’inscription de bénévoles et ça fonctionne super.
      Le seul (petit) souci, c’est que je suis dans le même cas que djimel : les flèches « monter » ou « descendre » n’apparaissent pas en face des champs et je ne peux pas modifier l’ordre.... à moins de supprimer et recréer les champs.

      Pour info, je suis sous SPIP 3.0.5-stable et la version 0.5.4 du plugin

      Merci pour votre réponse,

      jean marie

    • Le 3 avril 2013 à 14:43, par jeanmarie En réponse à : plugin Forms : création de formulaires

      Je m’auto réponds :

      Sous SPIP3, il suffit de déplacer les champs en « prenant » (drag & drop) l’icône en début de ligne. pas testé sous SPIP2.
      Ça ne répond pas à la question des flèches, mais au moins on peut bouger les éléments...

      jean marie

    • Le 5 avril 2013 à 19:03, par djimel En réponse à : plugin Forms : création de formulaires

      Je m’auto-réponds également...
      avec spip 2.1.17 ça marche aussi.
      J’avais bien recherché cette solution... mais il faut bien prendre le bas de l’icône de début de champ (c’est précis !) ... sinon au centre, on développe ou replie le champ...
      Merci à Jean-Marie de m’avoir inciter à ré-essayer... et réussir...
      OUF !
      Djimel

    Répondre à ce message

  • Le 20 mars 2013 à 12:23, par Fifouille En réponse à : plugin Forms : création de formulaires

    Bonjour, je souhaiterais mettre en place des formulaires avec un aperçu des réponses (avec bouton aperçu ou prévisualiser) avant envoi définitif ?
    Merci de me donner la procédure à suivre.

    Répondre à ce message

  • Le 22 février 2013 à 17:17, par gfont En réponse à : plugin Forms : création de formulaires

    Bonjour,

    Est-il possible dans un champ de type multiple de limiter le nombre de cases cochées à 3 (par exemple) si on dispose de 10 choix possibles

    Merci d’avance pour votre aide

    GeF

    Répondre à ce message

  • Le 13 juillet 2012 à 11:36, par adc-design En réponse à : plugin Forms : création de formulaires

    Bonjour,

    lorsque je récupère la table des réponses en CSV, il y a des lignes vides avec seulement une adresse IP.
    C’est un formulaire avec un fichier à télécharger.
    Je débute, ma question va vous paraitre naive, mais pourquoi y a-t-il des lignes vides ? avons-nous perdu des données ? ou le formulaire a-t-il été mal validé ?

    merci.

    Répondre à ce message

  • Le 4 décembre 2011 à 11:50, par guidoune En réponse à : plugin Forms : création de formulaires

    Bonjour,

    J’ai essayé de changer le css du formulaire dans spip_forms.css, mais rien ne change dans l’apparence du formulaire. Est ce fichier qu’il faut changer ? Ou un autre peut être ? J’ai beau chercher je ne trouve pas ? Une idée peut être ?

    Merci.

    • Le 1er janvier 2012 à 15:31, par olivier En réponse à : plugin Forms : création de formulaires

      Bonjour, je me permets de faire un petit up car j’ai le même soucis, impossible de personnaliser correctement le formulaire généré…

    • Le 19 janvier 2012 à 17:38, par guidoune En réponse à : plugin Forms : création de formulaires

      Il faut changer le fichier spip_form.css et bien vider le cache du site pour voir le changement. J’ai aussi enlever dans le fichier fichier_styles.css.html la ligne concernant le cache et ça marche.

    Répondre à ce message

  • Le 2 septembre 2011 à 17:08, par Prx En réponse à : plugin Forms : création de formulaires

    Est-ce normal que l’e-mail de confirmation arrive à l’administrateur et plus au demandeur (celui qui rempli le formulaire (comme il est indiqué dans le message noir au submit) ?

    Répondre à ce message

  • Le 13 mai 2011 à 00:04, par Vianney En réponse à : plugin Forms : création de formulaires

    Des que je rempli le champ : « Formulaires obligatoires pour la saisie de celui-ci  » mon formulaire deviens vide... c’est a dire que les champs créés n’apparaissent pas à l’affichage... Des que j’enlève la dépendance le formulaire réapparait... Si quelqu’un a une idée...

    Répondre à ce message

  • Le 18 avril 2011 à 16:36, par golgothe54 En réponse à : plugin Forms : création de formulaires

    Bonjour, es t-il possible d’extraire les données au format xls ? Je dois pratiquer un export des données en xls avec un modèle de présentation prédéfini.

    Es ce que ce genre de chose est possible et si oui comment ?

    Je vous remercie

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

Ça spipe par là