couper une page d'inscription en plusieurs étape

26 décembre 2017 à 17:37:33

bonjour les amies,

j'ai une page d'inscription qui est trés longue , je voudrais avoir une aide de votre part pour créer un systeme d'inscription groupe de champs par groupe de champ etape par etape ...

pouvez vous me dire comment je peut integrer un plugin pour faire cela ?

voici le code de mon site internet , ce code à est un script que j'ai acheter et que ne maîtrise pas du tout le code.

<div id="vt_reg_tab2">               
                            
                             <!-- BEGIN profile_types -->

                             <div id="profile_type_{type_id}" class="profile_type" style="<!-- IF type_id != top.registration_type_id --> display:none <!-- ENDIF -->">

                                 <!-- BEGIN profile_groups -->

                                             <!-- BEGIN profile_fields -->
                                             <div class="form-group">
                                                <label class="col-sm-3 control-label" for="field_{field_label}">{field_name} {ifelse:field_required,"1","<i>*</i>",""}</label>
                                                <div class="col-sm-9">
                                                    <!-- IF field_type = "text" -->
                                                    <input type="text" class="form-control" id="field_{field_label}" name="{field_label}" style="width: {field_width}" value="{htmlentities:field_value}" maxlength="{field_maxlength}" />
                                                    <!-- ELSEIF field_type = "image" -->
                                                    <input type="file" class=" form-control" id="field_{field_label}" name="{field_label}" />
                                                    <!-- IF field_value != "" -->
                                                    <a target="_blank" href="{top.virtual_pic_path}{field_value}">View file</a>&nbsp;
                                                    <label><input class="checkbox" id="{field_label}_remove" name="{field_label}_remove" type="checkbox" value="1">&nbsp;{lang:"profile","remove"}</label>
                                                    <!-- ENDIF -->
                                                    <!-- ELSEIF field_type = "textarea" -->
                                                    <textarea class="form-control" id="field_{field_label}" name="{field_label}" style="width: {field_width}; height: {field_height}">{htmlentities:field_value}</textarea>
                                                    <!-- ELSEIF field_type = "checkbox" -->
                                                    <ul class="fielditems">
                                                        <!-- INBEGIN field_items -->
                                                        <li><label>{checkboxes:parent.field_label,rowcnt,parent.field_value,inner_key}&nbsp;{inner_value}</label></li>
                                                        <!-- END field_items -->
                                                    </ul>

                                                    <!-- ELSEIF field_type = "radio" -->
                                                    <ul class="fielditems">
                                                        <!-- INBEGIN field_items -->
                                                        <li><label>{radiobuttons:parent.field_label,rowcnt,parent.field_value,inner_key}&nbsp;{inner_value}</label></li>
                                                        <!-- END field_items -->
                                                    </ul>

                                                    <!-- ELSEIF field_type = "combo" -->
                                                    <select class="form-control select" id="field_{field_label}" name="{field_label}">{dropdownlist:field_items,field_value}</select>
                                                    <!-- ELSEIF field_type = "birthday" -->
                                                    <div class="form-inline">
                                                        <!-- IF session.timeformat -->
                                                            <select class="form-control select" name="{field_label}_month">{dropdownlist:top.months,field_value_month}</select>
                                                            <select class="form-control select" name="{field_label}_day">{dropdownlist:top.days,field_value_day}</select>
                                                        <!-- ELSE -->
                                                            <select class="form-control select" name="{field_label}_day">{dropdownlist:top.days,field_value_day}</select>
                                                            <select class="form-control select" name="{field_label}_month">{dropdownlist:top.months,field_value_month}</select>
                                                        <!-- ENDIF -->
                                                        
                                                        <select class="form-control select" name="{field_label}_year">{dropdownlist:top.birthday_years,field_value_year}</select>
                                                     </div>
                                                    <!-- ELSEIF field_type = "date" -->
                                                     <div class="form-inline"> 
                                                            <select class="form-control select" name="{field_label}_month">{dropdownlist:top.months,field_value_month}</select>
                                                            <select class="form-control select" name="{field_label}_day">{dropdownlist:top.days,field_value_day}</select>
                                                            <select class="form-control select" name="{field_label}_year">{dropdownlist:years,field_value_year}</select>
                                                     </div>
                                                        <!-- ELSEIF field_type = "time" -->
                                                           <div class="form-inline"> 
                                                            <select class="form-control select" name="{field_label}_hour">{dropdownlist:top.hours,field_value_hour}</select>
                                                            <select class="form-control select" name="{field_label}_minute">{dropdownlist:top.minutes,field_value_minute}</select>
                                                        </div>
                                                        <!-- ELSEIF field_type = "datetime" -->
                                                          <div class="form-inline"> 
                                                            <select class="form-control select" name="{field_label}_month">{dropdownlist:top.months,field_value_month}</select>
                                                            <select class="form-control select" name="{field_label}_day">{dropdownlist:top.days,field_value_day}</select>
                                                            <select class="form-control select" name="{field_label}_year">{dropdownlist:years,field_value_year}</select> @
                                                            <select class="form-control select" name="{field_label}_hour">{dropdownlist:top.hours,field_value_hour}</select>
                                                            <select class="form-control select" name="{field_label}_minute">{dropdownlist:top.minutes,field_value_minute}</select>
                                                    </div>
                                                    <!-- ENDIF -->
                                                 
                                                    </div>
                                                </div>
                                            <!-- END profile_fields -->

merci de votre aide.

un tutorial serais le bienvenue

Anonyme

