html按钮发送电子邮件

Question

如何发送包含标题初始值的电子邮件subject以及messagehtml中的按钮,例如

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

其中,subject和message是值从牵强form？

Answer 1

这种方法似乎在我的浏览器中不起作用,并且环顾四周表明,为mailto链接/动作指定标题的整个主题都是稀疏支持的,但这可能会有所帮助......

HTML:

<form id="fr1">
    <input type="text" id="tb1" />
    <input type="text" id="tb2" />
    <input type="button" id="bt1" value="click" />
</form>

JavaScript(使用jQuery):

$(document).ready(function() {
    $('#bt1').click(function() {
        $('#fr1').attr('action',
                       'mailto:test@test.com?subject=' +
                       $('#tb1').val() + '&body=' + $('#tb2').val());
        $('#fr1').submit();
    });
});

注意我在这里做什么.表单本身没有与之关联的操作.提交按钮实际上不是一种submit类型,它只是一种button类型.使用JavaScript,我绑定到该按钮的click事件,设置表单的action属性,然后提交表单.

它正在工作,因为它提交表单到一个mailto动作(我的默认邮件程序弹出并打开一个新的消息到指定的地址),但对我来说(Safari,Mail.app)它实际上并没有指定主题或正文结果消息.

HTML实际上并不是一个非常好的媒介,因为我确信其他人在我输入时会指出这一点.这可能适用于某些浏览器和/或某些邮件客户端.然而,现在用户将拥有一个胖邮件客户端甚至不是一个安全的假设.我不记得上次打开我的时候了.HTML mailto是一些遗留功能,现在,如果可能的话,你也可以在服务器端执行邮件操作.

Answer 2

你可以使用mailto,这里是HTML代码:

<a href="mailto:EMAILADDRESS">

替换EMAILADDRESS为您的电子邮件.

Answer 3

正如大卫所说,他的建议实际上并没有满足OP的要求,这是一封带有主题和信息的电子邮件.这是行不通的,因为大多数,也许所有,浏览器以及电子邮件客户端的组合不接受subject与body该属性mailto:时,作为提供的URI <form>的action.

但这是一个有效的例子:

HTML(带Bootstrap样式):

<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(使用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>

笔记:

• 不使用<form>具有关联action属性的元素.
• 所述<input>类型的元件button也未使用.
  • <a> 设计为按钮(此处使用Bootstrap)替换 <input type="button">
  • focusout()with updateMailString()是必需的,因为当输入字段的值发生更改时,<a>标记的href属性不会自动更新.
  • updateMailString() 如果输入字段已预先填充,则在加载文档时也会调用.
• 还encodeURIComponent()用于在Outlook中获取引号(")等字符.

在这种方法中,mailto:URI被提供(具有subject和body在属性)a元素的href标记.这适用于我测试的浏览器和电子邮件客户端的所有组合,这些是最近的(2015)版本:

• 浏览器: Firefox/Win&OSX,Chrome/Win和OSX,IE/Win,Safari/OSX和iOS,Opera/OSX
• 电子邮件客户端: Outlook/Win,Mail.app/OSX&iOS,Sparrow/OSX

额外提示:在我的用例中,我在电子邮件中添加了一些上下文文本body.通常,我希望该文本包含换行符.%0D%0A(回车和换行)在我的测试中有效.

Answer 4

我找不到真正满足原始问题的答案，所以我组合了一个简单的免费服务 ( PostMail )，它允许您发出标准的 HTTP POST 请求来发送电子邮件。当您注册时，它会为您提供代码，您可以将这些代码复制并粘贴到您的网站中。在这种情况下，您可以简单地使用表单帖子：

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>

再次，完全公开，我创建此服务是因为我找不到合适的答案。