Embedded form is not displaying in full height on mobile phones

  • playmakersource
    Asked on October 15, 2015 at 9:02 AM

    I copied the script to embed my form on a wordpress site.  The form displays fully via laptop however when I open it on my mobile phone, the bottom of the form gets cut off.  

    Jotform Thread 682079 Screenshot
  • playmakersource
    Replied on October 15, 2015 at 9:33 AM

    As you can see, you can only select a few products but cannot see the submit button.  Please help. 

  • Elton Support Team Lead
    Replied on October 15, 2015 at 10:42 AM

    You seem to have used the direct link of the form on your page.

    May we know if you have tried embedding your form using iframe embed code? If not, please try it and let us know how it goes.

    If you can also provide us a test page where we can see the embedded form on your site (not using its direct URL), we'd appreciate it. This would help us troubleshoot the problem further.

    We'll wait your updates.

  • playmakersource
    Replied on October 15, 2015 at 10:49 AM

    I have tried to embed the code already.  I took the embed code out because customers are still accessing this page so i simply used the direct link for now.

    As you can see when I had the embed code in, the above picture shows that it cuts off the submit button area of my form when I try to access the page with my mobile device.  It works fine on a compute but most of my prospects use their phones.

     

    Here is a non published page of the embed code (first form) and the iFrame code (second form).  Please try accessing on mobile device to see what I mean by it being cut off at the bottom.  http://playmakersource.com/?page_id=2305&preview=true

  • playmakersource
    Replied on October 15, 2015 at 10:55 AM

    I dont think that page is working.  Try this http://playmakersource.com/test/

  • Boris
    Replied on October 15, 2015 at 12:50 PM

    Thank you for providing your test page that we can take a look at.

    When it comes to your script embedded form (the one at the top), I can see that it is almost fully displayed on mobile devices - but the Submit button is getting cut off at the bottom. We can forward this issue to our developers, because it looks like the form is not correctly resizing itself when viewed on a mobile device - such as on an iPhone 6.

    Embedded form is not displaying in full height on mobile phones Image 1 Screenshot 30

    The form is being cut off prematurely on a mobile device, due to this incorrectly calculated height. The Submit button correctly shows when the form is opened through a larger device, such as on a laptop:

    Embedded form is not displaying in full height on mobile phones Image 2 Screenshot 41

    When it comes for the second form which is embedded through iFrame, it is not being fully displayed because its height is set to 514 pixels in the embed code, and the form needs more height in order to be fully displayed.

    You can try increasing its height to 2080 pixels, and see how the iframe embedded form displays then:

    <iframe
          id="JotFormIFrame"
          onDISABLEDload="window.parent.scrollTo(0,0)"
          allowtransparency="true"
          src="https://form.jotform.com/52653126153955"
          frameborder="0"
          style="width:100%;
          height:2080px;
          border:none;"
          scrolling="no">
        </iframe>

    I have

  • playmakersource
    Replied on October 15, 2015 at 1:03 PM

    Jot form thank you very much!  The iFrame embed code is the solution and increasing the height for my form has worked!  Displays on mobile now.  Thanks for your quick response!

  • Kiran Support Team Lead
    Replied on October 15, 2015 at 3:28 PM

    You are welcome. Glad to see that the issue is now resolved for you. I also see that the issue has been forwarded to our backend team to take a look. Once we have any update in this regard, you'll be posted through this thread.

    If you need any further assistance, please let us know. We will be happy to help.

    Thanks!