What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Can I change the order of adress fields?

    Asked by JPR1963 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

    Page URL:
    http://restauranteinstein.ch/reservation/

    Screenshot
  • Profile Image
    JotForm Support

    Answered by EltonCris on August 12, 2016 at 01: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:

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

    Hope this helps!

  • Profile Image

    Answered by JPR1963 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

  • Profile Image
    JotForm Support

    Answered by liyam on August 13, 2016 at 02: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.

  • Profile Image

    Answered by JPR1963 on August 16, 2016 at 07: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 

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 16, 2016 at 09: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:

    Let us know if you need further assistance.

  • Profile Image

    Answered by JPR1963 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:

     

     

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

    Thanks

    jp

     

     

  • Profile Image
    JotForm Support

    Answered by BDAVID 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)

    http://restauranteinstein.ch/reservation/ 

    Let us know if you need more help.