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

    Once embedded on Blogger - it cuts off part of the form

    Asked by funnymemesco on July 25, 2013 at 02:37 PM

    If you choose to submit multiple images to my site - it gets cut off. 

     

    Here is the link - http://www.funnymemes.co/p/submit.html <-- go ahead and try it for yourself. Here is the embed code that I am trying to edit for the blogger page so that it displays correctly.

     

    Code:

    <div dir="ltr" style="text-align: left;height:1000px" trbidi="on">

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

     

    Do you hae any suggestions for me?

    Page URL:
    http://www.funnymemes.co/p/submit.html

    JotForm style height message
  • Profile Image

    Answered by pinoytech on July 25, 2013 at 04:00 PM

    Hi,

    Your form seems to be working fine on my end without reproducing the issue that you are referring. I think you manage to fixed the issue of your form.

    Please take a look at this video: http://www.screencast.com/t/Dx8RwKGI4N

    Feel free to contact us again if you need further assistance.

    Thank you!

  • Profile Image

    Answered by funnymemesco on July 25, 2013 at 04:37 PM

    It doesn't work when you select multiple pictures. Try selecting around 6 or so and see what I am talking about. It doesn't show everything.

  • Profile Image
    JotForm Support

    Answered by guilledutra on July 25, 2013 at 05:10 PM

    Hi! can you try changing your Iframe embed code height parameter to 100% ?

    This code:

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

    Instead of your actual code:

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


     

     

    Hope it helps!

    Guillermo

  • Profile Image

    Answered by funnymemesco on July 25, 2013 at 05:15 PM

    I just tried that - it didn't work. :-|

  • Profile Image
    JotForm Support

    Answered by guilledutra on July 25, 2013 at 05:23 PM

    Did you copy the new iframe code to your webpage? I still can see your first iframe code

  • Profile Image

    Answered by funnymemesco on July 25, 2013 at 05:31 PM

    I did. Here is what I have posted. I don't know why it's not transfering through to what you are seeing. I activated the developer tools in Chrome and went in to look for myself and just as you posted... it's exactly what I am seeing.

    The code that I have posted is:

    <div dir="ltr" style="text-align: left;" trbidi="on">

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

  • Profile Image
    JotForm Support

    Answered by jonathan on July 25, 2013 at 08:19 PM

    @funnymemesco

    Hi, the iframe code embed for your form should be like this 

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

    Can you please try using the default embed code provide by JotForm for now. See if it work as intended.

    I am not sure what is the method in embedding form into your blogger website, but perhaps you need to clear your browser cache to refresh the page and reflect the newly embedded code.

    Hope this help. Please inform us if the issue still persist.

    Thanks.

  • Profile Image

    Answered by funnymemesco on July 26, 2013 at 09:46 AM

    I put in your iframe code and cleared out the cache - then refershed the browser window to see if the changes had taken effect. No luck. Any other suggestions?

    When I view source in the developers tools in Chrome it's still the same height of 176px. I just can't wrap my head around it.

    ADDITIONAL INFO: I am using one of Blogger's dynamic view templates. Not sure if that has any effect on the code.

  • Profile Image

    Answered by pinoytech on July 26, 2013 at 10:59 AM

    Hi,

    Using inspect elements feature of google form, I can see that your form's iFrame codes height is only 177px which I think the reason. Could you please try to change your form's iFrame code's height from 177px to 330px or more if that fixed the issue or not?

    For more information, please take a look at this video: http://www.screencast.com/t/XYDJgs7NB

    Thank you!

  • Profile Image

    Answered by funnymemesco on July 26, 2013 at 11:42 AM

    I changed it on the page that is trying to display the form, however it doesn't stick and reverts back to what you are seeing in the above screenshot. I don't know how to get it to stay to the settings that I set. Right now I have it set to 100% and nothing, before it was set to 1000 PX and nothing...

  • Profile Image

    Answered by pinoytech on July 26, 2013 at 12:30 PM

    Hi,

    I've injected some custom css into your form to fixed the issue. Kindly take a look at your website now: http://www.funnymemes.co/p/submit.html

    This is the codes that I've injected into your form.

    .form-all {

    max-height: 350px !important;

    min-height: 350px !important;

    }

    Thank you!

  • Profile Image

    Answered by funnymemesco on July 26, 2013 at 12:52 PM

    This is great! Thank you for your time. One MINOR question / request... Is it possible to have the height grow dynamically? So for instance - someone submits 4 photos - it grows to the length of the photos, but if someone inserts 15 photos - can it grow to accomodate the extra space needed?

  • Profile Image

    Answered by jeanettebmz on July 27, 2013 at 10:58 PM

    According to Jonathan this is the code generated by our form builder:


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

    The height is 457px; which would increase dinamically if your form grows, because of the javascript function the builder generates for you below:

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

    If you want the form to increase dinamically, then you would need the code as it is generated by the builder, rather than Pinoytech's workaround.  But you must add the function below in order to prevent the jquery code getting in conflict with the script type portion of the form.

     <script>jQuery.noConflict();</script>
     
    I would recommend you to insert this function right below the last jquery reference.