Docs

[Thomxnj]

Hi,

I’ve always used contact form 7 for my forms, but recently switched over to gravity forms because of their extensive integration options.

Going through my site, Im trying to recreate all of my contact form 7 forms with Gravity Forms. One form that has been giving me an issue is a form that is centered, with inline input areas. I first attempted to use gravity form’s ready classes to create an inline form. I used the .gf_left_half and .gf_right_half classes. After looking through the forums I noticed that X creates unnecessary float options and applied this custom CSS:

site .gform_wrapper ul li.gfield {
clear: none !important;
} 

That implemented the column form, but there are still a few issues.

1. The field width’s do not match up to the Name fields that are above, and there is extra space between the two fields.
2. It also seems that the name fields and the whole form add padding to the right, and they do not fill the whole container.
3. When the form is shrunk to a tablet or phone sized display the form goes full-width.

Any help would be greatly appreciated.

[Thomxnj]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

body .gform_wrapper .top_label .gfield, body .gform_wrapper .top_label li.gsection.gf_scroll_text {
    margin-bottom: 0 !important;
}
body .gform_wrapper .top_label input.medium, body .gform_wrapper .top_label select.medium, body .gform_wrapper .top_label li.gfield.gf_left_half, body .gform_wrapper .top_label li.gfield.gf_right_half,body .gform_wrapper .top_label div.ginput_container {
    margin-top: 0;
}
@media (max-width:767px){form#gform_2 {
    width: 60%;
}
}

In regards with form width, there are two empty columns on right and left sides, change number of columns to one.

Hope that helps.

[Author]

Posts