What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by Benflips on July 15, 2017 at 01: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.

    Page URL:
    https://www.jotform.com//?formID=43420990799871

  • Profile Image
    JotForm Support

    Answered by liyam on July 15, 2017 at 06: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.

  • Profile Image

    Answered by Benflips 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?

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 24, 2017 at 04: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!

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 25, 2017 at 05:49 AM

    Thank you very much for your patience.

    I made the below in cloned version of your form:

    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:

    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!

     

  • Profile Image

    Answered by Benflips on July 26, 2017 at 02: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!
  • Profile Image
    JotForm Support

    Answered by Mike_G on July 26, 2017 at 04: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.