How Can I Switch the Positions of the First and Last Names of a Full Name Field?

Hello, due to my RTL language CSS customization, First\Last name in "Name" field are flipped. 

How can I preserve the RTL layout while switching only first\last name field places? My forms: https://form.jotform.me/53154606501447   https://form.jotform.me/52916287625464

In the form builder the sub-labels can be edited by clicking them:

Once you've done so, be sure to save the form.

If you need help with anything else, we'd be happy to provide it.

Enjoy the rest of your weekend :)

My apologies for the confusion. It actually would work because the user would enter their first and last names in the appropriate boxes. I think it's the left-to-right stuff that got me mixed up.

Thank you Abajan, actually I prefer the methood of modifiying the CSS code to fit it.

Actually last time I needed a help with CSS, Charlie was doing a greaat job. 

Looking forward to hear from you, thanks!

There's actually no need to apply CSS or create a separate text box field for the first and last name because once the sub-labels are changed, as explained in my first reply, users will enter their first name in the right box and their last name (family name) in the left box. The only caveat is that the default tab indices would still put the cursor in the left box before the right one. Unfortunately, the nav-index property has very limited browser support. However, I'll see what CSS solutions, which don't use that property, I can find.

Thanks

Hi again,

Please do the following:

1. Copy the following rule to your computer's clipboard:

#cid_3 span:first-child {
   float: right;
   margin-right: 0;
}

2. Load the form into the form builder and click the Designer button:

3. Paste the code from your clipboard into the work area of the CSS tab:

4. Save the form:

When done, the first and last names should be switched like those of this clone and the tab order should be correct.

If you would like further assistance with this or anything else, please feel free to inform us.

Cheers

It's worth noting that while the above rule will work for that specific full name field of that form, the following will switch the positions of the names in all of the full name fields in all of your forms:

[data-type="control_fullname"]
.form-sub-label-container:first-child {
  float: right;
  margin-right: 0;
}

Thanks

Works great, thanks :)

On behalf of my colleague, you are most welcome. We are happy to hear that abajan's solution worked as desired.

If you need assistance with anything else, please do not hesitate to open a support thread about it, and we'll do our best to help.