WordPress Gravity Forms Alignment

Question

Does anybody knows how I can get the labels of the forms before the input fields?

http://agathon.nl/arbeidsmarkt-jobhunting-jobsearch-jobhunter/

Beneath "Checklist werk *", the labels need to be in front of the inputfield.

<li id="field_6_60" class="gfield gf_left_half field_sublabel_below field_description_below"><label class="gfield_label" for="input_6_60_shim"></label><div class="ginput_container ginput_container_list ginput_list"><input type="text" id="input_6_60_shim" style="position:absolute;left:-999em;" onfocus="jQuery( &quot;#field_6_60 table tr td:first-child input&quot; ).focus();"><table class="gfield_list gfield_list_container"><colgroup><col id="gfield_list_60_col_1" class="gfield_list_col_odd"><col id="gfield_list_60_col_2" class="gfield_list_col_even"></colgroup><thead><tr><th>Taken in functie?</th><th>&nbsp;</th></tr></thead><tbody><tr class="gfield_list_row_odd gfield_list_group"><td class="gfield_list_cell gfield_list_60_cell1" data-label="Taken in functie?"><input type="text" name="input_60[]" value="" tabindex="50"></td></tr></tbody></table></div></li>

Answer 1

What sort of options do you have with Gravity Forms for each field? Can you specify a custom class for the fields? If so, the css below should work:

.custom-class {
    width: 50%;
    float: left;
    display: block;
}

You would then add this "custom-class" to each field where you wanted the label & input to be next to each other. If there isn't an option, we can choose another approach (using your provided URL) each field has an ID so we can (tediously) use the rule below, adding a new selector for each ID that you see in the page:

First the thead:

#field_6_60 .gfield_list.gfield_list_container thead {
    display: block;
    width: 50%;
    float: left;
}

Then the tbody:

#field_6_60 .gfield_list.gfield_list_container tbody {
    display: block;
    width: 50%;
    float: left;
}

This would only apply the rule to the field with the ID "field_6_60"

If you needed to add "field_6_61" you just add the selector again to the rules above:

First the thead:

#field_6_60 .gfield_list.gfield_list_container thead, #field_6_61 .gfield_list.gfield_list_container thead  {
    display: block;
    width: 50%;
    float: left;
}

Then the tbody:

#field_6_60 .gfield_list.gfield_list_container tbody, #field_6_61 .gfield_list.gfield_list_container tbody {
    display: block;
    width: 50%;
    float: left;
}

You could then keep adding fields by including the field ID and the selectors as shown above e.g. #field_6_60 .gfield_list.gfield_list_container tbody be careful to include a comma after each one (except the last!)