Carnet Wiki

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.

/**
* 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;
}
JLuc - Mise à jour :29 mars 2018 à 04h12min