来自 CSSKarma 的“原始”联系表单

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

来自 CSSKarma 的 Tim Wright 对我的 联系表单 进行了一些很酷的修改。 首先,设计非常简洁,因此如果您希望从头开始设计表单,那么从 Tim 的示例开始可能比从我的示例开始更好。

以下是 Tim 做的一些事情

CSS

  • 删除了所有图像
  • 添加了用户反馈样式
  • 总体上简化了内容

PHP

  • 使表单提交到自身($_SERVER['PHP_SELF'];),因此您不需要
    感谢、错误或引擎文件。 我和 Tim 简要讨论过,如果没有单独的 error.html 文件,如果您想监视错误,这可能会成为分析问题,但可能还有更好的方法来监视错误……
  • 在 $headers 中设置回复地址(在 Gmail 中不起作用,但在 Thunderbird 等程序中可以正常工作
    目前尚不清楚原因)
  • 将 stripslashes 替换为 strip_tags 以用于一些变量
  • 稍微压缩了 $body

Javascript

  • 编辑 jquery.validate 以输出 <div> 而不是标签
  • 将嵌入的 javascript 移动到 jquery.extend 中
  • 使用 fadeIn() 进行表单提交/错误反馈

HTML

  • 使用 <button type=”submit”> 而不是 <input type=”image”/>
  • 添加了图例
  • 删除了所有 div

 

下载

新文件可以在 CSSKarma 实验室 中查看和下载。 这是 常规表单 的直接链接。 这是 带验证码的表单 的直接链接。