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 change the order of how fields appear in a address-section on my form?

    Asked by Beanie3556 on February 07, 2017 at 09:27 PM

    Hello,

    I am designing a form to be used by Japanese customers.

    A part of the form has a section where users are asked to enter their address.

    The order in which Japanese people enter the information is very different from countries.

    In Japan you always start with entering in below order

    1) zip-code

    2) State/Province

    3) City

    4) Street Address

    If using the "Address" field in Jotform, the order is "backwards".

    How can I change the order how address related fields appears on the form?

     

    For your reference, please see the attached file.

     

    Thank you very much in advance for your support.

     

    Best Regards,

    Bjorn

     

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Chriistian on February 08, 2017 at 12:58 AM

    Unfortunately there is no option to change the order of how fields appear in the address section. However, a possible workaround would be to use custom CSS to change how they appear. Please inject the custom CSS code below:

    tr:nth-of-type(4) td:nth-of-type(2) span {

        position: absolute;

        top: 43px;

        left: 37px;

    }

    tr:nth-of-type(4) td:nth-of-type(1) span {

        position: absolute;

        top: 92px;

    }

    tr:nth-of-type(3) td:nth-of-type(2) span {

        position: absolute;

        top: 92px;

        left: 170px;

    }

    tr:nth-of-type(3) td span {

        position: absolute;

        top: 140px;

    }

    tr:nth-of-type(1) td span {

        position: absolute;

        top: 190px;

    }

    tr:nth-of-type(2) td span {

        position: absolute;

        top: 240px;

    }

    #id_40 {

        height: 300px;

    }

    Here's the result:

    Do note that this only changes how the fields in the address section will appear in the form. When you receive a submission, they will still be in the original position. 

    An alternative workaround I can suggest would be to add separate textboxes for each field so that you can re-arrange them however you want.

    Regards.