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

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (ndubien)