Change position of the address fields

Bonjour

Sur le champ adresse en pièce jointe, j'aimerais mettre le code postal avant la ville et si possible les mettre l'un à côté de l'autre sur la même ligne. Est-ce possible?

Merci beaucoup

Hi Valentin_Sarah,

Our French Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in French, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, it is possible to put the postal/zip code field before the city field and make it one line. You can do that by injecting a custom CSS code into your form. Let me show you how:

Copy the custom CSS code below to be used in the next step:

/* Container holding both the city and postal/zipcode fields */

.form-address-table {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



/* Interchanging the position of city and postal/zipcode fields */

.form-address-line-wrapper:nth-child(4) {

    order: 1;

    flex: 1 1 45%;

}





.form-address-line-wrapper:nth-child(3) {

    order: 2;

    flex: 1 1 45%;

}





/* Ensuring they are on the same line */

.form-address-line-wrapper span.form-address-line {

    width: 100%;

}

Now, let's inject the CSS code in your form:

1. In your Form Builder, click the Paint Roller Icon on the right side of your page.
2. Go to the Styles tab and paste the copied code into the Inject Custom CSS area.

That's it! Test your form, and you will see that the postal code field is now transferred before the city field, and they are now in one line. Check out the screenshot below:

Give it a try and let us know how it goes.

génial merci!