Tag

responsive Archives - Site Web Facile

ninja forms 300x225

Labels Ninja Forms – jouer avec leurs positions dans vos champs de saisie

By | Formulaire

Introduction

Dans ce billet, nous allons nous focaliser sur la position des labels Ninja Forms par rapport à vos champs de saisie du formulaire.

Comparaison des positions des labels Ninja Forms

Les deux Formulaires suivant proviennent de Ninja Forms. Dans le premier les labels des champs sont en position par défaut en haut du champs de saisie, en revanche dans le deuxième formulaire les labels sont bien inséré directement dans les champs de saisie.

 

Labels Ninja Forms a l exterieur des Champs - Formulaire - Contact

Positionner vos Labels Ninja Forms par rapport à vos champs de saisie

Ninja Forms positionne par défaut les labels des champs du formulaire « au-dessus » du champs à remplir, comme sur l’exemple suivant:

Formulaire NinjaForms Salient Label Nom au-dessus du Champs

Suivant vos besoins il peut être placé ailleurs:

  1. à gauche
  2. à droite
  3. en-bas
  4. Masquer

Si l’on comprend aisément les 3 premiers cas, le dernier : « Masquer » est plus énigmatique mais est grandement important, car il permet de placer un label directement dans le champs de saisie

Pourquoi mettre le texte de vos Labels Ninja Forms à l’intérieur de vos champs de saisie

il peut s’agir d’une question de goût ou de présentation mais cette fonction intéressante qui est proposé pour gérer au mieux les labels Ninja Forms permettent aussi :

  • un visualisation plus moderne du formulaire
  • un gain de place, ce qui facilite le remplissage des champs sur son smartphone (*)
  • est donc plus Responsive Design

Positionner vos Labels à l’intérieur de vos champs de saisie

une fois que vous êtes connecté au Back-office de votre WordPress,

  1. Aller dans Ninja Forms
  2. Choisir le Formulaire à créer ou à modifier
  3. Aller sur le(s) champs à changer et
  4. mettre :
    POSITION DE TITRE = « Masquer« , dans cette exemple du champs « Nom »
    MODE AVANCE / ETIQUETTE = « le label que vous voulez« , dans cette exemple du champs « Nom » s’est: « Votre Nom« 
  5. puis bouton terminé et aussi publier le formulaire

 

Notes:

(*) Depuis Fin 2016 : Pour la première fois, Internet est plus utilisé sur mobile que sur PC