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