Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mer 3 Avr 2013 - 19:29
coucou ,
voilà une astuce qui va en ravir plus d'un les ami(e)s hinhin .

Le formulaire a été trouvé sur le net et amélioré selon la façon Milouze moqueur .

Pour les fondateurs qui ont un forum réservé aux présentations.

Assurez vous d'avoir désactivé cette option dans le P.A:
Général/Forum/Sécurité/Configuration de la sécurité

Interdire les formulaires non officiels à poster des messages et messages privés sur le forum : cocher Non .
regardeplusbas



Si vous désirez que le membre qui vient se présenter soit obligé de renseigner certaines informations
qui vous sont chères, ce tutoriel est fait pour vous.

Le membre cliquera sur le bouton "Nouveau" et une fenêtre pop up s'ouvrira
incluant un formulaire avec des champs obligatoires , dans le cas ou ce dernier
oublierait de renseigner l'un d'entre eux un rappel sous forme d'infobulle lui indiquera le champ manquant clin oeil .
L'infobulle sera d'apparence différentes selon les navigateurs hinhin .

Il sera donc impossible d'envoyer le formulaire tant que ces derniers ne seront pas
renseignés super .

Le formulaire est pourvu d'un bouton pour effacer le contenu en cas ou moqueur
La pop up se fermera automatiquement lors de l'envoi clin oeil .

L'aperçu de ce dernier:
http://testdesforums.1fr1.net/h92-changement-de-formulaire-html-news

Vous pouvez toujours le tester hinhin .





Il faut pour cela trouver l'identifiant du lien du forum qui servira au script
pour envoyer le contenu du formulaire hinhin .


Exemple ici le lien est celui-ci:
http://www.milouze14.com/f2-presentez-vous

L'identifiant est donc f2 clin oeil

Allez c'est parti les ami(e)s.


Passons à la création de la page Web qui fera le formulaire hinhin
La css est commentée , donc agrémentez vos gouts selon votre souhait hinhin

Modules/HTML&JAVASCRIPT/
Gestion des pages HTML


Titre * :Mettre un titre explicite.
Voulez-vous utiliser le haut et le bas de page de votre forum ? NON
Utiliser cette page en tant que page d'accueil ? NON

Collez tout le contenu suivant:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="fr" xml:lang="fr"  >
<head>
<title>Présentation</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<style type="text/css">

