Formulaire de contact avec masque de saisi, recuperation données, envoi mail des données + mail confirmation de contact

Soyez le premier à donner votre avis sur cette source.

Vue 25 272 fois - Téléchargée 3 353 fois

Description

C'est la 1ère fois que je poste une source. Après bcp d'heures de W et bcp d'aide trouvé sur ce site, je vous transmets le résultat :

Formulaire complêt comprenant : contact.htm
- Menus déroulants (tous les départements de France, tous les pays du monde) avec incorporation de couleurs différentes à l'intérieur des options
- Boutons radio, champs texte (avec ou non limite de caratère), cases à cocher, mail
- Faire apparaître des boutons radio et/ou champ texte à partir d'un bouton radio
- Masque de saisi téléphone, date (adapté de iubito. Merci à lui)
fichier attaché : mask.js
- champs obligtoires (adapté de bultez avec vérification des champs et changment de couleur. Merci à lui)
fichier attaché : conform.js
- vérification validité du mail (adapté de iubito. Merci à lui)

Envoi des données : envoi.php
- récupère les variables de tous les champs du formulaire à partir du name ou id
- vérification des champs obligatoires (plus simple si on ne veut pas utiliser la solution de bultez)
- envoi d'un mail HTML qui contient les données classées (rangées)
- envoi d'un mail de confirmation au client de réception de sa demande (contenu modifiable avec possible de personnaliser son contenu)

Soit en tout 4 fichiers :
contact.htm
envoi.php
conform.js
mask.js

Voici le bilan de ce travail ! J'espère que d'autre pourrons en profiter car il a fallu un mois de travail pour réaliser et faire marcher tous ces éléments ensemble.

Source / Exemple :


PREMIERE ETAPE :

fichier contact.htm : Placer le code suivant dans un page que vous nommez contact.htm

<HTML>
<HEAD>

<TITLE></TITLE>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}//-->
</script>

<!--scipt pour le masque du numéro téléphone, date et mail-->
<script language="JavaScript1.2" src="masks.js"></script>

<script language="JavaScript1.2">
<!--//
var bShowTests = true;
var oResults = 
{
"browser": 
	{
	"userAgent": navigator.userAgent,
	"appName": navigator.appName,
	"appVersion": navigator.appVersion,
	"appCodeName": navigator.appCodeName
	},
"string": [],
"date": [],
"number": []
};
	
function writeOutput(v)
{
document.write(v + "<br />");
}
	
function updateResults(m, v, e)
{
if( m.value != e )
	{
	var i = oResults[m.type].length;
			oResults[m.type][i] = 
			{
			"supplied": v,
			"value": m.value,
			"expected": e,
			"error": m.error.join("|"),
			"mask": m.mask
			};
		}
	}
	
function postResults()
{
if( oResults.string.length + oResults.date.length + oResults.number.length == 0 ) return alert("No errors to report!");
// form object
var oForm = document.frmReport;
// create serializer object
var oSerializer = new WddxSerializer();
// serialize WDDX packet
oForm.wddx.value = oSerializer.serialize(oResults);
oForm.submit();
}

function stringTest(v, m, e)
{
if( !bShowTests ) return false;
var oMask = new Mask(m);
writeOutput("<b>mask:</b> "  + m);
writeOutput("<b>string:</b> " + v);
var n = oMask.format(v);
if( e != n ) document.write("<font color=red>");
writeOutput("<b>result:</b> " + n);
writeOutput("<b>expected:</b> " + e);
if( e != n ) document.write("</font>");
writeOutput("<b>error:</b> " + ((oMask.error.length == 0) ? "n/a" : oMask.error.join("<br>")));
writeOutput("");
updateResults(oMask, v, e);
}

function numberTest(v, m, e)
{
if( !bShowTests ) return false;
var oMask = new Mask(m, "number");
writeOutput("<b>mask:</b> "  + m);
writeOutput("<b>string:</b> " + v);
var n = oMask.format(v);
if( e != n ) document.write("<font color=red>");
writeOutput("<b>result:</b> " + n);
writeOutput("<b>expected:</b> " + e);
if( e != n ) document.write("</font>");
writeOutput("<b>error:</b> " + ((oMask.error.length == 0) ? "n/a" : oMask.error.join("<br>")));
writeOutput("");
updateResults(oMask, v, e);
}

