Quelques éléments pour les styles des questionnaires publics Formidable

Général
1

Bonjour,

Ci-dessous, quelques éléments du CSS utilisé pour afficher les
questionnaires Formidable sur une colonne en partie publique (Site 3
colonnes) de SPIP - cela reprend un peu près l'affichage de la partie
privée, ce n'est pas responsive - et grandement améliorable.

Cordialement,

Eric

/**
* Styles des formulaires publics plugin formidable
*/

.formulaire_formidable div.editer-groupe {
  text-align: left;
  margin-left: -10px;
  margin-right: -10px;
  font-size: 76%;
  overflow: hidden;

  /* border: 1px solid #73AD21; */
}

/**
* Listes de sélection
*/

.formulaire_formidable div.editer.saisie_selection {
  /* marge entre chaque block questionnaire */
  margin-bottom: 1em;
  border: 8px solid transparent;
  overflow: hidden;
  padding-left: 140px;
  background: #fff;

  /* border: 1px solid red; */
}

.formulaire_formidable div.editer.saisie_selection label {
  margin-left: -130px;
  width: 80px;
  float: left;

  /* border: 1px solid red; */
}

.formulaire_formidable div.editer.saisie_selection select {
  padding: 3px;
  width: 95%;
}

/**
* Cases à cocher
*/

.formulaire_formidable div.editer.saisie_checkbox {
  /* marge entre chaque block questionnaire */
  margin-bottom: 1em;
  border: 8px solid transparent;
  overflow: hidden;
  padding-left: 140px;
  background: #fff;

  /* border: 1px solid green; */
}

.formulaire_formidable div.editer.saisie_checkbox label {
  margin-left: -130px;
  float: left;
  width: 80px;

  /* border: 1px solid green; */
}

.formulaire_formidable div.editer.saisie_checkbox div.choix {
  padding-left: 3px;
}

.formulaire_formidable div.editer.saisie_checkbox div.choix > * {
  display: inline-block !important;
  vertical-align: middle;
}

.formulaire_formidable div.editer.saisie_checkbox div.choix
input[type=checkbox] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

.formulaire_formidable div.editer.saisie_checkbox div.choix label[for]
{
  float: none;
  margin-left: 3px;
  width: 80%;

  /* border: 1px solid blue; */
}

/**
 * Boutons radio
 */

.formulaire_formidable div.editer.saisie_radio {
  margin-bottom: 1em;
  border: 8px solid transparent;
  overflow: hidden;
  padding-left: 140px;
  background: #fff;
}

.formulaire_formidable div.editer.saisie_radio label {
  margin-left: -130px;
  float: left;
  width: 80px;
}

.formulaire_formidable div.editer.saisie_radio div.choix {
  padding-left: 3px;
}

.formulaire_formidable div.editer.saisie_radio div.choix > * {
  display: inline-block !important;
  vertical-align: middle;
}

.formulaire_formidable div.editer.saisie_radio div.choix
input[type="checkbox"] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

.formulaire_formidable div.editer.saisie_radio div.choix label[for] {
  float: none;
  margin-left: 3px;
  width: 80%;
}

/**
* Zones de texte libre
*/

.formulaire_formidable div.editer.saisie_textarea {
  margin-bottom: 1em;
  border: 8px solid transparent;
  overflow: hidden;
  padding-left: 140px;
  background: #fff;
}

.formulaire_formidable div.editer.saisie_textarea label {
  margin-left: -130px;
  float: left;
  width: 80px;
}
2

Le 28/12/2017 à 18:33, eric a écrit :

Ci-dessous, quelques éléments du CSS utilisé pour afficher les
questionnaires Formidable sur une colonne en partie publique (Site 3
colonnes) de SPIP - cela reprend un peu près l'affichage de la partie
privée, ce n'est pas responsive - et grandement améliorable.

Hello Eric
j'ai mis cette contribution en ligne sur le carnet :
  Styles et CSS avec formidable - SPIP-Contrib

JL

/**
* Styles des formulaires publics plugin formidable
*/

.formulaire_formidable div.editer-groupe {
text-align: left;
margin-left: -10px;
margin-right: -10px;
font-size: 76%;
overflow: hidden;

/* border: 1px solid #73AD21; */
}

