My embedded form is only loading sometimes!

  • atomicdisc
    Asked on April 6, 2016 at 3:02 PM

    Hi,

    This is a very URGENT matter!

    I am using jotform as a simple file upload form and sometimes it shows up on my webpage and sometimes it doesn't!! Sometimes it shows up on first load and then disappears if you refresh the page and sometimes it does not show up on first load, but shows up if you refresh the page.

    See the screenshot attached for what it looks like when it doesn't show up.

    The form is embedded using this code:

     

    It is located on these two pages:

    http://www.atomicdisc.com/pages/file-upload

    http://www.atomicdisc.com/pages/completing-your-order

    I have been able to replicate this issue in Safari 9.0.3, Chrome 49.0.2623.110 and Firefox 29.0.1.

    I tried using the iframe embed code instead and it didn't make matters any different.

    I have also tried removing the two column layout and it didn't make a difference either!

    Jotform Thread 812100 Screenshot
  • Mike
    Replied on April 6, 2016 at 3:33 PM

    The form script changes the form container height to 0 pixels on your web page for some reason (might be related to conflict with other scripts of the web page). 

    I would like to suggest trying the iFrame code again, but with removed auto-height script that is following the iFrame code.

    My embedded form is only loading sometimes! Image 1 Screenshot 20

    Please give it a try and let us know if you need any further assistance.

  • atomicdisc
    Replied on April 7, 2016 at 5:21 PM

    Hi,

    Thank you for getting back to me. I did what you said and now the form is loading fine it seems. HOWEVER, by not including the script the iframe is set to height: 539px; which make the submit button disappear as soon as you add a file or two.... Since it doesn't scroll or change it's size... I tried changing the height to auto; - no luck and also 100% and that didn't make a difference either... 

    I don't want it to scroll, I want it to grow with the content.

     

    Hoping for a speedy reply.

    Thank you,

    silver

  • Nik_C
    Replied on April 7, 2016 at 6:11 PM

    You can make height of iFrame fixed to 550px and that will show the whole form(I tested on this page: http://www.atomicdisc.com/pages/completing-your-order):

    My embedded form is only loading sometimes! Image 1 Screenshot 20

    I tried on Firefox and Internet explorer as well and it worked fine.

    Please let us know if you have further questions.

  • atomicdisc
    Replied on April 7, 2016 at 8:02 PM

    That solves the problem if people choose one or two files. If they select 10 files it will push the Submit button off the form and it becomes invisible.... And if I set the form height to be 1000px to compensate, it pushes the content below the form way down the page... Is there a way to make the form automatically grow... I tried height: auto; - no luck.

    Please fix this.

    Thank you,

    -silver

  • jonathan
    Replied on April 7, 2016 at 11:52 PM

    Hi Silver,

    You are right about the potential problem on the form heigh when multiple upload will be done. I was able to simulate the scenario and see the issue

    My embedded form is only loading sometimes! Image 1 Screenshot 30

     

    Can you try using the default script embed code instead. Not the iframe, but the script only embed.

    My embedded form is only loading sometimes! Image 2 Screenshot 41

     

    Let us see how it goes. 

    Thanks.

     

     

  • Silver
    Replied on April 8, 2016 at 12:54 AM

    Thanks everyone for trying to fix this. Jonathan, if you see the whole support thread here, you'll see that I initially used the default embed script and then the form didn't always load. On recommendation from your support team, I switched it to the iframe embed - which makes the form load ok, but then I have the issue of it not growing properly.

    This is getting pretty frustrating.

    Please help me fix this.

    -silver

  • beril JotForm UI Developer
    Replied on April 8, 2016 at 3:57 AM

    I am able to reproduce the same issue that you're having when I've upload multiple files.

    My embedded form is only loading sometimes! Image 1 Screenshot 20

    Can you re-embed your form as 

    <iframe id="JotFormIFrame" allowtransparency="true" src="https://form.jotform.com/60735858917975" frameborder="0" style="width: 100%; height: auto !important; min-height: 650px !important; border: none;" scrolling="auto" onDISABLEDload="window.parent.scrollTo(0,0)"> </iframe>

     

    If it does't solve your problem, please let us know. We will be happy to assist you.

  • atomicdisc
    Replied on April 8, 2016 at 12:55 PM

    Hi guys,

    This sort of solves the issue... It is a little less than ideal having to scroll within the form. Is there no way to make it auto grow with content?

    Thanks,

    -silver

  • atomicdisc
    Replied on April 8, 2016 at 1:39 PM

    Hi,

    One more thing. By using the iframe code without the following script, the hover text disappears...

    Is there a way to have a file upload form, that always loads on the page, also on refresh, can take multiple files and automatically grow and show hover text over the form fields...?

     

    Thank you.

    -silver

  • victor
    Replied on April 8, 2016 at 3:13 PM

    At the moment the suggestion given to you by my colleagues, is the most efficient regarding on the height of the iFrame.

    My embedded form is only loading sometimes! Image 1 Screenshot 20

     

    I have been doing research and found some other methods, but require you include JS on your site.

    If you like you may view a nice sample I found on the web that might help, but not certain.

    http://www.daveoncode.com/2009/06/12/adapting-iframe-height-to-its-content-with-2-lines-of-javascript/

    In regards to your issue with the hover text. I did notice it. Can you please re-embed your form and clear both your cache and cookies. I have cleared the forms cache.

    Please let us know if you require additional information.