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 create a mask for phone numbers in the form?

    Asked by browningreagle on May 11, 2016 at 04:44 PM

    I'm creating a form that would allow our clients to send us updated contact info, and I'd like them to be able to enter multiple phone numbers if needed. Ideally, the hint text would display (###) ###-####, which is how I would like their phone number to be formatted.

     

    If possible, I like to have the field structured in one of two ways. One would be that the parentheses & hyphen are locked in and the typed numbers fill the appropriate spaces [(___) ___-____]. The other (which is probably simpler) option would be that after the user goes to the next field, the number they typed in would be auto-formatted [1234567890] >> [(123) 456-7890]. I don't have any preference between the two, but the field should only allow numbers.

     

    Is it possible to accomplish this?



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    phone number mask input
  • Profile Image
    JotForm Support

    Answered by Nik_C on May 11, 2016 at 05:28 PM

    You can achieve that by following this guide:

    1. Add Phone field to your form:

    2. When you click on Phone field you can turn on and adjust the mask of field:

    3. There you should be able to create a mask that you want.

    Please let me know if you have any further questions.

  • Profile Image

    Answered by browningreagle on May 16, 2016 at 10:05 AM

    Thanks for your reply Nik!  However, I was already aware of this feature.  I probably should've clarified more in my original post, but I'm trying to accomplish the same thing using the Configurable List widget.  I want users to be able to add more than one phone number for updating contact info, and I'd like them to be able to specify which type of phone number it is (e.g. home, work, cell, etc).

    See below for a screenshot of what I'm aiming for:

    I've pretty much got this set up the way that I want.  All that's left is inserting a custom CSS to accomplish the same masking shown in the above post.  Can this be done?

    Thanks!

  • Profile Image
    JotForm Support

    Answered by david on May 16, 2016 at 11:42 AM

    Unfortunately, input masking is not available for the configurable list widget.  Masking, as far as I know, cannot be applied via CSS. 

  • Profile Image

    Answered by browningreagle on May 16, 2016 at 12:43 PM

    Thanks for clarifying this David!  Although it's disappointing, we can make do without the masking.  The only other thing I'm stumbling on right now with Custom CSS is that I figure out how to customize the column with the dropdown.

    I started with: .col3 input[type="dropdown"]  but that didn't work.  I've tried numerous variations, but nothing works.  Is the dropdown field unable to be customized via CSS?  All I'm trying to do is change the margin, which I've already done for the other fields.

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by david on May 16, 2016 at 02:06 PM

    Try this code instead:

    th.col3 {

    text-indent: 29px;

    }

    td.col3 select {

    margin-left : 29px;

    }

    That should indent both the column header text and the dropdown input for column 3.

  • Profile Image

    Answered by browningreagle on May 16, 2016 at 02:39 PM

    Thanks David!  I was able to use this to tweak the appearance to what I wanted.

  • Profile Image
    JotForm Support

    Answered by david on May 16, 2016 at 02:44 PM

    Very welcome!  If there is anything else we can assist you with, let us know and we will be happy to help.

  • Profile Image

    Answered by browningreagle on May 18, 2016 at 05:08 PM

    Alright, so now that I know that input masking isn't an option, I was wondering about an alternative.  However, I'm not sure whether or not it falls in the same category...  Is it possible to require a minimum number of characters in a Configurable List field?

  • Profile Image
    JotForm Support

    Answered by david on May 18, 2016 at 06:25 PM

    Character limits are also not available for the configurable list widget.  There have been previous requests for this feature for several of the field types allowed in the widget, however, none of these requests have gained much traction.  It looks like it is something that is not likely to be added.

  • Profile Image

    Answered by browningreagle on May 19, 2016 at 09:19 AM

    Thanks for the update David!