Html 发送电子邮件的html按钮

html button to send email

提问by user544079

How do I send an email with specified initial values for the headers subjectand messagefrom a button in html, such as this

如何使用指定的标题初始值subject和messagehtml 中的按钮发送电子邮件，例如

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

where subjectand messageare values fetched from a form?

从哪里subject和message是从 a 获取的值form？

回答by David

This method doesn't seem to work in my browser, and looking around indicates that the whole subject of specifying headers to a mailtolink/action is sparsely supported, but maybe this can help...

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

HTML:

HTML：

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

JavaScript (with jQuery):

JavaScript（使用 jQuery）：

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

Notice what I'm doing here. The form itself has no action associated with it. And the submit button isn't really a submittype, it's just a buttontype. Using JavaScript, I'm binding to that button's click event, setting the form's action attribute, and then submitting the form.

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

It's working in so much as it submits the form to a mailtoaction (my default mail program pops up and opens a new message to the specified address), but for me (Safari, Mail.app) it's not actually specifying the Subject or Body in the resulting message.

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

HTML isn't really a very good medium for doing this, as I'm sure others are pointing out while I type this. It's possible that this may work in some browsers and/or some mail clients. However, it's really not even a safe assumption anymore that users will have a fat mail client these days. I can't remember the last time I opened mine. HTML's mailtois a bit of legacy functionality and, these days, it's really just as well that you perform the mail action on the server-side if possible.

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

回答by armn

You can use mailto, here is the HTML code:

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

<a href="mailto:EMAILADDRESS">

Replace EMAILADDRESSwith your email.

替换EMAILADDRESS为您的电子邮件。

回答by bjornte

As David notes, his suggestion does not actually fulfill the OP's request, which was an email with subject and message. It doesn't work because most, maybe all, combinations of browsers plus e-mail clients do not accept the subjectand bodyattributes of the mailto:URI when supplied as a <form>'s action.

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

But here's a working example:

但这是一个工作示例：

HTML (with Bootstrapstyles):

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 (with jQuery):

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

Notes:

笔记：

• The <form>element with associated actionattribute is not used.
• The <input>element of type buttonis also not used.
  • <a>styled as a button (here using Bootstrap) replaces <input type="button">
  • focusout()with updateMailString()is necessary because the <a>tag's hrefattribute does not automatically update when the input fields' values change.
  • updateMailString()is also called when document is loaded in case the input fields are prepopulated.
• Also encodeURIComponent()is used to get characters such as the quotation mark (") across to Outlook.

• 不使用<form>具有关联action属性的元素。
• 所述<input>类型的元件button也未使用。
  • <a>样式为按钮（此处使用 Bootstrap）替换 <input type="button">
  • focusout()withupdateMailString()是必要的，因为当输入字段的值更改时，<a>标签的href属性不会自动更新。
  • updateMailString()如果输入字段已预填充，则在加载文档时也会调用。
• 还encodeURIComponent()用于将引号 (") 等字符传递到 Outlook。

In this approach, the mailto:URI is supplied (with subjectand bodyattributes) in an aelement's hreftag. This works in all combinations of browsers and e-mail clients I have tested, which are recent (2015) versions of:

在这种方法中，mailto:URI 是在元素的标签中提供的（带有subject和body属性）。这适用于我测试过的浏览器和电子邮件客户端的所有组合，它们是最近的（2015）版本：ahref

• Browsers:Firefox/Win&OSX, Chrome/Win&OSX, IE/Win, Safari/OSX&iOS, Opera/OSX
• E-mail clients:Outlook/Win, Mail.app/OSX&iOS, Sparrow/OSX

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

Bonus tip: In my use cases, I add some contextual text to the e-mail body. More often than not, I want that text to contain line breaks. %0D%0A(carriage return and linefeed) works in my tests.

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

回答by user949286

I couldn't ever find an answer that really satisfied the original question, so I put together a simple free service (PostMail) that allows you to make a standard HTTP POST request to send an email. When you sign up, it provides you with code that you can copy & paste into your website. In this case, you can simply use a form post:

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

HTML:

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>

Again, in full disclosure, I created this service because I could not find a suitable answer.

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

回答by Wesley Murch

You can use an anchor to attempt to open the user's default mail client, prepopulated, with mailto:, but you cannot send the actual email. *Apparently it is possible to do this with a form action as well, but browser support is varied and unreliable, so I do not suggest it.

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

HTML cannot send mail, you need to use a server side language like php, which is another topic. There are plently of good resources on how to do this here on SO or elsewhere on the internet.

HTML不能发送邮件，需要使用php这样的服务器端语言，这是另外一个话题。有很多关于如何在 SO 上或互联网上的其他地方执行此操作的良好资源。

If you are using php, I see SwiftMailersuggested quite a bit.

如果您使用的是 php，我看到SwiftMailer建议了很多。

回答by Raffael Luthiger

You can not directly send an email with a HTML form. You can however send the form to your web server and then generate the email with a server side program written in e.g. PHP.

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

The other solution is to create a link as you did with the "mailto:". This will open the local email program from the user. And he/she can then send the pre-populated email.

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

When you decided how you wanted to do it you can ask another (more specific) question on this site. (Or you can search for a solution somewhere on the internet.)

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

回答by Sagar Patra

@user544079

@用户544079

Even though it is very old and irrelevant now, I am replying to help people like me! it should be like this:

尽管它现在很旧且无关紧要，但我正在回复以帮助像我这样的人！它应该是这样的：

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

Here $emailID, $MySubject, $MyMessageText are variables which you assign from a FORM or a DATABASE Table or just you can assign values in your code itself. Alternatively you can put the code like this (normally it is not used):

这里 $emailID、$MySubject、$MyMessageText 是您从 FORM 或 DATABASE 表分配的变量，或者您可以在代码本身中分配值。或者，您可以像这样放置代码（通常不使用）：

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

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

回答by P.J. Butter

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