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 to change the width of the Phone Number field

    Asked by tallinjohnson 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
    JotForm Support

    Answered by Jim_R 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: