不使用php的电子邮件表单提交

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

我所需要做的就是填写一张表单，然后用户单击提交，从表单中收集的所有信息将发送到指定的“mailto:地址”。我知道使用php做这件事会更有意义，但目前我只使用html/css

是否有办法将表格上的所有内容提交到电子邮件地址？它可以打开用户的电子邮件处理程序，但不一定要打开

---

我有11个文本字段和2套收音机。

您可以只使用HTML、CSS和JQuery发布表单数据。我会尝试使用其他软件，如html或其他第三方软件。

仅使用html和css无法做到这一点。这两种语言均用于布局，但不用于数据处理。要从程序发送电子邮件，必须使用php等处理语言。（php还有几个其他选项，但html没有）

即使你可以链接到一个电子邮件地址

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

---

您将无法在“打开邮件”对话框中处理和显示表单数据

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

自定义邮件收件人

链接

mailto的默认操作取决于浏览器，因此，如果您尝试此操作，而我的解决方案无法在您的浏览器中工作，则原因可能是：

配置mailto

以下是jsfiddle：我使用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

你的留言
对
不

顺便说一句，您应该在本地主机上尝试该解决方案。我将附上一张证明其工作正常的图片：

---

因为提交表格是不必要的。使用所需的各种表单元素创建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>

函数processForm（）{
var inputs=document.getElementsByTagName（“输入”）；
var message=document.getElementsByTagName（“textarea”）；
var str=inputs[0]。名称+“：”+inputs[0]。值；//mailto:[电子邮件地址]
str+=“？”+输入[1]。名称+“=”+输入[1]。值；//？主题=[主题]
str+=“&”+消息[0]。名称+“=”+消息[0]。值；//&body=[body]
str+=str.replace（/\+/ig，“%20”）；//url编码空格字符'+'
location.href=str；//调用mailto
}

str的最后一个调整是对其进行urlencoded，这就是将“+”替换为“%20”的原因。如果其他内容需要编码，那么我将使用函数encodeURI（），将str作为参数传递，并将结果分配给变量

脚本的最后一行调用mailto协议，该协议将激活系统中的任何电子邮件发送程序。在我的系统上，Outlook弹出，自动填写所有需要的字段。我通过给自己发送一封电子邮件来测试前面的代码，它成功了

您可以使用简化表单数据的序列化。注意：仍然需要调整结果字符串。见下文：

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

document.getElementById（“序列化”）.onclick=function（）{
var str=serialize（document.forms[0]）；
var arr=str.split（&）；
反向排列（）；
str=arr.join（“&”）；
str=str.replace（“mailto=”，“mailto:”）；
str=str.replace（“&subject”，“subject”）；
location.href=str；
};

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

---

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

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

怎么可能只使用HTML/CSS发送电子邮件。？您可以使用ajax提交和发送电子邮件表单。我不确定，我仍然学到了很多。我会研究一下，但我不能使用服务器端编程，因为我没有一台服务器可以使用。我对自己掌握的语言非常有限。我可以使用html css和JavaScript，基本上是任何前端语言，但如果使用jquery，我就不能使用任何后端服务器端语言。使用href#创建链接。将单击事件绑定到此锚点，在此事件中序列化表单并将href更改为mailto with In tbe querystring body=

序列化数据

可以使用olso“在线”表单收集服务，例如。还有很多。好的，谢谢你！我会让和我一起工作的人知道，我所能做的是做不到的，看看他们会说些什么。我很欣赏你的回答下面有两个答案证明，只要你使用JavaScript或jQuery，你可以使用前端技术将mailto与表单数据一起使用。@Sharonlev是真的，但问题是关于html和CSS的。提出问题的开发人员没有意识到，除了html和CSS之外，他还可以使用更多的东西；还有JavaScript。请注意实际的问题：“是否有一种方法可以将表单上的所有内容提交到电子邮件地址？”有两个人的回答是肯定的“是”。我演示了这个事实

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