How can I have Label and Field in the same row?

Posted by on Jan 8, 2011 in How To, Tips

Question:
How can I have Label and Field in the same row?

Answer:
This is a easy to set feature added in Version 2.9.7

Here is how to set the options:
The settings for this are on the contact form edit page on the Styles tab. The settings are individual for each form.

How to set the style “Form Labels Left”:
Check the setting “Reset the styles to labels on left”, then click Update Options. Now view your form the changes should be automatic and visible instantly. Sites with page cashing plugins enabled may not change instantly.

setting-style-left

How to set the style “Form Labels Top”:(default)
Check the setting “Reset the styles to labels on top (default)”, then click Update Options. Now view your form the changes should be automatic and visible instantly. Sites with page cashing plugins enabled may not change instantly.

setting-style-top

form-labels-left

form-labels-top

See related .. How to add field placeholders

The style with form labels on left requires more width on your page (550px by default), the style with form labels on top requires only (375px by default). You must consider this when making your choice.
You can adjust the inline CSS on the contact form edit setting page to make the forms narrower, all the settings you need are there, but do so at your own risk. If you mess it up, just click “Reset the styles to labels on top”(or left), then click Update Options.

Do you need help?

Send us a Donation:

Donate to Mike Challis