Form has stopped displaying - being set to display:none;

Gravity Support Forums » Plugin Support » Gravity Forms

Intrigue
Member

Hello,

I created a form that used some conditional logic to display and hide fields. Everything was going good until I was almost done. The form stopped showing up on my page! I took a look at the source and the code is all there, it's just that the entire form is set to "display:none;". I did some research on these forums and found that it may have had something to do with incorrectly design conditional logic settings.

I proceeded to remove all conditional logic from my form to see what would happen. Unfortunately this did not work. The form still doesn't display as of me writing this post at 11:10 PM on Monday, December 12th. Here is the link to the page where the form is being hidden. http://gointrigue.com/register/regional-convention-signup/

Any help would be greatly appreciated.

Posted 12 years ago on Tuesday December 13, 2011 | Permalink
Chris Hajer
Key Master
This is due to the Gravity Forms JavaScript not being executed to reveal the form, and is usually due to a plugin or theme conflict. Here is the JavaScript error I see in the page right now:
```
Error: missing } after property list
Source File: http://gointrigue.com/register/regional-convention-signup/
Line: 194, Column: 620
```
There is an issue with the CDATA block and converting the ending / / ] ] > to / / ] ] & g t ;. This was reported before recently and turned out it was a core WordPress problem. Here is the link to that discussion.

http://www.gravityhelp.com/forums/topic/xhtml-validation-gf_apply_rules#post-43168

The symptom is not exactly the same but the same problem is occurring for you. It does not occur for everyone though.
Posted 12 years ago on Tuesday December 13, 2011 | Permalink
Intrigue
Member

Thanks for the speedy reply.

It looks like my best option for my client is probably this.

"2) .... If a form is displayed via a widget, this also won't happen. It's only when the_content() comes into play."

I suppose I'll need to add a "Form Widget" to all of my templates in order to get this to work properly. Which really, really sucks. I hope a better solution for this is discovered, but I'm not holding my breath.

Posted 12 years ago on Tuesday December 13, 2011 | Permalink
Chris Hajer
Key Master

It's certainly a weird problem and it does not come up all the time. I hope you're able to work around it.

Posted 12 years ago on Tuesday December 13, 2011 | Permalink
lenski
Member

I'm having the same problem and the form's length prohibits it from being used realistically in a sidebar widget. Bummer not to be able to use conditional logic.

Posted 12 years ago on Friday December 16, 2011 | Permalink
Chris Hajer
Key Master

@lenski can you post a link to your form and what the issue with it is? Conditional logic normally works just fine, but if there is a JavaScript, theme or plugin conflict, it won't work, and the conflict needs to be resolved. If you embed the form by other than using the shortcode, there are additional steps you need to take to enqueue the scripts, but this is not the norm either. Normally, you embed the form in a page or post, and everything just works. When it doesn't, it can be made to work, by resolving the conflict. It's not usually Gravity Forms. Gravity Forms relies on jQuery to unhide elements in a form that uses conditional logic, and JavaScript errors prevent that from working properly.

Posted 12 years ago on Tuesday December 20, 2011 | Permalink
Imaginista
Member

I appear to be having the same issue on this page:

http://www.imaginista.ca/clienttestcentre/contact-us-form/

Is there any chance you could point me into the right direction on where it is going wrong?

Posted 12 years ago on Thursday December 22, 2011 | Permalink
Chris Hajer
Key Master

@Imaginista, your issue is different. That page is very weird. Nothing at all is coming up on it. It's all in the source, but there is nothing displayed. When there is a JavaScript conflict, typically, just the form is not displayed.

It looks like the site is running WordPress 3.3, but I can't tell what version of Gravity Forms is installed. I see the conditional logic scripts being included twice, once from 1.6.2 and once from 1.3.13.1. Something very strange is going on. Can you explain more about your setup?

Looking at the source, I see also you have this CDATA problem discussed here:
http://www.gravityhelp.com/forums/topic/xhtml-validation-gf_apply_rules#post-43168

Are you using a custom page template? I can't see a reference to a WordPress theme, and jQuery is not included either.

Posted 12 years ago on Thursday December 22, 2011 | Permalink
Imaginista
Member

Chris, thank you for getting back to me so quickly. I used the Roots Theme http://www.rootstheme.com/ to code this website. The latest version of Gravity Form was purchased and installed today.

The reason the page is blank is because I am using a blank template for the form and then displaying it in a modal window as suggested in the http://www.gravityhelp.com/creating-a-modal-form-with-gravity-forms-and-fancybox/ tutorial.

The issue of two conditional scripts being included stems from the tutorial above as I failed to remove the line 19 from the blank page template suggested there. That is fixed now.

