发送电子邮件的html按钮

Question

如何通过 html 中的按钮（例如这个）发送带有指定标题 subject 和 message 的初始值的电子邮件

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

其中subject 和message 是从form 获取的值？

Answer 1

您可以使用锚点尝试打开用户的默认邮件客户端，该客户端预填充了mailto:，但您无法发送实际的电子邮件。 *显然也可以通过表单操作来做到这一点，但是浏览器支持多种多样且不可靠，所以我不建议这样做。

HTML 不能发送邮件，需要使用 php 之类的服务器端语言，这是另一个话题。在 SO 或 Internet 上的其他地方有很多关于如何做到这一点的好资源。

如果你使用的是 php，我看到SwiftMailer 建议不少。

Answer 2

您不能直接发送带有 HTML 表单的电子邮件。但是，您可以将表单发送到您的 Web 服务器，然后使用编写的服务器端程序生成电子邮件，例如PHP。

另一种解决方案是像使用“mailto:”一样创建一个链接。这将从用户打开本地电子邮件程序。然后他/她可以发送预先填充的电子邮件。

当你决定你想怎么做时，你可以在这个网站上问另一个（更具体的）问题。 （或者你可以在互联网上的某个地方搜索解决方案。）

Answer 3

你可以使用mailto，这里是HTML代码：

<a href="mailto:EMAILADDRESS">

将EMAILADDRESS 替换为您的电子邮件。

Answer 4

这种方法在我的浏览器中似乎不起作用，并且环顾四周表明将标头指定为 mailto 链接/操作的整个主题很少得到支持，但也许这会有所帮助...

HTML：

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

JavaScript（带有 jQ​​uery）：

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

注意我在这里做什么。表单本身没有与之关联的操作。而提交按钮并不是真正的submit 类型，它只是button 类型。使用 JavaScript，我绑定到该按钮的单击事件，设置表单的 action 属性，然后提交表单。

它的工作原理是将表单提交给mailto 操作（我的默认邮件程序会弹出并打开一封新邮件到指定地址），但对我（Safari、Mail.app）来说，实际上并非如此在结果消息中指定主题或正文。

HTML 并不是一个很好的媒介，因为我确信在我键入此内容时其他人会指出。这可能适用于某些浏览器和/或某些邮件客户端。然而，现在用户将拥有一个胖邮件客户端，这甚至不再是一个安全的假设。我不记得我最后一次打开我的。 HTML 的 mailto 是一些遗留功能，现在，如果可能的话，在服务器端执行邮件操作真的很好。

Answer 5

作为 David notes，他的建议实际上并没有满足 OP 的要求，这是一封带有主题和消息的电子邮件。它不起作用，因为当作为<form> 的action 提供时，大多数（也许是所有）浏览器和电子邮件客户端的组合不接受mailto: URI 的subject 和body 属性。

但这里有一个工作示例：

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>

注意事项：

• 未使用具有关联action 属性的<form> 元素。
• button 类型的 <input> 元素也未使用。
  • <a> 样式为按钮（此处使用 Bootstrap）替换 <input type="button">
  • focusout() 和 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 6

我找不到真正满足原始问题的答案，所以我整理了一个简单的免费服务 (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>

再次声明，我创建此服务是因为我找不到合适的答案。

Answer 7

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

Answer 8

@user544079

虽然现在已经很老了，而且已经无关紧要，但我还是在回复以帮助像我这样的人！ 应该是这样的：

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

这里 $电子邮件ID， $我的主题， $MyMessageText 是您从 FORM 或 DATABASE 表分配的变量，或者您可以在代码本身中分配值。或者你可以这样写代码（通常不使用）：

<form method="post" action="mailto:admin@website.com?subject=New Registration Alert &message= New Registration requires your approval">