Création d'un formulaire

[neon]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Internet Explorer, Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://animauxfantastiques.forumactif.com

Description du problème

Bonsoir tout le monde,

Je sollicite âprement votre aide dans la création d'un formulaire. J'ai essayé de faire quelque chose mais c'est une catastrophe. Je n'arrive pas du tout au visuel recherché, j'ai des erreurs de code monstrueuse (c'est juste un massacre) et le formulaire n'est même pas retourné (forum F6). J'ai pourtant essayé de suivre le tutoriel d'Ea mais rien n'y fait, c'est encore pire !

En gros, je suis nul et mon niveau de codage approche le 0 absolu.

Donc j'ai mis deux images, une avec le schéma avec le résultat attendu et une autre avec le design recherché.

J'aimerai que les questions n'aillent pas plus loin qu'un certain endroit (limité par une ligne). Une fois cette ligne atteinte, la suite de la question sera à la ligne. Les cadres doivent commencer tous sur la même ligne (question d'esthétique) et sont tous de même tailles. J'aimerai que les zones de texte soient assez grandes pour y mettre un maximum de chose, quitte à l'agrandir en tirant sur le côté droit en bas.

La question 6 sera un menu déroulant à 3 options.

D'avance merci à ceux qui essaieront de m'aider car je me suis torturer pendant trois heures pour n'avoir aucun résultat.

Amicalement,
Néon

[neon]

Bonjour tout le monde,

La demande est toujours d'actualité !
D'avance merci à la personne généreuse qui m'aidera.

Amicalement,
Néon

[Invité]

Pour tout te dire, il faudrait que tu uses des classes CSS en plus de l'HTML pour le formulaire.

Une fois que tu as rajouté tes classes dans le CSS, prenons par exemple la balise <label>, dans le css tu mettras .label si tu veux que tous les champs du forum soit avec cette classe ou tu mettras .labelclasse ou .label-classe et tu peux changer le mot à la fin, cependant, si tu as mis une classe seulement pour un type de label qui n'existe pas, il faut le créer ou du moins rechercher le CSS poui lui attribuer la classe donc dans l(HTML et dans le <label> que tu veux, tu rajoute class="label-classe" ou ce que tu as mis.

Exemple avec un CSS :

Code:

.label-form {
    border-radius: 5px;
    background-color: #2d2d2d;
    border: 0!important;
    color: white;
    padding: 10px 15px;
}

Je tiens à préciser que ce code est à la base pour mon bouton envoyer

Code:

.input-form-submit[type="submit"] {
    border-radius: 5px;
    background-color: #2d2d2d;
    border: 0!important;
    color: white;
    padding: 10px 15px;
    transition: 200ms;
}

mais que je l'ai transformé en label, aussi, il est préférable de changer les <input> au lieu des <label> et de mettre dans le CSS [type="text"] (ou autre comme radio pour un choix)

Si tu as d'autres questions ou que tu souhaites un exemple, je peux toujours te montrer un de mes formulaires et te montrer le code ainsi que le CSS pour que tu comprennes, j'espère un peu mieux

Très Cordialement,

julie10902

[neon]

Bonjour Julie,

J'étais pommé mais là je le suis encore plus ! (Oui, je ne suis pas un informaticien de renom)
Je ne suis pas contre un exemple pour mieux visualiser le tout.

Un grand merci en tout cas pour cette première réponse.

Amicalement,
Néon

[Ajesto]

Bonjour,

Je vais te donner un exemple :

Tu souhaite faire une partie ou un membre (par exemple) doit écrire son prénom, tu va faire

Code:

<input type="text">

sauf que en plus, tu va rajouter un class="zonetexte" (que tu pourras renommer selon tes soins) ce qui donne

Code:

<input type="text" class="zonetexte">

Ensuite, en bas de ta page html, tu pourras rajouter du CSS entre ces deux balise que tu doit créer toi même : <style> et </style>.
Entre ces deux balises, tu pourras par exemple faire un truc du genre :

Code:

input.zonetexte {
  ton: code;
}

Oublie pas que tu peut rajouter des classes sur TOUT les objets HTML, donc tu peut vraiment avoir un bon résultat final ^^

EDIT : Oublie pas dans ton CSS, pour pas t'emeler les pinceau de faire genre objets.class, pour les liens, par exemple

Code:

a.monlien {
  ton: code;
}

[neon]

Bonjour à tous,

J'essaie tant bien que mal de comprendre ce que vous me dites mais là je suis perdu au plus possible.
Pour rappel, je n'ai aucune notion dans ce domaine :/

Amicalement,
Néon

[neon]

Bonjour,

Je remonte le sujet pour avoir toujours cette petite aide.

Amicalement,
Néon

[no_way]

