e-mail par formulaire

[zeRafioScripter]

Bonjour à tous!

Mes recherches étant infructueuses, je tourne vers vous.

Je cherche à faire un truc relativement basique: un formulaire qui puisse m'être envoyé sur une de mes adresses e-mail.

Je suis facilement arrivé à créer le formulaire, mais c'est la méthode d'envoi qui ne me satisfait pas. Je ne connais que la fonction <mailto> qui a 2 inconvénients pour moi:
- l'adresse mail reste visible des robots spammeurs
- l'envoi passe par l'application de mailing de l'utilisateur

Ma question est donc:
Comment fait-on pour envoyer le contenu d'un formulaire sans passer par <mailto>?

Voici mon bout de code:

<form id="contact" action="" method="post" name="contact" enctype="text/plain">
			<table width="430" border="0" align="center" cellpadding="0" cellspacing="8" height="250">
				<tbody>
					<tr>
						<td class="petit" align="left" valign="middle" width="80" bordercolor="#333333">
							<div align="left">
								civilit&eacute;</div>
						</td>
						<td class="petit" align="left" valign="middle" width="326" bordercolor="#333333"><select name="Civilité" class="contact" id="Civilité">
								<option selected value="Madame">Mme</option>
								<option value="Mademoiselle">Melle</option>
								<option value="Monsieur">Mr</option>
							</select></td>
					</tr>
					<tr>
						<td class="petit" align="left" valign="middle" width="80" bordercolor="#333333">
							<div align="left">
								nom</div>
						</td>
						<td align="left" valign="middle" width="326" bordercolor="#333333">
							<p><input class="form" name="nom" id="nom_prenom" type="text" value="" size="52" maxlength="26"></p>
						</td>
					</tr>
					<tr>
						<td class="petit" align="left" valign="middle" width="80">
							<div align="left">
								pr&eacute;nom</div>
						</td>
						<td align="left" valign="middle" width="326">
							<p><input class="form" name="prenom" id="Adresse" type="text" value="" size="52" maxlength="26"></p>
						</td>
					</tr>
					<tr>
						<td class="petit" align="left" valign="middle" width="80" bordercolor="#333333">
							<div align="left">
								adresse</div>
						</td>
						<td class="petit" align="left" valign="middle" width="326" bordercolor="#333333"><input name="email" class="form" id="email" type="text" value="" size="52" maxlength="26"></td>
					</tr>
					<tr>
						<td class="petit" align="left" valign="middle" width="80" bordercolor="#333333">t&eacute;l&eacute;phone</td>
						<td class="petit" align="left" valign="middle" width="326" bordercolor="#333333">
							<p><input name="tel" class="form" id="Tel" type="text" size="52" maxlength="26"></p>
						</td>
					</tr>
					<tr>
						<td class="petit" align="left" valign="top" width="80">
							<div align="left">
								message</div>
						</td>
						<td align="left" valign="middle" width="326"><textarea name="message" cols="50" rows="13" class="form" id="Message"></textarea></td>
					</tr>
					<tr>
						<td class="petit" align="left" valign="middle" width="80" bordercolor="#333333"></td>
						<td class="petit" width="326"><input name="Submit" value="Envoyer" type="submit"></td>
					</tr>
				</tbody>
			</table>
		</form>

Merci pour votre aide.

 

[Anonyme]

Il faut utiliser php, regarde ce sujet à propos d'un programme pour envoyer des ecards. Tu peux télécharger les fichiers pour voir comment ça fonctionne.



P.S. : la mise en page avec des tableaux c'est mal.

 

[p4bl0]

Il faut utiliser php, regarde ce sujet à propos d'un programme pour envoyer des ecards. Tu peux télécharger les fichiers pour voir comment ça fonctionne.



P.S. : la mise en page avec des tableaux c'est mal.

un formulaire &#231;a peut &#234;tre consid&#233;r&#233; comme des donn&#233;es tabulaires non ?

 

[Anonyme]

un formulaire &#231;a peut &#234;tre consid&#233;r&#233; comme des donn&#233;es tabulaires non ?

