Formidable/formitable, générateurs de formulaires

Styles et CSS avec formidable

Styles et CSS avec formidable

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

Télécharger