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

    Form too long (blank part at the end)

    Asked by cand1902 on April 08, 2014 at 05:30 PM

    Hi, 

    I have 2 forms on two different websites that have the same problem... I have been told to use the embed form iFrame, and it works great. There's only a little something that annoys me a lot!

    As you can see, there's a big part of the form that should not appear after the Send button (it's only grey and there's no text).

    I tried to change the lenght of the form in the HTML, but it doesn't work. I really don't understand what happens.

    Could someone help?

    Thank you very much

     

    Site 1 (fisrt form) : http://www.sunsmash.ca/tournois-2014/inscription/

    Site 2 : http://www.envolleymasculin.com/nos-programmes/inscription/

    Page URL:
    http://www.sunsmash.ca/tournois-2014/inscription/

    Screenshot
    problem different site www
  • Profile Image

    Answered by Carina on April 08, 2014 at 08:25 PM

    Please try to embed this code into your website:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://www.jotform.ca/form/40976224266257" frameborder="0" style="width:100%; height:2544px; border:none;" scrolling="no"></iframe>

    Adjust the height if needed. Let us know please if the  problem persists.

    Thank you

  • Profile Image

    Answered by cand1902 on April 08, 2014 at 09:09 PM

    Hi,

    I had already tried what you suggested, but it didnt't. I tried again with different heights and still doesn't work...

    Would you have any other idea?

    Thank you,

  • Profile Image
    JotForm Support

    Answered by jonathan on April 08, 2014 at 11:21 PM

    Hi,

    Can you please re-embed the form using its iframe code. Use this guide

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    --

    If this is the form http://www.jotform.ca/form/40908839465265 that is having heigh issue, the iframe code height should have been only around 2290px. So, I wonder why the height of your form was set to about 4000 px. 

    Getting the iframe code using the form builder will provide the appropriate height for the form.

    Hope this help. Please inform us if issue persist.

    Thanks!

  • Profile Image

    Answered by cand1902 on April 08, 2014 at 11:27 PM

    Hi,

    Thanks for your answer. I tried to re-embed my form my the iframe code (which is the one I was using already), but I still have the same problem... The height is set to 2510px in the HTML but it looks like it's over 4000px!

    Do you have any idea of what happens?

     

    Here's my HTML code on my wordpress page for the embed form :

    <h3><strong>SunSmash #1 : 31 mai - 1 juin 2014 <em>(date limite 28 mai)</em></strong></h3>

    [toggle title="SunSmash #1 - jeunesse (samedi, 31 mai)"]<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.ca/form/40908839465265" frameborder="0" style="width:100%; height:2510px; 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>[/toggle] 

  • Profile Image
    JotForm Support

    Answered by jonathan on April 08, 2014 at 11:46 PM

    Please try excluding the script part of the embed code..

    example, if this is the given iframe embed code by the form builder, exlcude the script part (in red)  and use only the iframe part (yellow)

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.ca/form/40908839465265" frameborder="0" style="width:100%; height:2510px; 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>

     

    Make sure also that you are embedding the code in your WP page TEXT(html) tab in edit mode

     

    Please inform us if still not resolve.

    Thanks!

     

  • Profile Image

    Answered by cand1902 on April 08, 2014 at 11:55 PM

    Hi,

    I removed the script part, but still doesn't work...

    Here's a screen shot of my wordpress page. Underlined is the form that doesn't work. All the other are working, it's really weird!

    Thanks,

  • Profile Image
    JotForm Support

    Answered by jonathan on April 09, 2014 at 12:20 AM

    I think its probably the div element in the WP page that is dictating that height

     

     

    You need to update that in the stylesheet of the page to set the height to the one closer to the form's height.

    If OK with you, I can also test the content of your WP page on my test WP website.  This will provide us proof that the form height is not the one dicating the height in your WP page.

    You can paste the content of your WP (that content only where you have the form used) on this URL http://pastie.org/ then share to us the pastie link where I can copy the codes.

    Then I will paste it to my WP page.

    Hope this help.

    Thanks.

     

     

  • Profile Image

    Answered by cand1902 on April 09, 2014 at 12:41 AM

    Hi, ok thanks for your help, here's the pastie link : http://pastie.org/9022226

    Is there anything I should change? I'm not sure I understood exactly what to do with the div...

    Thanks again,

  • Profile Image
    JotForm Support

    Answered by jonathan on April 09, 2014 at 01:22 AM

    As expected, this was not happening when I used it on my WP test page.

    I used your provided code and direct pasted it to a WP page. The over space at the bottom of the embedded form did not happen on my test

    --

    Can you please also try embedding only the form code?  

    You can probably create a new WP test page, and just embed the form's iframe code only. Then check how the form behave.

    Use only this form http://www.jotform.ca/form/40908839465265

    After you have done this, check if there is still an over space at the bottom. Will be better if you share to us also the created test page so we can further check.

    I am sorry if this is taking this long, but this issue is not on the form code -- so we are looking for that reason that is causing the over space.

    Thanks.

  • Profile Image

    Answered by walledgarden on April 09, 2014 at 01:28 AM

    Hi,

    The iframe height of your form embeded for your envolley website is still set to 6598px. 

    I checked the other website sunsmash, all the frame height is set to 2000-2200px. I also checked the form in question (SunSmash #1 - jeunesse (samedi, 31 mai)), it doesn't have a gray space below the button anymore.

  • Profile Image

    Answered by cand1902 on April 10, 2014 at 10:34 AM

    Hi,

    I tried to copy the code on a new WP test page, and everything works fine. I really don't get why it isn't working on my website, there's always that over space at the bottom for the first form only!

    http://www.sunsmash.ca/tournois-2014/inscription/

    For the other web site (http://www.envolleymasculin.com/nos-programmes/inscription/), I don't know what happenned, but the problem is fixed!! As you said, the space at the bottom desappeared.

    Would you have an idea of something to do with the SunSmash form?

    Thank you very much for your help.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 10, 2014 at 12:01 PM

    Hello cand1902,

    That is very strange. Upon checking your webpage where you have embedded your form in iFrame, I still see the height is set as 4278px. When I changed the height of the iFrame, the blank space disappears. Please check the screenshot below:

    Does the height property of your iFrame changes automatically even if you add form iFrame code with a smaller height? 

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by cand1902 on April 10, 2014 at 12:10 PM

    Hi,

    Thank you for your answer.

    The iFrame code I copied/pasted in my WP page (from JotForm) is the following :

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.ca/form/40908839465265" frameborder="0" style="width:100%; height:2550px; border:none;" scrolling="yes"></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></iframe>

    As you can see, the height is set to 2550px. I tried to set it lower, but it doesn't change anything. Can you please explain to me where you got the height of 4278px and how I change it?

    Thanks again,

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 10, 2014 at 01:13 PM

    @ cand1902

    Just embed your form using the iframe code without the supporting script.

    You can use the following.

    <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.ca/form/40908839465265" frameborder="0" style="width:100%; height:2550px; border:none;" scrolling="yes"></iframe>

    Try it and let us know if this doesn't make any difference. Regards!

  • Profile Image

    Answered by walledgarden on April 10, 2014 at 02:15 PM

    @cand1902

    The iFrame code you posted I think, is not for the form in question. I would suggest you go over with all the iFrame settings. Check each form and verify the iFrame heights are all set to 2200px. Refresh the page, if possible, open it with other browser after saving the changes.

    Bryan

  • Profile Image

    Answered by walledgarden on April 10, 2014 at 02:22 PM

    @cand1902

    Can you please check your sunsmash forms? I checked all the forms from SunSmash #1 - jeunesse (samedi, 31 mai) down to Liste d'attente / terrains sur gazon - they all look good from my end.

    Bryan

  • Profile Image

    Answered by cand1902 on April 10, 2014 at 03:22 PM

    EltonCris

    I'm sorry I tried the code but the problem still persists... 

     

    walledgarden

    I don't know how you can see it correctly, but I tried to reset my browser, empty cache, and even try with another browser, and I still see the large space at the bottom of the FIRST form onyl (SunSmash #1 - jeunesse (samedi, 31 mai))

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 10, 2014 at 03:32 PM

    Sorry I failed to add the max height and !important. Can you please try it again using this code?

    <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.ca/form/40908839465265" frameborder="0" style="width:100%; height:2550px !important; max-height:2550px !important;border:none;" scrolling="yes"></iframe>

    Please keep us informed if this doesn't make any difference. Thanks for your cooperation!

  • Profile Image

    Answered by cand1902 on April 10, 2014 at 03:46 PM

    YESSS! EltonCris you're a genious, thank you very much!

    Problem fixed.

    Thanks again and have a nice day!