Clickfunnels: embedded form can not be filled out

  • Profile Image
    tarenterrill
    Asked on July 04, 2018 at 04:01 PM

    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

  • Profile Image
    Victoria_K
    Answered on July 04, 2018 at 04:13 PM

    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.

  • Profile Image
    tarenterrill
    Answered on July 04, 2018 at 04:18 PM

    I use clickfunnels I copied the iframe 1530735478Screen Shot 2018-07-04 at 4.16code 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" onload="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>

  • Profile Image
    Victoria_K
    Answered on July 04, 2018 at 04:43 PM

    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:

    1530736867screenshotdjico.png

    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" onload="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.

  • Profile Image
    tarenterrill
    Answered on July 04, 2018 at 04:57 PM

    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.1530737798mobilecode.png1530737813mobileeditor.png

  • Profile Image
    tarenterrill
    Answered on July 04, 2018 at 04:58 PM

    Also, what would I put in the code to fix the space between the video and the survey on desktop? 1530737868desktopcode.png1530737882desktopeditor.png1530737897desktopview.png

  • Profile Image
    DonaldHag
    Answered on July 04, 2018 at 06:01 PM

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

    1530741436form showing on mobile.png

    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.


  • Profile Image
    tarenterrill
    Answered on July 04, 2018 at 06:05 PM

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

  • Profile Image
    tarenterrill
    Answered on July 04, 2018 at 06:12 PM

    For some reason it’s working now but how do I fix this?1530742314204FD132-18C5-43DF-886A-F73BAC

  • Profile Image
    tarenterrill
    Answered on July 04, 2018 at 06:13 PM

    It’s cutting off the bottom on mobile 

  • Profile Image
    Victoria_K
    Answered on July 04, 2018 at 06:26 PM

    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" onload="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.