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 fix the width of the phone number input fields

    Asked by Russ563 on March 07, 2015 at 08:54 AM
    3. The input field for phone numbers is smaller than the 10 digits in a number.
    mask value mask validation phoe validation
  • Profile Image

    Answered by Sean on March 07, 2015 at 10:03 AM

    Please add this CSS code to  your form to adjust how the number field is shown

    #cid_96{height: 125px !important}
    #input_26_area{width: 60px !important;}
    #input_26_phone{width: 100px;}
    .form-sub-label-container:first-child{width: 80px !important;}

    Do let us know if further assistance is needed.

    Cheers!

  • Profile Image

    Answered by Russ563 on March 07, 2015 at 11:02 AM

    Does not fix the problem.

    It make the whole gray box a fixed width, which I don't want.

    And the number input field size didn't change.

    But worse yet, it made the input fields on the address question way too small just like the phone number fields.

  • Profile Image
    JotForm Support

    Answered by BJoanna on March 07, 2015 at 11:29 AM

    Please try adding this code inside of your CSS:

    #input_25_full {

    width:125px;

    }

    It should like this.

     

    Let us know if you need further assistance.

  • Profile Image

    Answered by Russ563 on March 07, 2015 at 12:06 PM

    Yes, that fixes 1 of the 6 phone number fields, I should be able to fix the others myself.

    But I don't understand why it isn't automatic. With the input mask off, it is the right size, when the input mask is turned on, the field gets too small.

     

    Edit:

    All fixed.

    But now I noticed it does not require a 10 digit number (not sure if it did before), all that needs to be entered is 1 digit.

  • Profile Image
    JotForm Support

    Answered by BJoanna on March 07, 2015 at 12:45 PM

    Sorry about that I did not notice that there are 6 number fields. Instead of previous code provided  insert this :

    #input_25_full, #input_27_full, #input_56_full, #input_63_full, #input_64_full, #input_89_full {width:125px;}

    This code will be applied to all 6 number fields. 

    Let us know if you need further assistance.

  • Profile Image

    Answered by Russ563 on March 07, 2015 at 01:15 PM

    All fixed.

    But now I noticed it does not require a 10 digit number (not sure if it did before), all that needs to be entered is 1 digit.

    And I don't understand why it isn't automatic.

  • Profile Image
    JotForm Support

    Answered by BJoanna on March 07, 2015 at 01:56 PM

    Phone number fields which were impacted by CSS changes are tested one more time by us and we can enter only 10 digits in those fields. Phone number that have area code are only 'phone number' field in which you can add more then 10 digits. 

    And regarding your question why this options are not automatic, please understand that we weren't able to locate the glitch in the CSS that could be causing this problem with width/height of fields so we took another route of targeting those fields individually and Injecting Custom CSS for fixing problem. 

    Let us know if you need further assistance.

  • Profile Image

    Answered by Russ563 on March 07, 2015 at 03:14 PM

    I'm not looking to enter more than 10 digits, the problem is entering LESS than 10 digits.

    That makes it an incomplete phone number.

  • Profile Image
    JotForm Support

    Answered by jonathan on March 07, 2015 at 05:00 PM

    In my understanding of the issue you were trying to tell us, it was actually the issue that you can still submit successfully the form even when the Phone field number of digits is not correctly validated according to the required number of digits set in the mask input.

     

    Example, in your jotform http://www.jotform.us/form/41748752369164, if you fill in less than 10 digit phone number in the Phone Number field, you can still complete the submission of the form -- when in actual, the Phone number is suppose to be invalid (did not meet required number of digits)

    If this is the issue you were reporting, you can correct this by enabling the option in the Mask Value property Fill Mask Validation .

     

    This will now prevent the submission if the Phone number field does not meet the required number of digits set in the Input Mask Value.

     

     

    Hope this help. Please let us know if still not resolved.

    Thanks.

  • Profile Image

    Answered by Russ563 on March 09, 2015 at 10:27 PM

    Thank you. I missed the 'Fill Mask Validation'.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 10, 2015 at 03:07 AM

    Hello Russ563,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!