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

    Text-box fields not working on mobile devices

    Asked by soulsong on March 30, 2015 at 08:07 AM

    Hi

    I have created a simple form which works perfectly on the computer: 

    http://form.jotformpro.com/form/50882940001953

    However when trying to fill the form in on a mobile device, the phone and email fields will not work.  They do not allow you to type anything in but come up with a field required message if you try and move on (which is what I want).  

    It is the same on an iPhone and a Galaxy S5.

    I have deleted the fields and replaced with blank text fields and new fields and none of them work.

    Help?

    Thanks

    Jacqueline

    Page URL:
    http://form.jotformpro.com/form/50882940001953

    Mobile devices message fill move
  • Profile Image

    Answered by Carina on March 30, 2015 at 11:32 AM

    I tested and could replicate the same situation:

     

    I believe it is connected with the theme/styles associated with the form. I will perform further tests to try to correct the situation. I will contact you later with more results.

    Let us know if we can assist you further.  

  • Profile Image

    Answered by Carina on March 30, 2015 at 04:17 PM

    Please try adding this css code:

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

    .form-input input[type="text"], .form-input input[type="email"], .form-input input[type="phone"], .form-input input[type="number"], .form-input input[type="tel"], .form-input-wide input[type="text"], .form-input-wide input[type="email"], .form-input-wide input[type="phone"], .form-input-wide input[type="number"], .form-input-wide input[type="tel"] {

            width: 180px !important;

    }

    From my tests it solved the situation.

    Let us know if the problem persists.