Bonjour, un tutoriel a été écrit récemment pour permettre la création de formulaire simplifiée, ainsi vous n'aurez pas à coder la partie JavaScript pour le formatage et l'envoi.

Concentrez-vous sur la structure ( HTML ) pour le moment, la stylisation ( CSS ) se fera après.

Indiquez-nous la phrase que devra envoyer votre formulaire afin de nous aider à vous aider

[neon]

Bonjour No_Way,

Je vais essayer de mettre quelque chose !
Pour rappel, je suis novice et j'ai certainement fait des choses horribles dans ce code.

Amicalement,
Néon

Code:

    <form data-mode="6" data-arg="ARGUMENT" data-subject="Présentation de (Pseudo du membre)" action="#" id="ID_DU_FORMULAIRE">
Fiche de présentation de (PSEUDO DU MEMBRE)

Afin de vous accueillir comme il se doit dans le New-York des années 1920, merci de remplir cette fiche de présentation afin de mieux vous connaître. Ces quelques questions vous permettrons de vous présenter à la communauté afin de connaître à la fois votre ressenti par rapport à la saga "Les Animaux Fantastiques" mais aussi votre ressenti à votre arrivée sur le forum, le tout dans le but de développer au mieux cette communauté.

-------

La personne que vous êtes tous les jours <br />

<label>Quel est votre âge ? :<input type="number" name="age" ></label><br />
<label>Vous voilà à New-York mais comment êtes-vous arriver ici ? :
<input type="text" name="choix" >
<input type="radio" name="choix" value="ami" checked>Via une connaissance</label>
<label><input type="radio" name="choix" value="internet">En me promenant sur internet</label><br />
</label><br />
<label>Pourquoi vous êtes-vous inscrit sur notre (magnifique) forum RPG ?  :<input type="text"></label><br />
<label>Quelle est votre première impression du forum ?  :<input type="text"></label><br />
<br />
<br />
Le joueur qui est en vous
<br />
<label>Quel est votre nom complet de sorcier ?  :<input type="text"></label><br />
<label>Quel est votre intérêt pour les Animaux Fantastiques ?  :<input type="text"></label><br />
<label>Quel est votre personnage préféré jusqu'à présent ?  :<input type="text"></label><br />
<label>Qu'appréciez-vous le plus dans cette nouvelle saga de JK Rowling ?  :<input type="text"></label><br />

<input type="submit" value="Envoyer" />
    <input type="submit" value="Révéler ma présentation" />
    <textarea class="message">
    VOTRE MESSAGE
    </textarea>
    </form>
    <script type="text/javascript" src="http://fa.codexo.org/faForm.js"></script>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded",function(e){
    var mon_formulaire=new faForm("ID_DU_FORMULAIRE");
    });
    </script>

- Pour data-mode : Je cherche à créer un nouveau sujet dans ce forum : http://animauxfantastiques.forumactif.com/f6-presentations-des-nouveaux ! Donc si je comprends bien, le F6 qui m'intéresse. Donc je mets "6" qui est la valeur numérique du forum.
- Pour data-arg : Dois-je modifier quelque chose ? Si oui quoi ? Quel est l'argument ?
- Pour data-subject : C'est le titre du sujet si je comprends bien du coup, comment faire pour que le pseudo du joueur se mette automatiquement dans le titre du sujet ?
- ID : J'ai pas compris l'utilité de cette variable

- Fiche de présentation de (PSEUDO DU MEMBRE), La personne que vous êtes tous les jours, le joueur qui est en vous : J'imagine que nous pouvons centrer avec couleur, etc en CSS ?

[no_way]

Comme signalé dans le tuto, data-mode doit définir quel mode d'envoi du formulaire parmi les choix suivants:
-mp
-reponse
-nouveau_sujet
Pour vous ce sera donc nouveau_sujet

Pour data_arg c'est là que vous mettez le 6 puisque c'est lui l'argument dans votre cas

Pour data_subject vous avez bien compris, le titre doit faire au moins 10 caractères, il est tout à fait possible d'injecter le pseudo du joueur avec le texte suivant par exemple:

Code:

Présentation de %_{PSEUDO_JOUEUR}

Relisez attentivement le point 2.2 du tutoriel, vous comprendrez alors que certains de vos input n'ont pas d'attribut name

Pour l'id il s'agit d'un nom identifiant le formulaire, ce dernier ne doit contenir que les caractères non accentués:
a-z A-Z 0-9 _-
Ainsi si vous souhaitez identifier votre formulaire mettez pour id:

Code:

presentation_du_joueur

Fiche de présentation de (PSEUDO DU MEMBRE), La personne que vous êtes tous les jours, le joueur qui est en vous : J'imagine que nous pouvons centrer avec couleur, etc en CSS ?

Je le ferai pour vous ça, c'est un peu plus compliqué.

