What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by yuno89 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

     

    name last name first switch positions full name field first name flip positions rtl form right-to-left form
  • Profile Image
    JotForm Support

    Answered by abajan 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
    JotForm Support

    Answered by abajan 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

    Answered by yuno89 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
    JotForm Support

    Answered by abajan 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
    JotForm Support

    Answered by abajan 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
    JotForm Support

    Answered by abajan 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

    Answered by yuno89 on November 17, 2015 at 11:09 AM

    Works great, thanks :)

  • Profile Image
    JotForm Support

    Answered by Boris 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.