css - 重力形式添加显示无

Question

我在我的 WordPress 主题中创建了一个自定义模板，因为我的模板与我的活动主题的布局完全不同，所以该模板有它自己的页眉和页脚，并且我已经分别正确声明了这两个wp_head();模板wp_footer();。

在我的模板代码中，我尝试使用 do_shortcode 显示重力形式，但没有显示任何形式。当我检查该区域时，我可以看到表单代码，但在div 中style="display:none"添加了一个。.gform_wrapper

另外需要注意的是，重力形式在我网站的其余部分（所有页面/帖子都使用活动主题）中运行良好，我只在我的自定义模板上遇到了问题。

任何建议都非常感谢。

谢谢

score 26 · Accepted Answer

虽然这是一个老问题，但当我搜索这个问题时它仍然首先出现，所以我添加了我的解决方案以防其他人也在搜索。如果您的主题通过在 functions.php 中包含以下一行或多行代码将脚本移动到页脚（出于性能原因经常推荐）：

remove_action('wp_head', 'wp_print_scripts'); 
remove_action('wp_head', 'wp_print_head_scripts', 9);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);

您还需要将 Gravity Forms 脚本移动到页脚，以便在 jQuery 之后调用它们。您可以通过将以下代码添加到主题的 functions.php 文件中来做到这一点：

add_filter('gform_init_scripts_footer', 'init_scripts');
function init_scripts() {
    return true;
}

score 5 · Accepted Answer

这是因为您在表单上使用了条件逻辑。任何时候出现条件逻辑，整个表单都会设置为显示：无；然后 javascript 用于仅显示应显示的字段。

然而，这需要 Gravity Forms 能够使用 WordPress 内置的 enqueue 函数输出必要的 Javascript ......它在您的页脚中输出 Javascript。

您的主题可能在您的主题的 footer.php 文件中没有此函数调用：

<? php wp_footer(); ?>

这个函数调用，所有主题都应该有（但很多人忘记包含），使插件能够动态地在主题的页脚中输出代码。如果它不存在，则主题无法输出必要的代码。

这很可能是您的表单无法正确显示的原因。

答案来自：http ://www.gravityhelp.com/question/why-is-there-a-style-attribute-of-displaynone-being-added-my-form-isnt-showing-up/

score 2 · Accepted Answer

我终于让这个工作了。

要使条件逻辑工作，必须注销 WordPress 附带的 jQuery，必须在 header 中加载 1.8.3，并且必须在 header 中加载gravityforms.min.js、conditional_logic.min.js 和 jquery.maskedinput.min.js页脚：

<?php
 function modify_jquery_version() {
 if (!is_admin()) {
     wp_deregister_script('jquery');
     wp_register_script('jquery',
     'https://code.jquery.com/jquery-1.8.3.min.js', false, '1.8.3');
     wp_register_script('migrate',
     'https://code.jquery.com/jquery-migrate-1.4.1.min.js', false, '1.4.1');

     wp_enqueue_script('jquery');
     wp_enqueue_script('migrate');
     }
 }
 add_action('wp_enqueue_scripts', 'modify_jquery_version');

 function footer_load() {
 if (!is_admin()) {
wp_enqueue_script('gravity','/wp-content/plugins/gravityforms/js/gravityforms.min.js','','',true);
wp_enqueue_script('conditional','/wp-content/plugins/gravityforms/js/conditional_logic.min.js','','',true);
wp_enqueue_script('masked','/wpcontent/plugins/gravityforms/js/jquery.maskedinput.min.js','','',true);
    }
}

 add_action('wp_enqueue_scripts', 'footer_load');
?>

score 1 · Accepted Answer

我的 WP 主题正在调用旧版本的 jQuery（由 Google 托管），这导致 display:none 属性应用于我的重力表单。我将入队脚本更新为最新版本的 jQuery 并解决了问题。

score 1 · Accepted Answer

我也有这个问题，实际的解决方案是添加 gravity_form_enqueue_scripts($form_id) 到你的 header.php 文件中。

从重力形式支持文档本身：https ://www.gravityhelp.com/documentation/article/embedding-a-form/#enqueue-scripts-and-styles

score 0 · Accepted Answer

我不认为这会有所帮助，但也许试试这个：

.gform_wrapper{
   display:block !important;
}

我知道内联样式会覆盖任何样式表，但!important帮助我覆盖了一些插件样式。

也尝试style="display:none"在插件文件中搜索。使用 Textwrangler 或其他可以搜索多个文件的编辑器。这也对我编辑主题和插件有很大帮助。

score 0 · Accepted Answer

作为临时修复，我将其添加到<theme_dir>/footer.php之前</body></html>：

<script>
jQuery('.gform_wrapper').show();
</script>

这将告诉 jQuery 显示.gform_wrapper该类的所有 div。

我已经尝试过wp_footer();四处走动并从这里提出所有其他建议。和其他网站。没有任何效果。我还尝试禁用缓存、清除缓存、删除插件等。没有 JS 错误。没有显示任何表格。

我注意到的一件事是只有在满足两个条件时才会出现问题：

用户未登录。
该表单使用条件逻辑。

如果两者中的任何一个都不存在，则表单加载正常。

一旦我找出发生这种情况的原因，我将在此处添加更多信息。

编辑：

主要问题是DOMContentLoaded没有被解雇。如果不是所有的 http 请求都完成（如待处理的 css、js、图像等），就会发生这种情况。以下代码（从https://stackoverflow.com/a/49724894/1582649借用）强制事件并显示表单。

window.document.dispatchEvent(new Event("DOMContentLoaded", {
  bubbles: true,
  cancelable: true
}));

我仍然不知道为什么会这样，因为控制台中没有显示待处理的请求。一切似乎都在正确加载。我试图将整个站点复制到另一台服务器，它在那里工作。这使我认为这与主机提供商有关。也许某种缓存。

现在，我将把那段代码放在<theme>/footer.php.

score 0 · Accepted Answer

我能够解决我的问题，只需停用一个名为 Autoptimize 的插件，该插件可以优化连接 CSS 和 JavaScript 代码的网站，并对其进行压缩。

一旦你发现它就很明显了。

score 0 · Accepted Answer

此问题可能是由页面上的任何其他脚本引发错误引起的。检查控制台以确保没有损坏的脚本

score 0 · Accepted Answer

我刚才遇到了这个问题。

两个问题：这个旧主题使用 jQuery 1.5.1，它捆绑的所有插件都是为旧 jQuery 编写的。Gravity Forms 中的条件逻辑由于旧 jQuery 版本而无法正常工作，并且因为我重命名了条件逻辑字段。

在删除/修复了一些不正确的条件逻辑下拉菜单，并在网站上升级了 jQuery 版本之后，事情又开始工作了。

score 0 · Accepted Answer

对我来说，原因是 FireFox 中的控制台错误与以下相关：

jQuery(document).bind('gform_post_render', function(ev){
     console.log(event, ev);
});

score 0 · Accepted Answer

就我而言，解决方案非常简单：我只是停用了Enable jQuery Migrate Helper插件。而已。

score -1 · Accepted Answer

您是否尝试过从style="display:none"div 中.gform_wrapper删除？或将其更改为 style="display:block"

score -1 · Accepted Answer

就我而言，我认为原因是：我将 Gravity 短代码放入了一个（也许它检测到并将“显示：无”插入到它的 iframe 中？）

<div id="layer_2" style="display: none">
[gravityform id=123 title=false ajax=true]
</div>

框架代码：

<iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_16' id='gform_ajax_frame_16'></iframe>

由于我从 div 中删除了“显示：无”，因此 Gfrom 工作正常。然后在页面中添加了一个脚本：

jQuery(document).ready(function() { jQuery("#_layer_2").attr("style", "display: none"); });

但！即使没有上面的 JS 代码，Gform 也可以在“iframe style=display: none”下正常工作。真正的原因是：缺少一个“

</div>

"在页面代码中。

score -2 · Accepted Answer

是否为 .gform_wrapper 类本身设置了“display:none”？然后只需在 Gravity Forms 的 css 文件中更改它。

但是，包装器可能有一个 ID 或另一个可以设置 display:none 的类。

最后但并非最不重要的一点是，包装器的 jQuery 动画可能会损坏，这可能是它保持隐藏的原因。

css - 重力形式添加显示无

15 回答 15

编辑：

Related

Reference