function dateTest(v, m, e)
{
if( !bShowTests ) return false;
var oMask = new Mask(m, "date");
writeOutput("<b>mask:</b> "  + m);
writeOutput("<b>string:</b> " + v);
var n = oMask.format(v);
if( e != n ) document.write("<font color=red>");
writeOutput("<b>result:</b> " + n);
writeOutput("<b>expected:</b> " + e);
if( e != n ) document.write("</font>");
writeOutput("<b>error:</b> " + ((oMask.error.length == 0) ? "n/a" : oMask.error.join("<br>")));
writeOutput("");
updateResults(oMask, v, e);
}

function init()
{
document.monform.reset();
// Création du masque de téléphone ##.##.##.##.##
oStringMask = new Mask("##.##.##.##.##", "string");
	
// Associer la fonction oStringMask aux 2 champs "portable" et "fixe"
oStringMask.attach(document.monform.portable);
oStringMask.attach(document.monform.fixe);
		
// Création du masque de date jj/mm/aaaa
oDateMask = new Mask("dd/mm/yyyy", "date");
		
// Associer la fonction oDateMask au champs "date"
oDateMask.attach(document.monform.date);
		
// Création du masque number "$#,###.00"
oNumberMask = new Mask("$#,###.00", "number");
		
// Associer la fonction oNumberMask au champs "number"
oNumberMask.attach(document.monform.number);
}
//-->
</script>
	
<script	type="text/javascript"src="ConForm.js">
			
<script type="text/javascript">
function ok()
{ 
alert ("tous les contrôles sont bons"); 
}
</script>

<!--script boutons actif/masqué-->
<script language="Javascript">
// ==================
//	Activations - Désactivations
// ==================
function GereControle(Controleur, Controle, Masquer) 
{
var objControleur = document.getElementById(Controleur);
var objControle = document.getElementById(Controle);
if (Masquer=='1')
objControle.style.visibility=(objControleur.checked==true)?'visible':'hidden';
else
objControle.disabled=(objControleur.checked==true)?false:true;
return true;
}
</script>

<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/

function valider() 
{
var form_err = " "
//Remplacer partout dans ce script monform par le nom de votre formulaire
if ( document.monform.mail.value.length < 1) 
     {
     form_err = "Email invalide ! - ";
     }
if ( document.monform.mail.value == "votrenom@mail.com") 
     {
     form_err = "Email invalide ! - ";
     }
var verim = 0;
for (i=1; i<document.monform.mail.value.length -4; i++) 
     {
if ( document.monform.mail.value.charAt(i) == "@") 
          {
           verim = 1;
          }
     } 
if ( verim == 0) 
     {
     form_err = "Email invalide ! - \n";
     } 
if ( document.monform.nom.value.length < 1) 
     {
     form_err += "Veuillez entrer votre Nom. - \n";
     }
if ( document.monform.prenom.value.length < 1) 
     {
     form_err += "Veuillez entrer votre Prenom. - \n";
     } 
if ( document.monform.ville_actuelle.value.length < 1) 
     {
form_err += "Veuillez entrer votre ville. - \n";
     } 
//--> if(!form.case_a_cocher.checked) alert('Vous devez cocher la case !');
} 
if ( form_err != " ") 
{
alert(form_err);
return false;
}
return true 
}
//-->
</script>

</head>

<!-- initialise le script pour les masques telephone, date, mail et nombre et pour le controle d'affichage des champs-->

<body onLoad="GereControle('derniere_classe','totalite','1'); GereControle('derniere_classe','arret','1'); GereControle('derniere_classe','derniere','1'); init(); ">   
 
<p align="center">&nbsp;FICHE CONTACT</p>

<form action="envoi.php" method="post" name="monform" onSubmit="return (ConForm(this));">

<table width="599" border="0" cellpadding="0" cellspacing="0">
<tbody><tr bordercolor="1"><td align="center">* Champs Obligatoires</td>
<td bgcolor="#FFCACA" align="center"><strong> Votre identité : </strong></td></tr>
		
<tr><td align="right" height="22" bgcolor="#E8E8E8">*</td>
<td width="433" colspan="2">
<input type=radio name="civil" lang="type:radio;erreur:- Merci de renseigner votre situation familiale;erreurfond:red;" value="Mme"/>Mme
<input type=radio name="civil" value="Mlle"/>Mlle
<input type=radio name="civil" value="Mr"/>Mr</tr>
	  
