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

Posted 2021-04-27

今天我一直在研究一个非常简单的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>

答案

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

仅限客户端：

您的“加入”按钮可能会触发一个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进行注册。然后，您的服务器将使用提交到POST路由的数据来访问其API，他们会发送电子邮件。