Can you change input box widths on the default address block?

  • Benflips
    Asked on July 15, 2017 at 1:34 AM

    I would like to reduce the width of several of the fields in the default address block if this is possible.

    I have had too many problems with some of the other address widgets, so am replacing them with the default option.

    I really would like you to add other state options rather than just USA however. I hope this can be done - ideally having the state list automatically populate based on the country chosen. I am in Australia, and I would like Australian states to be an option.

    I know you have various widgets that have some of this functionality but they are clunky, and they require four or more separate textbox fileds or drop downs to be inserted on the form and then aligned (it's painful!) - example: I used one of the widgets that use Google Maps as a base to allow you to enter your address, but it doesn't record unit numbers or other such address components.

  • liyam
    Replied on July 15, 2017 at 6:56 AM

    Hello,

    Yes, it is possible to reduce the widths via CSS. Can you give us details on how long the width for the fields for the addresses you would like to have?

    For states other than US, unfortunately, we do not have it. But it can be done manually instead by a regular textbox field and without using the address field. Another option is by getting your form's full HTML source and replacing the textbox with a dropdown box with values.

    You can get your form's full HTML source by following the steps from this guide: https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form 

    Thanks.

  • Benflips
    Replied on July 23, 2017 at 11:47 PM

    Can you please help by putting the street address 1 about the width of all the other current fields.

    Then have City/Town field about half that width, and postcode wide enough to just fit about 10 characters max. Then have City/Town and Poscode on the same line as street address line 1.

    Then I will hide the state field, and I will add in one of the widgets that allows me to have my own list as well as a 'add your option here' at the bottom if they are not from Australia.

    Can I have the state (through this widget) and the country on the same line, or will the widget have to be under this address block?

  • Nik_C
    Replied on July 24, 2017 at 4:32 AM

    Please allow me some time to work on this issue for you and I will get back to you once I have a working CSS code.

    Thank you!

  • Nik_C
    Replied on July 25, 2017 at 5:49 AM

    Thank you very much for your patience.

    I made the below in cloned version of your form:

    Can you change input box widths on the default address block? Image 1 Screenshot 30

    The bottom left is Australian states widget.

    To make the fields layout look like that, please copy and paste the below code in your custom CSS code:

    input#input_641_addr_line1 {

        position: relative;

        width: 170px;

    }

    input#input_641_city {

        position: relative;

        width: 90px;

        left: 183px;

        top: -53px;

    }

    label#sublabel_641_city {

        position: relative;

        left: 183px;

        top: -53px;

    }

    input#input_641_state {

        display:none!important;

    }

     

    input#input_641_postal {

        position: relative;

        width: 77px;

    }

    input#input_641_postal {

        position: relative;

        left: 286px;

        top: -106px;

    }

    label#sublabel_641_postal {

        position: relative;

        left: 286px;

        top: -106px;

    }

    select#input_641_country {

        position: relative;

        left: 28px;

    }

    label#sublabel_641_country {

        position: relative;

        left: 28px;

    }

    iframe#customFieldFrame_645 {

        position: relative;

        top: -120px;

    }

    Please be mindful that when you add your Australian state widget, the code will not work for that one(green code), since it is different ID of it. But feel free to add it and we can adjust.

    Also, to remove the States field I used the code in CSS above, for the label, simply double click it and delete.

    And I set the label to be top for the address field only:

    Can you change input box widths on the default address block? Image 2 Screenshot 41

    Here is my clone of your form: https://form.jotformpro.com/72052295485965

    Feel free to check it.

    If you have any further questions please let us know.

    Thank you!

     

  • Benflips
    Replied on July 26, 2017 at 2:25 AM

    Thank you.

    I have used your code and modified it somewhat.

    I'm happy with the result.

     

    As a point for improvement though, it would be great if the google address widgets were able to collect unit numbers. It will allow you to search for a unit/house number but then once selected, it only records the street number. Please get your developers to fix this issue!
  • Mike_G JotForm Support
    Replied on July 26, 2017 at 4:32 AM

    We are glad to know that you were able to achieve what you are trying to accomplish with your form.

    With regards to your other concern, I have moved it to a new thread considering it is a different topic.

    Please click this link to go to that thread.