<tr><td width="166" align="right" bgcolor="#E8E8E8"> *Nom :</td>
<td colspan="2">
<input size="30" name="nom" lang="erreurfond:#FF0000;mini:2;maxi:30;type:obligatoire;erreur:- Merci de mettre votre Nom" /></tr>
      
<tr><td width="166" align="right" bgcolor="#E8E8E8"> *Prénom :</td>
<td>
<input size="30" name="prenom" lang="nom:;erreurfond:#FF0000;mini:2;	maxi:30;type:obligatoire;erreur:- Merci de mettre votre Prénom"/></tr>

<tr><td align="right" bgcolor="#E8E8E8"> *Date de naissance :</td>        
<td>
<select name="jour_naissance" lang="erreurfond:#FF0000;type:liste;erreur:- Renseigner votre jour de naissance" size="1">
<!-- option vide permet de laisser un champ vide en premier --> 
<option>
<option>01<option>02<option>03<option>04<option>05<option>06<option>07<option>08<option>09<option>10<option>11
<option>12<option>13<option>14<option>15<option>16<option>17<option>18<option>19<option>20<option>21<option>22
<option>23<option>24<option>25<option>26<option>27<option>28<option>29<option>30<option>31
</option></select>
		
<select name="mois_naissance" lang="erreurfond:#FF0000;type:liste;erreur:- Renseigner votre mois de naissance" size="1">
<!-- option vide permet de laisser un champ vide en premier --> 
<option>  
<option>Janvier<option>Février<option>Mars<option>Avril<option>Mai<option>Juin<option>Juillet<option>Aout
<option>Septembre<option>Octobre<option>Novembre<option>Décembre
</option></select>
			
<select name="annee_naissance" lang="erreurfond:#FF0000;type:liste;erreur:- Renseigner votre année de naissance" size="1">
<!-- option vide permet de laisser un champ vide en premier --> 
<option>
<option>1960<option>1961<option>1962<option>1963<option>1964<option>1965<option>1966<option>1967<option>1968
<option>1969<option>1970<option>1971<option>1972<option>1973<option>1974<option>1975<option>1976<option>1977
<option>1978<option>1979<option>1980<option>1981<option>1982<option>1983<option>1984<option>1985<option>1986
<option>1987<option>1988<option>1989<option>1990<option>1991<option>1992<option>1993<option>1994<option>1995
</option></select></tr>

<tr bordercolor="1"><td align="right" bgcolor="#E8E8E8">Ville de naissance :</td>
<td><input name="ville_naissance" value="" size="50" maxlength="50" /></tr>

<tr bordercolor="1"><td align="right" bgcolor="#E8E8E8">Département de naissance :</td><td><p>
<select name="departement_naissance" size="1">
<option selected>Département<option>01 - Ain<option> 02 - Aisne<option> 03 - Allier
<option> 04 - Alpes de Haute Provence<option> 05 - Hautes Alpes<option> 06 - Alpes Maritimes
<option> 07 - Ardeche<option> 08 - Ardennes<option> 09 - Ariege<option> 10 - Aube<option> 11 - Aude
<option> 12 - Aveyron<option> 13 - Bouches du Rhone<option> 14 - Calvados<option> 15 - Cantal
<option> 16 - Charente<option> 17 - Charente Maritime<option> 18 - Cher<option> 19 - Correze
<option> 20 - Corse<option> 21 - Cote d'Or<option> 22 - Cotes d'Armor<option> 23 - Creuse
<option> 24 - Dordogne<option> 25 - Doubs<option> 26 - Drome<option> 27 - Eure<option> 28 - Eure et Loir
<option> 29 - Finistere<option> 30 - Gard<option> 31 - Haute Garonne<option> 32 - Gers<option> 33 - Gironde
<option> 34 - Herault<option> 35 - Ille et Vilaine<option> 36 - Indre<option> 37 - Indre et Loire
<option> 38 - Isere<option> 39 - Jura<option> 40 - Landes<option> 41 - Loir et Cher<option> 46 - Lot
<option> 47 - Lot et Garonne<option> 48 - Lozere<option> 49 - Maine et Loire<option> 50 - Manche
<option> 51 - Marne<option> 52 - Haute Marne<option> 53 - Mayenne<option> 54 - Meurthe et Moselle
<option> 55 - Meuse<option> 56 - Morbihan<option> 57 - Moselle<option> 58 - Nievre<option> 59 - Nord
<option> 60 - Oise<option> 61 - Orne<option> 62 - Pas de Calais<option> 63 - Puy de Dome
<option> 64 - Pyrenees Atlantiques<option> 65 - Hautes Pyrenees<option> 66 - Pyrenees Orientales
<option> 67 - Bas Rhin<option> 68 - Haut Rhin<option> 69 - Rhone<option> 70 - Haute Saone
<option> 71 - Saone et Loire<option> 72 - Sarthe<option> 73 - Savoie<option> 74 - Haute Savoie
<option> 75 - Paris<option> 76 - Seine Maritime<option> 77 - Seine et Marne<option> 78 - Yvelines
<option> 79 - Deux Sevres<option> 80 - Somme<option> 81 - Tarn<option> 82 - Tarn et Garonne<option>83 - Var
<option> 84 - Vaucluse<option> 85 - Vendee<option> 86 - Vienne<option> 87 - Haute Vienne<option> 88 - Vosges
<option> 89 - Yonne<option> 90 - Territoire de Belfort<option> 91 - Essonne<option> 92 - Hauts de Seine
<option> 93 - Seine Saint denis<option> 94 - Val de Marne<option> 95 - Val d'Oise</option>
</select></p></tr>

