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

Statute

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

Maragaret

The add_filter part is all I needed - thanks for that @Maragaret :) – Dona

The add_filter bit fixed this for me also – Nynorsk

A note for anyone who gets here and doesn't want to read all the many solutions here. For me, the issue was trying to call the form via the gravity_form() function call, and placing that below wp_footer(). – Argon

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/

Strobilaceous

Thanks for attempting to help, the wp_footer is in the theme footer and there are no conditional logic fields. – Statute

This gave me the clue I needed to look into other Javascript errors on the page. Getting rid of the errors made the forms show up again. – Driving

Same problem here. Has nothing to do with wp_footer() for me. I'm also forced to a CSS hack. – Kora

Great Tip! @SarahLewis nailed it. – Adel

For those who can't reach to provided link anymore (because they moved), here's a link to webarchive – Endoergic

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

Bridgers

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.

Elephant

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

Twospot

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.

Deirdre

yeah! its working is it a right solution? or any other way to solve a problem. – Robillard

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.

Windle

Would have been better to troubleshoot as per AO's FAQ really, deactivating is such an ... extreme measure ;-) – Atalanti

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.

Mersey

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

Jughead

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

Visage

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://mcmap.net/q/497118/-manually-dispatchevent-domcontentloaded) 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.

Solly

Answer 12

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

Gerhan

Answer 13

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

Desiderative

Answer 14

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

Dramatic

There is no place for me to remove it. Also, it is only being added to the custom template page. The same form, same shortcode on other pages / posts work fine "no display:none style" – Statute

You may need to look in the plugin files and search for gform_wrapper or all display. It's there some where just a matter of finding it. – Dramatic

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.

Equipoise

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.

Murmurous

If you change the gravity forms css your changes will be overwritten as soon as the plugin is updated. You should add the changes to your theme's css using more specific css selectors. – Competency

<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_4" style="display:none"> - this is autommatically being added to the form when using the shortcode. There is no place for me to remove it. Also, it is only being added to the custom template page. The same form, same shortcode on other pages / posts work fine "no display:none style" – Statute