What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Captcha not showing at the bottom of embedded form

    Asked by Jessrk on January 06, 2014 at 06:37 AM

    Hi, I am having a problem now with my captcha at the bottom of my page here

    http://www.jessrk.com/weddingcontest.html

    I read your thread here:

    http://www.jotform.com/answers/256384-My-captcha-at-the-bottom-of-some-forms-wont-load

    ... and so then enabled recaptcha (which shows on the form normally, but not the embedded one on the link above).

    I have tried this on both Chrome and Safari. It's showing the old captcha on both and it's not loading.

     

    Help?

    Page URL:
    http://www.jessrk.com/weddingcontest.html

    JotForm problem style size
  • Profile Image

    Answered by Jessrk on January 06, 2014 at 06:42 AM

    Ok... I figured out that I had to repaste the DW code after each change so that's why the changes weren't showing up. The recaptcha works now.

    BUT... this should not be... 

     

    I will start a new thread with this question as not to confuse...

  • Profile Image

    Answered by jedcadorna on January 06, 2014 at 09:54 AM

    Hi,

    Thank you for contacting us. This only happens if you embed the form using your form source as every changes made in your form you need to copy and paste the new form source code. You can try using the other embed code and see which works on your website. Normally if you some codes that conflict in your form occurs what you can try is the Iframe code this should solve the script conflict and will allow you to see the update instantly on your website. 

  • Profile Image

    Answered by Jessrk on January 06, 2014 at 10:03 AM

    Yes... I see that I had to paste every time. That should not be though.

    So, I have used iframe...

    I can't test it because my SUBMIT button is cut off at the bottom.

    Ideas?

    http://www.jessrk.com/weddingcontest.html

  • Profile Image

    Answered by jedcadorna on January 06, 2014 at 10:30 AM

    Hi Jessrk,

    Please try adjusting the height of your iframe code to 5000px or above to give space for your submit button.

    Your iframe Code:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotformeu.com/form/40051430950341" frameborder="0" style="width:100%; height:5800px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

  • Profile Image

    Answered by Jessrk on January 06, 2014 at 10:40 AM

    This is all I have in my html code.

    The height doesn't match your screen shot, but when I do change it (as I have below) and then reupload my site, it STILL says that my height hasn't been changed. Is the form overriding it or something? Is there a way to change it IN jotform? I only see width

     

      <br />

      <br /><iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/40051430950341" frameborder="0" style="width:100%; height:5800px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

      <br />

  • Profile Image
    JotForm Support

    Answered by ardy0689 on January 06, 2014 at 12:32 PM

    Thank you for updating us. You should omit out the script part of the IFRAME embed and just use this code from my colleague:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotformeu.com/form/40051430950341" frameborder="0" style="width:100%; height:5800px; border:none;" scrolling="no"></iframe>

    This script below dynamically changes the height of the IFRAME so if should in case you have the need to manually set a height, you should exclude the script and just use the IFRAME code above partially.


    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Let us know if this issue persists after doing the above. Thank you

  • Profile Image

    Answered by Jessrk on January 06, 2014 at 12:35 PM

    Not sure what the difference is between what they gave me in the other thread and what you;ve posted here, but that one worked. 

    Also, WHY is this not given to us in the embedding window? Why wouldn't it already be shortened?

     

    thanks for the help.


  • Profile Image

    Answered by jedcadorna on January 06, 2014 at 01:15 PM

    The script part dynamically changes the form height where in if the script is omitted you get a fixed height so for example you have added some content in your webpage without the script section your form will not adopt to the size of your webpage this means that you have to manually adjust it. Nowadays not all users are using PC's or Laptop to browse your form some of them uses mobile device like iPhone and Android I guess that is the function of the <script></script> portion to automatically adjust the size base on what is the screen size of the one who views the form.

  • Profile Image

    Answered by Jessrk on January 06, 2014 at 01:19 PM

    you have misunderstood me.

    I'm not talking about the number not being right, I'm talking about the length of the script not being right.

    Let me recap.

    1) The form wasn't right

    2) you told me to adjust the number = didn't work because for some reason, the number didn't stick.

    3) your colleague gave me a shorter script

    4) I changed the number

    5) it worked

     

    Thus, my question is, why don't we get the shorter working script in the first place?

  • Profile Image

    Answered by jedcadorna on January 06, 2014 at 01:47 PM

    Sorry about the confusion but this is how I understand your question. Jotform provided this block of code which is this:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotformeu.com/form/40051430950341" frameborder="0" style="width:100%; height:5800px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Your question is why didn't Jotform remove the <script> </script> section in the first place? correct? Which should look something like this? 

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotformeu.com/form/40051430950341" frameborder="0" style="width:100%; height:5800px; border:none;" scrolling="no"></iframe>

     

    Below is the omitted part:

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    My understanding behind that is Jotform is designed and optimized for mobile use and that is the main purpose of the <script> section so your form will adopt to its sizes. That is my understanding how on how that <script> section works.