<tr bordercolor="1"><td height="24" align="right" bgcolor="#E8E8E8"> Pays de naissance :</td>
<td><select name="pays_naissance" size="1">
<option selected>Pays<option>France<option>Afghanistan<option>Afrique du Sud<option>Albanie<option>Algérie
<option>Allemagne<option> Andorre<option>Angola<option>Anguilla<option>Antarctique<option>Antigua-et-Barbuda
<option>Antilles néerlandaises<option> Arabie saoudite<option>Argentine<option>Arménie<option>Aruba<option>Australie
<option>Autriche<option>Azerbaïdjan<option> Bénin<option>Bahamas<option>Bahreïn<option>Bangladesh<option>Barbade
<option>Belau<option>Belgique<option>Belize<option>Bermudes<option>Bhoutan<option>Biélorussie<option>Birmanie
<option>Bolivie	<option> Bosnie-Herzégovine<option>Botswana<option>Brésil<option>Brunei<option>Bulgarie
<option>Burkina Faso<option>Burundi<option>Côte d'Ivoire<option>Cambodge<option> Cameroun<option>Canada<option>Cap-Vert
<option>Chili<option>Chine<option>Chypre<option>Colombie<option>Comores<option>Congo<option> Corée du Nord<option>Corée du Sud
<option>Costa Rica<option>Croatie<option>Cuba<option>Danemark<option>Djibouti<option>Dominique<option>Égypte
<option>Émirats arabes unis<option>Équateur<option>Érythrée<option>Espagne<option>Estonie<option>États-Unis<option>Éthiopie
<option>Finlande<option>France<option>Géorgie<option>Gabon<option>Gambie<option>Ghana<option>Gibraltar<option>Grèce<option>Grenade
<option>Groenland<option>Guadeloupe<option>Guam<option>Guatemala<option>Guinée<option>Guinée équatoriale<option>Guinée-Bissao
<option>Guyana<option>Guyane française<option>Haïti<option>Honduras<option>Hong Kong<option>Hongrie<option>Ile Bouvet
<option>Ile Christmas<option>Ile Norfolk<option>Iles Cayman<option>Iles Cook<option>Iles Féroé<option>Iles Falkland
<option>Iles Fidji<option>Iles Géorgie du Sud et Sandwich du Sud<option>Iles Heard et McDonald<option>Iles Marshall
<option>Iles Pitcairn<option>Iles Salomon<option>Iles Svalbard et Jan Mayen<option>Iles Turks-et-Caicos
<option>Iles Vierges américaines<option> Iles Vierges britanniques<option>Iles des Cocos (Keeling)
<option>Iles mineures éloignées des États-Unis<option>Inde<option>Indonésie<option>Iran<option>Iraq<option>Irlande<option>Islande
<option>Israël<option>Italie<option>Jamaïque<option>Japon<option>Jordanie<option>Kazakhstan<option>Kenya<option>Kirghizistan
<option>Kiribati<option>Koweït<option>Laos<option>Lesotho<option>Lettonie<option>Liban<option>Liberia<option>Libye
<option>Liechtenstein<option>Lituanie<option>Luxembourg<option>Macao<option>Madagascar<option>Malaisie<option>Malawi<option>Maldives
<option>Mali<option>Malte<option>Mariannes du Nord<option>Maroc<option>Martinique<option>Maurice<option>Mauritanie<option>Mayotte
<option>Mexique<option>Micronésie<option>Moldavie<option>Monaco<option>Mongolie<option>Montserrat<option>Mozambique<option>Népal
<option>Namibie<option>Nauru<option>Nicaragua<option>Niger<option>Nigeria<option>Nioué<option>Norvège<option>Nouvelle-Calédonie
<option>Nouvelle-Zélande<option>Oman<option>Ouganda<option>Ouzbékistan<option>Pérou<option>Pakistan<option>Panama
<option>Papouasie-Nouvelle-Guinée Paraguay<option>Pays-Bas<option>Philippines<option>Pologne<option>Polynésie française
<option>Porto Rico<option>Portugal<option> Qatar<option>République centrafricaine<option>République démocratique du Congo
<option>République dominicaine<option>République tchèque<option>Réunion<option>Roumanie<option>Royaume-Uni<option>Russie
<option>Rwanda<option>Sénégal<option>Sahara occidental <option>Saint-Christophe-et-Niévès<option>Saint-Marin
<option>Saint-Pierre-et-Miquelon<option>Saint-Siège<option>Saint-Vincent-et-les-Grenadines<option>Sainte-Hélène<option>Sainte-Lucie
<option>Salvador<option>Samoa<option>Samoa américaines<option>Sao Tomé-et-Principe<option>Seychelles<option>Sierra Leone
<option>Singapour<option>Slovénie<option>Slovaquie<option>Somalie<option>Soudan<option>Sri Lanka<option>Suède<option>Suisse
<option>Suriname<option>Swaziland<option>Syrie<option>Taïwan<option>Tadjikistan<option>Tanzanie<option>Tchad
<option>Terres australes françaises<option>Territoire britannique de l'Océan Indien<option>Thaïlande<option>Timor Oriental
<option>Togo<option>Tokélaou<option>Tonga<option>Trinité-et-Tobago<option>Tunisie<option>Turkménistan<option>Turquie<option>Tuvalu
<option>Ukraine<option>Uruguay<option>Vanuatu<option>Venezuela<option>Viêt Nam<option>Wallis-et-Futuna<option>Yémen
<option>Yougoslavie<option>Zambie<option>Zimbabwe<option>ex-République yougoslave de Macédoine
</option></select></tr></tbody></table>
	  
