如何在重力表单中添加占位符文本

如果您还不知道,Gravity Forms到目前为止是最初学友好的WordPress联系表单插件。我们在WordPress Gallery网站,WordPress优惠券网站以及几乎所有新客户上使用它。最近在客户的网站上工作时,我们不得不调整表单的样式以匹配要求我们在Gravity Forms中放置占位符文本的设计。不幸的是,令人惊讶的是,此功能并未内置于Gravity Forms(Yet)。虽然他们可以选择在下拉字段和post field:category中添加占位符文本,但是没有选项可以在输入字段和textarea字段中添加占位符。这对我们来说是一个巨大的问题。我们搜索了Gravity表单支持区域,其中唯一可用的解决方案是一个甚至无法正常工作的hack。虽然它允许我们放置占位符文本,但它存在重大问题。如果用户只是在没有实际填写字段的情况下点击提交,则表单将验证而不是返回错误。经过精心搜索,我们最终找到了解决方案。在本文中,我们将向您展示如何使用jQuery和Gravity Form过滤器在重力表单中添加占位符文本。

所以你可能想知道为什么当标签出现时我们需要占位符文本?在我们正在进行的设计中,我们无法使用标签进行样式化。

Gravity Forms Example with Placeholder Text

我们所要做的就是使用Gravity Forms过滤器添加一个函数并使用jQuery输出文本。

最终代码

