Form takes over entire page in Wordpress

  • zacharyh95
    Asked on May 24, 2017 at 2:44 PM

    Hello,

         The form I created is placed in a table on the page. The site is built using WordPress.org. When I preview the page, from the WordPress editor, it displays perfectly, however, when I took the site updates live the form has taken over the entire top of the page and the header and nav menu have moved to the bottom with the footer.

     

    I'd appreciate any help you can give in helping me to get the page to display correctly.

     

    Thank you,

    Zac Hourigan

    zacharyhourigan@gmail.com

     

    Jotform Thread 1153776 Screenshot
  • Elton Support Team Lead
    Replied on May 24, 2017 at 4:23 PM

    Hello Zac,

    I can see the problem on your website. If you have embedded the form code within a page, then it could be one of your plugin that automatically moves the script on the head tag. Because looking at your page source, the form code is placed between the head tag.

    Anyway, please try to use the iframe embed code of your form. See if this helps.

    1. Take your iframe embed code http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

    2. Then replace the code in your page. Make sure to place it under Text tab.

    Example:

    Form takes over entire page in Wordpress Image 1 Screenshot 20

  • zacharyh95
    Replied on May 24, 2017 at 6:43 PM
    Thank you for your reply. I have copied the iframe link and pasted it under the text section. When I try to preview it, as well as when I type in the live address, the bottom of the form is truncated. I have triple checked that I have copied all of the link text. The form field that is being truncated is the last field before the submit, reset, and print buttons.
    Booking Virginia Hunter Sampson Copy | Virginia Hunter Sampson

    |
    |
    |
    | | |
    |
    |
    |
    | |
    Booking Virginia Hunter Sampson Copy | Virginia Hunter Sampson
    var ifr = document.getElementById("JotFormIFrame-71338951184158"); if(window.location.href && ... | |
    |
    |


    On Wednesday, May 24, 2017 1:23 PM, JotForm wrote:

    New response received A new response has been received: Answered by EltonCris Hello Zac,I can see the problem on your website. If you have embedded the form codewithin a page, then it could be one of your plugin that automatically moves thescript on the head tag. Because looking at your page source, the form code isplaced between the head tag.Anyway, please try to use the iframe embed code of your form. See if thishelps.1. Take your iframe embed code http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.2. Then replace the code in your page. Make sure to place it under Texttab.Example: View this thread on browser » Unsubscribe Thread 1495657383

    ...
  • Chriistian Jotform Support
    Replied on May 24, 2017 at 10:18 PM

    By inspecting your site, I can see that there are script tags in the head tag of your site as what my colleague mentioned.

    Could you please try removing the Plugin first and try replacing it with the iFrame embed code only? 

    Form takes over entire page in Wordpress Image 1 Screenshot 20

     

     

    Please see if this helps. If you encounter again any issues, please let us know.
    Regards.

  • zacharyh95
    Replied on May 25, 2017 at 3:43 AM
    Hello,     I created a new page with nothing other than the header & footer (which occur automatically in the Word Press editor) and only added the text section with the iframe link.  It still does not display the bottom of the form. I do not know what 'plugin' is being referred to. Any additional information you can provide would be greatly appreciated.
         The page link is: http://virginiahuntersampson.com/Booking-copy/
    Thank you,Zac
    On Wednesday, May 24, 2017 7:18 PM, JotForm wrote:

    New response received A new response has been received: Answered by Chriistian By inspecting your site, I can see that there arescript tags in the head tag of your site as what my colleague mentioned.Could you please try removing the Plugin first and try replacing it with theiFrame embed code only?   Please see if this helps. If you encounter again any issues, please let usknow.
    Regards. View this thread on browser » Unsubscribe Thread 1495678724

    ...
  • Helen
    Replied on May 25, 2017 at 4:20 AM

    Hello Zac,

    Thank you for contacting us.

    Please remove your current iFrame script and try to embed with this iFrame code:

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

    Your form will shown as a screenshot above:

    Form takes over entire page in Wordpress Image 1 Screenshot 20

     

    I hope it helps. If you have any questions or issue please do not hesitate to contact us.