e-mail par formulaire

zeRafioScripter · 05/03/2007, 11h37

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:

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.

gloup gloup · 05/03/2007, 11h54

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 · 05/03/2007, 13h02

Citation:

Envoyé par gloup gloup

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 ça peut être considéré comme des données tabulaires non ?

gloup gloup · 05/03/2007, 13h45

Citation:

Envoyé par p4bl0

un formulaire ça peut être considéré comme des données tabulaires non ?

Moui mais je crois qu'il y a un problème au niveau accessibilité (je n'ai pas retrouvé l'article). Et puis de toutes façons on peut faire la même chose très simplement en css.

Code:

<!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%;
}
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é</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é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élé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 × moins de code, plus léger et accessible.

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

p4bl0 · 05/03/2007, 14h18

Citation:

Envoyé par gloup gloup

Moui mais je crois qu'il y a un problème au niveau accessibilité (je n'ai pas retrouvé l'article). Et puis de toutes façons on peut faire la même chose très simplement en css.

Code:

<!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%;
}
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é</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é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élé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 × moins de code, plus léger et accessible.

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

effectivement

Je modifierais ça sur mon site quand j'en aurais le temps

gloup gloup · 05/03/2007, 14h28

J'ai retrouvé l'article.

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

p4bl0 · 05/03/2007, 16h58

Citation:

Envoyé par gloup gloup

J'ai retrouvé l'article.

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

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

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

gloup gloup · 05/03/2007, 16h59

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

Code:

<!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%;
}
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é</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é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élé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 · 05/03/2007, 17h30

Citation:

Envoyé par gloup gloup

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

Code:

<!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%;
}
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é</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é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élé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 ça, les label ne sont plus collé au bord gauche (form {padding:1em;})

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

gloup gloup · 05/03/2007, 17h41

Citation:

Envoyé par p4bl0

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 · 05/03/2007, 19h48

Merci pour vos interventions.

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

@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?

gloup gloup · 05/03/2007, 21h07

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 :

gloup gloup · 05/03/2007, 21h21

Citation:

Envoyé par p4bl0

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

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

Chouette

Je vais pas la faire longue ce soir je suis assez à côté de la plaque ces 2 ou 3 derniers jours…

zeRafioScripter · 06/03/2007, 15h16

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?

gloup gloup · 06/03/2007, 15h32

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 · 06/03/2007, 15h59

J'attends avec impatience.

p4bl0 · 06/03/2007, 16h46

Citation:

Envoyé par gloup gloup

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 à la place de text/html

gloup gloup · 06/03/2007, 19h01

Citation:

Envoyé par p4bl0

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é.

gloup gloup · 06/03/2007, 21h46

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

A propos du mailer HTML, j'en ai profité pour ajouter l'encodage des caractères propres à html et la gestion des retours.

Les fichiers zip sont à jour.

zeRafioScripter · 07/03/2007, 18h43

Pardon pour ma réponse tardive.

Il y a un problème avec le gabarit. Voici ce que je reçois:

Code:

Madame Hélène Dupond (TÃ©l&nbsp;: 04 90 .. .. ..) vous a envoyÃ© ce mail

Avec le message suivantÂ*:</p>

J'ai contourné le problème en passant le texte du gabarit en capitales.

A part ça, j'ai fait des recherches sur le web pour trouver un moyen d'afficher les messages d'erreur dans une fenêtre d'alerte plutôt que dans une nouvelle page HTML.
Mais je n'arrive à rien de concluant.

Puis-je abuser?

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email
Modes d'affichage
Mode linéaire Choisir le mode hybride Choisir le mode arborescent

Discussions similaires
Discussion	Auteur	Forum	Réponses	Dernier message
Formulaire redirigé sur e-mail	Savagnin	Développement web	10	02/09/2006 15h19
valider formulaire par touche retour	Langellier	Développement web	2	03/12/2005 20h57
formulaire mail	tornade13	Développement web	10	25/04/2005 08h23
envoie de l'e-mail dans un formulaire...	Yann-Bleiz	Développement web	11	19/12/2001 02h35
GoLive et un formulaire via e-mail ?	-anonyme-	Développement web	3	21/11/2000 09h40

Utilisateurs regardant la discussion actuelle : 1 (0 membre(s) et 1 invité(s))