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

    Why does the "phone" field show up separated on 2 different lines/levels?

    Asked by Npedronan on May 07, 2017 at 07:04 PM

    When I view my form on mobile (iOS) the "phone number field" shows up in 2 different lines. 

     

    Viewed from desktop it looks fine, but viewed on my iPhone the area code and phone number are on 2 different levels which is very confusing for customers.

     

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Chriistian on May 07, 2017 at 08:52 PM

    I was able to replicate the issue on phone fields when viewing it on an iPhone emulator.

     

     

    Please allow me some time to further investigate. I'll get back once I've found results.
    Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 07, 2017 at 09:21 PM

    Thank you for your patience.

    Can you please try adding this custom CSS on your form and see if this helps to solve the issue on phone fiels?

    @media screen and (max-width: 600px){

      [data-type="control_phone"] 

      .form-sub-label-container + .form-sub-label-container {

        width: 50% !important;

    }

    }

     

    Here's the guide on How to Inject Custom CSS Codes.

    And here's how it should look like on your form after injecting the code:

    Please note also that since you are using the source code of your form when embedding the form on your site, you need to get the fresh code so that the changes will take effect on your site. How to get the Full Source Code of your Form.

    Hope this helps.
    Regards.

  • Profile Image

    Answered by Npedronan on May 07, 2017 at 09:43 PM
    In lieu of using the "phone number" field option i'm using "short answer"
    text field to solve this problem
    Thanks,
    *Nate Pedronan*
    *Operations Manager | Senior Consultant*
    *Inside Recruiter, LLC*
    nate@insiderecruiter.com
    424-258-0991
    www.InsideRecruiter.com
    Find us on Yelp
    | Company
    Website | Nate's LinkedIn

    ...