Créer un formulaire pour les présentations des membres

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Créer un formulaire pour les présentations des membres

Message par RiderFx3 le Mer 4 Fév 2015 - 9:46

EDIT : TUTORIEL COMPLET EN FIN DE TOPIC !

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.boomdirect-avis-forum.com

Description du problème

Bonjour,

Sur mon forum, la présentation des membres est obligatoire afin qu'ils puissent poster ailleurs.
J'ai instauré des règles de présentations basiques sous forme de liste :

Nom :
Age :
Lieu :
Comment-avez vous connu le forum ?

Etc...

Les règles sont épinglées, et malgré ça, 80% des membres qui se présentent ne les respectent pas.

J'aimerais pouvoir intégrer ce texte dans le post, de manière à ce que dès qu'ils cliquent sur "Poster un sujet" pour créer leur présentation, les bases soient dejà là, et qu'ils n'aient plus qu'a remplir.

Ca evitera qu'ils oublie certaines infos etc, et que je les reprenne ou leur demande de compléter leur présentation. Le problème étant que même si leur présentation est mauvaise, ils peuvent quand même poster ailleurs.


Dernière édition par RiderFx3 le Jeu 5 Fév 2015 - 19:06, édité 3 fois

RiderFx3
Nouveau membre

Messages : 16
Inscrit(e) le : 21/01/2015

http://www.boomdirect-avis-forum.com
RiderFx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par histoires-de-romans le Mer 4 Fév 2015 - 17:54


histoires-de-romans
***

Féminin
Messages : 156
Inscrit(e) le : 11/06/2009

http://communaute-hdromans.forumactif.com
histoires-de-romans a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par RiderFx3 le Jeu 5 Fév 2015 - 10:52

Merci pour l'info, j'ai commencé à regarder un peu sur tous ces topics + sur le net, voici ce que j'ai compris :

