Carnet Wiki

Styles et CSS avec formidable

Version 2 — Décembre 2017 JLuc

Cette page vise à partager des exemples de styles css utilisables avec les formulaires formidable.
Elle complète les autres pages :
-  Doc formidable
-  Compléments de doc : Boucles et Balises avec Formidables

Eric, le 29 dec 2017

Ci-dessous, quelques éléments du CSS utilisé pour afficher les questionnaires Formidable sur une colonne en partie publique d’un site 3 colonnes. Cela reprend un peu près l’affichage de la partie privée. Ce n’est pas responsive et c’est améliorable.

  1. /**
  2. * Styles des formulaires publics plugin formidable
  3. */
  4.  
  5.  
  6. .formulaire_formidable div.editer-groupe {
  7.   text-align: left;
  8.   margin-left: -10px;
  9.   margin-right: -10px;
  10.   font-size: 76%;
  11.   overflow: hidden;
  12.  
  13.  
  14. /* border: 1px solid #73AD21; */
  15. }
  16.  
  17.  
  18. /**
  19. * Listes de sélection
  20. */
  21.  
  22.  
  23. .formulaire_formidable div.editer.saisie_selection {
  24.   /* marge entre chaque block questionnaire */
  25.   margin-bottom: 1em;
  26.   border: 8px solid transparent;
  27.   overflow: hidden;
  28.   padding-left: 140px;
  29.   background: #fff;
  30.  
  31.  
  32. /* border: 1px solid red; */
  33. }
  34.  
  35.  
  36. .formulaire_formidable div.editer.saisie_selection label {
  37.   margin-left: -130px;
  38.   width: 80px;
  39.   float: left;
  40.  
  41.  
  42. /* border: 1px solid red; */
  43. }
  44.  
  45.  
  46. .formulaire_formidable div.editer.saisie_selection select {
  47.   padding: 3px;
  48.   width: 95%;
  49. }
  50.  
  51.  
  52. /**
  53. * Cases à cocher
  54. */
  55.  
  56.  
  57. .formulaire_formidable div.editer.saisie_checkbox {
  58.   /* marge entre chaque block questionnaire */
  59.   margin-bottom: 1em;
  60.   border: 8px solid transparent;
  61.   overflow: hidden;
  62.   padding-left: 140px;
  63.   background: #fff;
  64.  
  65.  
  66. /* border: 1px solid green; */
  67. }
  68.  
  69.  
  70. .formulaire_formidable div.editer.saisie_checkbox label {
  71.   margin-left: -130px;
  72.   float: left;
  73.   width: 80px;
  74.  
  75.  
  76. /* border: 1px solid green; */
  77. }
  78.  
  79.  
  80. .formulaire_formidable div.editer.saisie_checkbox div.choix {
  81.   padding-left: 3px;
  82. }
  83.  
  84.  
  85. .formulaire_formidable div.editer.saisie_checkbox div.choix > * {
  86.   display: inline-block !important;
  87.   vertical-align: middle;
  88. }
  89.  
  90.  
  91. .formulaire_formidable div.editer.saisie_checkbox div.choix
  92. input[type=checkbox] {
  93.   vertical-align: middle;
  94.   position: relative;
  95.   bottom: 1px;
  96. }
  97.  
  98.  
  99. .formulaire_formidable div.editer.saisie_checkbox div.choix label[for]
  100. {
  101.   float: none;
  102.   margin-left: 3px;
  103.   width: 80%;
  104.  
  105.  
  106. /* border: 1px solid blue; */
  107. }
  108.  
  109.  
  110. /**
  111.  * Boutons radio
  112.  */
  113.  
  114.  
  115. .formulaire_formidable div.editer.saisie_radio {
  116.   margin-bottom: 1em;
  117.   border: 8px solid transparent;
  118.   overflow: hidden;
  119.   padding-left: 140px;
  120.   background: #fff;
  121. }
  122.  
  123.  
  124. .formulaire_formidable div.editer.saisie_radio label {
  125.   margin-left: -130px;
  126.   float: left;
  127.   width: 80px;
  128. }
  129.  
  130.  
  131. .formulaire_formidable div.editer.saisie_radio div.choix {
  132.   padding-left: 3px;
  133. }
  134.  
  135.  
  136. .formulaire_formidable div.editer.saisie_radio div.choix > * {
  137.   display: inline-block !important;
  138.   vertical-align: middle;
  139. }
  140.  
  141.  
  142. .formulaire_formidable div.editer.saisie_radio div.choix
  143. input[type="checkbox"] {
  144.   vertical-align: middle;
  145.   position: relative;
  146.   bottom: 1px;
  147. }
  148.  
  149.  
  150. .formulaire_formidable div.editer.saisie_radio div.choix label[for] {
  151.   float: none;
  152.   margin-left: 3px;
  153.   width: 80%;
  154. }
  155.  
  156.  
  157. /**
  158. * Zones de texte libre
  159. */
  160.  
  161.  
  162. .formulaire_formidable div.editer.saisie_textarea {
  163.   margin-bottom: 1em;
  164.   border: 8px solid transparent;
  165.   overflow: hidden;
  166.   padding-left: 140px;
  167.   background: #fff;
  168. }
  169.  
  170.  
  171. .formulaire_formidable div.editer.saisie_textarea label {
  172.   margin-left: -130px;
  173.   float: left;
  174.   width: 80px;
  175. }

Télécharger