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

    Form not displaying correctly on Ipad

    Asked by Martinellis4 on September 23, 2015 at 05:04 PM

    My form seems to change format when viewed on an ipad.  Can you tell me why?

    I have attached the ipad screenshot.

     

    Thanks

    Page URL:
    www.ellisdrivingschool.co.uk/new-pupil

    Screenshot
    ipad form not displaying displaying correctly
  • Profile Image
    JotForm Support

    Answered by Chriistian on September 23, 2015 at 10:48 PM

    Hi,

     

    Your browser seem to change the format of the form. Have you tried using different browser? Do you still want the same styling applied as when viewed on desktop?

     

    We will wait for your response.

    Regards.

     

  • Profile Image

    Answered by Martinellis4 on September 24, 2015 at 02:21 AM

    Yes I would like the iPad to display as it looks on the laptop.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 24, 2015 at 03:42 AM

    Hi,

     

    I'm currently testing my cloned form with the custom CSS to be applied to fix it's ipad view. Please give me more time. I'll get back to you as soon as get this working.

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 24, 2015 at 03:54 AM

    Hi,

     

    Can you try to inject the custom CSS below and see if it fix the styling?

    @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

    #cid_10 {

    white-space: nowrap;

    }

    .form-sub-label-container {

    width: initial;

    }}

     

    To inject your custom CSS, there is a guide: How to Inject Custom CSS Codes.

     

    Do let us know if you need further assistance.

    Regards.

  • Profile Image

    Answered by Martinellis4 on September 24, 2015 at 08:22 AM

    Hi

    That seems better but the fields still spread across the whole page?

    how do I fix that? 

    Tm

     

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 24, 2015 at 12:08 PM

    Are you referring to the inputs for each of the fields with those stretched out the width of the screen on your device?

    This? -

     

    If I'm not mistaken I think you said you wanted that to look like the computer version instead? Or?

     

    Please confirm or correct me so that we can better assist you or let us know more about how you are needing it to look.

  • Profile Image

    Answered by Martinellis4 on September 24, 2015 at 04:01 PM

    I would like the form to be published as it looks in your bottom picture with the smaller boxes. 

    Thanjs 

  • Profile Image
    JotForm Support

    Answered by Mike on September 24, 2015 at 06:04 PM

    We have also added the next CSS to your form in order fix the layout.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    input[type=text], input[type=email], input[type=tel], textarea {
    width: initial !important;
    }

    The form should look similar on the iPad and desktop now. If you need any further assistance, please let us know.