Moui mais je crois qu'il y a un probl&#232;me au niveau accessibilit&#233; (je n'ai pas retrouv&#233; l'article). Et puis de toutes fa&#231;ons on peut faire la m&#234;me chose tr&#232;s simplement en css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formulaire de contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80&#37;;
}
form {
    background-color: #CCCCCC;
    padding: 1 em;
    border: 1px solid #000000;
}
form label {
    width: 10em;
    float: left;
    font-weight: bold;
}
-->
</style>
</head>
<body>
<form id="contact" action="" method="post" name="contact" enctype="text/plain">
  <p><label for="civilite">Civilit&#233;</label>
  <select name="civilite" class="contact" id="civilite">
    <option selected="selected" value="Madame">Mme</option>
    <option value="Mademoiselle">Melle</option>
    <option value="Monsieur">Mr</option>
  </select>
  </p>
  <p><label for="nom">Nom</label><input class="form" name="nom" id="nom" type="text" /></p>
  <p><label for="prenom">Pr&#233;nom</label><input name="prenom" id="prenom" type="text" /></p>
  <p><label for="email">Adresse</label><input name="email" id="email" type="text" /></p>
  <p><label for="tel">T&#233;l&#233;phone</label><input name="tel"  id="tel"class="form" type="text" /></p>
  <p><label for="message">Message</label><textarea name="message"  id="message" cols="50" rows="13" class="form"></textarea></p>
  <p><input name="Submit" value="Envoyer" type="submit" /></p>
</form>
</body>
</html>

10 &#215; moins de code, plus l&#233;ger et accessible.


P.S. : il y avait pas mal d'erreur dans le code donn&#233; ci-dessous, c'est corrig&#233;.

 

[p4bl0]

Moui mais je crois qu'il y a un probl&#232;me au niveau accessibilit&#233; (je n'ai pas retrouv&#233; l'article). Et puis de toutes fa&#231;ons on peut faire la m&#234;me chose tr&#232;s simplement en css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formulaire de contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80&#37;;
}
form {
    background-color: #CCCCCC;
    padding: 1 em;
    border: 1px solid #000000;
}
form label {
    width: 10em;
    float: left;
    font-weight: bold;
}
-->
</style>
</head>
<body>
<form id="contact" action="" method="post" name="contact" enctype="text/plain">
  <p><label for="civilite">Civilit&#233;</label>
  <select name="civilite" class="contact" id="civilite">
    <option selected="selected" value="Madame">Mme</option>
    <option value="Mademoiselle">Melle</option>
    <option value="Monsieur">Mr</option>
  </select>
  </p>
  <p><label for="nom">Nom</label><input class="form" name="nom" id="nom" type="text" /></p>
  <p><label for="prenom">Pr&#233;nom</label><input name="prenom" id="prenom" type="text" /></p>
  <p><label for="email">Adresse</label><input name="email" id="email" type="text" /></p>
  <p><label for="tel">T&#233;l&#233;phone</label><input name="tel"  id="tel"class="form" type="text" /></p>
  <p><label for="message">Message</label><textarea name="message"  id="message" cols="50" rows="13" class="form"></textarea></p>
  <p><input name="Submit" value="Envoyer" type="submit" /></p>
</form>
</body>
</html>

10 &#215; moins de code, plus l&#233;ger et accessible.


P.S. : il y avait pas mal d'erreur dans le code donn&#233; ci-dessous, c'est corrig&#233;.

effectivement :zen:

Je modifierais &#231;a sur mon site quand j'en aurais le temps

 

[Anonyme]

J'ai retrouv&#233; l'article.


edit grmbl : et Monsieur c'est pas Mr mais M.

 

[p4bl0]

J'ai retrouv&#233; l'article.


edit grmbl : et Monsieur c'est pas Mr mais M.

&#231;a y est j'ai utilis&#233; cette astuce de float:left; + width d&#233;fini pour &#224; la place des tableaux (formulaire de contact et autre moyens de me contacter, formulaire pour les commentaire dans le blog + ma page "cr&#233;ations").

Le r&#233;sultat et aussi sympatique (mais mieux je trouve, plus a&#233;r&#233 et j'ai gagn&#233; entre 0.4 et 1.2Ko par page !!

 

[Anonyme]

Je re-poste le code (2 ou 3 petites erreurs) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formulaire de contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80&#37;;
}
form {
    background-color: #CCCCCC;
    padding: 1em;
    border: 1px solid #000000;
}
form label {
    width: 10em;
    float: left;
    font-weight: bold;
}
-->
</style>
</head>
<body>
<form id="contact" action="" method="post" name="contact" enctype="text/plain">
  <p><label for="civilite">Civilit&#233;</label>
  <select name="civilite" id="civilite">
    <option selected="selected" value="Madame">Mme</option>
    <option value="Mademoiselle">Mlle</option>
    <option value="Monsieur">M.</option>
  </select>
  </p>
  <p><label for="nom">Nom</label><input name="nom" id="nom" type="text" /></p>
  <p><label for="prenom">Pr&#233;nom</label><input name="prenom" id="prenom" type="text" /></p>
  <p><label for="email">Adresse</label><input name="email" id="email" type="text" /></p>
  <p><label for="tel">T&#233;l&#233;phone</label><input name="tel"  id="tel"class="form" type="text" /></p>
  <p><label for="message">Message</label><textarea name="message"  id="message" cols="50" rows="13" class="form"></textarea></p>
  <p><input name="Submit" value="Envoyer" type="submit" /></p>
</form>
</body>
</html>

 

[p4bl0]

Je re-poste le code (2 ou 3 petites erreurs) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formulaire de contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80&#37;;
}
form {
    background-color: #CCCCCC;
    padding: 1em;
    border: 1px solid #000000;
}
form label {
    width: 10em;
    float: left;
    font-weight: bold;
}
-->
</style>
</head>
<body>
<form id="contact" action="" method="post" name="contact" enctype="text/plain">
  <p><label for="civilite">Civilit&#233;</label>
  <select name="civilite" id="civilite">
    <option selected="selected" value="Madame">Mme</option>
    <option value="Mademoiselle">Mlle</option>
    <option value="Monsieur">M.</option>
  </select>
  </p>
  <p><label for="nom">Nom</label><input name="nom" id="nom" type="text" /></p>
  <p><label for="prenom">Pr&#233;nom</label><input name="prenom" id="prenom" type="text" /></p>
  <p><label for="email">Adresse</label><input name="email" id="email" type="text" /></p>
  <p><label for="tel">T&#233;l&#233;phone</label><input name="tel"  id="tel"class="form" type="text" /></p>
  <p><label for="message">Message</label><textarea name="message"  id="message" cols="50" rows="13" class="form"></textarea></p>
  <p><input name="Submit" value="Envoyer" type="submit" /></p>
</form>
</body>
</html>

oui c'est mieux comme &#231;a, les label ne sont plus coll&#233; au bord gauche (form {padding:1em;})

En tout cas c'est g&#233;nial et on se rend vraiment compte avec des exemple concret que les tableau rendent le code moins lisible, plus lourd.
CSS n'a que des avantages.




c'est bon la tout le monde a compris je peux m'arr&#234;ter

 

[Anonyme]

En tout cas c'est génial et on se rend vraiment compte avec des exemple concret que les tableau rendent le code moins lisible, plus lourd.
CSS n'a que des avantages.




c'est bon la tout le monde a compris je peux m'arrêter

Il y avait d'autres «erreurs». Et puis prout mon cher

 

[zeRafioScripter]

Merci pour vos interventions.

Tableaux être pas bien.
CSS être mieux.
Moi déjà savoir ça.
Mais moi pas savoir faire autrement.

:love:

@gloup-gloup: Je n'ai pas bien compris ce que pourrai m'apporter le sujet sur les e-cards. Je regarde ça de plus près demain.

Je reviens au problème de départ.
Comment faire pour envoyer le contenu des champs d'un formulaire:
- sans utiliser la fonction <mailto>
- sans utiliser le logiciel de mail de l'expéditeur
- et que le résultat soit expédié vers une adresse e-mail (pas un base de données)

Quid?

 

[Anonyme]

Ben, il y avait un exemple de formulaire (avec envoi de mail en php) dans le fichier zip de l'autre sujet. Mais bon. Sur cette base j'ai refait un envoyeur de mail avec le formulaire exposé dans ce sujet. J'espère que ton hébergeur a php.

Il y a les premières lignes à modifier dans le fichier php. Le fichier gabarit.html correspond au design du mail envoyé, il suffit de modifier ce fichier html pour le changer. Attention de bien garder les éléments entre crochets.

Bonus :

• Cours pour débutant 1
• Cours pour débutant 2
• Les courriels en HTML

 

[Anonyme]

&#231;a y est j'ai utilis&#233; cette astuce de float:left; + width d&#233;fini pour &#224; la place des tableaux (formulaire de contact et autre moyens de me contacter, formulaire pour les commentaire dans le blog + ma page "cr&#233;ations").

Le r&#233;sultat et aussi sympatique (mais mieux je trouve, plus a&#233;r&#233 et j'ai gagn&#233; entre 0.4 et 1.2Ko par page !!

Chouette

Je vais pas la faire longue ce soir je suis assez &#224; c&#244;t&#233; de la plaque ces 2 ou 3 derniers jours&#8230; :siffle:

 

[zeRafioScripter]

Merci beaucoup gloup gloup!

Tes fichiers m'ont bien aidé: j'ai réussi à faire fonctionner l'ensemble.

Mais il y a encore 2 points dont je n'arrive pas à me sortir:
1- à cause de mes contact, je ne peux pas utiliser de mail HTML.
Je suis parvenu à réécrire le <gabarit> mais je reçois du texte où les caratères accentués sont remplacés par des points d'interrogation.
2- Je ne parviens pas non plus à afficher les erreurs dans une fenêtre putôt que dans une nouvelle page.

Puis-je encore solliciter ton aide?

 

[Anonyme]

Ah tu veux du texte seul? Dans ce cas je dois revoir le mailer en php et le fichier gabarit.html ne sert plus à rien. Je regarderai ce soir...

 

[zeRafioScripter]

J'attends avec impatience.

 

[p4bl0]

Ah tu veux du texte seul? Dans ce cas je dois revoir le mailer en php et le fichier gabarit.html ne sert plus à rien. Je regarderai ce soir...

dans la variable $headers, il faut mettre text/plain &#224; la place de text/html

 

[Anonyme]

dans la variable $headers, il faut mettre text/plain à la place de text/html

Merci. J'avais en tête que c'était plus compliqué. Ça va être vite réglé.

 

[Anonyme]

Alors voil&#224; le mailer au format texte seul. Finalement j'ai gard&#233; le syst&#232;me de gabarit : il y un fichier gabarit.txt que l'on peut modifier comme on veut pour changer le message par d&#233;faut. Attention, il faut absolument utiliser l'encodage en UTF-8 pour ce fichier sinon il y aura des probl&#232;mes avec les caract&#232;res accentu&#233;s. Pour cela un &#233;diteur de texte est la meilleure solution (smultron par exemple r&#233;gl&#233; en UTF-8); cela est &#233;galement valable pour les autres fichiers, m&#234;me et surtout pour le mailer HTML.

A propos du mailer HTML, j'en ai profit&#233; pour ajouter l'encodage des caract&#232;res propres &#224; html et la gestion des retours.

Les fichiers zip sont &#224; jour.

 

[zeRafioScripter]

Pardon pour ma r&#233;ponse tardive.

Il y a un probl&#232;me avec le gabarit. Voici ce que je re&#231;ois:

Madame Hélène Dupond (Tél : 04 90 .. .. ..) vous a envoyé ce mail

Avec le message suivant&#194;*:</p>

J'ai contourn&#233; le probl&#232;me en passant le texte du gabarit en capitales.

A part &#231;a, j'ai fait des recherches sur le web pour trouver un moyen d'afficher les messages d'erreur dans une fen&#234;tre d'alerte plut&#244;t que dans une nouvelle page HTML.
Mais je n'arrive &#224; rien de concluant.

Puis-je abuser?