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 visible on mobile

    Asked by TPixJohn on May 16, 2016 at 06:19 PM

    Hi,

    I like the form builder (it takes a little work, but produces a good form) but I cannot get it to show on mobile devices of any size - when embedded on my own site.

    Embed code: <script type="text/javascript" src="https://form.jotformeu.com/jsform/61365720370350"></script>

    Embed test page - http://www.twistedpixelsphotography.com/testimonials/29-photo-order

    It will work on your site with the direct link, but I need to embed it on a few of pages with related items. 

    I have tried both the default theme and a number of ready-made "responsive" themes and ensure the "Make this form Responsive" check-box is ticked in Design Mode.

    Can you help please?

    Page URL:
    http://www.twistedpixelsphotography.com/testimonials/29-photo-order

    Screenshot
    Mobile not visible visible jsform script
  • Profile Image
    JotForm Support

    Answered by jonathan on May 16, 2016 at 10:25 PM

    Please try first re-embedding your form https://www.jotformeu.com/form/61365720370350 on your website using its iframe embed publish code instead.

    User guide: Getting-the-Form-iFrame-Code

    Make sure to remove first the previous published script code of the form on your website before you add it again using the iframe embed.

    It seems that script conflict was causing the problem because there were also other jquery scripts existing on your website page. So using the iframe embed should prevent the conflict.

    Let us know if issue still persist.

  • Profile Image

    Answered by TPixJohn on May 17, 2016 at 07:22 AM

    Hi and thank you for the quick response on this.

    I have a partial success now; the form shows but only a small portion at the beginning. The rest disappears down behind the page footer.

    I have tried removing the fixed height value at the start of the iframe code and using a div styled with clear:both as a break after the iframe, but this hasn't worked worked.

    Any ideas?

  • Profile Image

    Answered by Carina on May 17, 2016 at 10:12 AM

    I could replicate the same situation:

    I will make further tests and will let you know as soon as I have more details.

    Let us know if we can assist you further.   

  • Profile Image

    Answered by TPixJohn on May 17, 2016 at 02:56 PM

    Thank you,

    I appreciate you help and I hope you can resolve this.

  • Profile Image

    Answered by victor on May 17, 2016 at 04:57 PM

    When reviewing your form I noticed that it did not have the RESPONSIVE FORM enabled. Can you enable this from the PREFERENCE settings and let us know if this helps.

     

  • Profile Image

    Answered by TPixJohn on May 17, 2016 at 05:14 PM

    Believe it or not, that actually made the problem worse. The form is now also truncated slightly before the end even on larger screens. - see attached "before" and "after" screen grabs.

    Also, I'm confused about that Responsive setting there - I thought there was just the one setting for "Make this form responsive" in the Design mode underForm Layout.

    Is there any easy way to stop the form truncating on mobile devices while also not causing an issue on larger screens.

    Thanks for your continued efforts on this.

    Before:

     

    After:

  • Profile Image

    Answered by victor on May 17, 2016 at 08:55 PM

    Thank you for the update. Can you please try adding the following widget. This widget was created for the forms that had problems with mobile devices.

    Also please clear your browsers cache and cookies. Please let us know if this helps.

  • Profile Image

    Answered by TPixJohn on May 18, 2016 at 04:51 AM

    Hi, Sorry... that didn't really help.

    It removed the problem of truncating the end of the form on Laptop/Desktop, but the issue on mobile devices persists.

  • Profile Image
    JotForm Support

    Answered by Charlie on May 18, 2016 at 10:10 AM

    I believe this is more related on the design you have on your website, noticed that the form is actually behind the footer as you have already know. The design on this is because of the parent element <div class="tpixresponsive-embed"></div>. That wrapper is trying to add a 50% padding at the bottom, moving it's own position, however, the form does not move at all:

     

    If you remove the class name tpixresponsive-embed for the <div> element, you'll see that the form will try to make itself mobile responsive. Here's how it looks like:

     

    The result above may not be accurate because the change was directly made on the page source in my browser, not on the website. However, it should technically resolve the problem you are having with the footer on top of the form.