18041 sujets

Questions générales et questions de débutants

Formulaire multipage avec barre de progression

Bonjour à tous,
mon tuteur de stage souhaite un formulaire multipage avec barre de progression, comme celui du site Assurland : https://www.assurland.com/assurance-habitation.html

Il m'assure avoir vu un "plugin" ou un "boostrap" (j'ai pas réussi à avoir mieux comme explications) ayant exactement le même rendu. Il ne sait, bien évidement plus où, à part que c'était dans une vidéo.

Savez-vous comment je peux faire pour retrouver ce "plugin" ou le code de ce type de formulaire ? Merci par avance !
Merci pour ta réponse !

Mon tuteur semblait dire que ce qu'il avait vu, permettait de n'avoir à remplir que les champs du formulaire (je trouvais ça étrange, mais pourquoi pas). Est-ce que ça te/vous parle ?
J'ai pas totalement compris ton dernier post , ton tuteur dit que la simple modification d'un champs du formulaire fait progresser la barre ?
Non, je n'ai pas été claire.

En gros il pense que ce formulaire (assurland) est déjà "tout fait" (type plugin) et qu'il suffit de rentrer les champs relatifs à son activité sans avoir à taper une ligne de code.
Pour afficher une barre de composant il y a la balise <progress> en HTML 5 qui permet de faire le taff sans se prendre la tête
https://developer.mozilla.org/fr/docs/Web/HTML/Element/progress
Il y a 2 attributs pour cette balise
max : une valeur qui permet d'afficher en totalité la barre de progression
value: qui permet de définir la position actuelle dans la barre de progression
Il n'est pas nécessaire d'utiliser les pourcentages

Assurland utilise un vieux hack avec 2 <divs> emboités et modifie le width en % de la <div> interne
<div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 37%;">39%</div>
 </div>

Avec HTML5, cette méthode est dépassée

Les gros boutons sont en fait une balise <a>. A chaque clic, on envoie une requête XHR vers un serveur qui retourne une réponse JSON pour afficher les prochaines questions.
Et en même temps, on actualise la valeur du width ci-dessus apparemment.
Rien de bien sorcier. Le plus pénible est d'élaborer le questionnaire

Pour en voir plus, utiliser l'inspecteur web de votre navigateur (chrome ou firefox)
Cliquer sur l'onglet réseau
afficher les 2 fenêtres côte à côte
jouer avec le formulaire en surveillant l'onglet réseau pour voir le dialogue entre le navigateur et le serveur

Avec l'onglet inspecteur, on peut voir comment s'appliquent les règles CSS. Pas toujours évident de savoir celle qui a le dernier mot.
Bien utile quand on veut modifier une page HTML moche et qu'elle se rebelle.

C'est quoi ces maitres de stage que vous avez ?
Modifié par bazooka07 (06 Jun 2018 - 10:55)
Euh....des bras cassés ? Et des mecs qui on mis la veille technologique au placard depuis 2000 surement
ahah, disons que je n'ai pas vraiment de maître de stage ou de tuteur. Je suis seule et en "roue libre" dans une entreprise qui souhaite un site internet, avec le même type de formulaire.

Merci d'avoir pris le temps de m'aider ! J'avais isolé le morceau de code qui les intéressent pour leur montrer que cela ne se ferait pas en une matinée, ni juste en changeant du contenu.
Cliquez sur le premier marqueur en haut pour modifier les propriétés des pages du formulaire. Dans la colonne de gauche, vous pouvez sélectionner un type de barre de progression. WPForms vous permet d’utiliser une simple barre de progression, des cercles, des connecteurs, ou de désactiver cette fonctionnalité tout simplement.
https://bluestacks.vip/
https://textnow.vip/
https://photomath.vip/
Modifié par athman88 (10 Jun 2018 - 22:51)
Sujet clos
Aller à