上个月我写了一篇关于我希望客户在有网站更改请求时,能像对待六岁小孩一样对待我的文章。我的意思是,这些更改请求通常过于模糊,导致混淆,最终浪费时间。如果这些更改请求包含做出更改所需的一切内容而无需混淆,效率会更高。
我认为这个想法可以很好地演示一个带有某些高级功能的 Web 表单。
这是真的吗?
这里的目的是展示一些花哨的表单样式和高级表单功能。就我个人而言,如果我能让我所有的客户都使用它,这样我每次都能准确地知道他们想要什么,我会很高兴,但这可能不切实际。
这个表单的“高级”之处在哪里?
有几点
- 使用了一个 jQuery 插件来帮助设置表单元素的样式。它完全用自定义图形替换了单选按钮和复选框,并将文本区域和基于文本的输入也包装在漂亮的样式中。这种样式仅靠 CSS 无法实现。
- 该表单功能齐全,它会提交到自身并发送实际的电子邮件。
- 该表单已进行验证。只有在正确填写必填字段时,才能提交表单。
- 提交通过 AJAX 处理,无需刷新页面。
- 可以选择保存姓名/电子邮件,因此频繁提交的用户无需一遍又一遍地输入常见信息。这通过 COOKIE 处理。
- 所有表单元素的提交都通过另一个 jQuery 插件进行序列化,因此添加和更改表单元素非常容易。
您会介绍一下它是如何构建的吗?
我计划在本周对这个表单进行屏幕录制,并介绍所有这些内容。因此,如果您感兴趣,请确保您已订阅。所有这些都可以从头开始编写,但我们将充分利用 jQuery 和三个很棒的插件来节省时间和精力。
实际的邮件发送和 Cookie 操作将由 PHP 处理。
不错,非常好…
真是太棒了。
太棒了,谢谢 Chris
“在多个页面上更改?”按钮在 Chrome 和 Safari 中存在一些问题。
但总的来说,这是一个不错的表单…
应该已修复。
截至太平洋标准时间 12:30,在 Google Chrome 和 Safari 中,“当前文本/新文本”文本区域仍然存在错误。两个文本区域的光标起始位置都很奇怪。除此之外,干得漂亮!
啊,是的,那是另一个问题,也已修复。请随时建议您发现的任何奇怪问题的修复方法,这总是更有帮助的。
这确实是一个非常棒的表单。只有一件事:我个人认为标签应该使用 text-align: right; 而不是 left。
有时,眼睛很难看到从标签文本到输入/框/单选按钮的无形线。
不错的表单,但在 Safari 3.2.1 版本上存在问题
index.php 的第 30 行存在一个错误。
存在:
$message .= "CURRENT Content: " . $addURLS . "\n";
应该是:
$message .= "CURRENT Content: " . $curText . "\n";
已修复。
不错的教程 Chris。
不过有个问题
我不熟悉 PHP,我正在使用注册表单编写一个项目。但除了提交按钮之外,我还有一个按钮来支持用户输入的预览,但我无法使其正常工作。
在预览时前后切换时,数据会丢失。
提前感谢您的建议。
谢谢,
M
不要使用后退按钮。使用 post 操作返回到原始表单。我假设您正在使用 post 操作来生成预览。将所有字段发布到预览中的隐藏输入字段中。要返回到原始视图,请使用输入按钮发布回原始视图。然后在所有原始字段中,在输入字段中回显相应的 post 变量。例如:
<input type="text" name="email" value="<?php echo $_POST['email']; ?>" />
希望这有帮助。
如果没有看到您的代码,这里就没什么可做的。但是,如果在从“预览”切换回常规表单以提交时数据消失了,那么罪魁祸首可能是缺少会话或 Cookie 变量来恢复已输入的数据,或者变量名称错误,无法恢复表单条目。
谢谢。
我一定会看看使用会话/Cookie 会发生什么。
再次感谢。
这实际上是一个非常棒的想法。我喜欢它!
我将在本周尝试一下,并在您的屏幕录制的基础上制作自己的表单。=]
优秀。我将在我的网站上为客户构建一个标准的内容更新表单。我会让他们使用它,告诉他们所有电子邮件内容请求将自动标记为低优先级,因此任何非低优先级的工作最好都通过表单完成。
呵呵。希望它能奏效…
非常酷且实用。我在上一份工作中不得不制作过一个,仅仅让人们签署它就非常头疼!
不错!Chris 干得漂亮,谢谢。
文本区域在 Safari 4(测试版)中显示不正常 — 提醒一下。
看起来很棒!喜欢“超级紧急”哈哈
除了紧急程度框之外,其他一切都很好。我与客户打交道的经验是,对他们来说,一切都非常紧急……无论是更正错别字、添加内容还是将文本颜色更改 1 度。
为了我的工作,我正在尝试说服我的老板使用自邮寄PDF文件来处理这类事情。我经常收到这样的邮件修改,“把‘that’改成‘thats’”。没有页码……甚至没有任何关于哪个客户的哪个网站需要修改的指示 :(
迫不及待地想看屏幕截图!Chris干得好。谢谢!!
我也在等待屏幕截图。看起来很不错。
太棒了!我已经在使用了,刚刚给所有维护客户发送了一封邮件。应该可以节省一些来回沟通。
不过,客户有两个请求。添加文件上传功能有多难?我的客户经常发送附件(图片、pdf等)。另外,如果我收到的邮件中包含上传文件的名称,并且“发件人”是客户在顶部字段中输入的邮箱地址,那就太好了。
Mike,
这里有一篇不错的文章(http://woork.blogspot.com/2009/02/file-uploaders-collection-for-web.html),其中包含一些免费的文件上传器,可以直接用于你的Web项目,这可能就是你想要的。
想设置type="file"上传器的样式。我无法使其工作。不知道该怎么办
非常棒的想法。
但是,如果客户有多个修改请求,并且有些请求的紧急程度不同呢?
你不能让他们为每个修改请求都提交一个表单,他们最好还是用邮件写下这些修改请求。
这可能会给客户带来不便;需要提交单独的修改请求——但同时,它为每个修改请求提供了唯一的条目,这意味着客户可以(潜在地)访问一个系统来查看每个请求的完成情况,而设计师也更容易理解需要完成的工作列表,而不是一封冗长的电子邮件概述了20多个修改请求,或者更糟糕的是一个包含跨越多个项目的修改的Word文档。
对我来说,问题在于这种不便是否值得确保不会因杂乱的邮件/附件而导致修改在错误的区域进行或完全遗漏。
你说的听起来很美好,但尽管如此,也体现了你可以变得多么懒惰。
好的,有了这个解释,让我们把不便留给客户,如果他想要为10个错误提交10次表单,那是他的问题,不是我们的。
好主意,但在Chrome中CSS肯定有问题!
在禁用JavaScript的情况下无法工作,提交表单时会显示“您的消息已发送。”页面。
PHP也应该验证表单。
所以消息确实发送了,所以它“有效”,但你说得对,然后输入内容没有被验证。
如果你想编写PHP端验证,我很乐意更新示例。
这个表单背后的理念很棒。事实是,如果客户需要任何更改,只有极少数客户才会使用此表单。他们宁愿用邮件轰炸你,邮件中没有关于他们需要更改的任何具体信息:?:)
下拉菜单在IE7中对我来说不太好用,下拉选项出现在页面URL:表单后面。我上传了一张屏幕截图:http://bayimg.com/oaPhJAAbh。只是我一个人这样吗?
不,你不是唯一一个。我在IE7上也是一样。下拉菜单需要以某种方式置于最前面,因为它隐藏在“页面URL”表单元素及其下方的元素后面。
看起来很棒,Chris!迫不及待地想看到屏幕截图:D
超级恶劣的紧急情况……Chris,你真是个天才。我现在笑到肚子痛。尽管如此,我所有客户的工作都是关系到世界末日的紧急情况,即使是小的文字修改。;-)
看起来很棒,但我认为有两个问题应该解决:(1) 必填字段没有提前说明——你只有在提交表单时缺少某些值时才知道它们是必填的。(一个相当标准的指示方法是在必填表单元素的标签中添加星号。)(2) 似乎无法仅使用键盘操作jQuery化的下拉菜单。我可以切换到它,然后按Enter键展开菜单,但我无法更改选定的项目。
绝对应该有星号……我会尝试在屏幕截图中解决这个问题。下拉菜单也是如此,但我不知道我是否有能力处理它。该菜单完全被该jQuery插件替换,因此除非重建它,否则它不会表现出相同的行为,这显然不是这种情况。
关于值是否有解决方案?
已经等你的视频很久了!!
Chris做得很好……
我一直计划构建一个多合一(会计、项目管理、托管)解决方案来处理我在网页设计公司工作的客户。这可能是我开始编码所需的额外动力。
谢谢!
这实际上是一个很棒的想法。我在大学工作时使用过类似的东西,我创建了一个表单,允许他们输入所有信息,然后将表单数据链接到我们的工单跟踪系统。这为进行网站更改请求并登录到跟踪系统查看这些请求的状态提供了一种简单的方法。对于仅进行Web开发的开发公司来说,构建一个与表单链接的跟踪系统应该相当简单,并且会激励客户使用它——因为他们将能够在线跟踪其请求的状态。
这太棒了,这正是我需要的,我办公室里到处都是一群没有头脑的僵尸。他们认为我是一个读心者,多亏了Chris,我不必再使用我的特殊能力了!:)
你需要什么?……对不起,我没有看到更改请求表单!
你想做什么?……不,我的收件箱里没有更改请求表单!
什么,你没有胆量,想正式进行变性手术?……填写变性手术申请表!
抱歉,最后一句我有点过了!
哈哈哈哈哈……再次感谢!
我來自台灣
多亏了你,它在海外流行:D
这真的很棒。
有点可惜的是,该库用表格替换元素,从而创建非语义标记(由于JavaScript替换而看起来有效)。
不过,它确实看起来很棒!
期待你的屏幕截图!
这正是我需要的,很棒的文章!:)
看起来非常不错,但是Google自动填充的黄色指示器(对我来说,在电子邮件字段上)与字段输入区域错位(看起来很糟糕,就像黄色胶带覆盖在表单上)。
还需要考虑/测试的另一件事。但总的来说,工作很棒。
哦,我喜欢这个。
这个想法很棒,我确实可以为我的客户使用它。
此表单的另一个特点是它会让这些客户在提交之前三思而后行。我的意思是,也许有时候,他们会意识到自己的请求有多么愚蠢。
好文章!
很棒的表单——但正如你指出的那样——大多数客户可能不会使用它——在企业环境中也许会。
哦,很棒的表单!我真的很喜欢这个表单,我迫不及待地想用它。
非常感谢,太棒了 :)
几年前,我们为我们的网页设计公司构建了自己的变更单系统。感谢这篇文章——你为一些更新提供了灵感!我们遇到了同样的模糊评论——大多数情况下,我认为这是因为他们总是在自己的网站上,并且假设我们立即知道他们指的是什么——当我们托管超过300个我们开发的网站时,这可能很困难。
在努力使我的表单在 Safari、Firefox、IE 的 Mac 和 PC 平台上都能正常工作之后,我真的很喜欢这个表单的想法,打算试一试看看它在这些浏览器中的反应,单选按钮间距目前是一个噩梦。所以谢谢,值得思考。
jqTransform 采用 GPL 许可,这对我来说是一个无法接受的选项。我不是许可证专家,但这是否意味着/要求你的代码也必须是 GPL 许可的?
我真的很喜欢这个表单的行为,它几乎包含了我想要的所有联系表单功能。但是,从样式的角度来看,我发现了一些缺点。
隐藏的错误消息在 IE 和 FF 中显示在输入框的相对两侧{如果你有 IE 选项卡,请切换一下}
此外,输入元素本身在 IE 和 FF 中大小不同,我真的不知道如何解决这两个问题中的任何一个,但是它们是我现在在一些特定情况下无法使用此表单的唯一原因。
如果有人知道答案,请指点迷津,让我度过一个美好的星期六!
还忘记提到非常炫酷的下拉菜单会显示在“当前文本/内容”文本区域的后面。