bouton html pour envoyer un courriel
Comment puis-je envoyer un email avec des valeurs initiales spécifiées pour les en-têtes subject
et message
à partir d'un bouton en html, comme celui-ci
<form method="post" action="mailto:email.com?subject=subject&message=message">
où subject
et message
sont des valeurs extraites à partir d'un <!--5?
8 réponses
Vous pouvez utiliser mailto
, voici le code HTML:
<a href="mailto:EMAILADDRESS">
Remplacer EMAILADDRESS
avec votre e-mail.
cette méthode ne semble pas fonctionner dans mon navigateur, et regarder autour indique que l'ensemble du sujet de spécifier des en-têtes à un mailto
lien / action est peu supporté, mais peut-être que cela peut aider...
HTML:
<form id="fr1">
<input type="text" id="tb1" />
<input type="text" id="tb2" />
<input type="button" id="bt1" value="click" />
</form>
JavaScript (avec jQuery):
$(document).ready(function() {
$('#bt1').click(function() {
$('#fr1').attr('action',
'mailto:test@test.com?subject=' +
$('#tb1').val() + '&body=' + $('#tb2').val());
$('#fr1').submit();
});
});
notez ce que je fais ici. La forme elle-même n'a aucune action associée avec elle. Et le bouton "soumettre" n'est pas vraiment un submit
tapez, c'est juste un button
type. En utilisant JavaScript, je suis se lier à l'événement de clic de ce bouton, Définir l'attribut d'action du formulaire, puis soumettre le formulaire.
Il travaille tellement qu'il présente la forme d'un mailto
action (mon programme de messagerie par défaut s'ouvre et ouvre un nouveau message à l'adresse indiquée), mais pour moi (Safari, Mail.app) il ne spécifie pas réellement le sujet ou le corps dans le message résultant.
HTML n'est pas vraiment un très bon moyen pour faire cela, je suis sûr que d'autres sont en pointant alors que je tape ce. Il est possible que cela fonctionne dans certains navigateurs et/ou clients de messagerie. Cependant, il est vraiment même pas une hypothèse sûre plus que les utilisateurs auront un gros client mail ces jours-ci. Je ne me souviens pas de la dernière fois où j'ai ouvert la mienne. HTML est mailto
est un peu une fonctionnalité héritée et, de nos jours, il est tout aussi bien que vous effectuiez l'action de courrier sur le côté serveur si possible.
Comme David notes, sa suggestion ne répond pas réellement à la demande de L'OP, qui était un email avec l'objet et le message. Il ne fonctionne pas parce que la plupart, peut-être tous, combinaisons de navigateurs plus les clients e-mail n'acceptent pas le subject
et body
attributs de mailto:
URI si fourni sous forme de <form>
action
.
Mais voici un exemple:
HTML (avec Bootstrap styles):
<p><input id="subject" type="text" placeholder="type your subject here"
class="form-control"></p>
<p><input id="message" type="text" placeholder="type your message here"
class="form-control"></p>
<p><a id="mail-link" class="btn btn-primary">Create email</a></p>
JavaScript (avec jQuery):
<script type="text/javascript">
function loadEvents() {
var mailString;
function updateMailString() {
mailString = '?subject=' + encodeURIComponent($('#subject').val())
+ '&body=' + encodeURIComponent($('#message').val());
$('#mail-link').attr('href', 'mailto:person@email.com' + mailString);
}
$( "#subject" ).focusout(function() { updateMailString(); });
$( "#message" ).focusout(function() { updateMailString(); });
updateMailString();
}
</script>
Notes:
<form>
élément associéaction
l'attribut n'est pas utilisé.<input>
élément de typebutton
aussi, n'est pas utilisé.<a>
style comme un bouton (ici à l'aide de Bootstrap) remplace<input type="button">
focusout()
updateMailString()
est nécessaire parce que l'<a>
de la balisehref
attribut n' mise à jour automatique lorsque les valeurs des champs d'entrée changent.updateMailString()
est aussi appelé lorsque le document est chargé dans le cas où les champs sont pré-remplis.
encodeURIComponent()
est utilisé pour obtenir des caractères tels que le guillemet ( "" ) dans Outlook.
Dans cette approche, le mailto:
URI est fourni (avec subject
et body
attributs) dans un a
de l'élément href
balise. Cela fonctionne dans toutes les combinaisons de navigateurs et de les clients de messagerie, j'ai testé, qui sont récentes (2015) versions de:
- les Navigateurs: Firefox / Win & OSX, Chrome/Win&OSX, IE/Win, Safari/OSX&iOS, Opera / OSX
- clients E-mail: Outlook / Win, Mail.app / OSX&iOS, Sparrow / OSX
conseil Bonus: dans Mes cas d'utilisation, j'ajoute du texte contextuel à l'e-mail body
. Le plus souvent, je veux que ce texte contienne des sauts de ligne. %0D%0A
(retour chariot et saut de ligne) oeuvres dans mes tests.
Vous pouvez utiliser un point d'ancrage pour tenter d'ouvrir le client mail par défaut de l'utilisateur, pré-peuplé, avec mailto:
, mais vous ne pouvez pas envoyer d'e-mail. * Apparemment, il est possible de faire cela avec une action de formulaire aussi bien, mais la prise en charge du navigateur est variée et peu fiable, donc je ne le suggère pas.
HTML ne peut pas envoyer de courrier, vous devez utiliser un langage côté serveur comme php, qui est un autre sujet. Il y a plenty de bonnes ressources sur la façon de faire ceci ici sur SO ou ailleurs sur le Internet.
Si vous utilisez php, je vois SwiftMailer suggéré un peu.
je ne pouvais pas trouver une réponse qui satisfait à la question d'origine, j'ai donc monté un simple service gratuit (Courrier) qui vous permet de faire une requête HTTP POST standard pour envoyer un e-mail. Lorsque vous vous inscrivez, il vous fournit le code que vous pouvez copier & coller dans votre site web. Dans ce cas, vous pouvez simplement utiliser un post de formulaire:
HTML:
<form action="https://postmail.invotes.com/send"
method="post" id="email_form">
<input type="text" name="subject" placeholder="Subject" />
<textarea name="text" placeholder="Message"></textarea>
<!-- replace value with your access token -->
<input type="hidden" name="access_token" value="{your access token}" />
<input type="hidden" name="success_url"
value=".?message=Email+Successfully+Sent%21&isError=0" />
<input type="hidden" name="error_url"
value=".?message=Email+could+not+be+sent.&isError=1" />
<input id="submit_form" type="submit" value="Send" />
</form>
encore une fois, en pleine divulgation, j'ai créé ce service parce que je ne pouvais pas trouver un réponse.
vous ne pouvez pas envoyer directement un email avec un formulaire HTML. Vous pouvez cependant envoyer le formulaire à votre serveur web et ensuite générer le courriel avec un programme Côté Serveur écrit en PHP par exemple.
L'autre solution est de créer un lien comme vous l'avez fait avec le "mailto:". Ceci ouvrira le programme de courrier électronique local de l'utilisateur. Et il/elle peut ensuite envoyer le pré-rempli par courriel.
lorsque vous avez décidé comment vous vouliez le faire, vous pouvez poser une autre question (plus spécifique) sur ce site. (Ou vous pouvez rechercher une solution quelque part sur internet.)
<form action="mailto:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name"><br>
E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
@user544079
même si elle est très ancienne et hors de propos Maintenant, je réponds pour aider les gens comme moi! il doit être comme ceci:
<form method="post" action="mailto:$emailID?subject=$MySubject &message= $MyMessageText">
Ici $ emailID, $ MySubject, $MyMessageText sont des variables que vous assignez à partir d'un formulaire ou D'une Table de base de données ou tout simplement vous pouvez assigner des valeurs dans votre code lui-même. Sinon, vous pouvez mettre le code comme ceci (normalement, il n'est pas utilisé):
<form method="post" action="mailto:admin@website.com?subject=New Registration Alert &message= New Registration requires your approval">