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

    Fields overlaps when viewed on tablet or mobile devices

    Asked by vailnick on October 15, 2015 at 09:25 AM

    Hi,

    I love the jotform ease-of-use!  We created a jotform for lead generation on our website.  It looks fantastic on PC, but I noticed that a drop down moves and covers another box when using a tablet or phone.  Is there anything I can do to fix this?

     

    Page URL:
    http://www.integritywa.net/p/complimentary-consultation

    Mobile JotForm pc love and
  • Profile Image
    JotForm Support

    Answered by Mike_G on October 15, 2015 at 11:10 AM

    I believe you are referring to the drop-down field, "How Did You Hear About Us?". It seems to look fine on my end. Here's how your form and website looks like viewing from an android phone.

    Your form:

    And when embedded on your website

     

    However, on a tablet (Samsung Galaxy Tab 5 10.1)

    Your form:

    And when embedded on your website

    The screenshot shown above shows that your form looks fine on devices. If you provide us the type of device where you're having issues viewing your form properly, that would be great. It would also help if you will provide us some screenshots. 

    Thank you.

  • Profile Image

    Answered by vailnick on October 15, 2015 at 02:45 PM
    When I view it on my iPad, it looks like the attached screenshot.
    [cid:1EE1E7F1-4045-4F7F-95B8-B2F0B6DC8C54]
    Nick Vail
    ...
  • Profile Image

    Answered by victor on October 15, 2015 at 05:39 PM

    Hi,

    I was able to replicate your issue. This should be solve using the "@media only screen" CSS code. I have not been able to solve the issue, but once I have the code I will let you know.

    Regards

  • Profile Image

    Answered by vailnick on October 15, 2015 at 08:45 PM
    Ok, great. I look forward to the solution. Thanks so much.
    Nick Vail CRPC
    Chartered Retirement Planning Counselor
    Financial Advisor
    Integrity Wealth Advisors
    Securities America Inc, Securities America Advisors
    8888 Keystone Crossing, Suite 1300
    Indianapolis, IN 46240
    Phone: 317-575-4110









    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on October 16, 2015 at 04:05 AM

    Hi Nick,

     

    I checked again your form on an iPad emulator but I was not able to replicate the issue.

     

    If you are still encountering the issue, can you try to re-embed your form in your website using the iFrame embed method and see if it will help? To get the iFrame embed code of your form, just follow the instruction provided in the screenshot below.

    I also noticed that the Responsive form setting of the form is set to "No", can you try to set this to "Yes"?

     

    Do let us know if the issue still persists.
    Regards.

  • Profile Image

    Answered by vailnick on October 16, 2015 at 09:45 AM
    What is the responsive form setting?
    Also, if I use the iFrame code, will it affect how the form looks on non-Apple devices?
    Nick Vail CRPC
    Chartered Retirement Planning Counselor
    Financial Advisor
    Integrity Wealth Advisors
    Securities America Inc, Securities America Advisors
    8888 Keystone Crossing, Suite 1300
    Indianapolis, IN 46240
    Phone: 317-575-4110









    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on October 16, 2015 at 10:25 AM

    Hi,

     

    Responsive form setting will re-size the forms in the controls based on the screen size of the device you are using to make it more mobile-friendly. I haven't tried the iFrame code in an non-apple device yet but it should work better than other embed methods.

     

    Also, we were not able to see your screenshot from your device. To properly upload an image in this forum, just click the image icon above.

     

  • Profile Image

    Answered by vailnick on October 16, 2015 at 01:45 PM
    Attached is the screen shot. Also, if I use the iFrame code, will it still look the same on non apple devices?
    Nick Vail CRPC
    Chartered Retirement Planning Counselor
    Financial Advisor
    Integrity Wealth Advisors
    Securities America Inc, Securities America Advisors
    8888 Keystone Crossing, Suite 1300
    Indianapolis, IN 46240
    Phone: 317-575-4110









    ...
  • Profile Image
    JotForm Support

    Answered by Mike_G on October 16, 2015 at 02:14 PM

    Using the iframe code, most of the time, prevents conflicts between your website scripts and your form scripts. Your form, embedded on your website, will just look the same on non-apple devices when using the iframe. Should there be an issue, let us know and we will glad to fix it for you.

    By the way, the screenshot you have posted is still not showing. Kindly follow the instruction on this thread on how you can post a screenshot to forums. 

    We will wait for your response. Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 16, 2015 at 02:29 PM

    I have used an iPad Mini 3 simulator and was able to see what you mean. 

    I'll get back with a solution. 

    Thank you. 

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 16, 2015 at 03:00 PM

    Using this guide: How-to-Inject-Custom-CSS-Codes

    Please insert this CSS codes to your form: 

    @media only screen 

    and (min-device-width : 768px) 

    and (max-device-width : 1024px)  {

    #id_5{

    padding-left: 180px !important;

    }

    }

    Once you've done that, it should look like this.

    I hope this helps. Let us know if you need any further assistance. Thank you. 

     

  • Profile Image

    Answered by vailnick on October 16, 2015 at 05:45 PM
    Fantastic. Thanks so much.
    Nick Vail CRPC
    Chartered Retirement Planning Counselor
    Financial Advisor
    Integrity Wealth Advisors
    Securities America Inc, Securities America Advisors
    8888 Keystone Crossing, Suite 1300
    Indianapolis, IN 46240
    Phone: 317-575-4110









    ...