/**
* Listes de sélection
*/

.formulaire_formidable div.editer.saisie_selection {
/* marge entre chaque block questionnaire */
margin-bottom: 1em;
border: 8px solid transparent;
overflow: hidden;
padding-left: 140px;
background: #fff;

/* border: 1px solid red; */
}

.formulaire_formidable div.editer.saisie_selection label {
margin-left: -130px;
width: 80px;
float: left;

/* border: 1px solid red; */
}

.formulaire_formidable div.editer.saisie_selection select {
padding: 3px;
width: 95%;
}

/**
* Cases à cocher
*/

.formulaire_formidable div.editer.saisie_checkbox {
/* marge entre chaque block questionnaire */
margin-bottom: 1em;
border: 8px solid transparent;
overflow: hidden;
padding-left: 140px;
background: #fff;

/* border: 1px solid green; */
}

.formulaire_formidable div.editer.saisie_checkbox label {
margin-left: -130px;
float: left;
width: 80px;

/* border: 1px solid green; */
}

.formulaire_formidable div.editer.saisie_checkbox div.choix {
padding-left: 3px;
}

.formulaire_formidable div.editer.saisie_checkbox div.choix > * {
display: inline-block !important;
vertical-align: middle;
}

.formulaire_formidable div.editer.saisie_checkbox div.choix
input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}

.formulaire_formidable div.editer.saisie_checkbox div.choix label[for]
{
float: none;
margin-left: 3px;
width: 80%;

/* border: 1px solid blue; */
}

/**
* Boutons radio
*/

.formulaire_formidable div.editer.saisie_radio {
margin-bottom: 1em;
border: 8px solid transparent;
overflow: hidden;
padding-left: 140px;
background: #fff;
}

.formulaire_formidable div.editer.saisie_radio label {
margin-left: -130px;
float: left;
width: 80px;
}

.formulaire_formidable div.editer.saisie_radio div.choix {
padding-left: 3px;
}

.formulaire_formidable div.editer.saisie_radio div.choix > * {
display: inline-block !important;
vertical-align: middle;
}

.formulaire_formidable div.editer.saisie_radio div.choix
input[type="checkbox"] {
vertical-align: middle;
position: relative;
bottom: 1px;
}

.formulaire_formidable div.editer.saisie_radio div.choix label[for] {
float: none;
margin-left: 3px;
width: 80%;
}

/**
* Zones de texte libre
*/

.formulaire_formidable div.editer.saisie_textarea {
margin-bottom: 1em;
border: 8px solid transparent;
overflow: hidden;
padding-left: 140px;
background: #fff;
}

.formulaire_formidable div.editer.saisie_textarea label {
margin-left: -130px;
float: left;
width: 80px;
}
```

3

Merci

Ayant compris comment mettre en place un affichage inconditionnel des
statistiques basées sur les réponses, les rendre publiques - il suffit
d'ajouter la seconde ligne ci-dessous au texte de l'article :

<form26>

<formulaire_analyse|id_formulaire=26>

je travaille maintenant sur le CSS de l'affichage de ces stats. Encore
une fois, je vais me baser sur l'affichage en partie privée.

A noter, que quand la balise d'injection du `<formulaire_analyse` est
utilisée, et que l'option "afficher ensuite" de "configurer le
formulaire" est sur "Les statistiques de réponses" :
- Un utilisateur ayant répondu ne verra qu'un seul tableau d'analyse
des statistiques ("CSSisé") par le plugin Formidable.

Cela fonctionne donc très bien. Il manque juste le CSS pour les
visiteurs n'ayant pas répondu, et pour lesquels l'affichage de
l'analyse se fait par l'insertion de `<formulaire_analyse`

Cordialement,

Eric

PS : je n'ai trouvé nulle part dans la doc une explication claire sur
la façon de rendre l'analyse statistique inconditionnellement publique.
PS2: importés depuis form (SPIP1.8.3 en utf-8), puis passer par
forms_et_table (jamais utilisé) - https://bitbucket.org/opalesurfcastin
g/spip_migration_forms_a_forms_et_tables_2_5 - pour finir dans
formidable, le fonctionnement de tous les questionnaires est parfait.
Il n'y a que quelques paramètres à changer compte-tenu des changements
de fonctionnement. Durable ...

Le vendredi 29 décembre 2017 à 10:50 +0100, JLuc a écrit :

Le 28/12/2017 à 18:33, eric a écrit :
>
> Ci-dessous, quelques éléments du CSS utilisé pour afficher les
> questionnaires Formidable sur une colonne en partie publique (Site
> 3
> colonnes) de SPIP - cela reprend un peu près l'affichage de la
> partie
> privée, ce n'est pas responsive - et grandement améliorable.
Hello Eric
j'ai mis cette contribution en ligne sur le carnet :
Styles et CSS avec formidable - SPIP-Contrib

JL

>
> /**
> * Styles des formulaires publics plugin formidable
> */
>
> .formulaire_formidable div.editer-groupe {
> text-align: left;
> margin-left: -10px;
> margin-right: -10px;
> font-size: 76%;
> overflow: hidden;
>
> /* border: 1px solid #73AD21; */
> }
>
> /**
> * Listes de sélection
> */
>
> .formulaire_formidable div.editer.saisie_selection {
> /* marge entre chaque block questionnaire */
> margin-bottom: 1em;
> border: 8px solid transparent;
> overflow: hidden;
> padding-left: 140px;
> background: #fff;
>
> /* border: 1px solid red; */
> }
>
> .formulaire_formidable div.editer.saisie_selection label {
> margin-left: -130px;
> width: 80px;
> float: left;
>
> /* border: 1px solid red; */
> }
>
> .formulaire_formidable div.editer.saisie_selection select {
> padding: 3px;
> width: 95%;
> }
>
> /**
> * Cases à cocher
> */
>
> .formulaire_formidable div.editer.saisie_checkbox {
> /* marge entre chaque block questionnaire */
> margin-bottom: 1em;
> border: 8px solid transparent;
> overflow: hidden;
> padding-left: 140px;
> background: #fff;
>
> /* border: 1px solid green; */
> }
>
> .formulaire_formidable div.editer.saisie_checkbox label {
> margin-left: -130px;
> float: left;
> width: 80px;
>
> /* border: 1px solid green; */
> }
>
> .formulaire_formidable div.editer.saisie_checkbox div.choix {
> padding-left: 3px;
> }
>
> .formulaire_formidable div.editer.saisie_checkbox div.choix > * {
> display: inline-block !important;
> vertical-align: middle;
> }
>
> .formulaire_formidable div.editer.saisie_checkbox div.choix
> input[type=checkbox] {
> vertical-align: middle;
> position: relative;
> bottom: 1px;
> }
>
> .formulaire_formidable div.editer.saisie_checkbox div.choix
> label[for]
> {
> float: none;
> margin-left: 3px;
> width: 80%;
>
> /* border: 1px solid blue; */
> }
>
> /**
> * Boutons radio
> */
>
> .formulaire_formidable div.editer.saisie_radio {
> margin-bottom: 1em;
> border: 8px solid transparent;
> overflow: hidden;
> padding-left: 140px;
> background: #fff;
> }
>
> .formulaire_formidable div.editer.saisie_radio label {
> margin-left: -130px;
> float: left;
> width: 80px;
> }
>
> .formulaire_formidable div.editer.saisie_radio div.choix {
> padding-left: 3px;
> }
>
> .formulaire_formidable div.editer.saisie_radio div.choix > * {
> display: inline-block !important;
> vertical-align: middle;
> }
>
> .formulaire_formidable div.editer.saisie_radio div.choix
> input[type="checkbox"] {
> vertical-align: middle;
> position: relative;
> bottom: 1px;
> }
>
> .formulaire_formidable div.editer.saisie_radio div.choix label[for]
> {
> float: none;
> margin-left: 3px;
> width: 80%;
> }
>
> /**
> * Zones de texte libre
> */
>
> .formulaire_formidable div.editer.saisie_textarea {
> margin-bottom: 1em;
> border: 8px solid transparent;
> overflow: hidden;
> padding-left: 140px;
> background: #fff;
> }
>
> .formulaire_formidable div.editer.saisie_textarea label {
> margin-left: -130px;
> float: left;
> width: 80px;
> }
> ```
>
>

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Archives : https://www.mail-archive.com/spip@rezo.net/maillist.html

Infos : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc