Address suitable for German standard

Would it be possible to offer an address field set suitable for German standard purposes? The actual set confuses my clients because there the postal code is asked before the city. In Germany usually the postal code has to be given and to be written on a letter or in a form before the city.

One of options to change sub fields positioning would be to rename their labels. It seems you have already done that:

As alternative, there could be a solution via custom CSS code. It can adjust fields position on a form. If you will need help with that, please let us know.

Changing field position on form would be better as I did with changing names. I read through the linked page and the next linked page for custom css but seems I need your help how to do the change of field positions in my form. I would like your support for how to do this.

I have added another address element in your Form, I have swapped the Zip code, injected the following CSS code in your Form:

#cid_34 > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > span:nth-child(1){
position:relative;
left:150px!important;
}
#cid_34 > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(4) > td:nth-child(1){
position:relative;
top:-50px!important;
}
#cid_34 > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(2) > span:nth-child(1){
position:relative;
bottom:-50px!important;
left:-165px!important;
}

Result:

Let us know if you have other questions.

Thanks.

Thank you very much for your help. As I will have the same problem in the future, I tried to look into the form and the code to understand and reproduce it on my own.

Unfortunately I destroyed it. As I looked into the custom CSS, tried to change this and that and see what happens, at the end I got the form with your new address field as it was before but postal code and city in order as before not swapped as in your screenshot. After that I tried to insert all the code mentioned by you in the CSS field but form did not change back to the good result.

And it is not good to experiment with a form actually used for submissions, so we let this one as it is now.

But the following would be great: Perhaps you could give me a small training in swapping the two fields with this test form:

https://form.jotformeu.com/90548195749371

I deactivated Bundesland and Land in the options because I do not need them.

And I saw the field IDs as here:

#input_3_addr_line1, #input_3_addr_line2, #input_3_city, #input_3_state, #input_3_postal, #input_3_country

But what do I have to input now in the custom CSS, so that postal goes before (left from) city?

I have cloned your test form and added code, which you can use for any form and it will swap boxes for every address field:

input[id*='city'], label[id*='city'] {

  top: 6vh;

  position: relative;

}

input[id*='postal'], label[id*='postal'] {

  top: -6vh;

  position: relative;

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

  input[id*='postal'], label[id*='postal'] {

  top: -9.5vh !important;

  position: relative;

}

input[id*='city'], label[id*='city'] {

  top: 9.5vh;

  position: relative;

}

}

It should change position of city and post code boxes for desktop and mobile:

If you will need to adjust top property, please simply change 6/-6 or 9.5/-9.5(for mobile) values. Just note that a change should be checked on form's direct link, in builder only boxes will be swapped, there's no universal code to select labels in build mode. But, your users do not see form in builder, so I thought this would be ok.

Let us know if you need more help.

Trank you, Victoria, I understand better now, helped me.

But if I see in the preview, iPhone looks well,

but Desktop doesn't really fit:

Seems to be difficult.

You can play with the values highlighted on the code below: 

input[id*='city'], label[id*='city'] {

  top: 8vh;

  position: relative;

}

input[id*='postal'], label[id*='postal'] {

  top: -10vh;

  position: relative;

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

  input[id*='postal'], label[id*='postal'] {

  top: -9.5vh !important;

  position: relative;

}

input[id*='city'], label[id*='city'] {

  top: 9.5vh;

  position: relative;

}

}

If the form is messed up, you may delete the code and inject the one provided by my colleague again. The one I provided already places the fields properly, here is my cloned form: https://form.jotform.com/90598029931971