How do I change order of the fields within the Address field?

Hi!

How do I change the order of sub lables?

I want to change the adress fields.

Right now it is: 
Street
City
Postal number

I want it to be:
Street
Postal number
City

I know you can change the name of the fields but then it will be wrong when users for example use "auto-fill".

Thanks!

It is not possible through the form builder to switch their position, but we can do it through CSS code injection. Please try injecting this code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

/*Switch city and postal number fields position*/

#id_5 .form-address-table tr:nth-of-type(3){

    position: absolute !important;

    margin-top: 10% !important;

}

#id_17{

    margin-top: 8% !important;

}

/*mobile view*/

@media only screen and (max-width: 480px) {

#id_5 .form-address-table tr:nth-of-type(3) {

    position: absolute !important;

    margin-top: 20% !important;

}

#id_17 {

    margin-top: 15% !important;

}

}

/*End*/

Result:

Desktop view:

Mobile view:

Let us know if you need more help, we will be glad to assist you.

Thanks that worked.

But now the input field for city became smaller:

How do i make it so it is equal big?

Please try injecting this code also: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

.form-address-table td .form-sub-label-container {

    width: 400px !important;

}

@media only screen and (max-width: 480px) {

.form-address-table td .form-sub-label-container {

    width: 100% !important;

}

}

Result:

Let us know if you need more help.

Thanks that solved it. But it look strange on mobile:

Hello,

I updated the CSS code for your, can you please check and see if the issue persists on your end?

Now it look strange on desktop:

Can you please share more information on how would you like your form to look or what fields would you like to change the order or fonts?

Do you want to remove the gap between the address field and phone field?

Looking forward for your response.

I want to move up the city-field:

I updated your CSS code and removed the unnecessary codes, can you please check your web page again and see if it now meets your requirements?

If you want to see the codes, you can see the copy here: https://pastebin.com/raw/v6rP231P

thank you! now it looks great. Really nice support. 

Hi again!

When error states are shown the form dont show as intended:

I have checked your form and it seems to be working correctly at my end.

Can you please test your form again and let us know if the issue still remains?

Yes I have fixed on desktop. But it looks strange at mobile:

You may try this custom CSS

@media screen and (max-width: 480px) {
#input_5_city{
margin-top: 40px !important;
}
}

Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

If the field is not yet aligned correctly, way we know the mobile device you're using to view the form?

Let us know how it goes.

Now it works on mobile. But look strange on 600px width:

Can  you please try this custom CSS

@media screen and (max-width: 600px) {
#input_5_city{
    margin-top: 20px;
}
}

Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Thanks now it works!