【问题标题】:HTML form working on web browser but not on mobile devicesHTML 表单可在 Web 浏览器上运行,但不能在移动设备上运行
【发布时间】:2015-07-07 19:11:24
【问题描述】:

我是一个非编码员或一个非常新的人。我调整了现有的 HTML 表单以在电子邮件模板中工作。有一个字段(用户电子邮件地址)和提交按钮。当用户单击提交时,一个 php 脚本会向我发送一封包含提交数据的电子邮件。这个东西在桌面上的 Gmail 和 Outlook 上运行良好,但是当我打开电子邮件并单击移动应用程序上的提交按钮时它不起作用(例如,gmail、outlook 或 spark 的收件箱)。我得到的错误(在被重定向到移动浏览器之后)是:“您需要提交表单”和一个验证错误(即没有输入数据)。虽然我确实收到一封电子邮件说表单已提交,但没有收到任何数据(即使我已经确定输入了数据)。请帮忙!

<?php
if(!isset($_POST['submit']))
{
    //This page should not be accessed directly. Need to submit the form.
    echo "error; you need to submit the form!";
}
$email = $_POST['email'];

//Validate first
if(empty($email)) 
{
    echo "we need your email address for this to work!";
    exit;
}

if(IsInjected($email))
{
    echo "Bad email value!";
    exit;
}

$email_from = 'hello@melltoo.me';//<== update the email address
$email_subject = "New Pay&Ship Beta User from Existing Users";
$email_body = "The user $email.\n is responding positively to your email".
    "He/she wants to be a part of beta testing for Pay&Ship ".

$to = "hello@melltoo.me";//<== update the email address
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');


// Function to validate against any email injection attempts
function IsInjected($str)
{
  $injections = array('(\n+)',
              '(\r+)',
              '(\t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}

?> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
    <title>PHP form to email sample form</title>
<!-- define some style elements-->
<style>
label,a 
{
    font-family : Arial, Helvetica, sans-serif;
    font-size : 12px; 
}
/*FORM STYLES*/ 
.tagline-form-object{margin-top:20px;text-align:center}.footer-form-input,
.tagline-form-input{background-color:#FFF;font-size:20px;padding:10px 15px;font-weight:700;color:#555459;border-radius:4px;width:300px;margin-right:10px}
.tagline-form-submit{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#0cb37b;font-size:20px;padding:10px 30px;border-radius:4px;font-weight:700;color:#FFF;text-shadow:0 1px 2px rgba(0,0,0,.5);cursor:pointer}
.tagline-form-submit:hover{background-color:#3DA7F2}
.tagline-form-submit:active{border-bottom:1px solid #194BA3;margin-top:1px}

</style>    
<!-- a helper script for vaidating the form-->
<script language="JavaScript" src="scripts/gen_validatorv31.js" type="text/javascript"></script>
</head>


<body>

<!-- Start code for the form-->
<form method="post" name="myemailform" action="form-to-email.php">
            <p>
        <input type="text" class="tagline-form-input" name="email" value="user-email@email.com">
    </p>
    <input class="tagline-form-submit" type="submit" name='submit' value="Add 25 AED to my account!">
</form>
<script language="JavaScript">
// Code for validating the form
// Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
// for details
var frmvalidator  = new Validator("myemailform");
frmvalidator.addValidation("name","req","Please provide your name"); 
frmvalidator.addValidation("email","req","Please provide your email"); 
frmvalidator.addValidation("email","email","Please enter a valid email address"); 
</script>
    </body>
</html>

【问题讨论】:

    标签: php html forms mobile html-email


    【解决方案1】:

    if (!isset($_POST['submit'])) 的作用基本上是检查按钮是否被点击。在移动浏览器上;我怀疑人们会将他们的数据输入到该字段中;然后使用他们键盘上的 Go 按钮提交。

    这意味着表单将被发布,但不是通过按下按钮。如果您将第一行替换为if ($_SERVER['REQUEST_METHOD'] != 'POST'),这至少应该可以修复第一个错误。

    对于第二个错误,您能否在提交表单后显示var_dump($_POST); 的输出?

    【讨论】:

    • 嗨,Sjon,感谢您的回答。我自己进行了测试,然后在移动 Web 客户端上单击了电子邮件中的按钮。在某些情况下,会显示一条警告消息,说明由于安全限制,表单无法正常工作。然后我被路由到浏览器,并显示表单没有数据的错误消息。但是,我越来越相信由于电子邮件客户端的阻止,该表单无法正常工作。我将尝试@Gortonington 的建议,即在 URL 中带有电子邮件地址的登录页面上进行 POST 或 GET ......如果有人能阐明这一点,那就太好了!
    【解决方案2】:

    HTML 电子邮件中的表单长期以来一直是一项冒险的尝试,并且今天仍在继续。它带来了安全风险,一些电子邮件客户端完全阻止了与它的交互(例如 Outlook),而大多数其他电子邮件客户端都有某种警告或有限的功能过滤器。 (Campaign Monitor)

    还有一些推测(但没有确凿的事实)HTML 表单会降低对某些 ISP 的交付能力。

    建议将收件人发送到登录页面,通过他们的网络浏览器在那里填写和提交表格,这样可以大大降低安全风险,电子邮件服务器可能会出现限制和奇怪的行为。

    另外 - 你为什么要提交一个表格来收集一个电子邮件地址,如果你给他们发送电子邮件,你显然已经有了电子邮件地址。与其提交表单,不如在登录页面上使用 URL 参数中的电子邮件地址执行 POST 或 GET 来处理您的需求。它将删除点击之外的所有用户交互。

    How to pull parameters from URL using Javascript

    How to submit a form using Javascript

    【讨论】:

    • 可能还值得一提的是,许多不同的电子邮件客户端会阻止外部资源,例如您示例中链接的 javascript 验证器库。
    • 感谢@gortonington 的回答!我怀疑您对阻止表单的电子邮件客户端是正确的(绝对是收件箱和 Outlook 的情况)。正如你所提到的,我实际上没有收集电子邮件地址,我已经有了它们。我只是让用户同意做某事(对我们的应用程序进行 beta 测试),并希望以一种低摩擦的方式让他们同意(好主意:单击电子邮件中的一个按钮,向我发送电子邮件)。所以我真的很想试试你关于在登录页面上执行 POST 或 GET 的建议,我在哪里可以找到更多关于如何执行此操作的信息? (再说一次,我只是一个想成为程序员的人)。
    • 最简单的方法是,如果您使用的是电子邮件服务提供商(ESP - 例如 Mail Chimp),您可以打开一个链接或按钮,上面写着“是的,请注册!”或其他任何内容并将其链接到感谢您注册页面。然后,您查看跟踪,该链接上的所有点击都是您的注册。另一种选择是使用 Javascript 或类似的脚本从 URL 中提取参数(例如url.com/url?e=emailaddress@email.com),然后向处理页面执行 POST,将其插入数据表中。如果你不走 ESP 路线,我肯定会推荐 Javascript。
    • 编辑了我的答案,包括几个关于如何在您的提交页面上完成 Javascript 的链接。
    猜你喜欢
    • 1970-01-01
    • 2018-03-04
    • 1970-01-01
    • 2020-01-20
    • 1970-01-01
    • 2019-12-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多