Le message que doit envoyer le formulaire doit se trouver dans le textarea avec pour classe message, en clair, vous devez remplacer:

Code:

VOTRE MESSAGE

par le message que vous souhaitez envoyer.

Je vous laisse essayer de corriger par vous-même dans un premier temps, ça permet d'apprendre en même temps et si vous n'y arrivez pas, je ferai le formulaire afin que vous ne soyez pas bloqué.

[neon]

Bonsoir No_Way,

Merci pour votre réponse rapide.

Voilà ce que je peux proposer suite à vos indications :

Code:

        <form data-mode="nouveau_sujet" data-arg="6" data-subject="Présentation de %_{PSEUDO_JOUEUR}" action="#" id="presentation_du_joueur">
    Fiche de présentation de (PSEUDO DU MEMBRE)
   
    Afin de vous accueillir comme il se doit dans le New-York des années 1920, merci de remplir cette fiche de présentation afin de mieux vous connaître. Ces quelques questions vous permettrons de vous présenter à la communauté afin de connaître à la fois votre ressenti par rapport à la saga "Les Animaux Fantastiques" mais aussi votre ressenti à votre arrivée sur le forum, le tout dans le but de développer au mieux cette communauté.
   
    -------
   
    La personne que vous êtes tous les jours <br />
   
    <label>Quel est votre âge ? :<input type="number" name="age" ></label><br />
    <label>Vous voilà à New-York mais comment êtes-vous arriver ici ? :
    <input type="checkbox" name="text" value="Via une connaissance" data-join=" & ">
    <input type="checkbox" name="text" value="Tout simplement sur internet">
    <br />
    <label>Pourquoi vous êtes-vous inscrit sur notre (magnifique) forum RPG ?  :<input type="text"></label><br />
    <label>Quelle est votre première impression du forum ?  :<input type="text"></label><br />
    <br />
    <br />
    Le joueur qui est en vous
    <br />
    <label>Quel est votre nom complet de sorcier ?  :<input type="text"></label><br />
    <label>Quel est votre intérêt pour les Animaux Fantastiques ?  :<input type="text"></label><br />
    <label>Quel est votre personnage préféré jusqu'à présent ?  :<input type="text"></label><br />
    <label>Qu'appréciez-vous le plus dans cette nouvelle saga de JK Rowling ?  :<input type="text"></label><br />
   
        <input type="submit" value="Envoyer" />
        <textarea class="message">
        Me révéler aux autres
        </textarea>
        </form>
        <script type="text/javascript" src="http://fa.codexo.org/faForm.js"></script>
        <script type="text/javascript">
        document.addEventListener("DOMContentLoaded",function(e){
        var mon_formulaire=new faForm("ID_DU_FORMULAIRE");
        });
        </script>

Amicalement,
Néon

[neon]

Bonjour,

Je remonte juste le message pour signaler ma mise à jour !

Amicalement,
Néon

[no_way]

Pas de souci je viens de faire un premier essai.

Créez une nouvelle page html :

Voulez-vous utiliser le haut et le bas de page de votre forum ? OUI

Utiliser cette page en tant que page d'accueil ? NON

Contenu de la page:

Code:

<form data-mode="nouveau_sujet" data-arg="6" data-subject="Présentation de %_{PSEUDO_JOUEUR}" action="#" id="presentation_du_joueur">
<ul class="faFormTable fullWidth">
<li><div><img src="http://r29.imgfast.net/users/2913/10/00/00/avatars/27899-34.jpg" alt="" /></div><div><p class="description"></p></div></li>
<li><div>Nom de votre personnage</div><div><input type="text" name="pseudo_joueur" class="fullWidth"></div></li>
<li><div>Question 1</div><div><textarea name="r1" class="fullWidth"></textarea></div></li>
<li><div>Question 2</div><div><textarea name="r2" class="fullWidth"></textarea></div></li>
<li><div>Question 3</div><div><textarea name="r3" class="fullWidth"></textarea></div></li>
<li><div>Question 4</div><div><textarea name="r4" class="fullWidth"></textarea></div></li>
<li><div>Question 5</div><div><textarea name="r5" class="fullWidth"></textarea></div></li>
<li><div>Question 6</div><div><select name="r6" class="fullWidth"><option value="reponse_1">reponse_1</option><option value="reponse_2">reponse_2</option><option value="reponse_3">reponse_3</option></select></div></li>
</ul>
<textarea class="message">Réponse à la question 1:%_{R1}
Réponse à la question 2:%_{R2}
Réponse à la question 3:%_{R3}
Réponse à la question 4:%_{R4}
Réponse à la question 5:%_{R5}
Réponse à la question 6:%_{R6}
</textarea>
<input type="submit" value="Envoyer le formulaire" class="fullWidth">
</form>
<script type="text/javascript" src="http://fa.codexo.org/faForm.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(e){
var mon_formulaire=new faForm("presentation_du_joueur");
});
</script>

