使用 HTML 5 / Javascript 模板发送联系电子邮件表格答案

【问题标题】：Using HTML 5 / Javascript template to send contact e-mail form使用 HTML 5 / Javascript 模板发送联系电子邮件表格
【发布时间】：2013-05-09 02:20:59
【问题描述】：

我最近使用 HTML 5 模板为朋友的企业创建了一个简单的网站。它也包含一些可爱的 Javascript 元素。网址为www.michianamemories.com

其中一个元素是页面底部的联系表。看起来“发送消息”按钮被编码为什么都不做。让这个表单将用户输入的值（即：他们的姓名、电子邮件和他们的消息）转发到专用的电子邮件收件箱有多简单？

如果不是那么简单，还有哪些其他选项可以使表单既实用又与网站的一般主题相结合？

我假设答案很简单，但我是 HTML 5 的新手，对 Javascript 完全一无所知。提前感谢您的帮助。

【问题讨论】：

您的意思是 JavaScript 而不是 Java？两者非常不同。
@MattBall 啊，是的。我缺乏知识表明一切准备就绪。在原帖中编辑。
投票结束，因为答案很简单：您不能在客户端仅使用 JavaScript 发送电子邮件。稍长一点的解释是，您要么需要自己的某种服务器后端来处理接收消息并将其作为 SMTP 电子邮件发送，要么您使用某些第三方服务来执行此操作（如果存在）。除此之外，可用选项的可能“答案”是无限的，并且在它们之间进行选择主要是基于意见的——所以保持开放是没有效率的。

标签： javascript html forms email

【解决方案1】：

HTML 不允许您将表单提交到电子邮件。

您可以使用mailto，但这不是最友好的功能。它将打开 Outlook 并将表单数据转储到电子邮件内容中。不过有很多问题。

More info on mailto

我的建议是使用“表单邮件脚本”。但这仅在服务器端完成，因此您需要有一个 Web 服务器。您需要谷歌并阅读它们。

Reference about form submit options

【讨论】：

【解决方案2】：

这在纯 Javascript 中是不可能的。发送电子邮件需要服务器端处理。

有几个网站可以让您生成简单的电子邮件表单，请查看：http://www.google.com/search?hl=en&safe=off&q=email+form+generator&aq=5&aqi=g10&aql=&oq=email+form

【讨论】：

【解决方案3】：

在我看来，你能做的最好的事情就是用 PHP 创建一个简单的后端应用程序。

在您的根目录中创建文件mail.php。
在您的 HTML form 标记中，您需要添加 action 属性以及 mail.php 文件的路径和 method 属性，以便表单知道使用哪种 HTTP 请求方法来发送数据 @987654327 @。这将添加触发“发送消息”按钮的操作，您说该按钮不起作用。

发生这种情况是因为现在按钮知道如果您单击它会做什么。它从表单输入字段中获取所有数据并将它们发送到mail.php 文件。该文件需要获取它们并验证它们。（您至少应该为表单中的必填字段创建验证，以检查它们是否不为空。您可以在内置 html 属性中或借助 JavaScript 进行一些额外的验证）
现在最重要的是，在您的mail.php 中创建邮件功能。以下是您执行此操作所需的所有文档：PHP Mail Documentation。

这是代码（您的网站无法运行，所以我只是在输入字段中即兴发挥）：

HTML：

<form action="mail.php" method="post">

    <label for="name-field">Name:</label>
    <input id="name-field" name="name" type="text" required>

    <label for="surname-field">Surname:</label>
    <input id="surname-field" name="surname" type="text" required>

    <label for="message-field">Message:</label>
    <textarea id="message-field" name="message" required></textarea>

    <label for="mail-field">Your e-mail:</label>
    <input id="mail-field" name="mail" type="mail" required>

    <button type="submit">Send Message</button>

</form>

PHP：

// Validating if everything is filled
if(isset($_POST['name']) && isset($_POST['surname']) && isset($_POST['message']) && isset($_POST['mail'])
{
    $to = "example@mysite.com";
    $subject = "Automatically generated messege from" . $_POST['name'] . ' ' . $_POST['surname'];
    $body = $_POST['message'];
    $headers = 'To: ' . $to . "\r\n";
    $headers .= 'From: ' . $_POST['mail'];

    // Send mail function
    if(mail($to, $subject, $body, $headers))
    { 
        echo 'Mail sent successfuly!';
    } else {
        echo 'Error occurred while sending the message';
    }
}

【讨论】：

【解决方案4】：

正如其他答案中提到的，您不能使用 HTML5 发送电子邮件。这需要在您的服务器上完成。

一个简单且免费的解决方案是使用Google Apps Script。你可以publish your Apps Script as a Web App 和doPost 这样的方法：

function doPost(e){
    var email = e.parameter.email;
    var subject = 'E-mail from website';
    var message = e.parameter.message;
    MailApp.sendEmail(emailAddress, subject, message);

    return ContentService.createTextOutput('E-mail sent!');
}

在你的 HTML 中，你会有这样的表单：

<form action="url to your deployed app script" method="post">
    <input type="email" name="email"></input>
    <textarea name="message"></textarea>
    <input type="submit" value="Submit"></input>
</form>

当您deploy 将您的应用程序脚本作为 Web 应用程序时，将显示要放入 action 属性的 URL：

【讨论】：