<table width="597" border="0" cellspacing="0"><tbody><tr>
<td align="center">* Champs Obligatoires</td>
<td bgcolor="#FFCACA" align="center"><b> Vos coordonnées : </b></td></tr>

<tr><td width="166" align="right" bgcolor="#E8E8E8">*Numéro :</td>
<td width="431" colspan="2" ><input size="3" name="numero" lang="nom:;erreurfond:#FF0000;mini:1;	maxi:3;type:obligatoire;erreur:- Merci de mettre le numéro de votre voie" maxlength="3"/>

  • Type Voie :
<select name="voie" lang="erreurfond:#FF0000;type:liste;erreur:- Renseigner le type de voie" size="1" > <option> <option>Avenue<option>Boulevard<option>Chemin<option>Faubourg<option>Impasse<option>Hameau<option>Lieu-dit <option>Lotissement<option>Place<option>Quai<option>Route<option>Rue<option>Square </option></select></tr> <tr><td width="166" align="right" bgcolor="#E8E8E8"> *Adresse :</td><td><p> <input name="adresse" value="" lang="nom:;erreurfond:#FF0000;mini:1; maxi:50;type:obligatoire;erreur:- Merci de mettre votre adresse" size="50" maxlength="50"/></p></tr> <tr><td width="166" align="right" bgcolor="#E8E8E8"> *Code Postal :</td><td><p> <input size="5" name="code_postal" lang="nom:;erreurfond:#FF0000;mini:1;maxi:5;type:obligatoire;erreur:- Merci de mettre votre code postal" maxlength="5" /></p></tr> <tr><td align="right" bgcolor="#E8E8E8">*Ville :</td><td> <input name="ville_actuelle" value="" size="50" lang="nom:;erreurfond:#FF0000;mini:1; maxi:50;type:obligatoire;erreur:- Merci de mettre votre ville" maxlength="50"/></tr> <tr><td align="right" bgcolor="#E8E8E8"> Téléphone Fixe : </td><td><p> <input type="text" name="fixe" value="" /></p></tr> <tr><td align="right" bgcolor="#E8E8E8"> Téléphone Portable : </td><td><p> <input type="text" name="portable" value="" /> </p></tr> <tr><td align="right" bgcolor="#E8E8E8"> Adresse Mail :</td><td><p> <input name="mail" value="" lang="type:mail;erreur:- Merci de mettre une adresse mail valide" size="50" maxlength="50"/> </p></tr></tbody></table> <table width="597" border="0" cellpadding="0" cellspacing="0"><tbody> <tr><td align="center">* Champs Obligatoires <td bgcolor="#FFCACA" align="center"><b> Votre scolarité actuelle : </b></td></tr> <tr><td width="163" height="28" bgcolor="#E8E8E8" align="right">*Classe fréquentée : </td> <td> <input type="radio" id="classe_actuelle" name="scolarite" value="Classe fréquentée actuellement" onClick="GereControle('derniere_classe','totalite','1');GereControle('derniere_classe','arret','1');GereControle('derniere_classe','derniere','1');" lang="type:radio;erreur:- Merci de renseigner votre scolarité actuelle;erreurfond:red;"/> Classe fréquentée actuellement <br> <input type="radio" id="derniere_classe" name="scolarite" value="Dernière Classe fréquentée" onClick="GereControle('derniere_classe','totalite','1');GereControle('derniere_classe','arret','1');GereControle('derniere_classe','derniere','1');" /> Dernière classe fréquentée</td></br> <tr><td width="163" height="50" bgcolor="#E8E8E8"></td> <td><p align="center"> <select id="origine_scolaire" name="origine_scolaire" lang="erreurfond:#FF0000;type:liste;erreur:- Mettre votre classe fréquentée"> <option></option> <option style="color:#990000;background-color:#FFFFC1">CLASSES COLLEGE</option> <option>... 6ème</option><option>... 5ème</option><option>... 4ème</option><option>... 3ème</option> <option style="color:#990000;background-color:#FFFFC1">CLASSES LYCEE GENERAL/TECHNO</option> <option>... Seconde</option><option>... 1ère</option><option>... Terminale</option> <option style="color:#990000;background-color:#FFFFC1">CLASSES PROFESSIONNELLES</option> <option>... 1ère année CAP</option><option>... 1ère année BEP</option> <option>.. Terminale CAP</option><option>.. Terminale BEP</option><option>... Bac Professionnel</option><option>Autres </option></select> </p> <p>Si Autres, Précisez : <input type="text" name="autres" maxlength="50" size="50" /></p></tr> <tr><td width="163" height="66" bgcolor="#E8E8E8"></td> <td><p><span id="derniere" >Année <input type="text" name="derniere_annee" maxlength="4" size="4" ><br></span> <span id="totalite"><input type="radio" id="totalite" name="scolarite_actuelle" value="en totalité en"> Classe fréquentée en totalité <br /> <input type="radio" id="arret" name="scolarite_actuelle" value="arrêtée en cours d'année en"> Arrêt de la scolarité en cours d'année &nbsp;&nbsp;</span></p></tr></tbody></table> <table width="597" height="132" border="0" cellpadding="0" cellspacing="0"> <tbody><tr><td height="19" align="right"> <td bgcolor="#FFCACA" align="center"><b> Votre Demande : </b></td></tr> <tr><td width="166" height="63" align="right" bgcolor="#E8E8E8"> Documentation : </td> <td><input type="checkbox" name="documentation" value="demande de documentation"/> Une demande de documentation <br> <input type="checkbox" name="documentation_deux" value="demande de liste de maîtres d'apprentissage"/> Vous souhaitez que l'on vous envoie une liste de maîtres d'apprentissage</td> <tr><td height="24" align="right" bgcolor="#E8E8E8"></td> <td><p> Votre demande conserne quelle année scolaire ? <select id="annee_scolaire" name="annee_scolaire"> <option>2007/2008</option><option>2008/2009</option><option>2009/2010 </option></select> </p></tr></br> <tr><td height="7" align="right" bgcolor="#E8E8E8"> Formations souhaitées : </td> <td> <select name="choix_un"> <option></option> <option style="color:#990000;background-color:#FFFFC1">BOUCHER</option> <option>...CAP Boucher</option><option>...BEP Boucher</option> <option style="color:#990000;background-color:#FFFFC1">COIFFURE</option> <option>...CAP Coiffure</option><option>...MC Coiffure</option><option>....BP Coiffure</option> </select></tr></tbody></table> <p align="center">Observations ou Remarques :<br> <textarea name="observations" cols="50" rows="5"></textarea></p> <p align="center"></br> <br> <input name="submit" type="submit" value=" Envoyer "/> <input name="reset" type="reset" value=" Annuler "/></p></br> </form> </BODY></HTML> DEUXIEME ETAPE : Fichier envoi.php Code suivant à placer dans une page que vous appellerez envoi.php : <?php // Information qui apparaittra si les champs obligatoires ne sont pas remplis $msg_erreur = "Erreur. Les champs suivants doivent être obligatoirement remplis :<br/><br/>"; // Information qui apparaittra si les 2 messages ont bien été envoyé $msg_ok = "Votre demande a bien été prise en compte. Elle sera traitée dans les meilleurs délais.\nUn mail de confirmation vous a été envoyé."; $message = $msg_erreur; define('MAIL_DESTINATAIRE','votremail@votredomaine.com'); // remplacer par votre email define('MAIL_SUJET','Objet du mail'); // remplacer l'objet du mail qui sera envoyé // vérification des champs obligatoires (doublon avec le script si des champs obligatoires incorporés dans le formulaire) if (empty($_POST['nom'])) $message .= "Votre nom<br/>"; if (empty($_POST['prenom'])) $message .= "Votre prenom<br/>"; if (strlen($message) > strlen($msg_erreur)) { echo $message; // sinon c'est ok } else { foreach($_POST as $index => $valeur) { $$index = stripslashes(trim($valeur)); } //Préparation de l'entête du mail: $mail_entete = "MIME-Version: 1.0\r\n"; $mail_entete .= "From: {$_POST['nom']} " ."<{$_POST['mail']}>\r\n"; $mail_entete .= 'Reply-To: '.$_POST['mail']."\r\n"; $mail_entete .= 'Content-Type: text/plain; charset="iso-8859-1"'; $mail_entete .= "\r\nContent-Transfer-Encoding: 8bit\r\n"; $mail_entete .= 'X-Mailer:PHP/' . phpversion()."\r\n"; // Préparation du corps du mail // Remplacer le nom des variables suivantes par les noms de vos variables (name ou id) du formulaire // Utiliser \n pour aller à la ligne $mail_corps = "Demande de : $civil $nom $prenom\n"; $mail_corps .= "Date de naissance : $jour_naissance/$mois_naissance/$annee_naissance\n"; $mail_corps .= "Ville de naissance : $ville_naissance\n"; $mail_corps .= "Département de naissance : $departement_naissance\n"; $mail_corps .= "Pays de naissance : $pays_naissance\n\n"; $mail_corps .= "Renseigements sur l'adresse de $nom $prenom : \n"; $mail_corps .= "Adresse : $numero $voie $adresse $code_postal $ville_actuelle\n"; $mail_corps .= "Téléphone Fixe : $fixe\n"; $mail_corps .= "Téléphone Portable : $portable\n"; $mail_corps .= "Mail : $mail\n\n"; $mail_corps .= "Renseigements sur la scolarité : \n"; // Ligne suivante, besoin de mettre le nom de "id" et du "name" pour afficher correctement les "value" des boutons radio $mail_corps .= "Scolarité effectuée : $scolarite $classe_actuelle $scolarite_actuelle $totalite $arret $derniere_annee\n"; $mail_corps .= "Origine scolaire : $origine_scolaire $autres\n\n"; $mail_corps .= "Renseigements sur la ou les formation(s) souhaitée(s) au CFA :\n"; $mail_corps .= "Demande faite pour l'année scolaire : $annee_scolaire\n"; $mail_corps .= "1er souhait de formation : $choix_un\n"; $mail_corps .= "2eme souhait de formation : $choix_deux\n"; $mail_corps .= "3eme souhait de formation : $choix_trois\n"; $mail_corps .= "Documentation(s) souhaitée(s) : $documentation $documentation_deux\n\n"; $mail_corps .= "Observation : $observations\n\n"; // envoi du mail if (mail(MAIL_DESTINATAIRE,MAIL_SUJET,$mail_corps,$mail_entete)) { //Le mail est bien expédié echo $msg_ok; } else { //Le mail n'a pas été expédié echo 'Une erreur est survenue lors de l\'envoi du formulaire par email'; } } // Message de confirmation de reception de demande // --------------------------- /* Objet */ // Mettre votre nom de domaine $subject = "Confirmation de votre demande sur www.domaine.com"; /* additional header pieces for errors, From cc's, bcc's, etc */ // Adresse mail (variable du formulaire contact) $headers = "From: $mail <$mail>\n"; // Remplacer le mail suivant par votre mail $headers .= "X-Sender: <votremail@votredomaine.com>\n"; $headers .= "X-Mailer: PHP\n"; // mailer $headers .= "X-Priority: 1\n"; // Urgent message! // Remplacer le mail suivant par votre mail $headers .= "Return-Path: Sales <votremail@votredomaine.com>\n"; // Return errors /* recipients */ $recipient = $mail; /* message */ // Remplacer le contenu du message suivant par celui qui vous convient // Vous pouvez à l'intérieur de celui-ci rappeller les variables en mettant $nom etc... $message = "Bonjour $prenom $nom Merci pour votre message. Nous traiterons votre demande dans les plus bref delais. Cordialement. Rappel de vos informations personnelles: ------------------------------ Votre nom: $nom Votre addresse: $prenom Votre ville de residence : $ville votre Email: $mail Votre message: $observations Si vous recevez ce mail par erreur, merci de nous contactez au plus vite par email : votremail@votredomaine.com A tres bientot http://www.votredomaine.com ------------------------------- "; mail($recipient, $subject, $message, $headers); ?> Si vous souhaitez conserver que envoi.php modifiez bien tous les variables pour qu'ils correspondent aux votres. Volontairement, je ne transmettrais pas les sources des fichiers marsk.js et conform.js (sauf dans le ZIP) car il suffit de faire une recherche sur ce site http://www.javascriptfr.com pour les retrouver facilement avec les coordonnées de leur auteur.

