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.

Laying out form in one horizontal strip, IE7 problems

  1. keethgee

    I have tried to follow what's been posted here previously on this subject, but after having spent many hours trying to piece this together, I'm asking for specific help on my page.

    Please go to and you will see a "sign up for news and savings" bar along the bottom.

    Ultimately, this row will only be 44px tall, but I've left it taller so you can see all the form elements I'm trying to stretch along the dark part of the bar.

    It should appear as: "First InputBox Last InputBox Email InputBox SubscribeButton" all in one straight horizontal line.

    I had it working in all browsers except IE7 (IE8 wasn't perfect, but very close). Then I stripped all the code out to try again, and I just can't get "First" to float to the left of its input box, and "Last" to move before its input box in IE7. I haven't completely resolved the email and subscribe button, either.

    I've read about IE7 float problems, but can't seem to understand how to solve my own particular problem with Gravity Forms/CSS.

    Below is my current code...Can someone please help me make this read "First InputBox Last InputBox Email InputBox SubscribeButton" all in one straight horizontal line in IE7? Thank you very, very much, in advance!

    Posted 13 years ago on Monday May 31, 2010 | Permalink
  2. Okay, I got this for you but you need to do a few things first.

    To start with, you need to load the default Gravity Forms styles. Since you're embedding the form outside of the loop, you need to do this manually by adding a small block of script to your theme's functions.php file. You can find that information on the documentation page below.

    Once that's done, you'll need to go to your form, and change the main form settings to "left label". After that, go to the email field and set the size to "large"

    Save the form and you're done there.

    Now, go back to your custom CSS and remove what you had. You can paste it somewhere else if you want to save it to refer back to.

    This is what I added to get everything to work. It works in all the browsers I tested on both Mac and PC. Add this where you removed the previous styles. It should get you pretty close and you can tweak from there.

    And here's a screenshot of my form test in IE7

    Hope that points you in the right direction. Good luck.

    Posted 13 years ago on Monday May 31, 2010 | Permalink
  3. keethgee

    Thank you so much, Kevin. Your screenshot shows exactly what I need to do.

    I'm doing something wrong with the "embedding a form" process, though.

    I put this code into my text widget area, replacing the shortcode I'd had in there before: <?php gravity_form(1, false, false); ?>

    I'm using "1" instead of "2" (which is in the example given) because my Gravity Forms id for this newsletter signup is "1." Am I correct so far? I first tried putting this in the functions.php and leaving the shortcode in the widget box...but that didn't work. So then I thought maybe you replace the shortcode with this code in the text widget, and that doesn't work either.

    Then the directions say to paste a block of code in my functions.php page. Do I need to alter this code in any way, or do I simply paste it into the page? In other words, where it says ", WP_PLUGIN_URL . "/gravityforms" etc. in the PHP code, do I need to actually enter my URL, or do I simply cut-and-paste as is? I left as is, having tried entering the URL, too.

    Doing these two things, and then overwriting my css with yours, I get a blank bar with no form. (I was able to set up the email forms as you described, though, assuming that by "left label" you meant "left aligned" under "label placement.")

    I'm sorry to be so dense, but if you can specifically tell me what to put in my text widget and functions.php file, I should be all set...and smarter, too.

    Again, thank you so much for your help.

    Posted 13 years ago on Tuesday June 1, 2010 | Permalink
  4. Yes, the function call you posted looks like it's formatted correctly. How was your form embedded before? It was working fine from what I saw, just needed the styles/scripts enqueued.

    As far as the script block for the functions page, you can include that without having to modify anything, it works just as it is.

    And yes, "left aligned" is the proper term for the label placement.. the class name it outputs is "left_label" so I had that on the brain.

    If you're still having problems, I'll need to get into your site to look further. If you can send me an admin login to your site, I'll be happy to take a look at it.

    Please just send the info along with your site URL and this topic URL via our contact form.

    Posted 13 years ago on Tuesday June 1, 2010 | Permalink
  5. keethgee

    You, sir, are exceptional!

    I thought I'd tried my current configuration with the shortcode (not the one-line php snippet)...but I must have had the shortcode in place when I tried putting my actual URL in the WP_PLUGIN_URL php code.

    In other words, I just didn't have the correct combination in place when I rewrote you.

    With the original shortcode in place, the PHP block pasted in as is to the functions.php file, the email changes you stated, and your CSS in place...I am golden!

    I will now pore over your CSS to see what you did, and I can forevermore lay out a horizontal Gravity Form that works in IE7.

    I am truly very grateful to you, Kevin. I literally could not have gotten this straightened out (if you'll allow me the play on words) without you...

    Posted 13 years ago on Tuesday June 1, 2010 | Permalink
  6. Fabulous. Thanks for the update. I'm pleased I could help out.

    Posted 13 years ago on Tuesday June 1, 2010 | Permalink

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