How to change the width of the Phone Number field

  • Profile Image
    tallinjohnson
    Asked on January 25, 2017 at 03:31 PM

    Thanks for the update. Is there anyway to change the width of the phone number field? 

    Thanks

  • Profile Image
    Jim_R
    Answered on January 25, 2017 at 03:38 PM

    I'm assuming you're working on this form https://www.jotform.com/63565405800150

    I noticed you still don't have the Phone Number field added there, so I cloned your form and came up with this https://form.jotform.com/70246020345949

    To achieve that, here's what I did:

    1. Add the Phone Number field.

    2. Remove the Label, then add a Placeholder so it looks uniform with the rest of the form

    3. Inject the following CSS Codes:

    #input_22_area {

       width: 80px;

    }

    #input_22_phone {

       width: 131px;

    }

    #sublabel_area, #sublabel_phone {

       display: none;

    }

    I adjusted the width of the Phone Number field, and hid the sublabels to keep things uniform.

    4. Here's where/how the codes were injected:

    Complete guide: How-to-Inject-Custom-CSS-Codes

    5. And lastly, delete the previous Textbox you had for the phone number (I haven't done this on my cloned form yet).

    RESULT: