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

**Iron-Avenger** · 21/11/2013, 22h41

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

**SpaceFrog** · 22/11/2013, 08h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Iron-Avenger** · 02/12/2013, 09h19

Merci bien, je test ton code et je te dis si j'ai compris et si sa fonctionne

.

**Iron-Avenger** · 02/12/2013, 10h27

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 ?

**SpaceFrog** · 02/12/2013, 10h31

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

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

**Iron-Avenger** · 02/12/2013, 10h50

Ce code que tu m'as donné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager