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

  • Profile Image
    calisthenfit
    Asked on September 09, 2017 at 08: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

  • Profile Image
    Kevin_G
    Answered on September 09, 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"

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

  • Profile Image
    calisthenfit
    Answered 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" onload="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?

  • Profile Image
    Charlie
    Answered 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. 

  • Profile Image
    calisthenfit
    Answered on September 10, 2017 at 05: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!

     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)

  • Profile Image
    Kevin_G
    Answered on September 10, 2017 at 05: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" onload="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. 

  • Profile Image
    calisthenfit
    Answered on September 11, 2017 at 04:22 AM

    Kevin,

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

  • Profile Image
    calisthenfit
    Answered on September 11, 2017 at 05: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?

  • Profile Image
    ashwin_d
    Answered on September 11, 2017 at 05: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:

     

    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":

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image
    calisthenfit
    Answered on September 11, 2017 at 05: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!

  • Profile Image
    calisthenfit
    Answered on September 11, 2017 at 08: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!

  • Profile Image
    Kiran
    Answered 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.