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

    Still having problems with form display on mobile devices

    Asked by George Thompson  on June 25, 2016 at 01:12 AM

    Hi

    Further to previous contacts I have reverted all my forms back to a time when they displayed properly.

    I have embedded a form on a separate page to avoid any conflict with the site main pages and embedded the form as an iframe see http://www.phuketacetours.com/ppcruiserbook.html

    It displays correctly on my desktop but on ipad and iphone the Name field and Date field burst out of their boxes

    Please can you help.

     

    Kind regards

    George

    Page URL:
    http://www.phuketacetours.com/ppcruiserbook.html

    mobile display
  • Profile Image
    JotForm Support

    Answered by Welvin on June 25, 2016 at 07:07 AM

    The theme that you are currently using is currently not set to be responsive. I'm working on this now and I'll let you know later. 

  • Profile Image
    JotForm Support

    Answered by Welvin on June 25, 2016 at 07:24 AM

    I have injected the following custom CSS codes to your form:

    @media only screen and (max-device-width: 700px) {

    .form-line-column {

        width: 100%;

    }

    }

    @media only screen and (max-device-width: 768px) {

    [data-type="control_fullname"] .form-sub-label-container {

       width: auto !important;

    }

    [data-type="control_datetime"] .form-sub-label-container {

       width: auto !important;

    }

    .form-textarea {

        width: 100% !important;

        white-space: normal;

    }

    }

    Now, I would suggest changing the entire HTML codes in your website to the following: http://pastiebin.com/576e696beab8b

    You can check the result in this page (this is using your form): https://shots.jotform.com/welvin/html/869187-form.html