【问题标题】:Email form submission without using php不使用 php 的电子邮件表单提交
【发布时间】:2015-02-06 22:52:59
【问题描述】:

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

我需要做的就是填写一个表格,然后用户单击提交,从表格中收集的所有信息都将发送到指定的'mailto:address'。我知道使用 php 来做这件事会更有意义,但现在我只有 html/css 可以使用。

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

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

【问题讨论】:

  • 如何仅使用 HTML/CSS 来发送电子邮件。?您可以使用 ajax 提交和发送表单。
  • 我不确定,我还在学习很多东西。我会调查一下,但我不能使用服务器端编程,因为我没有服务器可以使用。我可以使用的语言非常有限。我可以使用 html css 和 JavaScript,基本上任何前端,但我不能使用任何后端服务器端语言
  • 如果您使用 jquery,您可以轻松做到这一点。使用 href # 创建链接。将点击事件绑定到此锚点,在此事件中序列化表单并将 href 更改为 mailto ,其中查询字符串 body=the serialized data
  • 您可以使用其他“在线”表单收集服务,例如Wufoo is a web application that helps anybody build amazing online forms. It collects the data as well。还有很多其他的。

标签: php html css


【解决方案1】:

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

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

mailto 的默认操作取决于浏览器,因此,如果您尝试了,我的解决方案无法在您的浏览器中运行,原因可能是:Configuring mailtoMailto 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>

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

【讨论】:

  • 我同意所选答案不正确。我认为您的答案应该是官方的,因为您证明了将表单数据与前端技术结合使用的可行性,使用 jquery 有利地结合了对 DOM 的巧妙使用。
  • 成功了,非常感谢!感谢您抽出宝贵时间帮助我解决这个问题。不幸的是,我已经将我的模板提交给了我为之工作的人。他们有一个程序员团队可以使用服务器端脚本来完成工作,我只是希望为了演示和测试运行,我可以用 javascript 完成它,这样他们就可以在最初看到更多介绍。不幸的是,我为时已晚。但再次 - 非常感谢你!这个社区很有帮助
【解决方案2】:

你不能只使用 html 和 css 来做到这一点。两种语言均用于布局目的,但不用于数据处理。要从您的程序发送电子邮件,您必须使用 php 之类的处理语言。 (php还有其他几种选择,但没有html)

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

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

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

【讨论】:

  • 好的,谢谢!我会让与我一起工作的人知道,我的局限无法做到这一点,并看看他们要说什么。感谢您的回答
  • 下面有两个答案证明可以使用前端技术使用mailto和表单数据,只要一个使用JavaScript或jQuery即可。
  • @SharonLevy 是的,但问题是关于 html 和 css
  • 提出这个问题的开发人员并没有意识到除了 HTML 和 CSS 之外还有更多的东西可供他使用。还有 JavaScript。请注意实际问题:“有没有办法可以将表单上的所有内容提交到电子邮件地址?”两人的回答是肯定的“是”。我用 JavaScript 演示了这个事实,而 ncubica 使用了 JavaScript 库 jQuery。你可能不喜欢这些真理,但它们仍然是真实的。
【解决方案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,这就是将 '+' 替换为 '%20' 的原因。如果其他内容需要编码,那么我将使用函数 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,以下链接会很有帮助。

【讨论】:

    【解决方案4】:

    只需使用elFormo.com 并让它处理表单并向您发送电子邮件。您所要做的就是在 HTML 中创建一个表单并将其发布到 elFormo 应用程序。他们甚至有一个免费计划,而付费计划很便宜(每月不到 5 美元)。

    【讨论】:

      【解决方案5】:

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

      【讨论】:

        猜你喜欢
        • 2018-11-05
        • 2013-09-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-01-12
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多