PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Top Gravity Form Messing up Bottom Gravity Form

  1. keethgee
    Member

    When I have two separate Gravity Forms on a page (one in the main content, another in the footer), the main content form seems to screw up the footer form. (You can't see the social media icons, for example.)

    You can see this at:
    http://184.172.186.25/~jonevan/stopain/share-your-story/
    and
    http://184.172.186.25/~jonevan/stopain/contact-us/

    Look at the bottom right footer area (newsletter sign-up) on these two pages...then on any other page on the site. Compare them, and you will see that the form pages are messing up the bottom footer form.

    It also seems that the culprit is the top form on these pages because when I remove the shortcode from the main content, the bottom footer form returns to normal.

    Both main forms use conditional logic, but I deleted that function and the bottom form was still broken.

    Can someone help me understand what is going on, and how can I fix it so that I can use both Gravity Forms on one page?

    Thank you in advance.

    Posted 7 years ago on Monday September 5, 2011 | Permalink
  2. This really doesn't have anything to do with your forms. Your footer form is in a div "footernewsletter" and the theme sets a height of 282px with an overflow value of "hidden". Your form is vertically taller than 282px so all of the content gets cropped off by the overflow of the parent div.

    If you disable that property in your theme stylesheet (style.css line 1557) you'll see that your form is there in it's entirety.

    screenshot: http://bit.ly/mVUxQR

    Posted 7 years ago on Monday September 5, 2011 | Permalink
  3. keethgee
    Member

    Hi Kevin,

    If you look at any other page on the site other than the two links I provided, you will see that the "footernewsletter" div area is contained fine and everything in the newsletter sign-up fits within the footer's assigned height. You see the social media icons and everything is hunky-dory.

    It is only on those two pages that, when I add a second Gravity Form in the main content, that it somehow acts on the footer form. "Your form is vertically taller than 282px" is correct...but only on those two additional-form-in-the-main-area pages. The new form is making the footer form taller/expanded.

    That is what I don't understand (why/how the added form is messing with the footer form) and what I can't seem to fix.

    Thank you so much for your quick response and help with this...

    Keith

    Posted 7 years ago on Monday September 5, 2011 | Permalink
  4. Okay, I was comparing those 2 forms and didn't see a difference. I do see the difference on a page without a form in the body.

    The problem is that on the page without a form in the body/content area, the default forms.css file doesn't get loaded. When you add the shortcode to the post body to add a form there, the default CSS gets loaded and both forms inherit from that.

    How are you adding the form in the footer? Just adding it via the function call?

    If so, you need to manually enqueue the scripts so the forms.css file gets loaded all the time.. not just on the pages with the form in the body. See section 2.2 here

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

    Once that's done, you'll need to target that form by it's ID and tighten up the spacing, etc so it matches the other style. Once that done, everything should be consistent.

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

    Posted 7 years ago on Monday September 5, 2011 | Permalink
  5. keethgee
    Member

    Hi Kevin – sorry I didn't reply sooner; I didn't see that you'd responded.

    Before I get going on what you said, I did not add the footer form as a "function call," based on my reading of your first link. It is just a shortcode added to a text widget...which I think is different than a function call, correct?

    So I'm just double-checking: If a shortcode isn't a function call...and I added the form as a shortcode...do I still do the enqueue step in section 2.2?

    Or do I need to delete the shortcode in the footer and use a function call instead...placing the php code within the widget using a PHP-plugin for the widget...and then do the enqueue?

    Sorry for the back-and-forth, I'm just a little confused by the terminology. I've been using Gravity Forms for a year or two, and have never run into this before...

    Keith

    Posted 7 years ago on Tuesday September 6, 2011 | Permalink
  6. Okay, sorry, I totally overlooked that in the first post. Here's my suggestion.

    Gravity Forms has it's own widget - you don't have to put the shortcode in the text widget to get it there. Look for the widget that's simply titled "form" and that's the one. If you use that, you won't have to worry about adding/enqueueing scripts, etc. It will take care of all that stuff for you.

    Posted 7 years ago on Tuesday September 6, 2011 | Permalink
  7. keethgee
    Member

    Hi Kevin,

    I re-did the footer as a Gravity Forms widget, and while it still gets slightly affected (moves up a few pixels) when a second form is in the main section of a page, it's certainly acceptable and perhaps there's some small bit of CSS I'm missing that's the problem. So thank you for that.

    Now I've just got an IE problem (surprise, surprise...)

    I have switched servers on this project, so for reference now please see the footer form at: http://216.172.186.33/~stopain/

    The Gravity Forms looks perfect in IE9...messed up unacceptably in IE8...and is just a disaster in IE7. Screenshots: http://imgur.com/ll9Va.jpg

    Can you please take a look at this and help me understand why the form acts so differently? And do people still care about IE7, in your experience?

    Thanks again,
    Keith

    Posted 7 years ago on Monday September 19, 2011 | Permalink
  8. keethgee
    Member

    Hi Kevin,

    The site has now gone to soft-launch, so the URL for your reference is now:
    http://www.stopain.com/

    Thank you,

    Keith

    Posted 7 years ago on Tuesday September 20, 2011 | Permalink
  9. keethgee
    Member

    Never mind. With no reply forthcoming, I went to a Constant Contact plugin solution, and that is working fine.

    Posted 7 years ago on Wednesday September 21, 2011 | Permalink
  10. @Keethgee. Sorry I didn't get a chance to get back to your request sooner but I'm glad you got something figured out.

    Posted 7 years ago on Thursday September 22, 2011 | Permalink

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