Question

我正在尝试编写一个代码，可以通过点击提交按钮向特定地址发送电子邮件。下面我提到我的HTML代码，点击提交我没有在我的帐户上收到任何电子邮件。请让我知道要做什么。

<form method=POST action="mailto:abc@mail.com" enctype="text/plain">
    <label for="name">Name:</label>
    <br>
    <input type="text" name="Name" id="name" value="Enter Name">
    <br>
    <label for="email">Email:</label>
    <br>
    <input type="email" name="email" id="email" value="Enter Email">
    <br>
    <label for="phone_number">Phone Number:</label>
    <br>
    <input type="tel" name="phone_number" id="phone_number" value="Enter Phone Number">
    <br>
    <input type="submit" name="Submit">
</form>

Answer 1

有些可能只使用HTML“发送”电子邮件而不必运行任何服务器端代码，但实际上并没有建议。使用mailto：URI Scheme，您可以设置主题，邮件正文以及邮件发送者。您将无法设置从中发送的邮件，因为处理mailto：的URI方案的邮件客户端将处理该邮件。

以下是设置基本联系表单的表单的简单示例。请记住，用户需要有一个可以处理URI Scheme的程序，如果不能，则不会发生任何事情。这不会发送电子邮件，但会在邮件应用程序中创建一个。

<form method="GET" action="mailto:test@example.com" enctype="text/plain">
    <div>Subject</div>
    <input type="text" name="subject" />

    <div>Message</div>
    <textarea name="body"></textarea>

    <br/>
    <input type="submit" value="Send" />
</form>

如果相当简单，它的工作方式。我们使用表单的“GET”方法将属性添加到URI Scheme的末尾，该方案应该是“subject”和“body”。您可以在http://en.wikipedia.org/wiki/Mailto

了解有关URI mailto：scheme的更多信息

如果您希望您的联系表单包含更多信息，如姓名，电话号码和其他信息，您可以让Javascript处理表单提交。您可以通过为“submit”事件添加事件侦听器来完成此操作。

<form method="GET" action="mailto:test@example.com" enctype="text/plain">
    <div>Subject</div>
    <input type="text" name="subject" />

    <div>Name</div>
    <input name="Name" />

    <div>E-Mail</div>
    <input name="E-Mail Address" />

    <div>Message</div>
    <textarea name="Message"></textarea>

    <br/>
    <input type="submit" value="Send" />

    <input type="hidden" name="body" />
</form>

<script>
   var form = document.getElementsByTagName('form')[0];
   form.addEventListener('submit',contact,false);
   function contact(e) {
      // Prevent Default Form Submission
      e.preventDefault();

      var target = e.target || e.srcElement;
      var i = 0;
      var message = '';

      // Loop Through All Input Fields
      for(i = 0; i < target.length; ++i) {
         // Check to make sure it's a value. Don't need to include Buttons
         if(target[i].type != 'text' && target[i].type != 'textarea') {
                // Skip to next input since this one doesn't match our rules
            continue;
         }

         // Add Input Name and value followed by a line break
         message += target[i].name + ': ' + target[i].value + "\r\n";
      }
      // Modify the hidden body input field that is required for the mailto: scheme
      target.elements["body"].value = message;

      // Submit the form since we previously stopped it. May cause recursive loop in some browsers? Should research this.
      this.submit();
   }
</script>

上面的脚本将生成一个如下所示的电子邮件正文。当然，您总是可以添加更多规则并解析到contact函数中，以使其看起来更好。

subject: a
Name: b
E-Mail Address: c
Message: d

Answer 2

这样的表单起作用，只要可以使用HTML发送电子邮件（CSS与它实际上没有任何关系）。单击“提交”按钮可在用户的计算机中启动电子邮件客户端，但这可能会被浏览器中的设置阻止。然后，用户需要使用该客户端中的提交按钮（或等效按钮）。如果您在测试中没有收到电子邮件，那么abc@mail.com不是您的帐户，或者垃圾邮件过滤掉了某些电子邮件。

如果目的是获取用户的信息，那么“电子邮件”字段是无用的，因为如果发送完成，则传入的消息将显示为用户的电子邮件地址（通常也是名称）来自现场。

Answer 3

要仅使用HTML发送电子邮件（在您身边），您可以使用https://formspree.io/之类的服务。 Formspree等服务可以为您处理所有代码。您所要做的就是设置表单以指向他们的电子邮件提供商。如果你不喜欢Formspree，你可以尝试寻找替代方案，我自己制作了一个here。 Formspree的问题在于，在发送电子邮件之前，您的用户将被重定向到他们的网站以执行验证码。

例如，您可以通过使表单如下所示来使用此类服务：

<form action="https://formspree.io/your@email.com" method="POST">
    <input type="text" name="name">
    <input type="email" name="_replyto">
    <input type="submit" value="Send">
</form>

正如您所见，表单已发送至https://formspree.io/your@email.com。有关如何使用其服务的formspree网站上有详细说明。使用像formspree这样的服务非常简单，因为您不必编写管理表单的任何后端。

Answer 4

为此，您需要使用PHP等服务器端语言来处理表单。

如何仅使用HTML5和CSS发送电子邮件

4 个答案: