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

    Address field: Switch position of address elements

    Asked by Allans Bart on May 04, 2013 at 03:56 PM

    Is there a way to change the position of the address elements? For exemple, switch State/Province and Zip/Postal Code, or place them on another line.



    This is a re-post of a comment on How To Remove Sub-Fields From Full Address Field

    elements
  • Profile Image

    Answered by moonzkie on May 04, 2013 at 04:00 PM

    Hi,

    Unfortunately, it is not possible to switch the positions of the elements on the address field. However, I will try to add this to our nice-to-do list and hopefully our developers will be able to integrate this in the future.

    Thank you.

  • Profile Image

    Answered by pinoytech on May 05, 2013 at 04:25 AM

    Hi Allan,

    Using custom css into your form, you can re-position address elements. Please take a look at this demo form.

    http://www.jotformpro.com/form/31241641090947

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image

    Answered by pinoytech on May 06, 2013 at 10:43 AM

    Hi,

    Bellow is the custom css codes that I've injected to my demo form.

    /*---STATE-----*/

    #input_1_state.form-textbox.form-address-state {

    position: absolute;

    margin-top: 31px !important;

    margin-left: -165px !important;

    }

    #sublabel_1_state.form-sub-label {

    position: absolute;

    margin-top: 60px !important;

    margin-left: -165px !important;

    }

    /*---POSTAL-----*/

    #input_1_postal.form-textbox.form-address-postal {

    position: absolute;

    margin-top: -81px !important;

    margin-left: 165px !important;

    }

    #sublabel_1_postal.form-sub-label {

    position: absolute;

    margin-top: -52px !important;

    margin-left: 165px !important;

    }

    -----------------

    Here's the guide on how to inject custom css: http://www.jotform.me/help/117-How-to-Inject-Custom-CSS-Codes

    Thank you!

  • Profile Image

    Answered by nkasic on January 03, 2014 at 03:44 AM

    Thanks for the instructions.

    It's important to mention to newbies (like myself) that you need to discover input ID first and replace it in example above, e.g, most likely your input ID will not be input_1_state but input_35_state or similar.
    If you leave it input_1_state as in the example above, nothing will happen (doesn't work).

    Can we get any instructions how to use the coordinates in the example above? What can we use apart from position:absolute? What are the default values?
    It's very painful to adjust positions by trial and error. 

  • Profile Image

    Answered by EliezerN on January 03, 2014 at 09:34 AM

    @nkasic

    Thanks for pointing out those important factors. 

    You are much right about discovering the input ID, however, it is possible our colleague did not explain that as he provided the already elaborated CSS code to the user, which would make the things easier.

    Now, to avoid this kind of confusion we recommend our dear users to open their own threads so that a better assistance can be provided.

    If you provide us the URL of your form you are working with, we will be more than glad to help you to accomplish what you need by providing you the needed instructions. The use of the position property depends on the situation, so we will not always use "position:absolute", but also "position:relative" or "position:fixed" depending on what you need to accomplish.

    Please open your own thread an give us the details about what you need to accomplish and we will do our best to assist you correctly.

    Thanks

  • Profile Image

    Answered by nkasic on January 05, 2014 at 08:01 AM

    Your colleage helped me in a separate thread as you suggested:

    http://www.jotform.com/answers/311857-Repositioning-Address-fields

    Thanks!