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

  • Profile Image
    yuno89
    Asked on November 14, 2015 at 08:18 AM

    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

     

  • Profile Image
    abajan
    Answered on November 14, 2015 at 04:55 PM

    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 :)

  • Profile Image
    abajan
    Answered on November 14, 2015 at 05:17 PM

    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.

  • Profile Image
    yuno89
    Answered on November 15, 2015 at 03:31 AM

    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!

  • Profile Image
    abajan
    Answered on November 15, 2015 at 09:45 AM

    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

  • Profile Image
    abajan
    Answered on November 16, 2015 at 07:26 PM

    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

  • Profile Image
    abajan
    Answered on November 16, 2015 at 08:19 PM

    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

  • Profile Image
    yuno89
    Answered on November 17, 2015 at 11:09 AM

    Works great, thanks :)

  • Profile Image
    Boris
    Answered on November 17, 2015 at 01:13 PM

    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.