Question

我正在开展一个小规模的项目。它更多的是关于演示而不是安全性。

我需要做的就是填写一份表格，然后用户点击“提交”，表单中收集的所有信息都将发送到指定的“mailto：地址”。我知道使用php做这个会更有意义，但是现在我只有html / css可以使用。

有没有办法可以将表单上的所有内容提交到电子邮件地址？它可以打开用户的电子邮件处理程序，但它没有。

我有11个文本字段和2套无线电。

Answer 1

嗯，你问的是完全可能的，我认为选择的正确答案是错误的。看看并阅读这两个链接：

Customize mailto链接http://blog.escapecreative.com/customizing-mailto-links/

mailto的默认操作取决于浏览器，因此，如果您尝试使用并且我的解决方案无法在您的浏览器中运行，原因可能是：Configuring mailto Mailto links do nothing in Chrome but work in Firefox?

以下是jsfiddle：http://jsfiddle.net/g3qazhf8/，我使用jquery让我的生活更轻松：

的javascript

function sendEmail(){
   var answerArr = [];
   $("input, textarea").each(function(){       
       if($(this).attr("type") === "radio"){            
           if($(this).is(":checked")){
              answerArr.push($(this).val());
           }
       }else{
          answerArr.push($(this).val());       
       }
   });

    var body = answerArr.join("\n");
    var mailto = "whateveremail@gmail.com";

    var a = document.createElement('a');
    a.href = "mailto:" + mailto + "?body=" + escape(body);
    console.log(a.href);
    a.click();
}

$(document).on("click",".submit",sendEmail);

HTML

<textarea> your message </textarea>
<input type="text" placeholder="name" name="name" />
<input type="text" placeholder="lastname" name="lastname" />
<label>
<input type="radio" name="rboption" value="yes" /> YES
</label>
<label>
<input type="radio" name="rboption" value="no" />NO
</label>
<br>
<a href="#" target="_blank" style="display:inline-block; background:#333; color:#FFF; padding:5px 10px 5px 10px; margin:15px 0 0 0; text-decoration:none" class="submit">Sent the email</a>

顺便说一句，你应该在你的localhost上尝试解决方案。我将附上一张证明它有效的图像： enter image description here

Answer 2

您不能仅使用html和css执行此操作。这两种语言都用于布局目的，但不用于数据处理。要从程序发送电子邮件，您必须使用像php这样的处理语言。（php还有其他几个选项，但html是none）

即使您可以链接到电子邮件地址

<a href="mailto:awesome@mail.com">...</a>

您无法在开始邮件对话框中处理和显示表单的数据。

Answer 3

事实证明，提交表格是不必要的。使用您希望的各种表单元素创建HTML表单。这是我的表单的样子：

<form>
to:<input name="mailto" type="text">
re:<input name="subject" type="text">
body:<textarea name="body"></textarea>
<input type="button" onclick="processForm()">
</form>

注意，最后一个输入是一个阻止提交表单的按钮。按下时，元素的onclick事件属性会导致processForm（）执行。该函数访问表单值并序列化除按钮之外的所有内容，调整生成的字符串以使其可用于mailto协议，如下所示：

<script>
function processForm(){
  var inputs  = document.getElementsByTagName("input");
  var message = document.getElementsByTagName("textarea");

  var str = inputs[0].name + ":" + inputs[0].value;     // mailto:[email address]
  str += "?" + inputs[1].name + "=" + inputs[1].value;  // ?subject=[subject]

  str += "&" + message[0].name + "=" + message[0].value;// &body=[body]
  str += str.replace(/\+/ig,"%20");                     // url encode space char '+'

  location.href=str;                                    // invoke mailto

}
</script>

对str的最后调整是对它进行urlencoded，这是替换＆＃39; +＆＃39;与＆＃39;％20＆＃39;。如果其他内容需要编码，那么我将使用函数encodeURI（），将str作为参数传递并将结果分配给变量。

脚本的最后一行调用mailto协议，该协议会激活系统上的任何电子邮件程序。在我的系统上，Outlook会自动填充所有需要的字段。我通过向自己发送电子邮件测试了上述代码并且它有效。

您可以使用"JavaScript Form Serialize"简化表单数据的序列化。注意：您仍然需要调整生成的字符串。见下文：

<script type="text/javascript" src="js/serialize-0.2.js"></script>
<script type="text/javascript">
document.getElementById("Serialize").onclick = function () {
    var str = serialize(document.forms[0]);
    var arr = str.split("&");
    arr.reverse();
    str = arr.join("&");
    str = str.replace("mailto=","mailto:");
    str = str.replace("&subject", "?subject");
    location.href = str;
};
</script>

使用此解决方案，我用链接替换了按钮。当表单数据传递给serialize（）时，结果输出的数据顺序相反，主体首先出现。 arr.reverse（）恢复正确的顺序。其余的调整是使str与mailto一起使用。

有关mailto的更多信息，请参阅详细的技术说明here。如果您只想了解basics，则以下链接非常有用。

Answer 4

只需使用elFormo.com并让它进行表单处理并向您发送电子邮件。您所要做的就是用HTML创建一个表单并将其发布到elFormo应用程序。他们甚至有一个免费的计划，付费的计划很便宜（5个月以下）。

Answer 5

您可以仅使用HTML，CSS和JQuery发布表单数据。我会尝试使用Google Forms或其他第三方软件等替代方案。

电子邮件表单提交，不使用PHP

5 个答案: