如何使用 HTML 表单发送电子邮件并使用 Node.js 和 Gulp 提交？

Question

今天我一直在制作一个非常简单的 HTML 联系表单，它应该可以使用 Node.js 和 Gulp 发送电子邮件，但我无法找到一种方法来完成这项工作。简单 .PHP 文件的相对路径不是正确的方法，它可能应该通过 HTTP 请求，但老实说

我不知道如何用 Gulp 做到这一点。如何将表单数据从 HTML 发送到 Gulp 任务？还是我需要先使用 JavaScript 来捕获表单提交？

参见下面的 HTML 代码：

                        <form action="What needs to be here now?" method="POST">
                        <h3 class="title is-4 has-text-centered">Uw onderneming aanmelden</h3>
                        <div class="control-material is-secondary">      
                            <input class="material-input" type="text" required>
                            <span class="material-highlight"></span>
                            <span class="bar"></span>
                            <label>Name *</label>
                        </div>
                        <div class="control-material is-secondary">      
                            <input class="material-input" type="text" required>
                            <span class="material-highlight"></span>
                            <span class="bar"></span>
                            <label>Company name *</label>
                        </div>
                        <div class="control-material is-secondary">      
                            <input class="material-input" type="text" required>
                            <span class="material-highlight"></span>
                            <span class="bar"></span>
                            <label>Phone *</label>
                        </div>
                        <div class="control-material is-secondary">      
                            <input id="email" name="email" class="material-input" type="text" required>
                            <span class="material-highlight"></span>
                            <span class="bar"></span>
                            <label>E-mail *</label>
                        </div>
                        <div class="submit-wrapper">
                            <button type="submit" class="button button-cta is-bold is-fullwidth btn-align primary-btn raised no-lh">
                                Join
                            </button >
                        </div>

Answer 1

您的策略将取决于您是否希望表单在客户端触发电子邮件，而不与服务器进行任何交互；或者您是否希望将表单提交到服务器，然后让服务器发送电子邮件。

仅限客户端：

您的“加入”按钮可能会触发一个 JavaScript 函数，该函数会阻止默认表单提交，而是检索表单条目并生成一个复杂的mailto: 地址：

function sendEmail() {
  // Write some code that gets form entries
  window.location.href = 'mailto:' + address + '?subject=' + ...;
}

（有lots of web resources 用于了解复杂的mailto: 地址。）这将导致用户的首选邮件客户端打开，并使用您指定的内容填充电子邮件。用户在他们的客户端中点击“发送”，电子邮件就被发送了，您的服务器没有任何参与。

服务器端控制：

有多种方法可以做到这一点，但最简单的第一种方法是使用像 Nodemailer 这样的 Node.js 包。将您的服务器设置为通过 POST 请求路由接收多部分表单数据，然后让您的服务器将该数据转换为邮件内容，并将其转换为 Nodemailer transporter.sendMail 命令。与客户端案例不同，您需要设置一个专用的电子邮件发件人帐户——在您自己的smtp 服务器上，或在gmail 之类的服务上——供您的服务器使用。

或者，如果您希望您的服务器仅充当中介而不发送自己的电子邮件，您可以使用 SendGrid、Mailgun 等电子邮件 API 注册。然后您的服务器将使用提交给您的数据访问他们的 API POST 路线，他们会发送电子邮件。