Form not showing properly on FB Mobile

I am having a major issue. When people share/look at my webpage on FB Mobile app my Jotform is cut off and people are unable to see the entire form. This is a BIG issue as a lot of our customers use mobile. Is there a way to fix this? if not I may have to use another form app. 

www.insiderecruiter.com/get-started-.html

Thank you, 

-Nate

nate@insiderecruiter.com

Could you please try embedding your form by using the iFrame embed method, here is the code:

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

Also, I understood that the issue persists on FB right? Could you please provide the URL so we can check?

We'll wait for your response.

Thank you!

Hi, 

That code above does not work the form shows up black on my page. I have tried using the iFrame embed option with no luck.

Also i just confirmed that my jotform does not scroll EITHER when viewing my website in Facebook (my website is shared in a post) and it is also not scrollable when viewed in a regular browser on my iPhone. I also had a 3rd party check on their phone with the same issue with scrolling. This means the issue I am having is most likely with Jotform vs my website builder or something else.

 Some Solutions i've tried per previous forums:

I have tried increasing the height (example: height:1878px) and changed "scrolling="yes""

I changed the theme to a "mobile optimized theme"

"Make this form responsive" is selected"

Please help! 

Thank you!

My website link: http://www.insiderecruiter.com/get-started-.html

The Facebook post is in a private group so I am unable to share

I checked your web page's source code and this problem is actually related to the code of the web page and not the for itself. You have two divs that are overlapping the form and that's why the form is not showing fully:

First one is this:

And the second one is this one:

When I increased the height of those two elements form showed fine. 

Please try checking your code and let us know how it worked.

Thank you!

I am unable to increase those elements. I am using GoDaddy website builder and i do not have the option for adjusting those elements if that is the issue. I was able to use other forms in the past with no issue. 

Is there a way to do that using the Jotform code:

 <iframe id="JotFormIFrame-71151691784158" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.us/71151691784158" frameborder="0" style="width:1000px; height:1800px; overflow-x:hidden; overflow-y:scroll;" scrolling="yes"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-71151691784158"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

As I said in your other thread, you can try embedding by using the below code where height is decreased and scrolling is on:

<iframe id="JotFormIFrame-71151691784158" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.us/71151691784158" frameborder="0" style="width:100%; height:1200px; border:none;" scrolling="auto"> </iframe>

Let us know how it worked.

Thank you!