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

    How do I change the length of a form type in field?

    Asked by Suzuki98 on June 11, 2017 at 03:28 PM

    Hello, 

    See the screen shot attached.  (Ignore the white space inbetween - I had to try to white out intermediate questions for the screen shot, due to the file upload limit of 500Kb.)  

    'Names of Children' is a duplicate of 'Health Insurance Company'.  They both show to have a width of "20".   Yet, on the Preview, one form field is long and one is short.   What is controlling this?  I want the 'Names of Children' to be long (as is 'Health Insurance Company').  

    Thank-you!

    Page URL:
    https://www.jotform.com/build/71400751036142

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Jan on June 11, 2017 at 04:20 PM

    You can increase the width of the "Name of Children" field by using custom CSS. Here's the code:

    #cid_374 .form-sub-label-container, 
    #cid_375 .form-sub-label-container, 
    #cid_376 .form-sub-label-container {
       width: 100% !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    Hope that helps. Thank you.

  • Profile Image

    Answered by Suzuki98 on June 12, 2017 at 12:48 AM

    Hello, 

     

    Thank-you!  But can you please explain this code?

    1) I found the 374, 375, 376 as the Field ID after looking at the Properties - Advanced - Field Details

        Not sure what the cid_  is?  The Field Detail shows  input_  and not cid_ ?

    2) What is the .form_sub_label-container?

    3) I decided to make it 80% rather than 100% and then decided to change Health Insurance and Policy Number to be shorter as well.   So I assumed I'd need to add this:

    #cid_308.form-sub-label-container,

    #cid_309.form-sub-label-container,

    #cid_374.form-sub-label-container,

    #cid_375.form-sub-label-container,

    #cid_376.form-sub-label-container {

      width: 80% !important;

     

    }

     

       But that did not work.  How do I control the width of Health Insurance and Policy Number?

     

    4) Where can I find documentation on all css functionality/commands?

     

    5) I did not write css code to control the size of other widgets.  How is it that some of those are short or long - without specific code controlling their widths? 

     

    Thank-you!

  • Profile Image
    JotForm Support

    Answered by Nik_C on June 12, 2017 at 03:00 AM

    1) The field ID you found under Properties window is the ID of the field, but fields are usually nested in a div tag, and the ID you mentioned cid is the ID of one of the divs. You can find more about how to find the field's ID here: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

    2) It is the class of the field, you can see that because it starts with a dot.

    3) To find the right ID of the field, the best way is to use Inspect Element feature of the Browser:

    So for Health insurance field, the right CSS code will be:

    #cid_308 {

        width: 80%;

    }

    And for Policy Number it will be:

    #cid_309 {

        width: 80%;

    }

    4) You can start here https://www.w3schools.com/cssref/ they cover almost everything related to CSS (and everything else related to HTML).

    5) This depends on the content of the widget and purpose, but it can be adjusted with the method I showed in my reply in this thread. Of course, if you need any assistance you can let us know.

    Thank you!

  • Profile Image

    Answered by Suzuki98 on June 12, 2017 at 03:29 AM

    Hello, 

    Thank-you!  That worked!  But I am still trying to understand it, so that next time, I can make the change myself.

    I am trying to locate how you knew the id was  #cid_309  (for example).

    Chrome ->  upper right hand corner the 3 vertical dots -> More tools -> Developer tools -> Element  (while on the web page with 'Health insurance" selected).

    I do not see what you have appended as a screen shot.   Is the above the correct way to get to the field id?  or?


    Thank-you!

  • Profile Image
    JotForm Support

    Answered by Nik_C on June 12, 2017 at 04:05 AM

    Here is how you find the appropriate ID of the field:

    1) Right click on a field and then Inspect:

    2) The elements section will open and it will automatically highlight the field:

    But the div you need is the one right above the marked section. And you will notice that because it will highlight the field in the upper part of the screen:

    So you move your cursor through the code in the bottom part and look what is marked in the upper part of the screen. Of course, you have to look at the code as well so you will be in the right div of the right field.

    Hope it makes sense.

    Let us know if you have any further questions.

    Thank you!