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.

Client loves form, doens't like layout (or lack thereof)

  1. braaad
    Member

    I used Gravity Forms to make a simple take-out order form for a restaurant: http://tinyurl.com/7876vmd. It works exactly the way I want it, and client likes it EXCEPT it's way too long (vertically). Too much scrolling down. So... what are my options? I can remove the sidebar from my theme, but is there any way to make the form into two columns?

    Or, are there other solutions?

    Posted 12 years ago on Wednesday June 27, 2012 | Permalink
  2. David Peralty

    Take a look at our CSS Ready Classes. They might be able to help you, if you give it more horizontal space to flow into:
    http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

    Posted 12 years ago on Wednesday June 27, 2012 | Permalink
  3. braaad
    Member

    Nice! That looks exactly what I'm after- thanks David.

    Posted 12 years ago on Wednesday June 27, 2012 | Permalink
  4. braaad
    Member

    Hi David,

    I'm finally just now using the CSS Ready Classes. I've applied gf_left_third, gf_middle_third and gf_right_third to three of the sections in the form. As you can see, I need a hand: http://tinyurl.com/7876vmd

    I triple checked the classes of each element and everything seems to be correct: all contact info are assigned gf_left_third, desayuno elements are assigned gf_middle_third, and all dips are assigned gf_right_third. Here's a screencap: http://screencast.com/t/9iyKghdNy

    So, I was expecting to see three nice columns next to each other but something's wonky. Any ideas what I'm doing wrong?

    Thanks,
    Brad

    Posted 12 years ago on Friday July 6, 2012 | Permalink
  5. Brad, this is because you have to alternate the order of your fields. Meaning, in the formbuilder - the first gf_left_third field will be first, then the second field would be the first gf_middle_third and then the third fields would be the gf_middle_third. Then you just rinse and repeat.

    If you are looking to do columns in a different way you can use strategically placed HTML blocks as well - see this thread here for an example:

    http://www.gravityhelp.com/forums/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29425

    Posted 12 years ago on Friday July 6, 2012 | Permalink
  6. braaad
    Member

    Thanks Rob- that makes sense.

    Posted 12 years ago on Friday July 6, 2012 | Permalink
  7. braaad
    Member

    Wow, the CSS Ready Classes method is more cumbersome than I imagined- at least for the form I'm trying to build. Please take a second and check out the screen capture of what I have: http://screencast.com/t/PJIl0KeJ3jBf

    As you can see, it starts off well enough but turns into a mess when the section breaks come into play (desayuno, drips and ensaladas). Well to be precise, the desayuno section break behaves just fine- it's dips and ensaladas that are funky.

    I tried assigned gf_left_half to the section breaks but it didn't help. I tried adding a floats and clears to that element in the stylesheet, but no dice.

    What class do I need to add to the section breaks to make them float left and clear all the elements below them? Or if that's not the problem, then what am I doing wrong??

    Thanks!
    Brad

    Posted 12 years ago on Friday July 6, 2012 | Permalink
  8. Brad, similar question and response here:
    http://www.gravityhelp.com/forums/topic/how-to-make-this-2-col-layout

    Posted 12 years ago on Sunday July 8, 2012 | Permalink
  9. braaad
    Member

    Alright! Nailed this one. The secret was to use an HTML block with <br style="clear:both;" /> before each section break. After that the gf_left_half and gf_right_half classes worked just like you described. Thanks!

    Posted 12 years ago on Monday July 9, 2012 | Permalink
  10. Glad you got it working, thanks for letting us know.

    Posted 12 years ago on Monday July 9, 2012 | Permalink

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