Please Note: We are no longer using forums to facilitate standard support. 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.

Two columns layout with two sub-columns in them

  1. Hello,

    I'm trying to build a form like this one (http://www.despachotres.com/bocetos/gravity-forms.png) but I'm unable. Is it possible to do it?

    As you can see, I want two main columns and, inside each one, two columns with fields.

    Thanks in advance.

    Posted 3 years ago on Friday November 25, 2011 | Permalink
  2. Hey Daniel, this should help you out:

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

    Posted 3 years ago on Friday November 25, 2011 | Permalink
  3. Hi Rob,

    I've checked this info, and I'm applying it...but didn't manage to work it out completely. I'll tell you the fields I'm using (and which classes I'm applying):

    - Section Break (for the left column): class "gf_left_half"
    - Number E1 (no classes)
    - Number E2 (no classes)
    - Number E3 (no classes)

    - Section Break (for the right column). class "gf_right_half"
    - Number P1 (no classes)
    - Number P2 (no classes)
    - Number P3 (no classes)

    In this example, I'm trying to create a form with 2 columns and 3 fields under each column. This is the preview of the form: http://www.despachotres.com/bocetos/columns-form.jpg

    Wham am I doing wrong?

    Posted 3 years ago on Friday November 25, 2011 | Permalink
  4. Hi again,

    Regarding "gf_right_half" or "gf_left_half", I don't understand exactly what means the phrase "This only work with the 'top label' form layout option."

    Could you explain me further?

    Posted 3 years ago on Friday November 25, 2011 | Permalink
  5. In regards to the this will only work with the top label layout option - in the form settings at the top of editing the form, there is an option for label placement. Top is the default.

    To achieve the columns, you need to place the classes on each field and alternate them. So you would have the first section break with gf_left_half then the next section break right after with gf_right_half. Then your input field with gf_left_half, then the next with gf_right_half, etc. Just rinse and repeat.

    Posted 3 years ago on Friday November 25, 2011 | Permalink
  6. Thanks Rob for your answer. Now I managed to get it work with 2 columns.

    But now I'm trying to build a more complex form ( http://www.despachotres.com/bocetos/gravity-forms.png ). As you can see in the picture, I have 2 columns but, in each column, instead of having a field in each row, I have 2 fields.

    That is, it would be like having 4 columns...or 2 columns inside each column. How can I achieve this?

    Thanks in advance.

    Posted 3 years ago on Wednesday November 30, 2011 | Permalink
  7. sascha
    Member

    subscribing...

    Posted 3 years ago on Wednesday November 30, 2011 | Permalink
  8. Any help on this?

    Posted 3 years ago on Thursday December 1, 2011 | Permalink
  9. Daniel, can you hook me up with a link to your form?

    Posted 3 years ago on Thursday December 1, 2011 | Permalink
  10. I create one and send you the link. Thanks.

    Posted 3 years ago on Thursday December 1, 2011 | Permalink
  11. Daniel/Sascha to achieve columns within columns you can just combine the ready classes.

    So, to achieve the columns, you need to place the classes on each field and alternate them. So you would have the first section break with gf_left_half then the next section break right after with gf_right_half.

    Then for your radio/checkboxes you would place:

    gf_left_half gf_list_2col on the first set and then gf_right_half gf_list_2col on the second set.

    Keep in mind that the column ready classes work only with multiple choice/checkbox lists. I'm sure we can whip up some sort of css magic of some kind if you are using different fields to try to achieve what you are looking for in terms of using other fields within the columns.

    Posted 3 years ago on Friday December 2, 2011 | Permalink
  12. Hi Rob,

    Sorry for the delay. Looking at your answer, you are talking about multiple choice/checkbox lists....but there's no one in the form I sent to you. So your answer is not very helpful.

    Here's is the form that I've finally built: http://www.myagestores.es/solicitud-de-estudio-energetico/

    But what I'm trying to achieve is this: http://www.myagestores.es/files/2011/12/my-goal.jpg
    As you can see, there are two main columns but with multiple fields under them.

    I've followed this post because I thought it was the solution: http://www.gravityhelp.com/forums/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29425

    But, after following it, what I've got is this one: http://www.myagestores.es/testing/
    As you can see, I have the two main columns, but the width of the "small" fields has grown, and they've lost the "gf_inline" property.

    Can you help me with this issue? Is there another way to achieve it?

    Thanks in advance.

    (P.S. I'm subscribed to the topic, but your answers aren't sent to my inbox. Can you check it, please?)

    Posted 3 years ago on Wednesday December 21, 2011 | Permalink
  13. Daniel, figured it out for you. Since we are placing a new div ID into the mix, the ready classes don't fall in line with that HTML structure, so simply add this to your theme's stylesheet:

    #columna_izquierda .gf_inline, #columna_derecha .gf_inline {
    vertical-align: top;
    zoom: 1;
    width: auto !important;
    float: none !important;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    }
    #columna_izquierda input.small, #columna_derecha input.small {
    width: 5em;
    }
    Posted 3 years ago on Wednesday December 21, 2011 | Permalink
  14. Ok, Rob. It worked like a charm! Thank you very much.

    Is there another way to achieve the same column layout, without the need of using the div "trick". Just by using your built-in classes or similar?

    Thanks.

    (P.S. Why cannot I receive the notifications?)

    Posted 3 years ago on Wednesday December 21, 2011 | Permalink
  15. I'm not entirely sure of another way to do this purely with built in ready classes.

    As for notifications, which notifications are you referring to? The forum notifications or the email notifications for your Gravity Forms?

    Posted 3 years ago on Wednesday December 21, 2011 | Permalink
  16. Ok, thanks. The notifications, I mean the forum notifications. When you write a response, I don't receive them...although I check the "subscribe to this topic via email".

    Posted 3 years ago on Thursday December 22, 2011 | Permalink
  17. The subscribe to topic functionality in bbPress is flaky. Sorry for the inconvenience.

    Posted 3 years ago on Friday December 23, 2011 | Permalink

 

Support Tickets

Open A New Support Ticket
 Open A New Priority Support Ticket *

* Developer license holders only