最终代码如下。您只需将其复制并粘贴到functions.php文件中即可使用。但是,如果您想了解有关该功能及其工作原理的更多信息,请继续阅读本文。还要继续阅读以了解如何在下拉字段中添加占位符文本。

  <?php  /* Add a custom field to the field editor (See editor screenshot) */  add_action("gform_field_standard_settings", "my_standard_settings", 10, 2);    function my_standard_settings($position, $form_id){    // Create settings on position 25 (right after Field Label)    if($position == 25){  ?>    <li  >  <label for="field_placeholder">Placeholder Text    <!-- Tooltip to help users understand what this field does -->  <a href="javascript:void(0);"  tooltip="&lt;h6&gt;Placeholder&lt;/h6&gt;Enter the placeholder/default text for this field.">(?)</a>    </label>    <input type="text"   size="35" onkeyup="SetFieldProperty("placeholder", this.value);">    </li>  <?php  }  }    /* Now we execute some javascript technicalitites for the field to load correctly */    add_action("gform_editor_js", "my_gform_editor_js");    function my_gform_editor_js(){  ?>  <script>  //binding to the load field settings event to initialize the checkbox  jQuery(document).bind("gform_load_field_settings", function(event, field, form){  jQuery("#field_placeholder").val(field["placeholder"]);  });  </script>    <?php  }    /* We use jQuery to read the placeholder value and inject it to its field */    add_action("gform_enqueue_scripts","my_gform_enqueue_scripts", 10, 2);    function my_gform_enqueue_scripts($form, $is_ajax=false){  ?>  <script>    jQuery(function(){  <?php    /* Go through each one of the form fields */    foreach($form["fields"] as $i=>$field){    /* Check if the field has an assigned placeholder */    if(isset($field["placeholder"]) && !empty($field["placeholder"])){    /* If a placeholder text exists, inject it as a new property to the field using jQuery */    ?>    jQuery("#input_<?php echo $form["id"]?>_<?php echo $field["id"]?>").attr("placeholder","<?php echo $field["placeholder"]?>");    <?php  }  }  ?>  });  </script>  <?php  }  ?>  

首先,我们要做的是在管理面板的Gravity Forms字段下添加占位符值。为此,您需要打开主题的functions.php文件并粘贴以下代码:

<?php  /* Add a custom field to the field editor (See editor screenshot) */  add_action("gform_field_standard_settings", "my_standard_settings", 10, 2);    function my_standard_settings($position, $form_id){    // Create settings on position 25 (right after Field Label)    if($position == 25){  ?>    <li  >  <label for="field_placeholder">Placeholder Text    <!-- Tooltip to help users understand what this field does -->  <a href="javascript:void(0);"  tooltip="&lt;h6&gt;Placeholder&lt;/h6&gt;Enter the placeholder/default text for this field.">(?)</a>    </label>    <input type="text"   size="35" onkeyup="SetFieldProperty("placeholder", this.value);">    </li>  <?php  }  }    /* Now we execute some javascript technicalitites for the field to load correctly */    add_action("gform_editor_js", "my_gform_editor_js");    function my_gform_editor_js(){  ?>  <script>  //binding to the load field settings event to initialize the checkbox  jQuery(document).bind("gform_load_field_settings", function(event, field, form){  jQuery("#field_placeholder").val(field["placeholder"]);  });  </script>    <?php  }  

这一小部分功能将在Gravity Forms后端添加占位符文本字段。示例截图如下:

Placeholder Field in Gravity Forms

现在我们已在管理面板中添加了该字段,您可以继续使用所需的文本填充它们。下一步是在实际表单上实际显示文本。为此,我们将使用jQuery。您需要做的是将以下代码粘贴到主题的functions.php文件中,紧跟在前面的代码之后:

  /* We use jQuery to read the placeholder value and inject it to its field */    add_action("gform_enqueue_scripts","my_gform_enqueue_scripts", 10, 2);    function my_gform_enqueue_scripts($form, $is_ajax=false){  ?>  <script>    jQuery(function(){  <?php    /* Go through each one of the form fields */    foreach($form["fields"] as $i=>$field){    /* Check if the field has an assigned placeholder */    if(isset($field["placeholder"]) && !empty($field["placeholder"])){    /* If a placeholder text exists, inject it as a new property to the field using jQuery */    ?>    jQuery("#input_<?php echo $form["id"]?>_<?php echo $field["id"]?>").attr("placeholder","<?php echo $field["placeholder"]?>");    <?php  }  }  ?>  });  </script>  <?php  }  

这将在输入字段和textarea字段上输出占位符文本并保持其验证。现在我们已经介绍了这一点,我们仍然需要在我们的下拉字段中添加占位符文本,这个小片段不适用于我们。值得庆幸的是Gravity Forms默认内置。

在Gravity Forms中添加占位符文本下拉字段

您真正需要做的就是创建一个空白值的标签。是的,当我们第一次听到它时,这听起来很混乱。但事实并非如此。因此,在Gravity Forms中添加一个下拉字段。单击“启用值”复选框。然后添加一个带空白值的Label。请参阅下面的屏幕截图:

Drop Down Placeholder Text in 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。但它没有。

– Carl Hancock(@carlhancock)2011年9月13日

@ syedbalkhi所以我们试图推迟所以我们没有回到javascript。不幸的是浏览器没有合作。

– Carl Hancock(@carlhancock)2011年9月13日

因此你可以看到这是他们所知道的,它将被添加到未来的版本。要查看Gravity表单可以做的所有令人敬畏的事情,只需查看我们关于Gravity Forms的帖子。

相信真棒函数和jQuery片段转到Jorge Pedret(@jorgepedret)。

如果您还不知道,Gravity Forms到目前为止是最初学友好的WordPress联系表单插件。我们在WordPress Gallery网站,WordPress优惠券网站以及几乎所有新客户上使用它。最近在客户的网站上工作时,我们不得不调整表单的样式以匹配要求我们在Gravity Forms中放置占位符文本的设计。不幸的是,令人惊讶的是,此功能并未内置于Gravity Forms(Yet)。虽然他们可以选择在下拉字段和post field:category中添加占位符文本,但是没有选项可以在输入字段和textarea字段中添加占位符。这对我们来说是一个巨大的问题。我们搜索了Gravity表单支持区域,其中唯一可用的解决方案是一个甚至无法正常工作的hack。虽然它允许我们放置占位符文本,但它存在重大问题。如果用户只是在没有实际填写字段的情况下点击提交,则表单将验证而不是返回错误。经过精心搜索,我们最终找到了解决方案。在本文中,我们将向您展示如何使用jQuery和Gravity Form过滤器在重力表单中添加占位符文本。

所以你可能想知道为什么当标签出现时我们需要占位符文本?在我们正在进行的设计中,我们无法使用标签进行样式化。

Gravity Forms Example with Placeholder Text

我们所要做的就是使用Gravity Forms过滤器添加一个函数并使用jQuery输出文本。

最终代码

最终代码如下。您只需将其复制并粘贴到functions.php文件中即可使用。但是,如果您想了解有关该功能及其工作原理的更多信息,请继续阅读本文。还要继续阅读以了解如何在下拉字段中添加占位符文本。

  <?php  /* Add a custom field to the field editor (See editor screenshot) */  add_action("gform_field_standard_settings", "my_standard_settings", 10, 2);    function my_standard_settings($position, $form_id){    // Create settings on position 25 (right after Field Label)    if($position == 25){  ?>    <li  >  <label for="field_placeholder">Placeholder Text    <!-- Tooltip to help users understand what this field does -->  <a href="javascript:void(0);"  tooltip="&lt;h6&gt;Placeholder&lt;/h6&gt;Enter the placeholder/default text for this field.">(?)</a>    </label>    <input type="text"   size="35" onkeyup="SetFieldProperty("placeholder", this.value);">    </li>  <?php  }  }    /* Now we execute some javascript technicalitites for the field to load correctly */    add_action("gform_editor_js", "my_gform_editor_js");    function my_gform_editor_js(){  ?>  <script>  //binding to the load field settings event to initialize the checkbox  jQuery(document).bind("gform_load_field_settings", function(event, field, form){  jQuery("#field_placeholder").val(field["placeholder"]);  });  </script>    <?php  }    /* We use jQuery to read the placeholder value and inject it to its field */    add_action("gform_enqueue_scripts","my_gform_enqueue_scripts", 10, 2);    function my_gform_enqueue_scripts($form, $is_ajax=false){  ?>  <script>    jQuery(function(){  <?php    /* Go through each one of the form fields */    foreach($form["fields"] as $i=>$field){    /* Check if the field has an assigned placeholder */    if(isset($field["placeholder"]) && !empty($field["placeholder"])){    /* If a placeholder text exists, inject it as a new property to the field using jQuery */    ?>    jQuery("#input_<?php echo $form["id"]?>_<?php echo $field["id"]?>").attr("placeholder","<?php echo $field["placeholder"]?>");    <?php  }  }  ?>  });  </script>  <?php  }  ?>  

首先,我们要做的是在管理面板的Gravity Forms字段下添加占位符值。为此,您需要打开主题的functions.php文件并粘贴以下代码:

<?php  /* Add a custom field to the field editor (See editor screenshot) */  add_action("gform_field_standard_settings", "my_standard_settings", 10, 2);    function my_standard_settings($position, $form_id){    // Create settings on position 25 (right after Field Label)    if($position == 25){  ?>    <li  >  <label for="field_placeholder">Placeholder Text    <!-- Tooltip to help users understand what this field does -->  <a href="javascript:void(0);"  tooltip="&lt;h6&gt;Placeholder&lt;/h6&gt;Enter the placeholder/default text for this field.">(?)</a>    </label>    <input type="text"   size="35" onkeyup="SetFieldProperty("placeholder", this.value);">    </li>  <?php  }  }    /* Now we execute some javascript technicalitites for the field to load correctly */    add_action("gform_editor_js", "my_gform_editor_js");    function my_gform_editor_js(){  ?>  <script>  //binding to the load field settings event to initialize the checkbox  jQuery(document).bind("gform_load_field_settings", function(event, field, form){  jQuery("#field_placeholder").val(field["placeholder"]);  });  </script>    <?php  }  

这一小部分功能将在Gravity Forms后端添加占位符文本字段。示例截图如下:

Placeholder Field in Gravity Forms

现在我们已在管理面板中添加了该字段,您可以继续使用所需的文本填充它们。下一步是在实际表单上实际显示文本。为此,我们将使用jQuery。您需要做的是将以下代码粘贴到主题的functions.php文件中,紧跟在前面的代码之后:

  /* We use jQuery to read the placeholder value and inject it to its field */    add_action("gform_enqueue_scripts","my_gform_enqueue_scripts", 10, 2);    function my_gform_enqueue_scripts($form, $is_ajax=false){  ?>  <script>    jQuery(function(){  <?php    /* Go through each one of the form fields */    foreach($form["fields"] as $i=>$field){    /* Check if the field has an assigned placeholder */    if(isset($field["placeholder"]) && !empty($field["placeholder"])){    /* If a placeholder text exists, inject it as a new property to the field using jQuery */    ?>    jQuery("#input_<?php echo $form["id"]?>_<?php echo $field["id"]?>").attr("placeholder","<?php echo $field["placeholder"]?>");    <?php  }  }  ?>  });  </script>  <?php  }  

这将在输入字段和textarea字段上输出占位符文本并保持其验证。现在我们已经介绍了这一点,我们仍然需要在我们的下拉字段中添加占位符文本,这个小片段不适用于我们。值得庆幸的是Gravity Forms默认内置。

在Gravity Forms中添加占位符文本下拉字段

您真正需要做的就是创建一个空白值的标签。是的,当我们第一次听到它时,这听起来很混乱。但事实并非如此。因此,在Gravity Forms中添加一个下拉字段。单击“启用值”复选框。然后添加一个带空白值的Label。请参阅下面的屏幕截图:

Drop Down Placeholder Text in 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。但它没有。

– Carl Hancock(@carlhancock)2011年9月13日

@ syedbalkhi所以我们试图推迟所以我们没有回到javascript。不幸的是浏览器没有合作。

– Carl Hancock(@carlhancock)2011年9月13日

因此你可以看到这是他们所知道的,它将被添加到未来的版本。要查看Gravity表单可以做的所有令人敬畏的事情,只需查看我们关于Gravity Forms的帖子。

相信真棒函数和jQuery片段转到Jorge Pedret(@jorgepedret)。

本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如果侵犯你的利益,请发送邮箱到 [email protected],我们会很快的为您处理。
超哥软件库 » 如何在重力表单中添加占位符文本