Gravity Forms adding display none

Question

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.

Thanks

Answer 1

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;
}

Answer 2

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: http://www.gravityhelp.com/question/why-is-there-a-style-attribute-of-displaynone-being-added-my-form-isnt-showing-up/

Answer 3

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:

<?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');
?>

Answer 4

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.

Answer 5

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: https://www.gravityhelp.com/documentation/article/embedding-a-form/#enqueue-scripts-and-styles

Answer 6

I dont think this will help but maybe try this:

.gform_wrapper{
   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.

Answer 7

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.

Answer 8

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.

Answer 9

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

Answer 10

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

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

Answer 11

As a temporary fix, I added this to <theme_dir>/footer.php, just before </body></html>:

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

This will tell jQuery to show all divs with the .gform_wrapper class.

I already tried moving wp_footer(); around and all other suggestions from here. and from other sites. Nothing worked. I also tried disabling cache, purging cache, removing plugins, etc. No JS errors. No forms being shown.

One thing I noticed is the problem only shows up when two conditions are met:

1. User is not logged-in.
2. The form uses conditional logic.

If any of the two are not there, the form loads fine.

I'll add more info here once I find out why this is happening.

Edit:

The main issue is that DOMContentLoaded is not being fired. It will happen if not all http requests finish (like pending css, js, images, etc.). The following code (borrowed from https://stackoverflow.com/a/49724894/1582649) forces the event and shows the form.

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

I still don't know why this is happening, since there are no pending requests showing in console. Everything seems to be loading properly. I tried to copy the entire site to another server and it works there. This leads me to think it's something related with the host provider. Maybe some kind of cache.

For now, I'll leave that piece of code at the end of <theme>/footer.php.

Answer 12

In my case the solution was very simple: I just deactivated the Enable jQuery Migrate Helper plugin. That's it.

Answer 13

In my case deactivating the Plugin "Gravity Forms - Save & Continue Auto Load" solved the issue.

Answer 14

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

Answer 15

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]
</div>

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 "

</div>

" in the page code.

Answer 16

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.