Address field: Switch position of address elements

  • Profile Image
    Allans Bart
    Asked 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 Fields From Full Address Field

  • Profile Image
    moonzkie
    Answered 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
    pinoytech
    Answered 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
    pinoytech
    Answered 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
    nkasic
    Answered 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
    EliezerN
    Answered 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
    nkasic
    Answered 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!