Conclusion :


Je ne suis pas développeur mais gràce aux croissements de pleins de codes (merci à leurs auteurs) et à mes créations, ce formulaire existe.

Bon courage à vous.

En conclusion, je dirais qu'on peut vraiment faire des choses étonnantes avec les languages html, javascript et php quand on les combinne (et qu'on arrive à les faire vivre ensemble... :-).

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Bonjour,
je vous remercie pour ce code source que vous avez partagé avec nous.
je suis débutant sur php, j'ai un problème je voulais tester l'envoi d'email, donc j'ai remplacé ce qu'il faut, mais malheureusement ça ne marche pas.
j'envoi le formulaire, j'ai le message de confirmation que c'est ok, mais sur ma boite émail, je ne reçois rien, je ne sais pas ce qui cloche??..
Merci de m'aider
Messages postés
29627
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 septembre 2020
337 > mika75
Bonjour,
Si tu as un souci... le mieux c'est d'ouvrir directement une question sur le forum.
Quoi qu'il en soit, si tu es en "local" sur ton ordi (et non sur un serveur...) la fonction "mail" ne fonctionnera qu'a condition d'avoir installé un logiciel tel que fakeSendmail et configuré le serveur SMTP.
Dans le cas contraire, tu peux aussi utiliser la class PHP : PhpMailer et utiliser ton compte de messagerie (comme gmail par exemple) pour générer l'envoi des messages.
Messages postés
1
Date d'inscription
lundi 31 décembre 2012
Statut
Membre
Dernière intervention
14 mai 2013

franchement je mets un 10 / 10.
ce code est magnifique, après a chacun de l'adapté a ces besoins
Messages postés
1
Date d'inscription
mercredi 2 février 2005
Statut
Membre
Dernière intervention
12 janvier 2012

Franchement, merci pour ce super code, moi j'ai enlevé tout les champs qui m'arrangeaient pas sans problème et j'ai apporté quelques modifs, par exemple dans le $msg_ok jai ajouté les balises html pour que cette page ressemble aux autres pages de mon site et que le sujet entré dans le formulaire soit l'objet de mon mail et ça fonctionne très bien. Et merci aux autres aussi j'ai tenu compte des remarques et modifié le code en conséquence. Enfin je suis ni programmeuse ni développeuse mais j'ai vraiment pu me débrouillé facilement alors encore merci mille fois.
Messages postés
16
Date d'inscription
vendredi 6 décembre 2002
Statut
Membre
Dernière intervention
2 septembre 2010
1
OOps ... allez 2 étoiles
Afficher les 18 commentaires

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.