Clickfunnels: embedded form can not be filled out

When I get to the 2nd page of my form on mobile it won't let me select the dials or type anything

www.tarenterrill.com/apply

Hello,

There must be embedding issue on your web page. The form is not displayed on several browsers and the problem you reported are caused with it. Can you please provide us some more information on how do you build the web page, so we could search for possible proper solutions?

Thank you.

I use clickfunnels I copied the iframe code into my js/html code area on the site. 

I use the same code but adjust the height and width for mobile and different height and width for desktop

The code below is my mobile code

 <iframe id="JotFormIFrame-81828782231158" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/81828782231158" frameborder="0" style="width: 1px; min-width: 100%; height:630px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-81828782231158"); 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[(args.length - 1)]); } 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; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); 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>

Hello again,

I was checking your web page and it appears that you have 2 iframes with forms. May we know why you have added 2? In general it should work properly when you embed a form for ALL devices:

As you have shared the code you used for mobile version, it still has a script part. Please remove it. Try using this code:

<iframe id="JotFormIFrame-81828782231158" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/81828782231158" frameborder="0" style="width: 1px; min-width: 100%; height:630px; border:none;" scrolling="no" > </iframe>

Let us know how it goes.

Thank you.

I fixed it and it's still not working on mobile here is the code and I changed it to mobile only. When you get to the 2nd page of the survey it stops working.

Also, what would I put in the code to fix the space between the video and the survey on desktop? 

The form is now showing on mobile on my end, I was able to fill it out here:

The bottom JotForm branding cannot be removed unless you're using a paid account. To adjust it's position, inject the following CSS code that moves the form fields upwards to show the navigation at the bottom:

#header_1{

margin-top: -2%;

margin-bottom: -10px;

}

#progressjs-container{

  margin-top: -11px;

margin-bottom: 1px;

}

#cid_1{

  margin-top: -14px;

}

This will enable the bottom navigation to show on page 2,3,4 etc.

Yes the 1st page on mobile works but when you get to the 2nd page it does not work

For some reason it’s working now but how do I fix this?

It’s cutting off the bottom on mobile 

Thank you for updating us.

Perhaps, you need to increase the height of an iframe for the mobile layout. Since your form is embedded without script code, you should set the height of the biggest page of your form. Here is the value, which I suggest to increase at your code:

<iframe id="JotFormIFrame-81828782231158" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/81828782231158" frameborder="0" style="width: 1px; min-width: 100%; height:630px; border:none;" scrolling="yes" > </iframe>

Alternatively, you can change scrolling to "yes" in the above code.