具有模态响应的简单联系形式


Simple contact form with modal response

好吧,我知道模式联系表单有很多问题/答案,但我想知道如何在页面上有一个正常的联系表单,当提交时,PHP操作会以模式弹出,说"谢谢你联系我们",或者类似的话,然后关闭。我以前做过HTML联系人表单并沉迷于PHP操作,只是从来没有在模态中。。。有没有简单的解决方案(不使用插件)?

如果有人有这个问题并希望得到回答,请务必投赞成票。

如果你想要一个无javascript的解决方案,那么你的表单处理脚本需要能够呈现表单的所有状态

  • 初始未填充表单
  • 对首次提交的回复可能是:
    • 显示部分填写或填写错误的表单,并标记错误
    • 感谢信息
  • 回复感谢信息

模式弹出窗口只是一个半透明的容器元素(例如<div>),其样式是z定位在所有其他html(除其子元素外)的顶部,并覆盖整个视口。它包含一个表单和您可能喜欢的任何其他内容。不使用时,其display属性设置为none

因此,您的php表单处理程序可能会这样工作:

$modalclass='modalhide';
$filteredpost=array();
if(isset($_POST['submit1']){ //user submitted form data
    //validate submitted data
    $filteredpost = my_cleanup_function($_POST); 
    if(my_form_is_good($filteredpost){
      $modalclass='modalshow';
      $filteredpost=array();
    } 
} 
echo <<< EOF
<form method='POST' name='mainform' action='myhandler.php'>
   //other form fields
   <input type='submit' name='submit1'>
</form>
<div class='$modalclass'>
   <form name='thanksmodal' method='POST' action='myhandler.php'>
      //content of some sort
      <input type='submit' name='thankssubmit'>
   </form>
</div>
EOF;

AJAX方法类似,只是javascript拦截提交按钮操作,异步提交给表单处理脚本并显示结果。有很多javascript库可以让这变得更容易。jQuery和jQuery UI是我最喜欢的两个。