7 (or more) columns in one form

Hi, I need to create form where I got 7 columns, there will be fields with text, numbers, dropdowns etc. I found option to make 6 columns but can’t figure out how to make 7 or more :confused:

at this moment I got 6 and 7th is not in line but in second line and looks like that

code which I use to make 6 is that:

.gform_wrapper.gravity-theme .gfield.gfield--width-quarter {
    -ms-grid-column-span: 3  !important;
    grid-column:span 2 !important;
}

I try this code:

.gform_wrapper.gravity-theme .gfield.gfield--width-quarter {
    -ms-grid-column-span: 7  !important;
    grid-column:span 1 !important;
}

but result is wrong, fields are not in full width.

is there anyone who will got idea how to make this?

I wonder how this community works :thinking: no any responds, no and idea how to solve this, even from creators of this plugin :man_shrugging:

Hi Damian. In most cases, if someone knows how to accomplish what you need, you will receive a reply. If you don’t receive a reply, chances are no one has done the same, or it may not be possible. These are not support forums though, so there is no guarantee of getting a reply from someone at Gravity Forms.

Also, this Facebook groups may be a good resource, or may point you to other resources:

Thank you.

I think you need to turn it into using flexbox and not grid.

.gform_wrapper.gravity-theme .gform_fields {
    display: flex;
    flex-wrap: wrap;
}

.gform_wrapper.gravity-theme .gfield {
    margin: 0;
    flex: 0 0 100%;
}

.gform_wrapper.gravity-theme .gfield.gfield--width-full {
    flex-basis: 100%;
}

.gform_wrapper.gravity-theme .gfield.gfield--width-half {
    flex-basis: 50%;
}

.gform_wrapper.gravity-theme .gfield.gfield--width-third {
    flex-basis: 33.33%;
}

.gform_wrapper.gravity-theme .gfield.gfield--width-quarter {
    flex-basis: 25%;
}

.gform_wrapper.gravity-theme .gfield.gfield--width-fifth {
    flex-basis: 20%;
}

.gform_wrapper.gravity-theme .gfield.gfield--width-sixth {
    flex-basis: 16.66%;
}

.gform_wrapper.gravity-theme .gfield.gfield--width-seventh {
    flex-basis: 14.2857%;
}

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.