Is there anyway I can move the address fields to one line?

  • Profile Image
    akreverts
    Asked on May 08, 2017 at 12:21 PM

    is there anyway I can move the address fields to one line? Right now jot form automatically keeps address on a row, city & state on a row and zip code on a row. I print the submitted forms it would be great if I could consolidate a little to save on paper or page print formatting.
    Thank you!

  • Profile Image
    RyanC
    Answered on May 08, 2017 at 01:33 PM

    Please send link, so that custom css codes will be given.

  • Profile Image
    Nik_C
    Answered on May 08, 2017 at 01:39 PM
    I wasn't sure for which form you wanted to line the address field, but I did for this: http://www.jotform.us/form/71236141888157
     
    And the CSS that you need to copy into the Custom CSS field is:
     
    #id_10 {
        height: 15px;
    }
    #input_10_city {
       
        position: relative;
        left: 330px;
        top: -55px;
    }
    #sublabel_10_city {
        position: relative;
        left: 330px;
    top:-55px;
    }
    #sublabel_10_state {
        position: relative;
        left: 330px;
    top:-55px;
    }
    #input_10_state {
        position: relative;
        left: 330px;
    top:-55px;
    }
    #input_10_postal {
        position: relative;
        left: 660px;
        top: -110px;
    }
    #sublabel_10_postal {
        position: relative;
        left: 660px;
        top: -110px;
    }
    div#cid_24 {
        position: relative;
        left: 790px;
        top: -18px;
    }
     
    That is for the first address field and it should align like this:
    For the second Address field this is the CSS:
    #id_11 {
        height: 15px;
    }
    #input_11_city {
       
        position: relative;
        left: 330px;
        top: -55px;
    }
    #sublabel_11_city {
        position: relative;
        left: 330px;
    top:-55px;
    }
    #sublabel_11_state {
        position: relative;
        left: 330px;
    top:-55px;
    }
    #input_11_state {
        position: relative;
        left: 330px;
    top:-55px;
    }
    #input_11_postal {
        position: relative;
        left: 660px;
        top: -110px;
    }
    #sublabel_11_postal {
        position: relative;
        left: 660px;
        top: -110px;
    }
    div#cid_25 {
        position: relative;
        left: 790px;
        top: -18px;
    }
     
    Let us know how it worked or if you had some other form in mind.
    Thank you!
  • Profile Image
    akreverts
    Answered on May 09, 2017 at 02:43 PM
    thank you so much! Here's the form, just a few things I'd like help making
    adjustments on:
    -phone number on separate line in both sections
    -The zip code text fields in both sections is slightly lower, how do I make
    an adjustment for this?
    -Below the table, name, email phone, how can this be consolidated?
    I was able to make some adjustments to the table code but not able to do
    that with this code. Maybe I need to learn a little bit of this. Anyways,
    any help is wonderful!
    Here's how the form looks now: https://form.jotform.us/71236141888157
    ...
  • Profile Image
    Kiran
    Answered on May 09, 2017 at 05:27 PM

    -phone number on separate line in both sections

    Please move the phone number to the next line after shrinking it from the field properties. 

    https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm

    Then replace the following section of the code (blue colored) provided by our colleague in the previous post with the green colored code below:

    div#cid_24 {

        position: relative;

        left: 790px;

        top: -18px;

    }

    div#cid_25 {

        position: relative;

        left: 790px;

        top: -18px;

     

    }

    to

    div#cid_24 {

    margin-top: 35px;

    }

    div#cid_25 {

    margin-top: 35px;

     

    }

    -The zip code text fields in both sections is slightly lower, how do I makean adjustment for this?

    The zip code fields seem to be displaying correctly at my end.

    However, I see that the phone field is displaying a little lower. Since the phone number field is being moved down, it should be fine.

    -Below the table, name, email phone, how can this be consolidated?

    Please make sure that you position the fields on the form in the same row and then add the following CSS code to the form:

    #label_14, #label_26 {

        width: 15px !important;

    }

    Please take a look at the cloned version of your JotForm with the above changes.

    https://form.jotformpro.com/71286288061965

    Feel free to clone it to your account.

    Please get back to us if you need any further assistance. We will be happy to help.