Formflex
Démo et exemples détaillés des possibilités (avec code correspondant) ici (GitHub Page) :
https://zenike.github.io/formflex/
formflex est un plugin de personnalisation de formulaire. Il permet de configurer facilement les différents éléments constituants un formulaire en changeant uniquement des variables LESS.
Il ajoute également des fonctions avancées en javascript comme un système d'affichage/masquage en fonction des réponses précédentes choisies.
Dépendances
-
jQuery: une version récente sans limitation précise -
Less: ce plugin utilise LESS pour la personnalsation du formulaire
Installation
- récuperer les fichiers
formflex.lessetformflex.jsà la racine du projet GitHUb - inclure le fichier
formflex.jsdans la document avant la fermeture de la balise</body> - lier et génerer un css à partir de
formflex.less - incorporer les variables de personnalisation ci dessous dans les less du projet
Variables de personnalisation
- variables less à inclure avant formflex.less
/* FORMFLEX GENERAL */
@formflex_input_height: 60px;
@formflex_input_bgcolor: #333;
@formflex_option_bgcolor: #333;
@formflex_input_font_size: 16px;
@formflex_input_font_weight: normal;
@formflex_input_fontcolor: #fff;
@formflex_input_round: 5px;
@formflex_input_disabled_bgcolor: #888;
@formflex_icons_fz: 18px;
@formflex_bd: skyblue;
@formflex_bd_hover: red;
@formflex_main_color_theme: @theme;
@formflex_main_color_theme_hover: @theme_light;
@formflex_main_color_theme_mousedown: @theme_dark;
@formflex_mobile_size_switch: 500px;
/* FORMFLEX NAME */
@formflex_name_fz: 12px;
@formflex_name_color: #333;
@formflex_name_color_hover: #000;
@formflex_name_font_weight: normal;
/* FORMFLEX CHECKSKIN */
@formflex_checkskin_fz: 18px;
@formflex_checkskin_checkbox_round: 5px;
@formflex_checkskin_iconcolor: #fff;
@formflex_checkskin_input_size_decal: 0px;
@formflex_checkskin_bg_color: #fff;
@formflex_checkskin_bg_color_checked: @theme;
@formflex_checkskin_bg_color_checked_hover: @theme_light;
@formflex_checkskin_bg_color_mousedown: @theme_dark;
@formflex_checkskin_bd_color: #aaa;
@formflex_checkskin_bd_color_hover: #555;
