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 enable input mask for the phone number field

    Asked by jspaniol on June 02, 2016 at 11:08 AM
    Support team,
     
    Please see my clients request below and advise how we can adjust the form, Thank you in advance for your time!
     
    We shouldn’t allow to click on “submit for quote” if the following criteria are not respected:
    Number of digits for phone number should be 3 in the first field (area code) and 7 in the second field (phone number) Email can’t finish with an invalid format like “.fff” The address should be captured as well like the other information

    Best,

     

    Jessica Spaniol

    Aronson Advertising

    847-297-1700

    j.spaniol@aronsonads.com

    Page URL:
    http://www.lexussantamonica.com/dryve-concierge-service?cs:a:i=introTi<br/>leWidget_PICK_UP_DROP_OFF_WE_COME_TO_YOU_

    Screenshot
    adjusting phone number format div 3
  • Profile Image
    JotForm Support

    Answered by Nik_C on June 02, 2016 at 01:05 PM

    I checked your form, and regarding a phone field, I would advise you to turn on input phone mask:

    That will make your phone field like you wanted: three numbers for area code an seven number for phone number.

    Now regarding the email field, I see that you already have validation for email field but that checks only @ sign.

    So to increase validation you could turn on Confirmation email and Disallow Free Addresses:

    Please let us know if that helps you.

     

    Thank you!

  • Profile Image

    Answered by jspaniol on June 02, 2016 at 01:45 PM
    Nik_C,

    Thank you for getting back to me. I updated all the settings that you advised,but you still can't enter an area code in phone number section. How do we fix this?

    Best,


    Jessica Spaniol
    Digital Strategist
    Aronson Advertising
    1105 Remington Rd - Suite A
    Schaumburg, IL 60173
    847-297-1700
    j.spaniol@aronsonads.com


    ...
  • Profile Image

    Answered by victor on June 02, 2016 at 03:00 PM

    To obligate users to enter the correct phone number, validating the mask, you need to enable to option FILL MASK VALIDATION

    This will give an error if the user does not enter a correct phone phone number.

     

  • Profile Image

    Answered by jspaniol on June 02, 2016 at 03:45 PM
    I already did that.

    Jessica Spaniol
    Digital Strategist
    Aronson Advertising
    1105 Remington Rd - Suite A
    Schaumburg, IL 60173
    847-297-1700
    j.spaniol@aronsonads.com


    ...
  • Profile Image

    Answered by jspaniol on June 02, 2016 at 03:45 PM


    Jessica Spaniol
    Digital Strategist
    Aronson Advertising
    1105 Remington Rd - Suite A
    Schaumburg, IL 60173
    847-297-1700
    j.spaniol@aronsonads.com


    ...
  • Profile Image

    Answered by jspaniol on June 02, 2016 at 03:45 PM
    Do you have any thoughts on how to fix this? Again, thank you for your time!

    Jessica Spaniol
    Digital Strategist
    Aronson Advertising
    1105 Remington Rd - Suite A
    Schaumburg, IL 60173
    847-297-1700
    j.spaniol@aronsonads.com


    ...
  • Profile Image
    JotForm Support

    Answered by david on June 02, 2016 at 05:15 PM

    Under the options for the field, change the validation to "fill mask".  Click on the field, then click on the little gear icon to bring up the options:

     

  • Profile Image

    Answered by jspaniol on June 02, 2016 at 06:45 PM
    I'm sorry to bother you again but I already did that as well :(


    Jessica Spaniol
    Digital Strategist
    Aronson Advertising
    1105 Remington Rd - Suite A
    Schaumburg, IL 60173
    847-297-1700
    j.spaniol@aronsonads.com


    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris on June 02, 2016 at 09:57 PM

    It is working fine when I tested your form. I am able to fill a value on phone field in accordance with the input mask format.

    The problem though is that the phone field is pretty small, it does not show the entire value. 

    To fix it, simply inject this CSS code to your form. This should expand the phone field.

    [data-type="control_phone"] .form-sub-label-container:first-child {

        width: 100%;

        margin-right: 0;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes (paste it into the bottom section)

    Expected result:

    Hope this helps!

  • Profile Image

    Answered by jspaniol on June 03, 2016 at 11:45 AM
    EltonCris,

    This worked! Thank you so much you have been very helpful! I hope you have a wonderful day!

    Jessica Spaniol
    Digital Strategist
    Aronson Advertising
    1105 Remington Rd - Suite A
    Schaumburg, IL 60173
    847-297-1700
    j.spaniol@aronsonads.com


    ...
  • Profile Image

    Answered by jspaniol on June 03, 2016 at 02:45 PM
    Hello can someone please assist with my clients request. I'm not sure what else we can do to make the form better in his eyes. Please disregard the complaint regarding white spaces.

    I don't think the form works at all now: there are 2 fields for the email now but it's not possible to fill in the first field and as a consequence there is an error message, the second one works but it's used to verify the first one (see image attached).

    Did your guys ever test it?


    Minor improvements:
    is it possible to have the address as only one field that auto populate like googlemaps? It will streamline the process since some fields are not really necessary since we are serving only part of LA (e.g. State/Province or Country) Can you enlarge the AM/PM field? Currently I don't see what I selected (see image attached) Can you improve the layout in general? There are a lot of white spaces (visual gaps)




    Jessica Spaniol
    Digital Strategist
    Aronson Advertising
    1105 Remington Rd - Suite A
    Schaumburg, IL 60173
    847-297-1700
    j.spaniol@aronsonads.com


    ...
  • Profile Image

    Answered by victor on June 03, 2016 at 03:06 PM

    Since this tow question are not related to the thread, I have created the following that will be answered shortly

    https://www.jotform.com/answers/853434 in regards to the email confirmation field

    https://www.jotform.com/answers/853437 in regards to the address fields.

    We prefer having a question per thread, this way we do not get confused and give you the best possible answer.

  • Profile Image

    Answered by comfortexperts on October 25, 2016 at 04:52 AM

    hello.

     

    [data-type="control_phone"] .form-sub-label-container:first-child {

        width: 100%;

        margin-right: 0;

    }

     

    the above fixed the desktop version but not the mobile version. it is still short and cuts off the phone number on a smartphone. your help will be appreciated. thank you.

  • Profile Image
    JotForm Support

    Answered by liyam on October 25, 2016 at 06:55 AM

    Hello comfortexperts,

    I have moved your question on to a new thread. We will respond to the new thread in a short while.

    Thanks.