Wordpress embedded form: Why isn't my form displaying in full?

  • calisthenfit
    Asked on September 9, 2017 at 8:04 AM

    I tried to embed my form with the iframe and also the javascript link.

    Both do not display the full length of the form but as page by page.

    I use Thrive Theme.

    How can I have the form display in full length?

    Have tried on chrome and on mobile with safari - same issue

    Wordpress embedded form: Why isnt my form displaying in full?  Image 1 Screenshot 30Wordpress embedded form: Why isnt my form displaying in full?  Image 2 Screenshot 41

  • Kevin Support Team Lead
    Replied on September 9, 2017 at 12:45 PM

    I have been inspecting your form and noticed what you're reporting. To resolve your issue I would recommend you to do the following: 

    1. Copy the iFrame code of your form as it allows to handle the form's height, guide: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    2. Once you have copied the embed code, remove the JavaScript part, it automatically calculates the form's height, removing it will allow you to manually set the height. 

    Example: 

          <iframe

            id="JotFormIFrame"

            onDISABLEDload="window.parent.scrollTo(0,0)"

            allowtransparency="true"

            src="https://form.jotformeu.com/72095901372355"

            frameborder="0"

            style="width:100%;

            height: 8815px;

            border:none;"

            scrolling="yes">

          </iframe>

    Please let us know how it goes. 

  • calisthenfit
    Replied on September 10, 2017 at 11:08 AM

    No it did not work!

    It displays the frame with the background and the title.

     

    <iframe id="JotFormIFrame-72506127165352" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/72506127165352" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-72506127165352"); 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>

    I removed that text highlight in red! Is that correct? Or which part should I remove and which part should I keep?

  • Charlie
    Replied on September 10, 2017 at 11:42 AM

    You can try removing the code you highlighted in red and re-embed the ones closed in <iframe> tag. 

    However, if you are still unable to make it work, try any of the following:

    Option #1: Try using this embed plugin for Wordpress https://wordpress.org/plugins/embed-form

    Option #2: When you re-embed the form, try this format:

    [embed]Your form URL or direct link here[/embed]

    Example:

    [embed]http://form.jotformpro.com/form/31362999175971[/embed]

     

    Let us know if any of those worked.

    PS: For mobile devices, you need to check your Wordpress website if the element holding the form has enough height to cover the full length of the form. You also need to adjust the height attribute of the iframe tag, which is mentioned by my colleague if you are using the iFrame embed code. 

    I hope that helps. 

  • calisthenfit
    Replied on September 10, 2017 at 5:16 PM

    This is the most frustrating and waste of my time lately to try to get this form setup as it should be!

    I don't understand your last answer.

    I've been using Wufoo for the past 3 years and embedding their code is simple: copy - paste and voila! it displays as it should be.

    Why can't it be the same with jotform?

    Please provide a video of your description because it makes absolutely no sense to me

    You can try removing the code you highlighted in red and re-embed the ones closed in tag. 

    However, if you are still unable to make it work, try any of the following:

    Option #1: Try using this embed plugin for Wordpress https://wordpress.org/plugins/embed-form

    Option #2: When you re-embed the form, try this format:

    [embed]Your form URL or direct link here[/embed]

    Example:

    [embed]http://form.jotformpro.com/form/31362999175971[/embed]

    Here what my screen looks like when I copy the embed code of the form in Thrive Architect:

    I removed the code in RED as mentioned above but then I am left with a blank screen with just the title of the form!

    Wordpress embedded form: Why isnt my form displaying in full?  Image 1 Screenshot 30

     Even when I go directly to the form link: https://form.jotformeu.com/72524943965366

    It does not display the form in full length but as pages ( see screenshot)

    Wordpress embedded form: Why isnt my form displaying in full?  Image 2 Screenshot 41

  • Kevin Support Team Lead
    Replied on September 10, 2017 at 5:49 PM

    Apologies for the inconveniences this may have caused to you. 

    As far as I can understand, you are using Thrive Architect to build your website: https://thrivethemes.com/architect

    I can see from your screenshot that you have embedded the iFrame code, but you seem to be including the JavaScript code. Please try using this code  instead, paste it on the "Type or paste  HTML code below" section: 

    <iframe id="JotFormIFrame-72506127165352" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/72506127165352" frameborder="0" style="width: 1px; min-width: 100%; height:450px; border:none;" scrolling="yes"> </iframe>

    I would also recommend you to let us know once you have embedded this code so we can further investigate why the form displays as empty while using this code. 

    We will wait for your response. 

  • calisthenfit
    Replied on September 11, 2017 at 4:22 AM

    Kevin,

    I copied and pasted the exact same code as you gave me but the form is still display as "page"

    Wordpress embedded form: Why isnt my form displaying in full?  Image 1 Screenshot 20

  • calisthenfit
    Replied on September 11, 2017 at 5:10 AM

    I was also wondering - when I preview my form, it also displays as "page" instead of the full screen.

    It might be a setting somewhere I can be changed for the display either in "full form screen" or as "page/step"?

    I did a test form from blank and on preview of the form, it displays as "page" too.

    Maybe that's the problem, and wonder How you can sort this out?

  • Ashwin JotForm Support
    Replied on September 11, 2017 at 5:22 AM

    There seems to be some confusion here. I did check your webpage where you have embedded your form and it seems to display correctly. Please check the screenshot below:

    Wordpress embedded form: Why isnt my form displaying in full?  Image 1 Screenshot 30

     

    Please note that you are using new form layout and it will only display one question at a time. If you want to display all the questions in one page, you will have to switch your form to "Legacy Layout". Please check the screenshot below on how to switch your form to "Legacy Layout":

    Wordpress embedded form: Why isnt my form displaying in full?  Image 2 Screenshot 41

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • calisthenfit
    Replied on September 11, 2017 at 5:39 AM

    Oh my goodness me!

    THANK YOU SO MUCH Ashwin, something so simple which I did not know.

    You saved my sanity :-)

    Thanks again!

  • calisthenfit
    Replied on September 11, 2017 at 8:33 AM

    OK, I thought my issue would have been resolved with Ashwin's help.

    However, I still deal with a dilemma when using the legacy form.

    The Submit button is missing at the end, after having entered all the details and cc number - I did a test payment using Stripe, and the "Submit" is not showing!

  • Kiran Support Team Lead
    Replied on September 11, 2017 at 10:34 AM

    I have checked your JotForm using the direct URL and see that there is no Submit button in the form itself. You may open the form in the build mode and add the Submit button to the form.

    Please get back to us if the issue still persists after adding Submit button to the form. We will be happy to take a look again.