如果你还不知道,重力形式到目前为止是最适合初学者的友好的WordPress联系表单插件。 我们使用它在我们的WordPress图库网站,WordPress优惠券网站,以及几乎所有的新客户。 最近,在客户的网站上工作时,我们不得不调整窗体的样式来匹配要求我们把占位符文本放在Gravity Forms中的设计。 不幸的是,令人惊讶的是,这个功能并不是内置于Gravity Forms(Yet)中的。 虽然他们可以在下拉字段和后置字段:类别中添加占位符文本,但是不能在输入字段和textarea字段中添加占位符。 这对我们来说成了一个巨大的问题。 我们通过重力表格支持区域进行搜索,唯一可用的解决方案是黑客,甚至没有正常工作。 虽然它允许我们把占位符文本,它有重大问题。 如果用户只是点击提交而不实际填充字段,表单将验证而不是返回错误。 经过好的搜索,我们最终找到了解决方案。 在本文中,我们将向您展示如何使用jQuery和Gravity表单过滤器在重力形式中添加占位符文本。
所以你可能想知道为什么我们需要占位符的文本标签在那里? 那么在我们正在设计的设计中,我们不能使用标签进行造型。
我们所要做的就是使用Gravity Forms过滤器添加一个函数,并使用jQuery来输出文本。
最后的代码
最后的代码如下。 你可以简单地复制并粘贴到你的functions.php文件中并使其工作。 但是如果你想了解更多关于这个功能以及它的工作方式,请继续阅读这篇文章。 也请继续阅读以了解如何在下拉字段中添加占位符文本。
因此,我们必须做的第一件事是在管理面板中的重力形式字段下添加一个占位符值。 要做到这一点,你需要打开你的主题的functions.php文件并粘贴下面的代码:
这个小功能将在您的Gravity Forms后端添加占位符文本字段。 示例屏幕截图如下:
现在我们已经在管理面板中添加了这个字段,您可以继续填写所需的文本。 下一步是实际显示实际表单上的文字。 要做到这一点,我们将利用jQuery。 你需要做的就是在你的主题的functions.php文件中粘贴以下代码:
/ *我们使用jQuery来读取占位符值并将其注入到其字段* / add_action('gform_enqueue_scripts',“my_gform_enqueue_scripts”,10,2); 函数my_gform_enqueue_scripts($ form,$ is_ajax = false){ ?>这将输出占位符文本输入字段和textarea字段,并保持验证。 现在我们已经介绍了这一点,我们仍然需要在我们的下拉字段中添加占位符文本,这个小片段并不适合我们。 谢天谢地,Gravity Forms默认是内置的。
在重力形式下拉字段中添加占位符文本
所有你真正需要做的是创建一个空白值的标签。 是的,当我们第一次听到的时候,这听起来令人困惑。 但事实并非如此。 所以在Gravity Forms中添加一个下拉字段。 点击启用值的复选框。 然后添加一个空白值的标签。 请参阅下面的截图:
这就是在Gravity Forms中添加占位符文本所必须做的。 你可能想知道这是不是初学者友好的WordPress联系表单插件,那么为什么没有添加这么简单的东西呢? 那么,我们想知道完全一样的东西。 所以我们的创始人@syedbalkhi与Gravity Forms的一位伙伴Carl Hancock联系了一下。 以下是他们的谈话:
@carlhancock任何像这样的东西都可以嵌入到Gravity Forms的核心中? - http://ow.ly/6sWcz
- Syed Balkhi(@syedbalkhi)2011年9月13日
@syedbalkhi是的。 我们希望HTML5占位符属性支持将会扩展,所以我们可以使用纯HTML5。 但它没有。
- 卡尔汉考克(@carlhancock)2011年9月13日
@syedbalkhi所以我们试图阻止,所以我们没有回退到JavaScript。不幸的是浏览器没有合作。
- 卡尔汉考克(@carlhancock)2011年9月13日
因此,您可以看到这是他们知道的事情,并且将在未来的版本中添加。 要查看Gravity形式可以做的所有可怕的事情,只需查看我们的关于Gravity Forms的文章。
感谢真棒功能和jQuery片段去豪尔赫佩德雷特(@jorgepedret)。