Enfin ajoutez le code CSS suivant:

Code:

.faFormTable,.faFormTable *{
box-sizing:border-box;
margin:0;
padding:0;
}
.faFormTable{
display:table;
list-style:none;
}
.faFormTable>li{
display:table-row;
width:100%;
}
.faFormTable>li:nth-of-type(even){
background:gray;
}
.faFormTable>li>div{
display:table-cell;
vertical-align:top;
}
.fullWidth{
box-sizing:border-box;
width:100%;
}

À vous par la suite de modifier les questions et les attributs value des balises option

[neon]

Bonjour No_Way,

Déjà un tout grand merci pour votre patience et pour votre aide !
J'ai bien relu et mon côté novice fait grandement surface car je re-sollicite votre aide.

J'ai lu le lien de page que vous m'avez donné. J'ai bien trouvé la partie consacrée au HTML (bonne nouvelle). Mais des questions subsistes.

1. Dois-je insérer le code tout bêtement ou l'adapter avec : Rappel : Comment structurer une page HTML ? trouvable sur le lien fourni ?

Le code adapté avec mes questions (j'en ai ajoutées et modifiées l'ordre)

Code:

<form data-mode="nouveau_sujet" data-arg="6" data-subject="Présentation de %_{PSEUDO_JOUEUR}" action="#" id="presentation_du_joueur">
    <ul class="faFormTable fullWidth">
    <li><div><img src="http://r29.imgfast.net/users/2913/10/00/00/avatars/27899-34.jpg" alt="" /></div><div><p class="description"></p></div></li>
    <li><div>Nom de votre personnage</div><div><input type="text" name="pseudo_joueur" class="fullWidth"></div></li>
 <li><div>Quel est votre âge ? :</div><div><textarea name="r1" class=« fullWidth"></textarea></div></li>
<li><div>Vous voilà à New-York mais comment êtes-vous arriver ici ? :</div><div><select name="r2" class="fullWidth"><option value="reponse_1">Via une connaissance</option><option value="reponse_2">Tout simplement sur internet</option></select></div></li>
<li><div>Pourquoi vous êtes-vous inscrit sur notre (magnifique) forum RPG ?</div><div><textarea name="r3" class="fullWidth"></textarea></div></li>
<li><div>Quelle est votre première impression du forum ?  :</div><div><textarea name="r4" class="fullWidth"></textarea></div></li>
<li><div>Quel est votre nom complet de sorcier ?  :</div><div><textarea name="r5" class="fullWidth"></textarea></div></li>
<li><div>Quel est votre intérêt pour les Animaux Fantastiques ?  :</div><div><textarea name="r6" class=« fullWidth"></textarea></div></li>
<li><div>Quel est votre personnage préféré jusqu'à présent ?  :</div><div><textarea name="r7" class=« fullWidth"></textarea></div></li>
<li><div>Qu'appréciez-vous le plus dans cette nouvelle saga de JK Rowling ?  :</div><div><textarea name="r8" class="fullWidth"></textarea></div></li>
    </ul>
    <textarea class="message">Réponse à la question 1:%_{R1}
    Réponse à la question 2:%_{R2}
    Réponse à la question 3:%_{R3}
    Réponse à la question 4:%_{R4}
    Réponse à la question 5:%_{R5}
    Réponse à la question 6:%_{R6}
    Réponse à la question 7:%_{R7}
    Réponse à la question 8:%_{R8}
    </textarea>
    <input type="submit" value="Envoyer le formulaire" class="fullWidth">
    </form>
    <script type="text/javascript" src="http://fa.codexo.org/faForm.js"></script>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded",function(e){
    var mon_formulaire=new faForm("presentation_du_joueur");
    });
    </script>

2. Le CSS doit-il être dans le code ? Sous la balise style ou faut-il que je passe par Affichage, couleur, feuille de style CSS ?

Code:

<style> Styles CSS de la page </style>

3. Je viens de tester et j'ai du m'embrouiller quelque part car quand je clique sur "nouveau", j'ai une zone de texte simple.


Merci pour votre patience et votre future aide.

Amicalement,
Néon

[no_way]

Aucun souci !
Le code HTML doit être inséré bêtement dans la mesure où vous utilisez le haut et le bas de votre forum

Le code CSS doit être placé dans:
PA->Affichage->couleur->feuille de style CSS

[neon]

Bonjour No_Way,

Quand je clique sur nouveau, rien ne se passe.
Une idée ?

Amicalement,
Néon

[no_way]

Pourquoi cliquez vous sur nouveau ?

[neon]

Bonjour,

Tout fonctionne correctement avec le dernier code JS !
Je verrouille cette demande et remercie énormément No_Way pour son aide précieuse.

Amicalement,
Néon