Form no longer displaying properly after theme upgrade

Gravity Support Forums » Plugin Support » Gravity Forms

jkjacobson
Member

I recently updated my WP theme (infocus by mysitemyway.com) and since the update there seems to be a conflict between the theme and the Gravity Forms CSS somewhere. My forms render find in preview mode but now on the actual pages they are rendering with bullet points as some sort of ordered list..

Also as of now the "gf_left_half / gf_right_half" CSS is no longer affecting layout as it should...

An example can be seen here:
http://campeau-responsive.j2webworks.com/contact-us/

Given how the form functions are there any ideas as to where I should start in looking for the problem/conflict? I use the Pay-Pal add-on as well so I need to get my forms back to the format they were!

Any help would be most appreciated! Thanks!

Posted 12 years ago on Monday November 12, 2012 | Permalink
Carl Hancock
Administrator

The necessary scripts and styles aren't being output on the page. This is why the form is not styled properly and why the custom classes are not working.

Gravity Forms uses the WordPress enqueue function to load scripts and styles. In order for this to work properly the theme has to be developed properly. It sounds like this one is not.

The theme needs 2 key function calls to be present in the header.php file and the footer.php file. Those functions are the wp_head() function in the header.php and the wp_footer() function in the footer.php file.

You need to make sure these function calls are present in your theme files.

The wp_head() function is documented here:

http://codex.wordpress.org/Function_Reference/wp_head

The wp_footer() function is documented here:

http://codex.wordpress.org/Function_Reference/wp_footer

These are core WordPress functions that must be present in a theme for enqueue functionality to work properly.

Posted 12 years ago on Monday November 12, 2012 | Permalink
jkjacobson
Member

I have double checked myself and sent a copy of your comment to the theme developer and both of these functions are present in the theme framework where they should be... It has to be something else causing †his... Also as I said the version previous seemed to work fine...

http://www.campeaulearning.com/contact-us (Before Theme Update).
http://campeau-responsive.j2webworks.com/contact-us/ (After Theme update on Dev server)

Posted 12 years ago on Monday November 12, 2012 | Permalink
Chris Hajer
Key Master

Is "Output CSS" still set to "Yes" on the theme settings page?

Do you have problems with all Gravity Forms on the site or just this one?

Are you embedding the form using the shortcode in the post editor, or did you embed it using the function call?

Additionally, something in your theme or a plugin is causing extra markup to be added to the gravityforms shortcode output. Take a look at the source of the page near the gform_footer. You will see extra < br /> and < p> tags being added. That will create a problem with JavaScript and jQuery (AJAX submission, datepicker, character limit on text area, if you use that.)

You can read about the problems that can occur when there is extra markup in the form output by following the raw tag. http://www.gravityhelp.com/forums/tags/raw

Posted 12 years ago on Tuesday November 13, 2012 | Permalink
jkjacobson
Member

Thank you for this new info. I will look into it further tomorrow.

Gravity Forms does not work on any page even if I generate a new form on a new page I end up with the same problem.

Also...

I have been embedding the form using the form button in the page editor above the WP kitchen sink (this then generates shortcode and inserts it into the page. Interestingly enough I placed a clean download of the theme as well as the Gravity form plugin (but nothing else) and Gravity Forms seems to be working properly...

http://campeau-novdev.j2webworks.com/?page_id=4

Obviously whatever is causing the conflict is not theme related but a modification done to the theme. Interestingly enough I also tried a dev environment using a Backupbuddy migration of the broken site, deleted the theme and tried with a fresh theme - this however still renders a form that does not display correctly... With all CSS stripped out and replaced it seems like whatever is causing it is on the SQL side that was carried over with BackupBuddy... how that is possible though doesn't make sense to me as the plugin appears broken in any theme on that server and works fine with a clean install......

Posted 12 years ago on Tuesday November 13, 2012 | Permalink
Chris Hajer
Key Master

In this URL you posted, you can see in the source the Gravity Forms stylesheet is being properly loaded and the form displays fine:

http://campeau-novdev.j2webworks.com/wp-content/plugins/gravityforms/css/forms.css?ver=1.6.9

If you're embedding the form with the button above the kitchen sink editor, you don't have to enqueue your own stylesheet, so that is not the issue.

Since the css was output in the link you pasted, it sound like the "Output CSS" is checked "Yes" in the Gravity Forms settings.

Sounds like there is something going on with this version of the theme.

Did you try following the advice to wrap the gravityforms shortcode in the [raw] shortcode. That is an ugly workaround to this unfortunate function they add to all their themes, but it does tend to make things work. The proper way to fix it is to remove the function from the theme, so you don't HAVE to use the raw shortcode.

Posted 12 years ago on Tuesday November 13, 2012 | Permalink
jkjacobson
Member

Just to clarify in the first part of your comment you are confirming that things are working in the new "CLEAN" dev environment.

When you say "Sounds like there is something going on with this version of the theme." which version are you referring too? The temp dev-test version or the broken full version from previous?

Also using using: [raw][gravityform id="6" name="ContactForm2" ajax="true"][/raw] does not seem to do anything as it still renders like this:

http://campeau-responsive.j2webworks.com/formlist-test/

Posted 12 years ago on Tuesday November 13, 2012 | Permalink
Chris Hajer
Key Master

Leave the raw shortcode in there and use it whenever you embed a Gravity Form with the shortcode. If you compare the source of the earlier page with this later page, you will see that the extra markup is no longer there. So, that fixed one problem, but not the problem with the missing CSS. It certainly did something which you needed to fix anyway.

To clarify this:

In this URL you posted, you can see in the source the Gravity Forms stylesheet is being properly loaded and the form displays fine:

I was saying that this page:
http://campeau-novdev.j2webworks.com/?page_id=4

Looks as I would expect, because the Gravity Forms stylesheet is being loaded as expected. You have to figure out why it's not being loaded in the theme where your form appears ugly.

Take a look at the theme functions.php as well to see if they have disabled the CSS for some reason, maybe they added their own styles for Gravity Forms to their theme and they disable the Gravity Forms styles via filter.

Posted 12 years ago on Tuesday November 13, 2012 | Permalink
jgiroux
Member

I'm having a similar issue with my form as well. I've talked to the theme developer and instead of exploring the issue they're saying it's a plugin issue. So, here I am. Here's a link to the page. I haven't customized the design outside of the theme options panel so I'm at a loss.

http://transformehosting.com/web-hosting-order-form/

Posted 12 years ago on Friday November 23, 2012 | Permalink
Chris Hajer
Key Master

@jgiroux, it looks like you're using the minify function of W3 Total Cache. That can cause problems. Can you try disabling W3TC for a moment and try loading the form again? If that works, you can work on excluding the required scripts from minification so your form will display.

Posted 12 years ago on Monday November 26, 2012 | Permalink
jgiroux
Member

Hey,

Thanks for your reply. Turning it off had no effect, even after I cleared my cache.

Thanks for helping me with this,

James.

Posted 12 years ago on Monday November 26, 2012 | Permalink
David Peralty

jgiroux - Looks like your form is working now. Let me know if you are still having issues.

Posted 12 years ago on Monday November 26, 2012 | Permalink