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

subject et message sont des valeurs extraites à partir d'un <!--5?

18
demandé sur bjornte 2011-04-25 00:52:05

8 réponses

Vous pouvez utiliser mailto, voici le code HTML:

<a href="mailto:EMAILADDRESS">

Remplacer EMAILADDRESS avec votre e-mail.

22
répondu armn 2012-03-20 15:12:53

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.

34
répondu David 2012-03-20 15:51:57

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 type button 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 balise href 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.

8
répondu bjornte 2017-05-23 12:17:58

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.

2
répondu Wesley Murch 2011-04-24 21:08:53

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.

2
répondu user949286 2016-04-19 20:06:19

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

1
répondu Raffael Luthiger 2011-04-24 21:01:50
 <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">

0
répondu P.J. Butter 2016-08-29 20:35:20

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

0
répondu Sagar Patra 2017-06-13 22:08:00