Faire remplir , verifier (nom,prenom...adresse(grâce à la carte fournit qui montre l'emplacement de l'habitat)), puis envoye

Soyez le premier à donner votre avis sur cette source.

Vue 26 441 fois - Téléchargée 44 411 fois

Description

Cette page montre un formulaire, qui, une fois les champs obligatoires remplies (correctement), et après la validation du formulaire par l'utilisateur, ouvrira une page récapitulative qui possèdera un lien. Ce lien ouvrira votre messagerie, et mettra comme texte les données transmises précédement.
Suppléments de la deuxième version ("Formulaire2.htm") :
- Certains textes changent de taille, de couleur, de couleur d'arrière-plan ... quand la souris leur passe dessus
- Plus acceuillant
Suppléments de la troisième version ("Formulaire3.htm") :
- Ajout d'une zone pour les départements (tous les départements français) avec menu déroulant
- Le choix d'un département entraîne l'affichage de son numéro dans la zone Code Postal
Suppléments de la quatrième version ("Formulaire4.htm") :
- Raccourci vers mappy
- De plus désormais en plus de la couleur, les curseurs changent
- Désormais lorsque l'utilisateur clique sur la phrase tout en bas, une fenetre apparait et lui explique ce qu'il doit faire

Source / Exemple :


/*"Formulaire4.htm"*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Formulaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
//<!--
/*(c) Nicolas DUBIEN - 2006*/
function verif_mail(email) {
var resultat0=email.search(/\s/);
if(resultat0>0) {
alert("Veuillez entrer une adresse e-mail valide, merci");
document.formulaire.email.focus();
return false;
}
var resultat1=email.search(/^[\w-.]+?@/);
var resultat2=email.search(/[.]\w{2,3}$/);
if(resultat1<0||resultat2<0) {
alert("Veuillez entrer une adresse e-mail valide, merci");
document.formulaire.email.focus();
return false;
}
}

//---------------------------------------------

function champsobl() {
alert("Pour continuer,\n\nvous êtes obligé de remplir correctement toutes les zones de textes\nprécédées par une astérix (\" * \").\n\nMerci !");
}

function ouvrirformulaire() {
var erreur=0;
if(document.formulaire.nom.value.length<1||document.formulaire.prenom.value.length<1||verif_mail(document.formulaire.email.value)==false) alert("Veillez à bien remplir tous les champs obligatoires");
else {
var messagemail=document.formulaire.nom.value+" "+document.formulaire.prenom.value;
messagemail+=" : Adresse e-mail : "+document.formulaire.email.value;
var popup="<strong><u>Nom :</u> </strong><i>"+document.formulaire.nom.value;
popup+="</i><p><strong><u>Prenom :</u> </strong><i>"+document.formulaire.prenom.value;
popup+="</i></p><p>&nbsp;</p><p><strong><u>Adresse e-mail :</u> </strong><i><p><a href=\"mailto:"+document.formulaire.email.value+"\"onmouseover=\"this.style.color='blue'\" onmouseout=\"this.style.color='red'\">"+document.formulaire.email.value+"</a></p></i>";
if(document.formulaire.adresse.value.length>0)
{
popup+="</p><p>&nbsp;</p><p><strong><u>Adresse :</u> </strong><i><a href=\"http://www.mappy.com/\"onmouseover=\"this.style.color='blue'\" onmouseout=\"this.style.color='red'\">"+document.formulaire.adresse.value+"</a></i>";
messagemail+=", Adresse : '"+document.formulaire.adresse.value+"'";
}
if(document.formulaire.ville.value.length>0)
{
popup+="</p><p><strong><u>Ville :</u> </strong><i>"+document.formulaire.ville.value+"</i>";
messagemail+=", Ville : '"+document.formulaire.ville.value+"'";
}
if(document.formulaire.departements.value.length>1)
{
popup+="</p><p><strong><u>Département :</u> </strong><i>"+document.formulaire.departements.value+"</i>";
messagemail+=", Département : '"+document.formulaire.departements.value+"'";
}
if(document.formulaire.codepostal.value.length>4)
{
popup+="</p><p><strong><u>Code postal :</u> </strong><i>"+document.formulaire.codepostal.value+"</i>";
messagemail+=", Code postal : '"+document.formulaire.codepostal.value+"'";
}
popup+="</p>";
var emaildestinataire="votrepseudo@votredomaine.com";
var sujetdumessage="Formulaire : "+document.formulaire.nom.value+" "+document.formulaire.prenom.value;
popup+="<p>&nbsp;</p><a href=\"Mailto:"+emaildestinataire+"?subject="+sujetdumessage+"&body="+messagemail+"\">Valider le formulaire</a>";
document.write(popup);
}
}
//-->
</script>
<style type="text/css">
<!--
.Style3 {color: #FF00FF; }
.Style4 {font-size: small}
#formul{color:#000000;background-color:#FFFFFF;}
#formul:hover{color:#FF6633;background-color:#FFFFCC;cursor:help;}
#champ{color:#0099FF;background-color:#FFFFCC;font-size: small;}
#champ:hover{color:#FFFFCC;background-color:#CC3300;font-weight:bold;font-size:medium;cursor:help;}
-->
</style>
</head>

<body>
<form name="formulaire" method="post" action="">
  <div align="center">
    <p><strong><a href="#" id="formul">Nom</a> <span class="Style3">*</span>: </strong>      
      <input name="nom" type="text" size="20">
</p>
    <p><strong><a href="#" id="formul">Prénom</a><span class="Style3">*</span> : </strong>
      <input name="prenom" type="text" size="20">
</p>
    <p>-------------------------------------------</p>
    <p><strong><a href="#" id="formul">Adresse e-mail</a> <span class="Style3">*</span>: </strong>       
      <input name="email" type="text" size="30">
</p>
    <p>-------------------------------------------</p>
    <p><strong><a href="#" id="formul">Adresse</a> :
      </strong>
      <input name="adresse" type="text" size="30">
    </p>
    <p><strong><a href="#" id="formul">Ville</a> :
      </strong>
      <input name="ville" type="text" size="20">
    </p>
	<p><strong><a href="#" id="formul">Départements français :</a></strong>    <select name="departements" onClick="document.formulaire.codepostal.value=document.formulaire.departements.value;">
      <option value="0"></option>
      <option value="01">01 - Ain</option>
      <option value="02">02 - Aisne</option>
      <option value="03">03 - Allier</option>
      <option value="04">04 - Alpes-de-Haute-Provence</option>
      <option value="05">05 - Hautes-Alpes</option>
      <option value="06">06 - Alpes-Maritimes</option>
      <option value="07">07 - Ardèche</option>
      <option value="08">08 - Ardennes</option>
      <option value="09">09 - Ariège</option>
      <option value="10">10 - Aube</option>
      <option value="11">11 - Aude</option>
      <option value="12">12 - Aveyron</option>
      <option value="13">13 - Bouches-du-Rhône</option>
      <option value="14">14 - Calvados</option>
      <option value="15">15 - Cantal</option>
      <option value="16">16 - Charente</option>
      <option value="17">17 - Charente-Maritime</option>
      <option value="18">18 - Cher</option>
      <option value="19">19 - Corrèze</option>
      <option value="2A">2A - Corse-du-Sud</option>
      <option value="2B">2B - Haute-Corse</option>
      <option value="21">21 - Côte-d'Or</option>
      <option value="22">22 - Côtes-d'Armor</option>
      <option value="23">23 - Creuse</option>
      <option value="24">24 - Dordogne</option>
      <option value="25">25 - Doubs</option>
      <option value="26">26 - Drôme</option>
      <option value="27">27 - Eure</option>
      <option value="28">28 - Eure-et-Loir</option>
      <option value="29">29 - Finistère</option>
      <option value="30">30 - Gard</option>
      <option value="31">31 - Haute-Garonne</option>
      <option value="32">32 - Gers</option>
      <option value="33">33 - Gironde</option>
      <option value="34">34 - Hérault</option>
      <option value="35">35 - Ille-et-Vilaine</option>
      <option value="36">36 - Indre</option>
      <option value="37">37 - Indre-et-Loire</option>
      <option value="38">38 - Isère</option>
      <option value="39">39 - Jura</option>
      <option value="40">40 - Landes</option>
	  <option value="41">41 - Loir-et-Cher</option>
      <option value="42">42 - Loire</option>
      <option value="43">43 - Haute-Loire</option>
      <option value="44">44 - Loire-Atlantique</option>
      <option value="45">45 - Loiret</option>
      <option value="46">46 - Lot</option>
      <option value="47">47 - Lot-et-Garonne</option>
      <option value="48">48 - Lozère</option>
      <option value="49">49 - Maine-et-Loire</option>
      <option value="50">50 - Manche</option>
      <option value="51">51 - Marne</option>
      <option value="52">52 - Haute-Marne</option>
      <option value="53">53 - Mayenne</option>
      <option value="54">54 - Meurthe-et-Moselle</option>
      <option value="55">55 - Meuse</option>
      <option value="56">56 - Morbihan</option>
      <option value="57">57 - Moselle</option>
      <option value="58">58 - Nièvre</option>
      <option value="59">59 - Nord</option>
      <option value="60">60 - Oise</option>
	  <option value="61">61 - Orne</option>
      <option value="62">62 - Pas-de-Calais</option>
      <option value="63">63 - Puy-de-Dôme</option>
      <option value="64">64 - Pyrénées-Atlantiques</option>
      <option value="35">65 - Hautes-Pyrénées</option>
      <option value="66">66 - Pyrénées-Orientales</option>
      <option value="67">67 - Bas-Rhin</option>
      <option value="68">68 - Haut-Rhin</option>
      <option value="69">69 - Rhône</option>
      <option value="70">70 - Haute-Saône</option>
	  <option value="71">71 - Saône-et-Loire</option>
      <option value="72">72 - Sarthe</option>
      <option value="73">73 - Savoie</option>
      <option value="74">74 - Haute-Savoie</option>
      <option value="75">75 - Paris</option>
      <option value="76">76 - Seine-Maritime</option>
      <option value="77">77 - Seine-et-Marne</option>
      <option value="78">78 - Yvelines</option>
      <option value="79">79 - Deux-Sèvres</option>
      <option value="80">80 - Somme</option>
      <option value="81">81 - Tarn</option>
      <option value="82">82 - Tarn-et-Garonne</option>
      <option value="83">83 - Var</option>
      <option value="84">84 - Vaucluse</option>
      <option value="85">85 - Vendée</option>
      <option value="86">86 - Vienne</option>
      <option value="87">87 - Haute-Vienne</option>
      <option value="88">88 - Vosges</option>
      <option value="89">89 - Yonne</option>
      <option value="90">90 - Territoire de Belfort</option>
	  <option value="91">91 - Essonne</option>
      <option value="92">92 - Hauts-de-Seine</option>
      <option value="93">93 - Seine-Saint-Denis</option>
      <option value="94">94 - Val-de-Marne</option>
      <option value="95">95 - Val-d'Oise</option>
      <option value="971">971 - Guadeloupe</option>
      <option value="972">972 - Martinique</option>
      <option value="973">973 - Guyane</option>
      <option value="974">974 - Réunion</option>
      <option value="975">975 - Saint-Pierre-et-Miquelon</option>
      <option value="984">984 - Terres-australes-et-antarctiques-françaises</option>
      <option value="985">985 - Mayotte</option>
      <option value="986">986 - Wallis-et-Futuna</option>
      <option value="987">987 - Polynésie-française</option>
      <option value="988">988 - Nouvelle-Calédonie</option>
      </select>
    <p><strong><a href="#" id="formul">Code Postal</a> :
      </strong>
      <input name="codepostal" type="text" size="10"> 
    </p>
    <a href="#" id="champ" onClick="champsobl()"><p><span class="Style3">*</span>Champs qui doivent être obligatoirement remplies</p></a>
    <p>&nbsp;</p>
    <p>
      <input type="button" name="Submit" onClick="ouvrirformulaire()" value="Envoyer le formulaire">  
      </p>
  </div>
</form>
</body>
</html>

Conclusion :


Toutes les versions sont disponibles dans le zip.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
vendredi 10 février 2006
Statut
Membre
Dernière intervention
27 janvier 2010

Slt,
intéressant comme script.
J'aimerais juste savoir si il était possible d'ouvrir le document de la requête du formulaire dans une nouvelle fenêtre ? (une fois cliqué envoyé, que cela s'ouvre dans une autre fenêtre pour ne pas perdre la page ou on installe le script)
Merci
Messages postés
126
Date d'inscription
samedi 24 avril 2004
Statut
Membre
Dernière intervention
6 janvier 2008

Ok,
Deux petites erreurs:
- Au lieu du lien vers Mappy.com, tu aurait put au moin mettre un lien vers la carte directement, ou alors utilise l'API Google.
- Les adresse e-mail se vérifie comme suit : qqch + "@" + qqch + "." + qqch. En effet, l'adresse aaa@bb.coop pourrait etre une adresse e-mail valide. Or elle est refusée par ton script.

Voila
Bonne chance

Colin CHARGY
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
bien fait, pas mauvais, mais je ne vois pas trop l'utilitée.
Messages postés
687
Date d'inscription
lundi 10 janvier 2005
Statut
Membre
Dernière intervention
27 août 2014
3
ouaip
bon ya apparemment la verif de la saisie...
personnellement je ne ferais pas comme ca mais ca peut toujours etre utile comme source

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.