Changer la mise en forme d'un form pendant un mailto

Version imprimable

Bonjour,

(Je ne savais pas où poster ce topic, dans HTML ou Javascript donc j'ai posté ici)

Je suis en train de m'entraîner en HTML/CSS/Javascript et j'aimerai savoir si il y a moyen d'organiser les informations d'un formulaire envoyer via un mailto pour que cela soit mieux organiser ?

Code:

<form name="form1" action="mailto:mon.mail" method="post" enctype="text/plain" onSubmit="return testandsend();">

Voici ce que j'ai actuellement quand j'envoie mon formulaire :
http://nsm08.casimages.com/img/2013/...9411754284.jpg

Et j'aimerai donc changer le sujet ("Formulaire posté depuis Firefox"), organiser les données ("Nom=e", etc) pour que ce soit plus lisible, et enlever le "envoyer=Envoyer", et si possible sans PHP ^^'

Actuellement en javascript j'ai sa :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <script language="javascript"> //Déclaration de variable function testnom() { //test le nom dans la case "Nom" HTML avec une RegExp } function testmail() { //test le mail dans la case "Mail" HTML avec une RegExp } function testcheckbox() { //Test si au moins une checkbox est coché } function testselected() { //Test si l'option de la liste choisi est différent de la valeur par défaut } function testarea() { //Test si le texte dans la case textarea est vide ou égal au texte par défaut } function testandsend() { //Test et autorise le submit() si toutes les function retourne "true" } function changetextarea(action) { //Supprime/Remet le texte par défaut dans textarea si on met/enlève le focus du textarea } </script>
Quelqu'un aurait une idée s'il vous plaît ?

Cordialement,

Un très vieux code html tout pourri, mais qui aura au moins le merite de te montrer comment concaténer toi même ton message mailto

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<title>Demande de plaquette</title>
<style type="text/css">
input, label {cursor:pointer;
		}		
.labels {
       font-family:Geneva, Arial, Helvetica, sans-serif;
       font-size:11px;
       color:white;}
textarea {background-color:#cccccc;}
 
</style>
<script>
// Author SkM 2004
var Adresse;
var AdrCor;
var Demande;
var Email1;
var Email2;
var MonSujet="";
var Catal="";
 
function GetContenu()
{
//E-mail du destinataire:
Email1='cc';
Email2='nord-ouest-creation.fr';
Demande="Messieurs, %0A%0AMerci de bien vouloir me faire parvenir la documentation suivante :%0A";
//Vérification saisie
var MaxChoice = 3
Catal=""
for (i=1; i<MaxChoice+1;i++)
{
 if (document.getElementById('Catal'+i).checked)
	{
	Catal = Catal + '\- ' + document.getElementById('Catal'+i).value + '%0A'
	}
}
 
if (Catal=="") {
	alert('Vous n\'avez pas sélectionné de catalogue!')
   return false;
   }
 
Adresse=""
Adresse=document.getElementById('PostAdr');
if (Adresse.value=="") 
{
alert('Vous n\'avez pas saisi d\'adresse postale !');
Adresse.focus();
return false;
}
 
else{
AdrCorr=""
AdrCorr=Adresse.value.split("\n");
AdrCorr=AdrCorr.join('%0A');
return true;
}
 
}
 
 
 
function mailenquiry(Adr)
{
if (Adr==false){
  					return false;
  					exit
  				  }
 
else {  
//L'objet du message
MonSujet="Demande de plaquette.";
 
 
//Le texte du message
var Autre= document.getElementById('Autre').value.split("\n");
Autre= Autre.join('%0A');
 
if(Autre.length>0){
Demande=Demande+Catal+'%0A%0AAutre Demande:%0A'+Autre+'%0A%0A'+ '%0A%0Aà l\'adresse suivante:%0A'+AdrCorr+'%0A%0A%0AMerci.';
 
}
else { 
Demande=Demande+Catal+'%0A%0Aà l\'adresse suivante:%0A'+AdrCorr+'%0A%0A%0AMerci.';
alert (Demande);
}
 
//L'envoi du mail
 window.location.href='mailto:'+Email1+'@'+Email2+'\?Subject='+MonSujet+'&body='+Demande;
  //Le message de rappel
 alert('N\'oubliez pas d\'envoyer le mail avec votre gestionnaire de messagerie electronique !')
}
}
 
</script>
</head>
<body bgcolor="#000000">
<div style="padding:5px;"> 
   <br />
  <br />
  <a class="labels">
  <b>1</b> -  Veuillez cocher les cases pour recevoir une documentation :</a>
  <table width="243" height="80" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="27">
			<input type="checkbox" style="color:red;" id="Catal1" name="option1" value="Plaquette Trade " onfocus="this.blur()" /></td>
      <td width="216" valign="middle"> 
        <label class="labels" for="Catal1">Plaquette Trade </label>
      </td>
    </tr>
    <tr>
      <td width="27">
			<input type="checkbox" id="Catal2" name="option2" value="Plaquette Nord " onfocus="this.blur()" />
	   </td>
       <td width="216" valign="middle">
          <label class="labels" for="Catal2">Plaquette Nord</label>
       </td>
    </tr>
    <tr>
      <td width="27">
			<input type="checkbox" id="Catal3" name="option3" value="Plaquette C " onfocus="this.blur()" /></td>
      <td width="216" valign="middle">
        <label class="labels" for="Catal3">Plaquette V</label>
		</td>
    </tr>
   </table>
  <br />
 
 
  <div class="labels" align="left">
  Autre demande / commentaire:
  <br />
    <textarea name="Autre" style="overflow:hidden" cols="40" rows="8" id="TextIn" maxlength="100" ></textarea>
  <br />
  <br />
  </div>  
 
  <div class="labels" align="left">
    <b>2</b> - Saisir votre nom et votre adresse postale :
    <br />
    <textarea name="PostAdr" style="overflow:hidden" cols="40" rows="6" id="TextIn" maxlength="100" ></textarea>
    <br />
    <br />
    <b>3</b> - 
    <input type="button" style="background-color:#cccccc;" value="Envoyer" onclick="javascript:mailenquiry(GetContenu());" />
</div>
</body>
</html>

02/12/2013, 09h19
Iron-Avenger

Merci bien, je test ton code et je te dis si j'ai compris et si sa fonctionne :).
02/12/2013, 10h27
Iron-Avenger

Je viens de tester ton code (après l'avoir enregistrer dans un .html) et aucune fenêtre ne s'ouvre pour me proposer l'envoi d'un email.

Une solution s'il te plaît ?
02/12/2013, 10h31
SpaceFrog

???
Une nouvelle demande ?
je ne vois ça nulle part dans ta question initiale ...

Peux tu préciser l'ergonomie souhaitée ?

Ce code que tu m'as donné :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
			<title>Demande de plaquette</title>
			<style type="text/css">
				input, label {cursor:pointer;}		
				.labels {
					font-family:Geneva, Arial, Helvetica, sans-serif;
					font-size:11px;
					color:white;}
				textarea {background-color:#cccccc;}
			</style>
			<script>
				// Author SkM 2004
				var Adresse;
				var AdrCor;
				var Demande;
				var Email1;
				var Email2;
				var MonSujet="";
				var Catal="";
 
				function GetContenu()
				{
					//E-mail du destinataire:
					Email1='cc';
					Email2='nord-ouest-creation.fr';
					Demande="Messieurs, %0A%0AMerci de bien vouloir me faire parvenir la documentation suivante :%0A";
					//Vérification saisie
					var MaxChoice = 3
					Catal=""
					for (i=1; i<MaxChoice+1;i++)
					{
						if (document.getElementById('Catal'+i).checked)
						{
							Catal = Catal + '\- ' + document.getElementById('Catal'+i).value + '%0A'
						}
					}
 
					if (Catal=="") {
						alert('Vous n\'avez pas sélectionner de catalogue!')
						return false;
					}
					Adresse=""
					Adresse=document.getElementById('PostAdr');
					if (Adresse.value=="") 
					{
						alert('Vous n\'avez pas saisi d\'adresse postale !');
						Adresse.focus();
						return false;
					}
					else{
						AdrCorr=""
						AdrCorr=Adresse.value.split("\n");
						AdrCorr=AdrCorr.join('%0A');
						return true;
					}
				}
				function mailenquiry(Adr)
				{
					if (Adr==false){
						return false;
						exit
					}
 
					else {  
					//L'objet du message
					MonSujet="Demande de plaquette.";
					//Le texte du message
					var Autre= document.getElementById('Autre').value.split("\n");
					Autre= Autre.join('%0A');
 
					if(Autre.length>0){
						Demande=Demande+Catal+'%0A%0AAutre Demande:%0A'+Autre+'%0A%0A'+ '%0A%0AÃ* l\'adresse suivante:%0A'+AdrCorr+'%0A%0A%0AMerci.';		
					}
					else { 
						Demande=Demande+Catal+'%0A%0AÃ* l\'adresse suivante:%0A'+AdrCorr+'%0A%0A%0AMerci.';
						alert (Demande);
					}
				//L'envoi du mail
					window.location.href='mailto:'+Email1+'@'+Email2+'\?Subject='+MonSujet+'&body='+Demande;
				//Le message de rappel
					alert('N\'oubliez pas d\'envoyer le mail avec votre gestionnaire de messagerie electronique !')
					}
				}
		</script>
	</head>
<body bgcolor="#000000">
		<div style="padding:5px;"> 
		<br />
		<br />
		<a class="labels">
		<b>1</b> -  Veuillez cocher les cases pour recevoir une documentation :</a>
		<table width="243" height="80" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td width="27">
				<input type="checkbox" style="color:red;" id="Catal1" name="option1" value="Plaquette Trade " onfocus="this.blur()" /></td>
				<td width="216" valign="middle"> 
				<label class="labels" for="Catal1">Plaquette Trade </label>
				</td>
			</tr>
			<tr>
				<td width="27">
				<input type="checkbox" id="Catal2" name="option2" value="Plaquette Nord " onfocus="this.blur()" />
				</td>
				<td width="216" valign="middle">
				<label class="labels" for="Catal2">Plaquette Nord</label>
				</td>
			</tr>
			<tr>
				<td width="27">
				<input type="checkbox" id="Catal3" name="option3" value="Plaquette C " onfocus="this.blur()" /></td>
				<td width="216" valign="middle">
				<label class="labels" for="Catal3">Plaquette V</label>
				</td>
			</tr>
		</table>
		<br />
 
		<div class="labels" align="left">
			Autre demande / commentaire:
			<br />
			<textarea name="Autre" style="overflow:hidden" cols="40" rows="8" id="TextIn" maxlength="100" ></textarea>
			<br />
			<br />
		</div>  
 
		<div class="labels" align="left">
			<b>2</b> - Saisir votre nom et votre adresse postale :
			<br />
			<textarea name="PostAdr" style="overflow:hidden" cols="40" rows="6" id="TextIn" maxlength="100" ></textarea>
			<br />
			<br />
			<b>3</b> - 
			<input type="button" style="background-color:#cccccc;" value="Envoyer" onclick="javascript:mailenquiry(GetContenu());" />
		</div>
	</body>
</html>

Je l'ai enregistrer dans un fichier.html pour le tester. Normalement il devrait ouvrir une fenêtre pour envoyer le mail ?
Mais il ne m'ouvre aucune fenêtre pour me proposer d'envoyer le mail avec le contenu, et je n'ai aucun alert qui s'affiche.

(Je suis sous Firefox 25.0.1 sur Ubuntu 12.04)

02/12/2013, 10h54
SpaceFrog

je viens de copier le code et en cliquant sur le bouton cela ouvre bien le gestionnaire de messagerie du client ...

As tu un client messagerie installé ?
02/12/2013, 10h55
Iron-Avenger

J'ai thunderbird d'installer par défaut.

Edit : Mais je ne l'ai pas encore configurer car je ne m'en suis jamais servi.
Edit 2 : Et je pense que je dois avoir un problème avec Firefox parce que parfois j'ai des alert qui ne s'affiche pas alors que les conditions sont bien validés...
Edit 3 : Je viens de tester avec Chromium et le problème viendrai apparemment de Thunderbird. Mais je ne peux pas le configurer car dans mon lycée les ports doivent être bloqués...
03/12/2013, 19h03
Iron-Avenger

Le bug venait de mon code (merci Firebug) ^^'

Merci beaucoup de ton aide SpaceFrog :)