26 décembre 2017 à 18:17:18

Hello

Une petite recherche google avec les mots clés "form step" et voici le premier lien trouvé:

form step by step.

michael10fr

26 décembre 2017 à 22:52:00

bonjour beorn,

j'etait justement sur ce lien mais j'avoue ne pas comprendre comment l'integrer a ce code qui n'a rien avoir puisse qu'il est dynamique?

une idée?

LeChevalierD_Or

26 décembre 2017 à 23:19:00

Bah d'après ma bref navigation tu devrais créer une page html pour chaque step (étape) ...

Si ce n'est pas ça préviens moi.

-
Edité par LeChevalierD_Or 26 décembre 2017 à 23:19:33

Je suis quelqu’un de patient et de très stratégique . Je suis Militaire opérateur tourelle chars Leclerc ! !

Disturb4d

27 décembre 2017 à 1:49:22

Mouais, pour une inscription j'aime pas trop l'idée de faire se balader la data de page en page, le mieux serait de charger le gros formulaire en entier, mais de ne l'afficher que bout par bout en utilisant du javascript.

Tu coupes ton gros formulaires en <section> ou en <div> auxquels tu donnes un id, et tu utilises un petit javascript pour que, quand l'utilisateur appuie sur un bouton du genre "Suite" de la section N, tu caches la section N et tu affiches la section N+1 en modifiant la propriété display dans le CSS.

Maxime EYCHENNE

michael10fr

27 décembre 2017 à 7:17:51

Disturb4d whouaa çà à l'air super ta maniére de faire tu as un exemple de code que je peut utiliser car en faite quand on regarde mon code plus on s'aperçoit que les donner son charger dans une boucle à partir de la bdd mais je n'arrive pas à voir comment je peut styliser ou couper c'est page puisse que le code php qu'on voie montre seulement un code de bouton sans valeur ,un champ sans valeur , radio sans valeur etcetc..

c'est pour çà que j'arrive pas à le styliser via javascript on voie le code sans donner à mon avis c'est quand on execute ce fichier php quil va generere la page avec l'exemple des element qui compose le formulaire..si je peut avoir de l'aide car je suis débutant dans le php et javascript.

merci

En reagrdant le code ce matin il y a un truc que je n'arrive pas a comprendre cette façon de coder , elle reviens souvent su beaucoup de script que je met en place si quelqu'un peut m'expliquer comment ce la fonction , parce que la je suis larguer .. si j'arrive a comprend ce genre de code cela va m'ouvrir l'esprit a comprend pas mal de chose dans ce genre de script....

voila le developper de l'application met beaucoup de code entre accolade exemple:

{checkboxes:parent.field_label,rowcnt,parent.field_value,inner_key}&nbsp;{inner_value}

si quelqu'un peut m'expliquer ce mecanisme , c'est quoi des variable je support mais comment on peut voie ce qu'il y a dedans ?? echo ? var_dump?? quel est la methode pour comprend ce code je suis larguer la...

sur OC il en parle pas?

-
Edité par michael10fr 27 décembre 2017 à 7:50:31

michael10fr

28 décembre 2017 à 8:13:26

UP personne ne peut me dire comment couper des champs virtuel? le code ne vous inspire pas? je me demande c'est quoi c'est accolade par tout??

LeChevalierD_Or

8 janvier 2018 à 20:14:07

Apprend le JavaScript.

C'est possible en Javascript.

Je suis quelqu’un de patient et de très stratégique . Je suis Militaire opérateur tourelle chars Leclerc ! !

michael10fr

11 janvier 2018 à 23:03:54

oui j'ai regarder avec le javascript mais pas réussi à le faire tout aide sera cool

Lucky13

12 janvier 2018 à 0:41:44

Hello,

Tu pourrais faire un truc de ce genre : https://jsfiddle.net/da1krrc9/

Attention codé à l'arrache, non optimisé, mais le principe est la.

On grise le bouton "Next", une fois le ou les champs "input text" vérifiés, on le rend accessible (disabled= "false") . Il est alors cliquable. et ainsi de suite.

Dans les faits, soit on lance un requête Ajax qui vérifie la correspondance côté serveur pour dégriser le bouton, soit on fait une vérification de toutes les données à la fin.

Perso j'utilise Ajax, plus pratique pour l'utilisateur. Si le pseudo est déjà pris alors on l'informe directement et sans recharger la page, et puis cela évite de tout remplir pour rien...

Exemple que j'avais fais pour un projet :

par la suite tu peux revenir en arrière aussi, et ainsi de suite.

-
Edité par Lucky13 12 janvier 2018 à 0:51:13

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

michael10fr

12 janvier 2018 à 13:30:46

merci Luchy beau projet

jessaye de faire çà...

comme je l'ai pas coder çà va etre pas simple..

Lucky13

12 janvier 2018 à 13:51:04

C'est comme pour tous il faut s'y mettre, même si le JS est un langage particulier, on aime ou on déteste. Mais c'est indispensable de nos jours, à moins de passer par un CMS.

Sinon ne te casse pas la tête, fais un formulaire unique qui regroupe toutes les infos à donner et voilà. S'il est bien stylisé ça peut tout aussi bien le faire .

Le plus important est la vérification côté serveur, le reste n'est que tu bonus...

ps: perso je préfère l'ancien cours (non proposé depuis le site !? ) pour commencer car il est complet :

-> https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript

Puis lire les cours plus récents qui sont disponibles...

-
Edité par Lucky13 12 janvier 2018 à 13:55:01

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS