How do I fix the width of the phone number input fields

3. The input field for phone numbers is smaller than the 10 digits in a number.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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

Hello Russ563,

On behalf of my colleague, you are welcome.

Do get back to us if you have any questions.

Thank you!