How to align elements inside a form

Question

Calling out to css masters at SO! I have a form that's created with gravity forms. enter image description here

The logical order of all input fields in the code is 1) Radiobuttons 2) All string/text inputs 3) textarea

I'm trying to make it so that a tab from radiobuttons leads the user to the textarea, and then to the other text input fields but that messed up the looks =\
enter image description here Any ideas on what I could do?

Have you tried the label for ? – Etienne Arthur Aug 12 '13 at 14:51 — Etienne Arthur, Aug 12 '13 at 14:51
How do you suggest I use the label for? – Alisso Aug 12 '13 at 14:54 — Alisso, Aug 12 '13 at 14:54

score 1 · Answer 1 · answered Aug 12 '13 at 14:50

1

Try keeping your original layout, but use tab order to set the order in which the tabbing happens:

http://webcheatsheet.com/HTML/controll_tab_order.php

answered Aug 12 '13 at 14:50

Rich

5,603
9
39
61

I'm not able to change the tab index for each field, a limitation of gravity forms. (I haven't found any way of doing it atleast.) – Alisso Aug 12 '13 at 14:53
How about wrapping the radio buttons, and textfields in a div, and push the textarea down slightly? – Rich Aug 12 '13 at 14:56
Another possibility: Order of markup : Radio buttons, text fields, textarea. Then: Radio buttons: Float left,, Text fields: Float Right, Text area: float left – Rich Aug 12 '13 at 14:57
but then the textarea is again the last field so when tabbing from textarea you don't go to Field 4 – Alisso Aug 13 '13 at 07:53

How to align elements inside a form

1 Answers1