Change the order of <Form> elements
I'm working with a wordpress site, and don't have much control over the elements in a form, except, I can wrap an element or group of elements in a div, and can set the classes and id's of the elements.
Some of the input elements are grouped inline, and some block.
I want to move an element from it's rendered position to be coming between other elements later in the form.
Can I do this by using css order? I think that css order only works with flexbox, in which case I'll have to set some elements as flex-direction: column and some as flex-direction: row.
Am I on the right path?
5 Replies
it depends A LOT on everything
and i mean everything
is there a place where we can see it?
I mean you could change the position and the order of the elements but this will cause many accessibility issues as you've changed the tab order of those elements.
This is generally considered a bad idea. I would need a better understanding of what you're trying to do and your current setup. Changing the display order is not something to consider lightly.
Sorry for the delay in getting back. Let's just say I have a form with input text boxes for first name, surname, and middle names, in that order, and I wanted to move middle names into the middle?
its a lot easier if the html is already in the correct order
if you cant do that, you can use grid areas with names
Like pb said, changing the order with flex or grid will not change the tab order so if the html is first, sur, middle and you change visual order to first, middle, sur, anyone tabbing through will still get first, sur, middle so visually will jump around.
You can use javascript to target the classes and their order in css and change the tab order depending on which input is focused then change it back . Or even better would probably be to repopulate the DOM with the elements/classes in the order you want them to be in. Which kind of wordpress form are you working with? Is it WPForms, Elementor, the standard wordpress does widget etc?