Two Gravity Forms On One Page - Styling Issues?

Gravity Support Forums » Plugin Support » Gravity Forms

Chris Higgins
Member

I'm in the process of building my business website at electricmonk.com.au, and I'm having some styling issues with my contact forms. I've got a 'Quick Contact' form in the footer section of the site, which appears on every page. In addition to that, there is the main contact form on the 'Contact' page. For some reason, the styling that is applied to the form in the footer disappears when you visit the Contact page. By temporarily removing the main form on the Contact page, I've figured out that it's something to do with having two forms on one page, but that's as far as I've got.

Admittedly, it is a little bit embarrassing to be asking for this kind of assistance on my own web development business website, but I'm really stuck! :-( If anyone has any ideas what the issue could be, I'd really appreciate the help.

Cheers,

Chris

Posted 13 years ago on Saturday October 1, 2011 | Permalink
Kevin Flahaut
Administrator

Here's the deal. You have the form embedded in the footer using the php function call method but haven't properly enqueued the scripts/styles ( the other step when using this method ) for that form.

When you visit a content page with a form that has been added via the shortcode, the scripts/styles are automatically enqueued for the content inside the WordPress loop so the CSS gets loaded and both of your Gravity Forms inherit from it.

The solution would be to manually enqueue the scripts for your footer form, or better yet, replace the footer form with the built-in Gravity Forms Form Widget and it will automatically enqueue everything for you.

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

Posted 13 years ago on Saturday October 1, 2011 | Permalink
Chris Higgins
Member

Thanks for your reply Kevin, and apologies for taking so long to respond.

My apologies for being a touch dense, but I couldn't really make much sense of your instructions. :-( I haven't a clue how to manually enqueue the form.

The code I'm currently using is

<?php echo do_shortcode('[gravityform id=4 name=QuickContact title=false description=false]'); ?>

Sounds like that's incorrect though?

Posted 13 years ago on Wednesday October 12, 2011 | Permalink
Kevin Flahaut
Administrator
Yeah, all that was in the documentation page I linked to. (See section on "Function Call") You don't need the "do_shortcode" method because there is a native function.. should be something like this example instead.
```
<?php gravity_form(4, false, false, false, '', false); ?>
```
When you use the shortcode in the post editor, WordPress knows to automatically enqueue the javascripts and CSS for the forms on that page. When you embed directly into the page template (php file) WordPress doesn't detect this so you have to manually enqueue your scripts.

You would put a snippet like this in your header.php file to enqueue the scripts manually.
```
<?php
gravity_form_enqueue_scripts(4, true);
?>
```
That is covered more here (see the section titled "Enqueue Scripts and Styles")

http://www.gravityhelp.com/documentation/page/Embedding_A_Form
http://www.gravityhelp.com/documentation/page/Gravity_form_enqueue_scripts
Posted 13 years ago on Wednesday October 12, 2011 | Permalink
Chris Higgins
Member

No love. Including

<?php gravity_form_enqueue_scripts(4, true); ?>

breaks the site and returns this error:

Fatal error: Call to undefined function gravity_form_enqueue_scripts()

It's got me stumped.

Posted 13 years ago on Monday November 7, 2011 | Permalink
Rob Harrell
Member
Chris, you placed this in your footer file?

<?php gravity_form(4, false, false, false, '', false); ?>

and this in your header file?
```
<?php
gravity_form_enqueue_scripts(4, true);
?>
```
Are you using the latest and greatest WP version and GF 1.6?
Posted 13 years ago on Monday November 7, 2011 | Permalink