Not sure about CDATA problem (that is going a little bit over my head), is that related to the doctype? I have now replaced the XHTML 1.0 Transitional with simple doctype html.

After taking apart the form I pinpointed the problem to the conditional logic with the province/state fields.

The intent was that those fields are required. If the user chooses Canada - Province is displayed. If US is chosen State is displayed. If other Countries are chosen nothing is displayed.

Can you please take a look at the two identical forms I created to illustrate this issue, first one without conditional logic and the second one with logic applied on the province field. They are located at http://www.imaginista.ca/clienttestcentre/faq/ - the fist two links in the body, "contact us" and "contact me". As you can see the first one works and the second one does not.

What would you suggest in this case?

Cheers,
Dima

Posted 12 years ago on Thursday December 22, 2011 | Permalink
Imaginista
Member

Hey Chris, kickstarted by your input I ended up figuring it out, the issue was that I mostly copied the blank page template from http://www.gravityhelp.com/creating-a-modal-form-with-gravity-forms-and-fancybox/

When I ended up trimming down the header, body and footer of my template (http://www.rootstheme.com/ )into a blank page to hold the form the issue resolved itself.

Below is a working blank template that I ended up with, hopefully this can help someone, please suggest any improvements

http://www.pastie.org/3056760

Cheers,
Dima

Posted 12 years ago on Thursday December 22, 2011 | Permalink
mklar
Member

I was having a similar problem and discovered that there was an issue with W3 Total Cache. I disabled the Minify function in the General tab of the plugin and it seemed to fix the problem.

Posted 12 years ago on Friday December 30, 2011 | Permalink
Stormbox
Member

FYI, I noticed that using the shortcode on a page or post works fine, but if you use the do_shortcode method in your template...

< ?php echo do_shortcode('[gravityform id=1 name=Contact title=false description=true]'); ?>

...that's when the display:none issue occurs.

If you're using the do_shortcode method in your template so you can place the form in a <div> for styling purposes, consider that you can instead just put a class on the gravity form:

Form settings -> Advanced -> CSS Class Name

Posted 12 years ago on Wednesday January 4, 2012 | Permalink
Chris Hajer
Key Master

When you embed the form in a template file, you need to enqueue the Gravity Forms scripts and styles yourself. If you don't include the scripts, the form will be hidden with the CSS display:none. The JavaScript is what unhides it.

http://www.gravityhelp.com/documentation/page/Embedding_A_Form#Enqueue_Scripts_and_Styles

Posted 12 years ago on Wednesday January 4, 2012 | Permalink
SlickSites
Member

Im getting the same issue.
All my forms were working fine until I added conditional logic to one.
Now, none of the forms (with conditional logic) show. They are showing in the source code.
If I remove all conditional logic the forms will show.
Plus they show in the 'preview'
But the overall form is display:none.
Kind weird.

OK - So I added -

.gform_wrapper {
overflow: inherit;
margin: 10px 0;
max-width: 98%;
display: inline !important;

to form.css to enable the form to show. (This is a live site!!!)

BUT - it appears that None of the Javascript is working.
The jquery must conflict with something.
(Im using infocus theme)

Heellllp!

Posted 12 years ago on Wednesday February 8, 2012 | Permalink
Lsileon
Member

You shouldn't overwrite the inline CSS code. My solution was to move the javascript/jquery library link to the header file.

Posted 12 years ago on Monday February 13, 2012 | Permalink
Carl Hancock
Administrator
If conditional logic is not working it's going to be due to a javascript error. Javascript errors cause your browser to quit executing ALL javascript on the page, even when it's unrelated to Gravity Forms itself.

Because conditional logic uses javascript to show/hide the fields that should be visible, anytime there is a javascript error it will result in the form not being displayed at all.

If you are using FireFox I highly recommend you install the FireBug plugin for FireFox. Then when you encounter an issue like this, enable FireBug and browse to the site. If you select the error console in FireBug it will display any errors and you can see what is going on.

In order to be able to determine what is going on you would need to provide us with the URL to a page on your site that is having this problem. We'd have to be able to view it ourselves and inspect the markup. The method I described above using FireBug is also what we would do to check for any Javascript errors.

A Javascript error in this situation can be caused by...
- jQuery not being present.
- jQuery being enqueued AFTER the form script related to conditional logic executes, such as in the footer instead of the header.
- Theme related javascript error on the same page.
- Another plugin outputting a javascript error on the same page.
I am closing this forum post as the original posters issue was resolved.

If you are experiencing this issue and need assistance, please create a new support forum post of your own and explain the issue and also provide us with a link to your site where we can see the issue happening firsthand.
Posted 12 years ago on Monday February 13, 2012 | Permalink

This topic has been resolved and has been closed to new replies.