Can I change the order of adress fields?

  • JPR1963
    Asked on August 12, 2016 at 12:30 PM

    Hi

    I like to change the order of the adress field. I'm living in Switzerland and here we write first the CAP and then the city. Therefore I like to change the field CAP. It should come before the city field.

    And by the way: Is there a possibility to have the CAP in a shorter width on same line as the city? (look at the attached screenshot, it should look like this - "Postleitzahl" means CAP, "Stadt" means City).

    Thanks for help.

    jp

    Jotform Thread 904989 Screenshot
  • Elton Support Team Lead
    Replied on August 12, 2016 at 1:57 PM

    Hello,

    I see that you have already sorted the width on the mentioned fields upon checking your form.

    Unfortunately, you can't switch the fields easily in the form builder without injecting custom CSS codes into your form. The easiest workaround I could think of is to switch the sub-label by editing them in the form builder. This works the same as switching the actual fields.

    Example:

    Can I change the order of adress fields? Image 1 Screenshot 20

    Another alternative workaround is to use multiple text fields instead of the full address field. :)

    Hope this helps!

  • JPR1963
    Replied on August 13, 2016 at 10:45 AM

    Hi EltonChris

    Thanks a lot for the workaround, this works.

    BUT: I was NOT able to put the two fields CAP and City on one line. I did my example with some Photoshop work... :-) (sorry, that I didn't mentioned this)

    So maybe you can help me to resolve this last problem on this form?

    Thanks a  lot for helping, you and all of your team do a fantastic job!

    jp

  • liyam
    Replied on August 13, 2016 at 2:35 PM

    Hello JP,

    I see that you currently have disabled one textbox in your address field. You can simply enable the said field and change the sub label to your preference. So you can change the current "Bundesland" to "Stadt".

    But if I'm misunderstanding your case on this matter, please let me know.

     

    The other solution as mentioned by EltonCris, is you can just create separate basic text box fields and label them according to your preference. If you would like to consider this solution, please let us know as well.

    Thanks.

  • JPR1963
    Replied on August 16, 2016 at 7:11 AM

    Hi Liyam

    Thanks for the answer. It works with renaming the subname of the field. But still I don't know how to put 2 fields together on same line. Is this possible?

    jp 

  • Elton Support Team Lead
    Replied on August 16, 2016 at 9:40 AM

    Yes, that's possible. Inject this CSS codes to your form. This should align them on the same line.

    #id_4 .form-address-table tr+tr+tr .form-sub-label-container {width: 80%;}

    #id_4 .form-address-table tr+tr+tr+tr .form-sub-label-container{width: 100% !important;}

    #id_4 .form-address-table tr+tr+tr {

        width: 30% !important;

        display: inline-block;

    }

    #id_4 .form-address-table tr+tr+tr+tr {

        width: 70% !important;

        display: inline-block;

    }

    #id_4 .form-address-table tr+tr+tr+tr td{width:40% !important;}

    input#input_4_city, input#input_4_postal {

        width: 100% !important;

        max-width:none !important;

     

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes (make sure to paste it into the bottom section, if you have existing CSS codes in your form)

    Result:

    Can I change the order of adress fields? Image 1 Screenshot 20

    Let us know if you need further assistance.

  • JPR1963
    Replied on August 16, 2016 at 10:09 AM

    Hi EltonCris

    Thank you very much for the help. It works.

    Only one little thing: In your example, all fields end on the right side at the same line. I put the code in my form, an it look like this:

     

    Can I change the order of adress fields? Image 1 Screenshot 20

     

    So, the field "Ort" do not end at the same line like the other fields. Is there a way to solve this?

    Thanks

    jp

     

     

  • David JotForm Support Manager
    Replied on August 16, 2016 at 11:25 AM

    What is the form you are referring to?  

    I just checked two of your forms, but they look different from your screenshot:

    http://www.jotformpro.com/form/62243224556957 (Ort field aligned with the other fields)

    Can I change the order of adress fields? Image 1 Screenshot 30

    http://restauranteinstein.ch/reservation/ 

    Can I change the order of adress fields? Image 2 Screenshot 41

    Let us know if you need more help.