How to enable input mask for the phone number field

  • jspaniol
    Asked on June 2, 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

    Jotform Thread 852159 Screenshot
  • Nik_C
    Replied on June 2, 2016 at 1:05 PM

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

    How to enable input mask for the phone number field Image 1 Screenshot 30

    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:

    How to enable input mask for the phone number field Image 2 Screenshot 41

    Please let us know if that helps you.

     

    Thank you!

  • jspaniol
    Replied on June 2, 2016 at 1: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


    ...
  • victor
    Replied on June 2, 2016 at 3:00 PM

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

    How to enable input mask for the phone number field Image 1 Screenshot 20

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

     

  • jspaniol
    Replied on June 2, 2016 at 3: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


    ...
  • jspaniol
    Replied on June 2, 2016 at 3:45 PM


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


    ...
  • jspaniol
    Replied on June 2, 2016 at 3: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


    ...
  • David JotForm Support
    Replied on June 2, 2016 at 5: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:

    How to enable input mask for the phone number field Image 1 Screenshot 20

     

  • jspaniol
    Replied on June 2, 2016 at 6: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


    ...
  • Elton Support Team Lead
    Replied on June 2, 2016 at 9: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.

    How to enable input mask for the phone number field Image 1 Screenshot 30

    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:

    How to enable input mask for the phone number field Image 2 Screenshot 41

    Hope this helps!

  • jspaniol
    Replied on June 3, 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


    ...
  • jspaniol
    Replied on June 3, 2016 at 2: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


    ...
  • victor
    Replied on June 3, 2016 at 3: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.

  • comfortexperts
    Replied on October 25, 2016 at 4: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.

  • liyam
    Replied on October 25, 2016 at 6: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.