web-dev-qa-db-fra.com

bouton html pour envoyer un email

Comment envoyer un courrier électronique avec les valeurs initiales spécifiées pour les en-têtes subject et message à partir d'un bouton au format HTML, tel que celui-ci

<form method="post" action="mailto:email.com?subject=subject&message=message">

où subject et message sont des valeurs extraites d'un form?

htmlformsemail
20
user544079

Vous pouvez utiliser mailto, voici le code HTML:

<a href="mailto:EMAILADDRESS">

Remplacez EMAILADDRESS par votre email.

26
armn

Cette méthode ne semble pas fonctionner dans mon navigateur, et regarder autour de vous indique que le sujet entier de la spécification d'en-têtes pour un lien/action mailto est peu pris en charge, 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:[email protected]?subject=' +
                       $('#tb1').val() + '&body=' + $('#tb2').val());
        $('#fr1').submit();
    });
});

Remarquez ce que je fais ici. Le formulaire lui-même n'a pas d'action associée. Et le bouton d'envoi n'est pas vraiment un type submit, c'est juste un type button. En utilisant JavaScript, je lie à l'événement click de ce bouton, en définissant l'attribut d'action du formulaire, puis en le soumettant.

Cela fonctionne tellement qu'il soumet le formulaire à une action mailto (mon programme de messagerie par défaut s'ouvre et ouvre un nouveau message à l'adresse spécifiée), mais pour moi (Safari, Mail.app), il ne spécifie pas réellement l'objet ou le corps. dans le message résultant.

HTML n'est pas vraiment un très bon moyen de faire cela, car je suis sûr que d'autres le font remarquer pendant que je tape ceci. Il est possible que cela fonctionne dans certains navigateurs et/ou certains clients de messagerie. Cependant, ce n’est vraiment plus une hypothèse sûre que les utilisateurs aient un gros client de messagerie ces jours-ci. Je ne me souviens pas de la dernière fois que j'ai ouvert le mien. mailto du HTML est un peu une fonctionnalité héritée et, de nos jours, il est tout aussi bien que vous exécutiez l'action de messagerie côté serveur si possible.

35
David

Comme David note , sa suggestion ne répond pas vraiment à la demande du PO, qui était un email avec objet et message. Cela ne fonctionne pas car la plupart, voire la totalité, des combinaisons de navigateurs ainsi que les clients de messagerie n'acceptent pas les attributs subject et body de l'URI mailto: lorsqu'ils sont fournis en tant que action de <form>.

Mais voici un exemple de travail:

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:[email protected]' + mailString);
        }
        $( "#subject" ).focusout(function() { updateMailString(); });
        $( "#message" ).focusout(function() { updateMailString(); });
        updateMailString();
    }
</script>

Remarques:

  • L'élément <form> avec l'attribut action associé n'est pas utilisé.
  • L'élément <input> de type button n'est également pas utilisé .
    • <a> stylé comme un bouton (ici avec Bootstrap) remplace <input type="button">
    • focusout() avec updateMailString() est nécessaire car l'attribut href de la balise <a> ne se met pas à jour automatiquement lorsque les valeurs des champs de saisie changent.
    • updateMailString() est également appelé lorsque le document est chargé au cas où les champs de saisie sont préremplis.
  • De plus, encodeURIComponent() est utilisé pour obtenir des caractères tels que le guillemet (") dans Outlook.

Dans cette approche, l'URI mailto: est fourni (avec les attributs subject et body) dans la balise a d'un élément href. Cela fonctionne dans toutes les combinaisons de navigateurs et de clients de messagerie que j'ai testés, qui sont des versions récentes (2015) de: 

  • Navigateurs: Firefox/Win et OSX, Chrome/Win et OSX, IE/Win, Safari/OSX et iOS, Opera/OSX
  • Clients de messagerie: Outlook/Win, Mail.app/OSX&iOS, Sparrow/OSX

Astuce de bonus: dans mes cas d'utilisation, j'ajoute du texte contextuel à l'adresse électronique body. Le plus souvent, je veux que le texte contienne des sauts de ligne. %0D%0A (retour chariot et saut de ligne) fonctionne dans mes tests.

8
bjornte

Je ne pouvais jamais trouver une réponse qui satisfasse réellement à la question initiale. J'ai donc mis en place un simple service gratuit ( PostMail ) qui vous permet de faire une demande HTTP POST standard pour envoyer un courrier électronique. Lorsque vous vous inscrivez, il vous fournit un code que vous pouvez copier et coller sur 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 toute transparence, j'ai créé ce service car je ne trouvais pas de réponse adéquate.

2
user949286

Vous pouvez utiliser une ancre pour tenter d'ouvrir le client de messagerie par défaut de l'utilisateur, prérempli, avec mailto:, mais vous ne pouvez pas envoyer le courrier électronique réel. * Apparemment, il est également possible de le faire avec une action de formulaire, mais le support du navigateur étant varié et peu fiable, je ne le suggère pas.

HTML ne peut pas envoyer de courrier, vous devez utiliser un langage côté serveur tel que php, qui est un autre sujet. Il existe de très bonnes ressources sur la manière de procéder, ici SO ou ailleurs sur Internet.

Si vous utilisez php, je vois un peu SwiftMailer suggéré.

2
Wesley Murch

Vous ne pouvez pas envoyer directement un email avec un formulaire HTML. Vous pouvez toutefois envoyer le formulaire à votre serveur Web, puis générer l’e-mail avec un programme côté serveur écrit, par exemple. PHP.

L'autre solution consiste à créer un lien comme vous l'avez fait avec "mailto:". Cela ouvrira le programme de messagerie local de l'utilisateur. Et il/elle peut alors envoyer le courrier électronique pré-rempli.

Lorsque vous avez décidé comment vous voulez le faire, vous pouvez poser une autre question (plus spécifique) sur ce site. (Vous pouvez également rechercher une solution quelque part sur Internet.)

2
Raffael Luthiger

@ user544079

Même si c'est très vieux et sans importance maintenant, je réponds pour aider des gens comme moi! ça devrait être comme ça:

<form method="post" action="mailto:$emailID?subject=$MySubject &message= $MyMessageText">

Ici $ EmailID, $ MySubject, $ MyMessageText sont des variables que vous affectez à partir d'un FORM ou d'une table DATABASE ou que vous pouvez simplement affecter à votre code des valeurs. Sinon, vous pouvez mettre le code comme ceci (normalement, il n'est pas utilisé):

<form method="post" action="mailto:[email protected]?subject=New Registration Alert &message= New Registration requires your approval">

0
Sagar Patra
 <form action="mailto:[email protected]" 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">

0
P.J. Butter