Formulaire de présentation
Salut !
Fournir une fiche de présentation aux membres pour qu'ils puissent poster une belle présentation est une excellente idée. Sauf que parfois, certains membres ont de la difficulté à remplir la fiche de présentation parce qu'ils ont de la difficulté avec le codage.
Du coup, ce formulaire permettra à vos membres de simplement remplir les champs du formulaire et les entrées se mettront automatiquement au bon endroit dans une fiche. Pas mal, n'est-ce pas ?
Pour voir l'aperçu du formulaire de présentation en direct : cliquez ici.
Pour voir l'aperçu du formulaire de présentation en image : cliquez ici.
Pour voir l'aperçu de la fiche de présentation en image : cliquez ici.
Attention :
Évidemment, vous aurez probablement plus de champs à faire remplir que moi ou peut-être s'appelleront-ils différemment. Du coup, vous voudrez sans doute personnaliser votre code. Pour savoir comment faire, je vous envoie sur ce tutoriel afin de comprendre les formulaires et les différentes étapes (la construction des champs et la récupération des données du formulaire).
Ce LS est en quatre parties.
- Tout d'abord, nous allons créer le formulaire dans une page HTML.
- Ensuite, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
- Puis, nous allons ajouter le CSS pour la fiche de présentation.
- Enfin, nous allons ajouter une iframe pour que les membres puissent remplir le formulaire.
Laisser les crédits vers Never-Utopia est obligatoire.
Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^
1. Créer le formulaire (Page HTML)
Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre formulaire.
Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML
Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque, comme "Formulaire de présentation".
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".
Enfin, on met le code suivant et on enregistre :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<base target="_blank" />
<meta name="author" content="Onyx" />
<title>Formulaire de Présentation</title>
<style type="text/css">
/*Corps*/
body {
margin: 0px;
color: #757575;
font-family: 'Verdana';
font-size: 13px;
}
/*Formulaire*/
#monId {
background-color: #dfdfdf;
box-shadow: inset 0px 0px 15px #656565;
margin: auto;
border-radius: 10px;
width: 500px;
padding: 15px;
}
/*Titres*/
h1, h2, h3 {
color: #757575;
text-align: center;
font-family: 'Monotype Corsiva', cursive;
font-size: 32px;
font-weight: normal;
}
/*Petit titre*/
h2 {
font-size: 24px;
}
/*Champs text, number, password, textarea et select*/
input[type="text"], input[type="number"], input[type="password"], textarea, select {
display: inline-bloc;
width: 97%;
margin-top: 3px;
background-color: #efefef;
color: #858585;
padding: 5px;
border: none;
border-radius: 5px;
box-shadow: inset 2px 2px 2px #bfbfbf, inset -2px -2px 1px #bfbfbf;
font-size: 13px;
font-family: 'Arial';
}
/*Champs radio*/
input[type="radio"] {
display: inline-bloc;
margin-top: 3px;
vertical-align: bottom;
}
/*Champs submit et reset*/
input[type="submit"], input[type="reset"] {
margin-top: 10px;
text-align: center;
display: inline-block;
font-weight: bold;
background-color: #fdfdfd;
border: 1px solid #c4c4c4;
color: #757575;
padding: 8px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 5px;
box-shadow: 2px 2px 2px #747474, inset 0px 0px 15px #a3a3a3;
}
/*Champs submit et reset au survol*/
input[type="submit"]:hover, input[type="reset"]:hover {
cursor: pointer;
background-color: #ffffff;
box-shadow: 4px 4px 4px #747474, inset 0px 0px 15px #a3a3a3;
color: #656565;
}
/*Champs reset et prévisualiser*/
input[type="reset"], input[name="preview"] {
margin-top: 0px;
margin-right: 10px;
font-weight: normal;
}
/*Champs textarea*/
textarea {
min-width: 97%;
max-width: 97%;
min-height: 100px;
}
/*Astérisques rouges*/
.redd {
color: red;
}
/*Crédits*/
.credits {
margin: 10px auto -10px auto;
font-size: 11px;
text-align: center;
}
.credits a {
color: darkgreen;
text-decoration: none;
}
.credits a:hover {
color: blue;
}
</style>
<script type="text/javascript">
//<!--
/*Fonction pour créer le message*/
function creationMessage(NomForm) {
/* On met le titre dans le champ "titre" */
NomForm.titre.value =
"Présentation de " + NomForm.prenom.value + " " + NomForm.nom.value;
/* On met le message dans le champ "message" */
NomForm.message.value =
"<link href='https://fonts.googleapis.com/css?family=Lobster|Pacifico|Dancing+Script' rel='stylesheet' type='text/css' />" +
"<div class='prez'>" +
"<img src='" + NomForm.urlimghaut.value + "' class='prez_haut' />" +
"<div class='prez_nom'>" + NomForm.prenom.value + " " + NomForm.nom.value + "</div>" +
"<div class='prez_citation'>« " + NomForm.citation.value + " »</div>" +
"<div class='prez_bloc'>" +
"<img src='" + NomForm.urlimgava.value + "' class='prez_ava' />" +
"<div class='prez_right'>" +
"<span class='prez_champ'>Prénom :</span> " + NomForm.prenom.value + "<br />" +
"<span class='prez_champ'>Nom :</span> " + NomForm.nom.value + "<br />" +
"<span class='prez_champ'>Surnom :</span> " + NomForm.surnom.value + "<br />" +
"<span class='prez_champ'>Âge :</span> " + NomForm.age.value + "<br />" +
"<span class='prez_champ'>Groupe :</span> " + NomForm.group.value + "<br />" +
"<span class='prez_champ'>Pouvoir :</span> " + NomForm.pouvoir.value + "<br />" +
"<span class='prez_champ'>Aime :</span> " + NomForm.aime.value + "<br />" +
"<span class='prez_champ'>Déteste :</span> " + NomForm.deteste.value + "<br />" + "</div><div style='clear: both;'></div></div><div class='prez_title'>" +
"Description physique</div><div class='prez_bloc'>" + NomForm.descphy.value + "</div><div class='prez_title'>" +
"Description psycologique</div><div class='prez_bloc'>" + NomForm.descpsy.value + "</div><div class='prez_title'>" +
"Histoire</div><div class='prez_bloc'>" + NomForm.hist.value + "</div><div class='prez_title'>" +
"Informations sur le joueur</div><div class='prez_bloc'>" +
"<img src='" + NomForm.urlimgbas.value + "' class='prez_bas' />" +
"<div class='prez_right2'>" +
"<span class='prez_champ'>Prénom :</span> " + NomForm.nomhrp.value + "<br />" +
"<span class='prez_champ'>Âge :</span> " + NomForm.agehrp.value + "<br />" +
"<span class='prez_champ'>Comment j'ai connu le forum :</span> " + NomForm.connu.value + "<br />" +
"<span class='prez_champ'>Mon avis sur le forum :</span> " + NomForm.avis.value + "<br />" +
"<span class='prez_champ'>Le code secret :</span> [hide]" + NomForm.secret.value + "[/hide]</div><div style='clear: both;'></div></div>" +
"<div class='prez_credit'>Par <a href='http://www.never-utopia.com/u27' target='_blank'>Onyx</a> de <a href='http://www.never-utopia.com' target='_blank'>Never-Utopia</a>, inspiré de <a href='http://www.never-utopia.com/t43339-fiche-bois-sombre' target='_blank'>cette fiche</a> de Pastomaniac.</div></div></div>";
/*On vérifie si on peut ou non envoyer le message*/
var champsobligatoires = document.getElementsByClassName("obligatoire");
var totalchampsobligatoires = 0;
for (i = 0; i < champsobligatoires.length; i++) {
var champvaleur = champsobligatoires[i].value;
if (champvaleur.length > 0) {
totalchampsobligatoires = totalchampsobligatoires + 1;
}
}
if (totalchampsobligatoires < champsobligatoires.length) {
alert("Tous les champs obligatoires (ceux avec un astérisque rouge) doivent être remplis.");
return false;
}
else {
return true;
}
}
//-->
</script>
</head>
<body>
<form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank" onSubmit="return creationMessage(this)">
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="topictype" value="0" checked="checked" />
<input type="hidden" name="message" value="" />
<input type="hidden" name="f" value="10" />
<input type="hidden" name="subject" id="titre" value="" />
<h1>Formulaire de Présentation</h1>
<h2>Informations sur le personnage</h2>
<label for="prenom">Prénom<span class="redd">*</span> :</label><br />
<input class="obligatoire" type="text" name="prenom" id="prenom" /><br />
<br />
<label for="nom">Nom<span class="redd">*</span> :</label><br />
<input class="obligatoire" type="text" name="nom" id="nom" /><br />
<br />
<label for="surnom">Surnom :</label><br />
<input type="text" name="surnom" id="surnom" /><br />
<br />
<label for="age">Âge<span class="redd">*</span> :</label><br />
<input class="obligatoire" type="text" name="age" id="age" /><br />
<br />
<label for="group">Groupe<span class="redd">*</span> :</label><br />
<select name="group" id="group">
<option>Premier</option>
<option>Deuxième</option>
<option>Troisième</option>
<option>Quatrième</option>
<option>Etc.</option>
</select><br />
<br />
<label for="pouvoir">Pouvoir<span class="redd">*</span> :</label><br />
<input class="obligatoire" type="text" name="pouvoir" id="pouvoir" /><br />
<br />
<label for="aime">Aime<span class="redd">*</span> :</label><br />
<input class="obligatoire" type="text" name="aime" id="aime" /><br />
<br />
<label for="deteste">Déteste<span class="redd">*</span> :</label><br />
<input class="obligatoire" type="text" name="deteste" id="deteste" /><br />
<br />
<h2>Descriptions du personnage</h2>
<label for="descphy">Description Physique<span class="redd">*</span> :</label><br />
<textarea class="obligatoire" name="descphy" id="descphy"></textarea><br />
<br />
<br />
<label for="descpsy">Description Psychologique<span class="redd">*</span> :</label><br />
<textarea class="obligatoire" name="descpsy" id="descpsy"></textarea><br />
<br />
<br />
<label for="hist">Histoire<span class="redd">*</span> :</label><br />
<textarea class="obligatoire" name="hist" id="hist"></textarea><br />
<br />
<br />
<h2>Informations sur le joueur</h2>
<label for="nomhrp">Prénom :</label><br />
<input type="text" name="nomhrp" id="nomhrp" /><br />
<br />
<label for="agehrp">Âge :</label><br />
<input type="text" name="agehrp" id="agehrp" /><br />
<br />
<label for="connu">Comment avez-vous connu le forum<span class="redd">*</span> ?</label><br />
<input class="obligatoire" type="text" name="connu" id="connu" /><br />
<br />
<label for="avis">Votre avis sur le forum ?</label><br />
<textarea name="avis" id="avis"></textarea><br />
<br />
<label for="secret">Le code secret<span class="redd">*</span> ?</label><br />
<input class="obligatoire" type="text" name="secret" id="secret" /><br />
<br />
<h2>Personnaliser la mise en page</h2>
<label for="urlimghaut">URL de l'image du haut (500px par 200px) :</label><br />
<input type="text" name="urlimghaut" id="urlimghaut" value="http://img15.hostingpics.net/pics/959085haut.jpg" /><br />
<br />
<label for="citation">Petite citation :</label><br />
<input type="text" name="citation" id="citation" value="Petite citation" /><br />
<br />
<label for="urlimgava">URL de l'image du personnage (200px par 320px) :</label><br />
<input type="text" name="urlimgava" id="urlimgava" value="http://img15.hostingpics.net/pics/485538middle.jpg" /><br />
<br />
<label for="urlimgbas">URL de l'image du joueur (100px par 100px) :</label><br />
<input type="text" name="urlimgbas" id="urlimgbas" value="http://img15.hostingpics.net/pics/858946bas.jpg" /><br />
<br />
<br />
<div style="text-align: center;">
<input type="reset" name="reseta" value="Rénitialiser le formulaire" />
<input type="submit" name="preview" value="Prévisualiser le formulaire" />
<input type="submit" name="post" value="Envoyer le formulaire" />
</div>
<br />
<div class="credits">Par <a href="http://www.never-utopia.com/u27" target="_blank">Onyx</a> de <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a>.</div>
</form>
</body>
</html>
Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (
), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.
), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.Une fois le code mis et enregistré, vouz aurez une petite modification à faire.
Vous devez vous rendre, sur votre forum, dans le forum ou sous-forum où les gens pourront passer poster leur présentation. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/f" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce forum.
Vous devez copier ce nombre et venir remplace le 10 à cet endroit :
- Code:
<input type="hidden" name="f" value="10" />
Cela va permettre que la présentation des utilisateurs du formulaire soit postée au bon endroit.
2. Activer les formulaires externes
Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique n°230" à la place d'envoyer directement le message.
Pour éviter cela, vous devez vous rendre sur :
> Panneau d'administration
> > Général
> > > Forum
> > > > Sécurité
Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !
L'erreur n°230 ne devrait maintenant plus vous causer problème ~
3. Mise en forme de la fiche de présentation (CSS)
Si quelqu'un postait une fiche avec le formulaire, vous verriez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme la fiche de présentation à l'aide du CSS.
Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS
Puis, nous allons ajouter le CSS suivant :
- Code:
/*Bloc de la présentation*/
.prez {
background-color: #202020;
box-shadow: 5px 5px 3px #555555;
margin: auto;
margin-top: 5px;
margin-bottom: 8px;
width: 500px;
color: #959595;
padding-bottom: 10px;
font-family: 'Verdana';
font-size: 12px;
}
/*Image du haut de la présentation*/
.prez_haut {
display: inline-block;
width: 500px;
height: 200px;
border-bottom: 40px solid #050505;
}
/*Nom de la présentation*/
.prez_nom {
font-family: 'Pacifico', cursive;
font-size: 30px;
color: #202020;
text-shadow: -2px -2px 1px white;
width: 100%;
text-align: center;
margin-top: -60px;
margin-bottom: 15px;
}
/*Petite citation de la présentation*/
.prez_citation {
width: 100%;
text-align: center;
color: #747474;
font-family: 'Dancing Script', cursive;
font-size: 15px;
letter-spacing: 1px;
margin-bottom: 25px;
}
/*Blocs de la présentation*/
.prez_bloc {
background-color: #353535;
border: 3px solid #101010;
padding: 10px;
margin: 0px 10px 0px 10px;
}
/*Autres images de la présentation*/
.prez_ava, .prez_bas {
display: inline-block;
width: 200px;
height: 320px;
float: left;
border: #000000 1px dotted;
}
/*Partie de droite du premier bloc de la présentation*/
.prez_right, .prez_right2 {
display: inline-block;
margin-left: 5px;
float: left;
width: 240px;
}
/*Champs de la présentation*/
.prez_champ {
color: #dfdfdf;
}
/*Sous-titres de la présentation*/
.prez_title {
text-align: center;
font-family: 'Lobster', cursive;
padding: 5px;
font-size: 16px;
background: #000000;
color: #959595;
border-top: 2px solid #353535;
margin: 15px 0px 5px 0px;
}
/*Images du bas de la présentation*/
.prez_bas {
width: 100px;
height: 100px;
}
/*Partie de droite du dernier bloc de la présentation*/
.prez_right2 {
width: 340px;
}
/*Crédits*/
.prez_credit {
margin: 5px auto -10px auto;
font-size: 10px;
text-align: center;
}
4. Ajouter l'iframe du formulaire
Maintenant que la page HTML est créée avec le formulaire, que les formulaires ont été autorisé et que le CSS pour la fiche de présentation est installé, il faut mettre le formulaire accessible aux membres.
Pour cela, vous pouvez, soit mettre le lien vers le formulaire à quelque part sur votre forum, soit le poster dans une iframe dans un message et les membres vont le remplir directement là.
Pour la 2e option, vous devez vous rendre là où vous voulez que le formulaire soit et y mettre le code suivant :
- Code:
<iframe style="display: block; height: 2100px; width: 550px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>
Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^
Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre formulaire), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper
Sinon, vous devez aussi changer le width (largeur) et le height (hauteur) pour que cela corresponde à votre formulaire ^^
C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez de l'aide pour personnaliser le formulaire ou la fiche de présentation.
À plus !