/*On donne une apparence a la page*/
body
{
background-color: #141414;
color:#20aec8;
}
/*Les champs obligatoires oublies pour les differents navigateurs*/
[required]
{
border: 1px solid #800000;
}
:required
{
border: 1px solid #800000;
}
/*les champs d envoi et reset du formulaire*/
.validation input{cursor:pointer;}
select
{
background-color: #ECAF35;
border:1px solid #20aec8;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*L apparence du menu deroulant*/

#tout select
{
background-color: white;
text-align:center;
color:#800000;
font-weight:bold;
border:1px solid #800000;
}
/*L apparence du menu deroulant au survol*/
#tout select:hover
{
background-color:#cccccc;
}

/*on donne une apparence sur les differents choix impaires du menu deroulant*/
#tout select option:nth-child(odd)
{
background-color:#ffffff;
text-align:left;
color:#800000;
}
/*on donne une apparence sur les differents choix paires du menu deroulant*/
#tout select option:nth-child(even)
{
background-color: #ffffff;
text-align:left;
color:#222222;
}
/*on donne une apparence sur le dernier choix du menu deroulant*/
#tout select option:last-child
{
text-align:center;
}
/*on donne une apparence aux champs */
input, textarea
{
font-weight:bold;
background-color: #ECAF35;
border:1px solid #20aec8;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*on donne une apparence aux champs lors de la frappe*/
input:focus, textarea:focus
{
font-weight:bold;
background-color: #ffffff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

</style>
</head>

<body onunload="javascript:self.close();">


<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var age = "";
if(form.age[0].checked == true)
age = form.age[0].value;
else if(form.age[1].checked == true)
age = form.age[1].value;
else if(form.age[2].checked == true)
age = form.age[2].value;
else if(form.age[3].checked == true)
age = form.age[3].value;
else if(form.age[4].checked == true)
age = form.age[4].value;
var genre = "";
if(form.genre[0].checked == true)
genre = form.genre[0].value;
else if(form.genre[1].checked == true)
genre = form.genre[1].value;
var aime = "";
if(form.aime[0].checked == true)
aime = form.aime[0].value;
else if(form.aime[1].checked == true)
aime = form.aime[1].value;
else if(form.aime[2].checked == true)
aime = form.aime[2].value;

var txt_message = "<strong>Nom :</strong> " + form.nom.value + '\n'
+ "<strong>Prenom :</strong> " + form.prenom.value + '\n'
+ "<strong>Ma tranche d\'age :</strong> " + age + '\n'
+ "<strong>Genre: </strong>" + genre + '\n'
+ "<strong>Comment j\'ai connu ce forum :</strong> " + form.connu.value + '\n'
+ "<strong>Quelle est ma profession :</strong> " + form.profession.value + '\n'
+ "<strong>j\'aime bien :</strong> " + aime + '\n'
+ "<strong>Complement :</strong> " + form.complement.value + '\n';
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
<form method="post" action="LE LIEN DU FORUM/post?f=5&mode=newtopic" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)" />
<label for="nom">Quel est votre nom ?</label>
<input type="text" name="nom" id="nom" tabindex="10"required="required"/>
<label for="prenom">Quel est votre prénom ?</label>
<input type="text" name="prenom" id="prenom" tabindex="20"required="required" />
<p>
Votre tranche d'âge:
<input type="radio" name="age" value="moins de 15 ans" id="moins15" /> <label for="moins15">Moins de 15 ans</label>
<input type="radio" name="age" value="15-25 ans" id="15-25" /> <label for="15-25">15-25 ans</label>
<input type="radio" name="age" value="25-40 ans" id="25-40" /> <label for="25-40">25-40 ans</label>
<input type="radio" name="age" value="40-60 ans" id="40-60" /> <label for="40-60">40-60 ans</label>
<input type="radio" name="age" value="plus de 60 ans" id="plus60" /> <label for="plus60">plus de 60 ans</label>
</p>
<p>
Genre :
<input type="radio" name="genre" value="homme" id="homme" /> <label for="homme">homme</label>
<input type="radio" name="genre" value="femme" id="femme" /> <label for="femme">femme</label>
</p>
<p>
<label for="connu">Comment avez vous connus ce forum?</label><br />
<textarea name="connu" id="connu" cols="40" rows="4" tabindex="80"required="required"></textarea>
</p>
<div id="tout">
<label for="profession">Quel est votre profession ?</label>
<select name="profession" id ="profession">
<option value="selection">Je ne souhaite pas partager cette information</option>
<option value="agriculteurs exploitants">Agriculteurs exploitants</option>
<option value="artisans">Artisans</option>
<option value="Commercants et assimiles">Commerçants et assimilés</option>
<option value="chef entreprise 10 sal ou +">Chefs d'entreprise de 10 salariés ou plus</option>
<option value="professions liberales et assimilees">Professions libérales et assimilées</option>
<option value="cadre fonction publique">Cadre de la fonction publique</option>
<option value="profs, professions scientifiques">Professeurs, professions scientifiques</option>
<option value="professions de l'info, arts, spectacles">Professions de l'information, des arts et des spectacles</option>
<option value="cadres administratifs et commerciaux d'ent">Cadres administratifs et commerciaux d'entreprises</option>
<option value="ingénieurs et cadres techniques d'ent">Ingénieurs et cadres techniques d'entreprises</option>
<option value="non renseignee">Non renseignée </option>
</select>
</div>
<p>
Que préférez vous?
<input type="radio" name="aime" value="le sport" id="sport" tabindex="40" /> <label for="sport">Le sport</label>
<input type="radio" name="aime" value="la littérature" id="litterature" tabindex="50" /> <label for="litterature">La littérature</label>
<input type="radio"name="aime" value="le cinéma" id="cinema" tabindex="60" /> <label for="cinema">Le cinéma</label>
</p>
<p>
<label for="complement">Complément :</label> <br />
<textarea name="complement" id="complement" cols="40" rows="4" tabindex="80"></textarea>
</p>
<!--liaison du formulaire au forum champs invisibles-->
<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 = post-it / 2 = annonce) -->
<input type="hidden" name="message" value="" />
<!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="5" /> <!--  ID du forum dans lequel le message sera posté-->
<label for="titre">Titre du sujet:</label>

<input type="text" name="subject" id="titre" value="" size="45" maxlength="60" required="required"/>
<!--fin de liaison-->
<p class="validation">
<input type="submit" name="post" /> <input type="reset" />
</p>

</form>

</body>
</html>


Repérez ceci:
Code:

<form method="post" action="LE LIEN DU FORUM/post?f=5&mode=newtopic" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)" />
Modifiez le lien de votre forum puis la lettre et enfin le numéro
Code:
LE LIEN DU FORUM/post?la lettre=le numero&mode=newtopic

Repérez ceci et modifiez la lettre et le numéro suivant votre forum:
Code:

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


Pensez à cliquer sur le bouton

Repérez le lien de la page créée puis il faudra l'insérer dans le script ci-dessous:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Donnez un titre explicite et cochez sur toutes les pages.

Code:

function formpopup()
        {
        window.open('LE LIEN DE LA PAGE CREE','popup',' addressbar=no,width=650,height=600,left=400,top=0');
        }
        $(function(){
          $('a[href="/post?f=5&mode=newtopic"]').attr('onClick','formpopup()').removeAttr('href').css('cursor','pointer');
        });

notez le lien de la page créée:
Code:
window.open('LE LIEN DE LA PAGE CREE','

puis la lettre et le numéro:
/post?la lettre

Code:
$('a[href="/post?f=5&mode=newtopic"]

le numéro&mode=newtopic"

Pensez à cliquer sur le bouton

Admirez le travail les ami(e)s super



Voilà, c'est tout pour le moment clin oeil .





Dernière édition par Milouze14 le Jeu 23 Mai 2013 - 8:45, édité 3 fois





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Jeu 4 Avr 2013 - 20:03
coucou ,

rectification concernant le tutoriel sur la page web qui servira de formulaire hinhin .

Un rajout sur la balise body pour la fermeture automatique du formulaire lors de l'envoi car avec IE
le script opéré avant l'ouverture de la popup clin oeil .



Ensuite il manquait un atout primordial pour le bon fonctionnement hinhin :

Code:
<form method="post" action="LE LIEN DU FORUM/post?f=5&mode=newtopic"
name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)" />


Puis le javascript :
Code:

function formpopup()
        {
        window.open('http://testdesforums.1fr1.net/h92-changement-de-formulaire-html-news','popup',' addressbar=no,width=650,height=600,left=400,top=0');
        }
        $(function(){
          $('a[href="/post?f=5&mode=newtopic"]').attr('onClick','formpopup()').removeAttr('href').css('cursor','pointer');
        });

on supprime le :
Code:
window.close();


Le tutoriel a été mise à jour hinhin .


Milouze14





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

  
  • © PunBB | Signaler un abus