How can I change the order of how fields appear in a address-section on my form?

  • Beanie3556
    Asked on February 7, 2017 at 9: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

     

    Jotform Thread 1059829 Screenshot
  • Chriistian Jotform Support
    Replied on February 8, 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:

    How can I change the order of how fields appear in a address section on my form? Image 1 Screenshot 20

    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.