Question

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

其中一个要素是页面底部的联系表格。看起来“发送消息”按钮被编码为绝对没有任何作用。将此表单转发给用户输入的值（即：他们的姓名，电子邮件和他们的消息）到专用的电子邮件收件箱有多简单？

如果不是那么简单，还有哪些其他选项可以使表单正常运行，还可以与网站的一般主题集成？

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

Answer 1

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

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

Answer 2

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

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

More info on mailto

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

Reference about form submit options

Answer 3

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

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

这是因为现在按钮知道如果单击它该怎么办。它从表单输入字段中获取所有数据，并将它们发送到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';
    }
}

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

当您将Apps脚本deploy作为网络应用时，将显示放入action属性的网址：

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

4 个答案: