I am looking to change the layout of address field to be from input

  • vnielson
    Asked on April 13, 2018 at 2:26 PM

    I am looking to change the layout of address field to be from

    #input_7_addr_line1, #input_7_addr_line2, #input_7_city, #input_7_state, #input_7_postal, #input_7_country

    to

    #input_7_addr_line1, #input_7_addr_line2, #input_7_city, #input_7_county, #input_7_state, #input_7_postal

    How would I make that change ?

  • Brody_S
    Replied on April 13, 2018 at 3:21 PM

    Unfortunately, the address element does not offer "an easy" way to do this, if you could provide us with the form in question we can reposition the fields with custom CSS for you.

    Thanks

  • vnielson
    Replied on April 13, 2018 at 3:43 PM
    Thank you very much.
    https://form.jotform.com/80664857016159 (both shipping and billing address if you would be willing please)
    Vernon Nielson
    Teamwork makes the dream work
    IT Coordinator | SouthEast Texas Regional Advisory Council
    Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
    1111 North Loop West | Suite 160 | Houston, TX 77008
    Save our in-boxes! http://emailcharter.org
    ...
  • Brody_S
    Replied on April 13, 2018 at 4:06 PM

    Could you please specify which elements you would like to switch for which, as you have mentioned six elements while there are only five in each form.

    1523649878formone Screenshot 10

    I apologize for the inconvenience.

  • vnielson
    Replied on April 13, 2018 at 4:43 PM
    I was going to add country and change its name to county and move it between city and state
    Get Outlook for iOS
    ________________________________
    ...
  • Richie JotForm Support
    Replied on April 13, 2018 at 5:24 PM

    If you change the State Options to "AMERICAN STATES" it will only select the county available in the states.

    I am looking to change the layout of address field to be from input Image 1 Screenshot 50

    However, if you want to use the country and change it to county, you can change it in the General tab of your address properties

    I am looking to change the layout of address field to be from input Image 2 Screenshot 61

    then Sublabels and change the name Country to county.

    I am looking to change the layout of address field to be from input Image 3 Screenshot 72

    Then we add the custom css codes.

    #input_16_country{
      position: absolute!important;
    margin-left: -130px!important;
        margin-top: -68px!important;
    }
    #sublabel_16_country{
      position: absolute!important;
        margin-top: -40px!important;
        margin-left: -130px;
    }
    #input_16_state{
          position: absolute;
        margin-top: 40px!important;
           margin-left: -180px;
    }
    #sublabel_16_state{
       position: absolute;
        margin-top: 70px!important;
        margin-left: -170px;
    }


    Just change my input_16 and sublabel_16 to input_7 and sublabel_7.

    Here is a sample screenshot.

    I am looking to change the layout of address field to be from input Image 4 Screenshot 83

    Please give it a try and let us know how it goes.

    Thank you.

  • vnielson
    Replied on April 16, 2018 at 7:43 AM
    I am a little confused here. The way I read this email was option 1 - change the state optioins to “American States” Which I did but no counties display, but the directions say “it will only select the county available in the states.”
    Do I need to do the second option as well?
    Vernon Nielson
    Teamwork makes the dream work
    IT Coordinator | SouthEast Texas Regional Advisory Council
    Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
    1111 North Loop West | Suite 160 | Houston, TX 77008
    Save our in-boxes! http://emailcharter.org
    ...
  • Kevin Support Team Lead
    Replied on April 16, 2018 at 10:05 AM

    Apologies for the confusion. 

    When you select "American States" on the "State Options" section of the field, the default country will be United States, but the country field will not be displayed on the form. Now, if you need to display the country drop down you only need to select the text box option on the "State Options" section, this will add the country drop down to the address and the users can select between the different countries listed there. 

    1523887499screenshot 01 Screenshot 10

    The second steps are to make sure the labels are as you want only, you may only check that each field is labeled correctly. 


  • vnielson
    Replied on April 16, 2018 at 1:43 PM
    I am even more confused. Option 1 – If I select American States , it forces a drop down of the states. No county selections or text field to enter county.
    Option 2 – I am not needing to select a country, I need to have a text input for county. My thought on this was to change the css from country to county. Then place the county text field between city and state.
    Is this at all possible?
    Vernon Nielson
    Teamwork makes the dream work
    IT Coordinator | SouthEast Texas Regional Advisory Council
    Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
    1111 North Loop West | Suite 160 | Houston, TX 77008
    Save our in-boxes! http://emailcharter.org
    ...
  • Brody_S
    Replied on April 16, 2018 at 3:07 PM

    Unfortunately what you are looking for can't be achieved using the address element. It allows for an addition of one extra field -> country. While you can change its name to "county" it won't alter the dropdown options available (countries/US states).

    You can, however, add a sperate short entry element with the question of "county" and have it positioned within the address element with CSS.

    Please let us know if that is an acceptable solution to you, and provide us with the form you would like to do this on (after you add the short text entry element). We can provide you with the CSS necessary.

    Thanks

  • vnielson
    Replied on April 16, 2018 at 3:43 PM
    Thank you, I have added two short text entries with county under each of the Address elements that I want the county text field added to ..
    Vernon Nielson
    Teamwork makes the dream work
    IT Coordinator | SouthEast Texas Regional Advisory Council
    Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
    1111 North Loop West | Suite 160 | Houston, TX 77008
    Save our in-boxes! http://emailcharter.org
    ...
  • vnielson
    Replied on April 16, 2018 at 3:43 PM
    Don’t know if the form url is still on the ticket https://www.jotform.com/build/80664857016159 (sorry if this is a duplication)
    Vernon Nielson
    Teamwork makes the dream work
    IT Coordinator | SouthEast Texas Regional Advisory Council
    Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
    1111 North Loop West | Suite 160 | Houston, TX 77008
    Save our in-boxes! http://emailcharter.org
    ...
  • Brody_S
    Replied on April 16, 2018 at 4:41 PM

    Please change the short text entry sublabel into "County" (for both).

    1523911113coum Screenshot 10

    Then add the following CSS to your form:

    @media only screen and (min-width: 770px) {

       li#id_19 {

        width: 170px;

        position: absolute;

        top: 500px;

        left: 300px;

    }

    li#id_18{

      position: absolute;

      top: 822px;

      left: 301px;

    }

    #label_19, #label_18{

      display: none;


    }

    }

    Please note that this will only work on browsers and not on mobile devices. 

    I hope this will help you!

    Thanks




  • vnielson
    Replied on April 17, 2018 at 11:43 AM
    Thank you, although the County is not aligned with the rest of the text? Is that a screen resolution issue? Or would I need to adjust the CSS?
    Vernon Nielson
    Teamwork makes the dream work
    IT Coordinator | SouthEast Texas Regional Advisory Council
    Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
    1111 North Loop West | Suite 160 | Houston, TX 77008
    Save our in-boxes! http://emailcharter.org
    ...
  • Kevin Support Team Lead
    Replied on April 17, 2018 at 11:57 AM

    I can see what you are referring to, please try adding this code to the form in order to change the field's position: 

    input#input_19 {

        width: 146px;

    }

    You may add it right after the line "@media only screen and (min-width: 770px) {" on your current CSS code. 

    I hope this helps.  

  • vnielson
    Replied on April 17, 2018 at 12:43 PM
    Still shows off.
    Is my code correct:
    @media only screen and (min-width: 770px) {input#input_19 {
    width: 146px;
    }
    li#id_19 {
    width: 170px;
    position: absolute;
    top: 500px;
    left: 300px;
    }
    li#id_18{
    position: absolute;
    top: 822px;
    left: 301px;
    }
    #label_19, #label_18{
    display: none;
    }
    }
    Vernon Nielson
    Teamwork makes the dream work
    IT Coordinator | SouthEast Texas Regional Advisory Council
    Office 281.822.4453 | Cell 832.849.7308 | Fax 281.822.4668 | www.setrac.org
    1111 North Loop West | Suite 160 | Houston, TX 77008
    Save our in-boxes! http://emailcharter.org
    ...
  • Kevin Support Team Lead
    Replied on April 17, 2018 at 12:54 PM

    Please try the code like this:

    @media only screen and (min-width: 770px) {

    input#input_19 {

    width: 146px;

    }

    li#id_19 {

    width: 170px;

    position: absolute;

    top: 500px;

    left: 322px;

    }

    li#id_18{

    position: absolute;

    top: 822px;

    left: 301px;

    }

    #label_19, #label_18{

    display: none;

    }

    }

    Also, the field may display a bit different depending on the screen size, if the problem persists on your end, you may change the "width" and "left" values in the code in bold text in order to change the position and set a value that displays the field properly on your end as well. 

    Thanks.