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

  • Profile Image
    vnielson
    Asked on April 13, 2018 at 02: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 ?



    This is a re-post of a comment on Customize Your Form Using Custom CSS Codes

  • Profile Image
    Brody_S
    Answered on April 13, 2018 at 03: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

  • Profile Image
    vnielson
    Answered on April 13, 2018 at 03: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
    ...
  • Profile Image
    Brody_S
    Answered on April 13, 2018 at 04: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.png

    I apologize for the inconvenience.

  • Profile Image
    vnielson
    Answered on April 13, 2018 at 04: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
    ________________________________
    ...
  • Profile Image
    Richie_P
    Answered on April 13, 2018 at 05:24 PM

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

    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

    then Sublabels and change the name Country to county.

    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.

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

    Thank you.

  • Profile Image
    vnielson
    Answered on April 16, 2018 at 07: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
    ...
  • Profile Image
    Kevin_G
    Answered 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.png

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


  • Profile Image
    vnielson
    Answered on April 16, 2018 at 01: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
    ...
  • Profile Image
    Brody_S
    Answered on April 16, 2018 at 03: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

  • Profile Image
    vnielson
    Answered on April 16, 2018 at 03: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
    ...
  • Profile Image
    vnielson
    Answered on April 16, 2018 at 03: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
    ...
  • Profile Image
    Brody_S
    Answered on April 16, 2018 at 04:41 PM

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

    1523911113coum.png

    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




  • Profile Image
    vnielson
    Answered 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
    ...
  • Profile Image
    Kevin_G
    Answered 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.  

  • Profile Image
    vnielson
    Answered 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
    ...
  • Profile Image
    Kevin_G
    Answered 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.