1 - création du formulaire HTML sans lien avec le forum (ça c'est ok, faudra juste peaufiner le design)
2 - lui donner la possibilité d'envoyer les infos au forum, et générer le message de la bonne façon en javascript
3 - lier le formulaire HTML au bouton "NOUVEAU SUJET" du forum

Voilà mon code HTML pour le formulaire :
Code:
<HTML>
<BODY>
<link rel="stylesheet" href="Form-pres.css" type="text/css" />
<form action="/formulaire-de-presentation" method="post">
<script>
<input type="hidden" name="subject" id="titre" value="" />
form.titre.value = "Présentation de " + form.nom.value;
</script>

<td>Prénom<br />
<input type="text" id="nom" value="" /></td><br>

<p><td>Âge<br />
<input type="text" id="age" value="" /></td><br>

<p><td>Lieu de résidence<br />
<input type="text" id="lieu" value="" /></td>

<p><td>Comment avez-vous connu BoomDirect ?<br />
(Interdit de citer un autre MLM)<br />
<input type="text" id="connu-boom" value="" /></td><br>

<p><td>Comment avez-vous connu le forum ?<br />
<input type="text" id="connu-forum" value="" /></td>

<p><td>Message perso, stratégie, objectifs, hobbies :<br />
<textarea id="message"></textarea>

<div class="button">
<button type="submit">Envoyer votre présentation</button>
</div>


</form>
</BODY>
</HTML>

Voilà mon CSS (il sert juste à gérer les tailles des cases etc, mais n'a pas encore le look du forum)
Code:
form {
    /* Pour le centrer dans la page */
    margin: 0 auto;
    width: 455px;
    /* Pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
    display: inline-block;
    width: 90px;
    text-align: right;
}

input, textarea {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
      Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;

    /* Pour donner la même dimension à tous les champs textuels */
    width: 450px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}
input:focus, textarea:focus {
    /* Afin de rehausser les éléments actifs */
    border-color: #000;
}

textarea {
    /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    vertical-align: top;

    /* Pour donner assez d'espace pour entrer du texte */
    height: 5em;
}


J'ai aucune connaissance en HTML et CSS, pour créer ça, j'ai utilisé ce tuto :
https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML

Si un développeur passe par là et souhaite corriger mon code c'est avec plaisir.

Maintenant pour le suite ça parait plus compliqué. Je vais m'y pencher.

RiderFx3
Nouveau membre

Messages : 16
Inscrit(e) le : 21/01/2015

http://www.boomdirect-avis-forum.com
RiderFx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par RiderFx3 le Jeu 5 Fév 2015 - 12:46

Alors je continue d'avancer, mais il y a deux ou trois choses qui bloquent,
Voici le code complet à l'heure actuel :

Code:
<head>
<script type="text/javascript">
function envoiMessage(form)
{
  // Créer un message à partir des informations fournies
  var txt_message = "[b]Nom :[/b] " + form.nom.value + '\n'
+ "[b]Âge :[/b] " + form.age.value + '\n'
+ "[b]Lieu de résidence :[/b] " + form.lieu.value + '\n'
+ "[b]Comment avez-vous connu BoomDirect ? :[/b] " + form.connu-boom.value + '\n'
+ "[b]Comment avez-vous connu le forum ? :[/b] " + form.connu-forum.value + '\n'
+ "[b]Message personnel :[/b] " + form.perso.value + '\n'          
 
  // Titre automatique
  form.subject.value = "Présentation de" + form.pseudo.value; //Construit le titre avec le pseudo du membre
  form.message.value = txt_message; // Insère le texte construit dans le champ caché "message" du formulaire
}
</script>



<form action="http://boomdirect-avis.forumactif.org/posting.forum" method="post" name="post" enctype="multipart/form-data">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" id="titre" value =""

<p><td>Pseudo<br />
<input type="text" id="pseudo" value="" /></td>

<p><td>Prénom<br />
<input type="text" id="nom" value="" /></td>

<p><td>Âge<br />
<input type="text" id="age" value="" /></td>

<p><td>Lieu de résidence<br />
<input type="text" id="lieu" value="" /></td>

<p><td>Comment avez-vous connu BoomDirect ?<br />
(Interdit de citer un autre MLM)<br />
<input type="text" id="connu-boom" value="" /></td>

<p><td>Comment avez-vous connu le forum ?<br />
<input type="text" id="connu-forum" value="" /></td>

<p><td>Message perso, stratégie, objectifs, hobbies :<br />
<textarea id="perso"></textarea>

<input type="submit" name="post" value="Envoyer" />
</form>

<!-- Inclue le CSS directement dans le code HTML -->
<style type="text/css">
form {
    /* Pour le centrer dans la page */
    margin: 0 auto;
    width: 455px;
    /* Pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
    display: inline-block;
    width: 90px;
    text-align: right;
}

input, textarea {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
      Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;

    /* Pour donner la même dimension à tous les champs textuels */
    width: 450px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}
input:focus, textarea:focus {
    /* Afin de rehausser les éléments actifs */
    border-color: #000;
}

textarea {
    /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    vertical-align: top;

    /* Pour donner assez d'espace pour entrer du texte */
    height: 5em;
}
</style>

<head>

J'ai inclus le CSS directement dans la page HTML.

Voici ce que j'ai modifié :

Le Javascript pour créer le titre et le message automatiquement :
Code:
<script type="text/javascript">
function envoiMessage(form)
{
  // Créer un message à partir des informations fournies
  var txt_message = "[b]Nom :[/b] " + form.nom.value + '\n'
+ "[b]Âge :[/b] " + form.age.value + '\n'
+ "[b]Lieu de résidence :[/b] " + form.lieu.value + '\n'
+ "[b]Comment avez-vous connu BoomDirect ? :[/b] " + form.connu-boom.value + '\n'
+ "[b]Comment avez-vous connu le forum ? :[/b] " + form.connu-forum.value + '\n'
+ "[b]Message personnel :[/b] " + form.perso.value + '\n'          
 
  // Titre automatique
  form.subject.value = "Présentation de" + form.pseudo.value; //Construit le titre avec le pseudo du membre
  form.message.value = txt_message; // Insère le texte construit dans le champ caché "message" du formulaire
}
</script>

Ca ne fonctionne pas, ça me génère l'erreur :
Vous devez préciser un titre avant de pouvoir envoyer votre message.
Vous devez entrer un message avant de poster.


J'ai ensuite configuré l'adresse de mon forum et de ma page de post, ainsi que des champs cachés :
Code:
<form action="http://boomdirect-avis.forumactif.org/posting.forum" method="post" name="post" enctype="multipart/form-data">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" id="titre" value =""

Ca redirige vers la bonne page, malgré l'erreur de titre et message manquant.


voici ensuite mes champs à remplir :
Code:

<p><td>Pseudo<br />
<input type="text" id="pseudo" value="" /></td>

<p><td>Prénom<br />
<input type="text" id="nom" value="" /></td>

<p><td>Âge<br />
<input type="text" id="age" value="" /></td>

<p><td>Lieu de résidence<br />
<input type="text" id="lieu" value="" /></td>

<p><td>Comment avez-vous connu BoomDirect ?<br />
(Interdit de citer un autre MLM)<br />
<input type="text" id="connu-boom" value="" /></td>

<p><td>Comment avez-vous connu le forum ?<br />
<input type="text" id="connu-forum" value="" /></td>

<p><td>Message perso, stratégie, objectifs, hobbies :<br />
<textarea id="perso"></textarea>

<input type="submit" name="post" value="Envoyer" />
</form>

Je touche au but, j'aurais besoin d'un dernier coup de pouce pour finaliser, et pouvoir décorer ma page HTML aux couleurs du forum.

Je ne sais pas comment lier le bouton "nouveau sujet" à ma page HTML par contre.

Merci.

RiderFx3
Nouveau membre

Messages : 16
Inscrit(e) le : 21/01/2015

http://www.boomdirect-avis-forum.com
RiderFx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par R-max le Jeu 5 Fév 2015 - 13:01

bonjour
le bouton nouveau sujet s'affiche avec se code en phpbb2

Code:
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
celui pour repondre avec celui ci
Code:
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0"

l'ensemble donne ceci
Code:
<td align="left" valign="middle" nowrap="nowrap">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>

si cela peut te servir !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

R-max
# Tropactif #

Masculin
Messages : 1521
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par RiderFx3 le Jeu 5 Fév 2015 - 13:06

Bonjour et merci pour votre réponse, mais on s'est mal compris.

En fait je ne cherche pas à intégrer ces boutons sur ma page, je veux juste que dans mon forum "Présentations" quand un nouveau membre clique sur "Nouveau Sujet" il arrive sur mon formulaire HTML. Smile

RiderFx3
Nouveau membre

Messages : 16
Inscrit(e) le : 21/01/2015

http://www.boomdirect-avis-forum.com
RiderFx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par R-max le Jeu 5 Fév 2015 - 13:18

a oui c'est pas du tout la même chose ..
juste le boutons dans les presentations ou sur tous les sujet du forum
car ce boutons et liée avec toutes les nouveaux messages ..
bon je réfléchis ; mais la il va vous falloir un expert scratch

R-max
# Tropactif #

Masculin
Messages : 1521
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par Nikkyzon le Jeu 5 Fév 2015 - 13:21

Il suffit de créer une catégorie de présentation* puis un sous-forum en mettant dans le titre :

<a href="lien de redirection">Je veux me présenter</a>

* Catégorie de présentation avec des droits restreints :
Les membres ne peuvent pas poster de nouveaux msg (pour qu'ils ne se trompent pas), mais peuvent répondre au présentations des autre membres.

J'ai mis ça temporairement, le temps que je trouve ce que toi aussi tu cherches x)

Nikkyzon
**

Masculin
Messages : 73
Inscrit(e) le : 04/02/2011

http://forumdetest.meilleurforum.net
Nikkyzon a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par RiderFx3 le Jeu 5 Fév 2015 - 13:24

Merci,
à la limite ce n'est pas le plus urgent car mon formulaire ne rempli toujours pas automatiquement ni le titre, ni le message !

Si quelqu'un peut me dire pourquoi le code ne marche pas ce serait le top !

RiderFx3
Nouveau membre

Messages : 16
Inscrit(e) le : 21/01/2015

http://www.boomdirect-avis-forum.com
RiderFx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par Nikkyzon le Jeu 5 Fév 2015 - 13:34

Toi tu as mis http://boomdirect-avis.forumactif.org/posting.forum
posting.forum poste le message dans quelle catégorie ?
essaies celle-là post?f=3&mode=newtopic.

Nikkyzon
**

Masculin
Messages : 73
Inscrit(e) le : 04/02/2011

http://forumdetest.meilleurforum.net
Nikkyzon a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par R-max le Jeu 5 Fév 2015 - 13:35

une petite remarque , dans ce code que tu a posté il manque la fin la valeur n'est pas renseigné et la balise n'est pas fermé
Code:
<form action="http://boomdirect-avis.forumactif.org/posting.forum" method="post" name="post" enctype="multipart/form-data">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" id="titre" value =""

R-max
# Tropactif #

Masculin
Messages : 1521
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par RiderFx3 le Jeu 5 Fév 2015 - 13:36

Avec mon code, le formulaire poste bien le message dans la bonne catégorie, car il est stipulé dans le code :

Code:
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->

Mon problème est qu'il m'envoie un message et un titre vide ...

RiderFx3
Nouveau membre

Messages : 16
Inscrit(e) le : 21/01/2015

http://www.boomdirect-avis-forum.com
RiderFx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par Nikkyzon le Jeu 5 Fév 2015 - 13:42

Je vais c/c ton formulaire sur mon fofo pour test les différentes solutions que j'ai en tête. à toute


Dernière édition par Nikkyzon le Jeu 5 Fév 2015 - 13:44, édité 1 fois

Nikkyzon
**

Masculin
Messages : 73
Inscrit(e) le : 04/02/2011

http://forumdetest.meilleurforum.net
Nikkyzon a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par R-max le Jeu 5 Fév 2015 - 13:43

@RiderFx3 a écrit:Avec mon code, le formulaire poste bien le message dans la bonne catégorie, car il est stipulé dans le code :

Code:
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->

Mon problème est qu'il m'envoie un message et un titre vide ...
tu na pas lu mon message au dessus , il manque une partie du code (titre) la fin

R-max
# Tropactif #

Masculin
Messages : 1521
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par RiderFx3 le Jeu 5 Fév 2015 - 13:46

Voici mon code maintenant, et ça ne renvoie toujours pas ni le message ni le titre :
Code:
<script type="text/javascript">
function envoiMessage(form)
{
  // Créer un message à partir des informations fournies
  var txt_message = "[b]Nom :[/b] " + form.nom.value + '\n'
              + "[b]Âge :[/b] " + form.age.value + '\n'
              + "[b]Lieu de résidence :[/b] " + form.lieu.value + '\n'
              + "[b]Comment avez-vous connu BoomDirect ? :[/b] " + form.connu-boom.value + '\n'
           + "[b]Comment avez-vous connu le forum ? :[/b] " + form.connu-forum.value + '\n'
              + "[b]Message personnel :[/b] " + form.perso.value + '\n'          
 
  // Titre automatique
  form.subject.value = "Présentation de" + form.pseudo.value; //Construit le titre avec le pseudo du membre
  form.message.value = txt_message; // Insère le texte construit dans le champ caché "message" du formulaire
}
</script>

<!-- infos cachées -->
<form action="http://boomdirect-avis.forumactif.org/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" id="titre" value="Présentation de " class="USERNAME" readonly="readonly" />

J'ai trouvé ce code sur le net, que j'ai modifié et il fonctionne, mais je n'arrive pas à voir ce qui est différent dans le miens XD
Code:
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "Nom, Prénom : " + form.nom_prenom.value + "\n"
+ "Comment avez vous découvert ce forum : " + form.decouvert.value + "\n"
+ "Quel lien avec les Happy Jack : " + form.lien.value + "\n"
+ "Vos passions :" + form.passion.value ;
 
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
 
<form action="http://boomdirect-avis.forumactif.org/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="text" name="subject" id="titre" value="Présentation de " size="45" maxlength="60" class="USERNAME" readonly="readonly" /><br /><br />

RiderFx3
Nouveau membre

Messages : 16
Inscrit(e) le : 21/01/2015

http://www.boomdirect-avis-forum.com
RiderFx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par RiderFx3 le Jeu 5 Fév 2015 - 14:13

Rebonjour, après plusieurs test en comparant les deux codes, j'ai vu que ça ne fonctionnait pas si je mettait des valeurs liées par des tirets : form.connu-forum.value

En remplaçant "connu-forum" par "forum" ça fonctionne.

Par contre, si j'inclue le CSS dans la même page ça ne fonctionne plus.

Voici le code qui fonctionne :
Code:
<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[b]Nom :[/b] " + form.nom.value + '\n'
+ "[b]Âge :[/b] " + form.age.value + '\n'
+ "[b]Lieu de résidence :[/b] " + form.lieu.value + '\n'
+ "[b]Comment j'ai connu BoomDirect :[/b] " + form.boom.value + '\n'
+ "[b]Comment j'ai connu le forum :[/b] " + form.forum.value + '\n'
+ "[b]Message personnel :[/b] " + form.perso.value + '\n'          
 
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>

<!-- infos cachées -->
<form action="http://boomdirect-avis.forumactif.org/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" id="titre" value="Présentation de " class="USERNAME" readonly="readonly" />

<!-- Cases à remplir du formulaire -->
<label for="nom">Prénom : </label>
<input type="text" id="nom" value="" required="required" /></td>

<p><label for="age">Âge : </label>
<input type="text" id="age" value="" required="required" /></td>

<p><label for="lieu">Lieu de résidence : </label>
<input type="text" id="lieu" value="" required="required" /></td>

<p><label for="boom">Comment avez-vous connu BoomDirect ?<br />
(Interdit de citer un autre MLM)</label>
<input type="text" id="boom" value="" required="required" /></td>

<p><label for="forum">Comment avez-vous connu le forum ?</label>
<input type="text" id="forum" value="" required="required" /></td>

<p><label for="perso">Message perso, stratégie, objectifs, hobbies :<br /></label>
<textarea id="perso"></textarea>

<p><input type="submit" name="post" value="Envoyer votre présentation" />
</form>


dès lors que je rajoute mon CSS à la fin entre les balise <style> et </style> ça ne marche plus je ne comprends pas pourquoi.

Autre soucis aussi, ce morceau de code ne permet pas d'écrire automatiquement le pseudo du membre :
Code:
<input type="hidden" name="subject" id="titre" value="Présentation de " class="USERNAME" readonly="readonly" />

C'est possible de récupérer le pseudo du membre et de l'inscrire automatiquement sans que le membre ait à l'écrire lui même ?

RiderFx3
Nouveau membre

Messages : 16
Inscrit(e) le : 21/01/2015

http://www.boomdirect-avis-forum.com
RiderFx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par R-max le Jeu 5 Fév 2015 - 15:15

ceci dans le css sert a affiche le non du membres sur les poste

{postrow.displayed.POSTER_NAME} je ne c'est pas si tu pourra l'incorporer ..!!

R-max
# Tropactif #

Masculin
Messages : 1521
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un formulaire pour les présentations des membres

Message par RiderFx3 le Jeu 5 Fév 2015 - 16:22

J'ai trouvé ce tuto pour récupérer le USERNAME : http://forum.forumactif.com/t260631-utiliser-les-variables-user-et-forum-autre-part-sur-le-forum

mais je n'arrive pas à l'intégrer dans le titre de monde sujet :/

Autrement mon script fonctionne à merveille ! Voici le code :

Code:
<head>
<style>
form {
    /* Pour le centrer dans la page */
    margin: 0 auto;
    width: 455px;
    /* Pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
    display: inline-block;
    width: 450px;
    text-align: left;
   font-family: Arial;
   font-weight: bold;
}

input, textarea {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
      Par défaut, textarea utilise une police à espacement constant */
    font: 1em arial;

    /* Pour donner la même dimension à tous les champs textuels */
    width: 450px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}
input:focus, textarea:focus {
    /* Afin de rehausser les éléments actifs */
    border-color: #000;
}

textarea {
    /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    vertical-align: top;

    /* Pour donner assez d'espace pour entrer du texte */
    height: 5em;
}
</style>

<p>
    <br />
    <center><img src="http://i38.servimg.com/u/f38/19/11/94/38/logo-c10.png" /><br><br>
   <FONT face="Arial" color="#ff0000" size="6">Générateur de présentation</FONT></center>
</p>

<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<script type="text/javascript">

function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "Bonjour à tous, je me présente : \n\n[color=#FF0000][b]Nom :[/color][/b] " + form.nom.value + '\n'
+ "[color=#FF0000][b]Âge :[/color][/b] " + form.age.value + '\n'
+ "[color=#FF0000][b]Lieu de résidence :[/color][/b] " + form.lieu.value + '\n\n'
+ "[color=#FF0000][b]Comment j'ai connu BoomDirect :[/color][/b] " + form.boom.value + '\n\n'
+ "[color=#FF0000][b]Comment j'ai connu le forum :[/color][/b] " + form.forum.value + '\n\n'
+ "[color=#FF0000][b]Message personnel :[/color][/b] " + form.perso.value + '\n'          

// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;

}
</script>

<!-- infos cachées -->
<form action="http://boomdirect-avis.forumactif.org/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" class="USERNAME" /> <!-- intègre le pseudo du posteur dans une variable -->
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" id="titre" value="Présentation de " class="USERNAME"/>


<!-- Cases à remplir du formulaire -->
<label for="nom">Prénom : </label>
<input type="text" id="nom" value="" required="required" /></td>

<p><label for="age">Âge : </label>
<input type="text" id="age" value="" required="required" /></td>

<p><label for="lieu">Lieu de résidence : </label>
<input type="text" id="lieu" value="" required="required" /></td>

<p><label for="boom">Comment avez-vous connu BoomDirect ?<br />
(Interdit de citer un autre MLM)</label>
<input type="text" id="boom" value="" required="required" /></td>

<p><label for="forum">Comment avez-vous connu le forum ?</label>
<input type="text" id="forum" value="" required="required" /></td>

<p><label for="perso">Message perso, stratégie, objectifs, hobbies :<br /></label>
<textarea id="perso" required="required"></textarea>

<p><input type="submit" name="post" value="Poster votre présentation" />
</form>
</head>

Voilà à quoi il ressemble :



Donc il me reste à régler comme problème :
- Héberger ma page HTML sur mon forum
- Lier le bouton "NOUVEAU" de mon forum présentation vers cette page HTML
- Intégrer le pseudo de l'utilisateur dans le titre du sujet

RiderFx3
Nouveau membre

Messages : 16
Inscrit(e) le : 21/01/2015

http://www.boomdirect-avis-forum.com
RiderFx3 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Créer un formulaire pour les présentations des membres

Message par RiderFx3 le Jeu 5 Fév 2015 - 17:37

Bon mon formulaire est terminé Smile Voici un petit tutoriel pour guider ceux qui arrivent après moi !

Générateur de présentation :

Objectifs donnés :
- Permettre aux membres de se présenter en remplissant un formulaire : OK!
- Poster un message de présentation avec mise en page choisie : OK!
- Intégrer le pseudo de l'utilisateur dans le titre du message : OK!
- Héberger la page HTML sur mon forum : OK!
- Lier le bouton "Nouveau Sujet" au formulaire : Pas encore trouvé !
- Pour pallier à ça :
- Créer un lien dans la fenêtre de description du forum de présentation : OK!
- Afficher une règle lors de l'ouverture d'un nouveau sujet de présentation avec le lien du générateur : OK!

Les étapes de A à Z:
- Créer le formulaire de notre choix, sans lien avec le forum (voir plus bas)
- Implanter les fonctions liées au forum, comme la page où le message sera posté, la récupération d'un pseudo etc... (voir plus bas)
- Implanter le javascript qui permet de créer un message automatiquement avec les données du formulaire (voir plus bas)
- Héberger le code HTML final sur le forum : PA > Modules > Gestion des pages HTML ajouter la page et noter le lien
- Désactiver l'interdiction des formulaires non officiels : PA > Général > Sécurité : décochez "Interdire les formulaires non officiels"
- Créer un lien dans la fenêtre de description du forum de présentation : PA > Général > catégories et forum > modifier le forum concerné : inscrire le lien en HTML de la page contenant le formulaire, dans la grande case description.
- Afficher une règle avec le lien du générateur lorsqu'un membre clique sur "Nouveau" dans la section présentation : au même endroit sur le PA, plus bas, dans la case "Règlement du forum > Message" : Inscrire votre message, avec le lien, en BBcode cette fois !

J'ai également créé un topic épinglé avec le lien du générateur ! Si avec tout ça les nouveaux membres ne comprennent pas !! Very Happy


Je vais reprendre pas à pas ce qui m'a aidé dans le but d'aider les autres.

Voici le code entier que j'ai utilisé (je le détaille partie par partie plus bas):
Code:
<style>
form {
    /* Pour le centrer dans la page */
    margin: 0 auto;
    width: 455px;
    /* Pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

label {
    /* Afin de s'assurer que tous les textes au dessus des cellules aient la même dimension et soient alignées correctement */
    display: inline-block;
    width: 450px;      /*largeur*/
    height: 20px;      /*hauteur*/
    text-align: left;  /* alignement*/
    font-family: Arial; /* police */
    color: #4f4f4f;    /* couleur de la police */
    font-size: 12pt;    /* taille de la police */
     
}

input, textarea {
    /* Afin de s'assurer que toutes les cellules utilisent la même police
      Par défaut, textarea utilise une police à espacement constant */
      font: 1em arial;
      font-size: 12pt;

    /* Pour donner la même dimension à tous les champs textuels */
    width: 450px; /* règle la largeur des cases */
    height: 30px; /* règle la hauteur des cases */
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}
input:focus, textarea:focus {
    /* Afin de rehausser les éléments actifs */
    border-color: #000;
}

textarea {
    /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    vertical-align: top;

    /* Pour donner assez d'espace pour entrer du texte */
    height: 150px;
}
</style>

<center><FONT face="Arial" color="#ff0000" size="6">Générateur de présentation</FONT></center><br> <!-- Titre du formulaire -->


<script type="text/javascript" src="http://tinyurl.com/var-fa"></script> <!-- Permet de pouvoir récupérer le username d'un utilisateur -->
<script type="text/javascript">

function envoiMessage(form)
{
// Créer un message BBcode à partir des informations fournies par le formulaire
var txt_message = "Bonjour à tous, je me présente : \n\n[color=#FF0000][b]Nom :[/color][/b] " + form.nom.value + '\n'
+ "[color=#FF0000][b]Âge :[/color][/b] " + form.age.value + '\n'
+ "[color=#FF0000][b]Lieu de résidence :[/color][/b] " + form.lieu.value + '\n\n'
+ "[color=#FF0000][b]Comment j'ai connu BoomDirect :[/color][/b] " + form.boom.value + '\n\n'
+ "[color=#FF0000][b]Comment j'ai connu le forum :[/color][/b] " + form.forum.value + '\n\n'
+ "[color=#FF0000][b]Message personnel :[/color][/b] " + form.perso.value + '\n'          

// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>

<!-- Données cachées -->
<form action="http://boomdirect-avis.forumactif.org/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" id="titre" value="Présentation de " class="USERNAME"/> <!-- implantation du username dans le titre du sujet -->


<!-- Cases à remplir du formulaire -->
<label for="nom">Prénom : </label>
<input type="text" id="nom" value="" required="required" /></td>

<br><br><label for="age">Âge : </label>
<input type="text" id="age" value="" required="required" /></td>

<br><br><label for="lieu">Lieu de résidence : </label>
<input type="text" id="lieu" value="" required="required" /></td>

<br><br><label for="boom">Comment avez-vous connu BoomDirect ?<br />
(Interdit de citer un autre MLM)</label>
 <br><br /><br /><input type="text" id="boom" value="" required="required" /></td>

<br><br><label for="forum">Comment avez-vous connu le forum ?</label>
<input type="text" id="forum" value="" required="required" /></td>

<br><br><label for="perso">Message perso, stratégie, objectifs, hobbies :</label>
<textarea id="perso" required="required"></textarea>

<br><br><input type="submit" name="post" value="Poster votre présentation" />
</form>

La partie style CSS tout en haut du code :
Code:
<style>
form {
    /* Pour le centrer dans la page */
    margin: 0 auto;
    width: 455px;
    /* Pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

label {
    /* Afin de s'assurer que tous les textes au dessus des cellules aient la même dimension et soient alignées correctement */
    display: inline-block;
    width: 450px;      /*largeur*/
    height: 20px;      /*hauteur*/
    text-align: left;  /* alignement*/
    font-family: Arial; /* police */
    color: #4f4f4f;    /* couleur de la police */
    font-size: 12pt;    /* taille de la police */
     
}

input, textarea {
    /* Afin de s'assurer que toutes les cellules utilisent la même police
      Par défaut, textarea utilise une police à espacement constant */
      font: 1em arial;
      font-size: 12pt;

    /* Pour donner la même dimension à tous les champs textuels */
    width: 450px; /* règle la largeur des cases */
    height: 30px; /* règle la hauteur des cases */
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}
input:focus, textarea:focus {
    /* Afin de rehausser les éléments actifs */
    border-color: #000;
}

textarea {
    /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    vertical-align: top;

    /* Pour donner assez d'espace pour entrer du texte */
    height: 150px;
}
</style>

La partie Javascript pour construire le message à poster :
Code:
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script> <!-- Permet de pouvoir récupérer le username d'un utilisateur -->
<script type="text/javascript">

function envoiMessage(form)
{
// Créer un message BBcode à partir des informations fournies par le formulaire
var txt_message = "Bonjour à tous, je me présente : \n\n[color=#FF0000][b]Nom :[/color][/b] " + form.nom.value + '\n'
+ "[color=#FF0000][b]Âge :[/color][/b] " + form.age.value + '\n'
+ "[color=#FF0000][b]Lieu de résidence :[/color][/b] " + form.lieu.value + '\n\n'
+ "[color=#FF0000][b]Comment j'ai connu BoomDirect :[/color][/b] " + form.boom.value + '\n\n'
+ "[color=#FF0000][b]Comment j'ai connu le forum :[/color][/b] " + form.forum.value + '\n\n'
+ "[color=#FF0000][b]Message personnel :[/color][/b] " + form.perso.value + '\n'          

// Insère le texte construit dans les données cachées "message" du formulaire
form.message.value = txt_message;
}
</script>

Les données cachées :
Elles enregistrent les infos importantes non affichées à l'écran
Code:
<!-- Données cachées -->
<form action="http://boomdirect-avis.forumactif.org/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)"> <!-- adresse de votre forum -->
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->
<input type="hidden" name="subject" id="titre" value="Présentation de " class="USERNAME"/> <!-- implantation du username dans le titre du sujet -->

Et enfin, notre formulaire :
Code:
<!-- Cases à remplir du formulaire -->
<label for="nom">Prénom : </label>
<input type="text" id="nom" value="" required="required" /></td>

<br><br><label for="age">Âge : </label>
<input type="text" id="age" value="" required="required" /></td>

<br><br><label for="lieu">Lieu de résidence : </label>
<input type="text" id="lieu" value="" required="required" /></td>

<br><br><label for="boom">Comment avez-vous connu BoomDirect ?<br />
(Interdit de citer un autre MLM)</label>
 <br><br /><br /><input type="text" id="boom" value="" required="required" /></td>

<br><br><label for="forum">Comment avez-vous connu le forum ?</label>
<input type="text" id="forum" value="" required="required" /></td>

<br><br><label for="perso">Message perso, stratégie, objectifs, hobbies :</label>
<textarea id="perso" required="required"></textarea>

<br><br><input type="submit" name="post" value="Poster votre présentation" /> <!-- bouton pour poster le message -->
</form>

J'ai mis toute la journée pour créer ça LOL, en fouillant à droite à gauche, en collant des morceaux de code par-ci par là ! Very Happy
Par évident sans aucune notion de HTML, CSS, Java etc...

Au final, voilà le résultat : (simpliste mais efficace)


RiderFx3
Nouveau membre

Messages : 16
Inscrit(e) le : 21/01/2015

http://www.boomdirect-avis-forum.com
RiderFx3 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum