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

    Increasing the width of the Phone field

    Asked by MaggieJedlicka on July 30, 2016 at 02:31 PM
    Now, I have 1 little issue.  I need my PH# (Phone) fields to be longer to fit the entire ###-###-#### in the field.  Tried in Designer to expand, no luck.  I just need the PH# longer so that the entire mask is exposed.
    increase increase width phone field css custom css
  • Profile Image
    JotForm Support

    Answered by Jan on July 30, 2016 at 02:36 PM

    You will need to insert this custom CSS code in order to increase the width of the Phone fields. Here's the CSS code:

    #input_26_full, #input_30_full, #input_31_full, #input_32_full {
    width: 150px !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Hope that helps. Thank you.

  • Profile Image

    Answered by MaggieJedlicka on July 30, 2016 at 06:33 PM

    Well, I tried that with no luck...  Attached screen print.. I put in the CSS with no change, so I expanded only the 1st line, and put the PH# on a separate line.  You can see there are 2 different widths of the PH# boxes.  Seems to be something with trying to fit 3 elements on a line and fitting.  The width of the form is 1000px.  I want the FIRST NAME, LAST NAME and PH# on the same line, with enough  width in the PH# field to see the full phone number ###-###-####.  Help!  Thanks! MJ

  • Profile Image
    JotForm Support

    Answered by Jim_R on July 31, 2016 at 01:55 AM

    Hey again MJ :) I cloned your form and noticed you already have the CSS codes in place. Sadly, you missed the exclamation prefix on the important tag:

    #input_26_full, #input_30_full, #input_31_full, #input_32_full {

        width : 200px important;

    }

    (it should have been !important)

    To fix this, just remove the important tag altogether, it will and should work by just declaring the width:

    #input_26_full, #input_30_full, #input_31_full, #input_32_full {

        width: 200px;

    }

    And here's how it will look like after those changes:

    As a side note, I noticed your first row still shows the PH# field below the FULL NAME field. Just SHRINK it the way you did on the other 3, then make the changes to the CSS Codes you already have in place.

    Give it a go and let us know if you'll need more help.

  • Profile Image

    Answered by MaggieJedlicka on July 31, 2016 at 10:09 AM

    AHHHH! My bad!  I'm so lame...but you, you are so wonderful!!!

    Thanks for having my CSS back..

    Your Jotform grasshopper,

    Maggie!

  • Profile Image
    JotForm Support

    Answered by Jim_R on July 31, 2016 at 11:06 AM

    Nah, we've all been there :)

    It's always a pleasure to help, hope you enjoy the rest of the weekend!