Gravity Forms adding display none

I'm creating a custom template inside my WordPress theme, since my template is a completely different layout than my active theme, the template has it's own header & footer and inside of both I have properly declared wp_head(); and wp_footer(); respectively.

Inside my template code, I am trying to display a gravity form using do_shortcode, but no form shows. When I inspect the area, I can see the form code, but there is a style="display:none" added to the .gform_wrapper div.

As one more note, gravity forms is working perfectly throughout the rest of my site (all pages/posts using the active theme), I only have the problem on my custom template.

Any suggestions are much appreciated.



Although this is an old question it still came up first when I searched for this problem, so I'm adding my solution in case others are searching too. If your theme moves scripts to the footer (frequently recommended for performance reasons) by including one or more of the following lines of code in 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);

you'll need to move the Gravity Forms scripts to the footer as well, so they get called after jQuery. You can do this by adding the following code to your theme's functions.php file:

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

This is because you have conditional logic being used on your form. Anytime conditional logic is present the entire form is set to display: none; and then javascript is used to only show the fields that should be shown.

HOWEVER this requires Gravity Forms being able to output the necessary Javascript using the WordPress built in enqueue function... which outputs the Javascript in your footer.

Your theme probably does not have this function call in your theme's footer.php file:

<? php wp_footer(); ?>

This function call, which all themes should have (but many people forget to include), enables plugins to output code in the footer of a theme dynamically. If it isn't present, the theme can't output the necessary code.

This is most likely why your form is not displaying properly.

Answer from:

I finally got this to work.

For conditional logic to work, the jQuery that comes with WordPress must be deregistered, 1.8.3 must be loaded in the header and gravityforms.min.js, conditional_logic.min.js and jquery.maskedinput.min.js must be loaded in the footer:

 function modify_jquery_version() {
 if (!is_admin()) {
     '', false, '1.8.3');
     '', false, '1.4.1');

 add_action('wp_enqueue_scripts', 'modify_jquery_version');

 function footer_load() {
 if (!is_admin()) {

 add_action('wp_enqueue_scripts', 'footer_load');

My WP theme was calling an older version of jQuery (hosted by Google) and that was causing the display:none property to be applied to my Gravity Forms. I updated the enqueue script to the latest version of jQuery and that solved the problem.

I had this problem too, the actual solution is to add gravity_form_enqueue_scripts($form_id) to your header.php file.

From the Gravity forms support doc itself:

I was able to fix my issue just deactivating a plugins called Autoptimize that optimizes websites concatenating the CSS and JavaScript code, and compressing it.

Pretty obvious once you found it.

I ran into this issue just now.

Two problems: This old theme was using jQuery 1.5.1 and all the plugins it had bundled were written for older jQuery. The conditional logic in Gravity Forms was not working because of old jQuery version AND because I had renamed a conditional logic field.

After removing/fixing up some of the incorrect condition logic drop downs, and upgrading jQuery version on the site, things started to work again.

This issue may be caused by any other script on the page throwing an error. Check the console to make sure there are no broken scripts

For me, the cause was a console error in FireFox related to:

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

In my case I thought the reason was: I put the Gravity shortcode into a (and maybe it detected and inserted the "display: none" to it`s iframe?)

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

The frame code:

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

Since I removed "display: none" from the div, the Gfrom worked fine. Than added a script to the page:

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

But! The Gform works fine with "iframe style=display: none" even without the JS code above. The real reason was: a lack of one "


" in the page code.

Have you tried removing style="display:none" from the .gform_wrapper div? Or changing it to style="display:block"

I dont think this will help but maybe try this:

   display:block !important;

I know for a fact that inline styles override any stylesheets but !important helped me with overriding some plugins styles.

Try also searching for the style="display:none" in the plugin files. Use Textwrangler or another editor where you can search multiple files. This also helps me a lot for editing the themes and plugins.

Is "display:none" set for the .gform_wrapper class itself? Then just change it in the css file of Gravity Forms.

However, the wrapper might have an ID or another class for which the display:none could be set.

Last but not least, there could be a broken jQuery animation for the wrapper, which might be why it stays hidden.

Need Your Help

Is there a more efficient implementation for a bidirectional map?

c++ c++11 data-structures map bimap

I created a simple bidirectional map class that works by internally storing two std::map instances, with opposite key/value types, and providing an user-friendly interface: