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

    bottom portion of embedded form is not showing in web page

    Asked by Kiki123 on April 03, 2016 at 05:53 PM

    Hello, 

    When viewed on a Mac device, the bottom of the contact form is sometimes missing. If I refresh the screen the complete form occassionally appears.  I have just viewed this form on a PC desktop and tablet and the bottom part of the form was missing. I didn't try refreshing the screen when I had access to these PC devices, so don't know if that would have worked too. I would like the complete forms present on screen when the page is opened first time.  One image attached shows the complete form viewed on a Mac and the other is a mock-up of how the form looks when bottom part is missing. Sorry I don't the formats/OS systems used on of these PC devices. Grateful for any advice, thanks.

    Page URL:
    http://psychic-janie.businesscatalyst.com/index.html#reviews

    Screenshot
    cut-off script conflict iframe muse
  • Profile Image
    JotForm Support

    Answered by jonathan on April 03, 2016 at 06:16 PM

    I checked the embedded form http://www.jotformeu.com/form/60612699705361   on your website and I can see the full form on it.

     

    Can you also try first re-embedding the form using its iframe embed code.

    Here is the user guide on Getting-the-Form-iFrame-Code

    Make sure to clear first previous script embed code on the page before adding the fresh embed code.

    Let us know if issue still remains even after this.

    Thanks.

     

  • Profile Image

    Answered by Kiki123 on April 04, 2016 at 12:27 PM

    Hi Jonathan,

    Thanks for your suggestion. After deleting previous form, I re-embedded the form using iFrame. Unfortunately, the bottom of the form is still disappearing. The issue is erratic, when I first open the page, the whole form is sometimes visible. However if I changed the the browser window width the bottom of the form vanishes. The amount of the form that is cut off at the bottom varies as well. The website is responsive (dynamic) and produced in Muse. Any more suggestions welcome

  • Profile Image
    JotForm Support

    Answered by david on April 04, 2016 at 02:13 PM

    In the beginning of your iFrame code, there is a height attribute:

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

    Increase this value until the full form shows in your page.

  • Profile Image

    Answered by Kiki123 on April 04, 2016 at 04:04 PM

    Hi David,

    Increased the height to 830px. At first, this seemed to work, although there was a grey area under the form were the form had not filled this new height. However, when I refreshed the page or changed the width of the browser window, the bottom of the form vanished, as before. Grateful for any more ideas. 

  • Profile Image
    JotForm Support

    Answered by jonathan on April 04, 2016 at 05:14 PM

    I think the script part of the iframe embed was clashing with the existing script on the page.

    Please try using instead only the iframe embed code part.

    Try this one (iframe part only)

     

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60612699705361" frameborder="0" style="width:100%;

          height:830px;

          border:none;" scrolling="no">

        </iframe>

     

     

    Make sure to remove/clean first the previous embedded code of the form on the page before using the embed code above.

    Let us know how it goes.

    Thanks.

  • Profile Image

    Answered by Kiki123 on April 05, 2016 at 05:32 AM

    Hi Jonathan, 

    Thanks for this, unfortunately it hasn't worked. I deleted previous form and used this code. On my artwork the form appeared with a large grey box area underneath it. This seems to represent the 830px height allocated, and can be reduced if the pixel height is reduced. Viewed on a browser the form shows the same problem as before - the bottom part is not showing (no grey box showing, as on artwork). When the site page is first opened the whole form may show but if the page is refreshed or the browser window size is changed the form looses the bottom part. 

    Not sure where I'm going wrong! Any more suggestions welcome.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 05, 2016 at 06:01 AM

    After testing extensively, it turned out that the default embed code will work just fine.

    Please try this embed code:

     

    <script type="text/javascript" src="https://form.jotform.com/jsform/60612699705361"></script>

     

     

    You can check it on my test page here.

    Please let us know if still did not work for you.

    Thanks.

  • Profile Image

    Answered by Kiki123 on April 05, 2016 at 08:55 AM

    Hi Jonathan,

    When using this code - the complete form shows when the site page first opens but, if the browser window changes size or the page is refreshed - the form completely disappears, not just the bottom section. 

    It's strange, as I put the form into the site several weeks ago, it's only had this problem in the last week. I did initially have a problem with the PayPal form on this site but with the help of the forum I managed to sort it out.

    Thanks for your time on this but any more ideas?

  • Profile Image

    Answered by Carina on April 05, 2016 at 11:27 AM

    I could replicate the same disappearing behavior.

    I created a clone and added the form to the test account and the form was successfully displayed:

    http://jotformtest.businesscatalyst.com/form  

    I will make further tests and will let you know as soon as I have more details. In the meantime if you can post a screenshot of the html version editor this can be helpful.

    Let us know if we can assist you further.   

  • Profile Image

    Answered by Kiki123 on April 05, 2016 at 03:13 PM

    Hello Carina,

    Thanks so much for looking into this for me. As you can see, I have provided a screen shot of the html editing window for the contact form. I think this might not be what you want! If not, could you supply a few more details for the html version editor, and I'll see if I can find it.

  • Profile Image
    JotForm Support

    Answered by david on April 05, 2016 at 03:21 PM

    You can try increasing the size of the frame the form is being added to.  Try dragging the bottom of the form container to extend the area the form is being added to:

  • Profile Image

    Answered by Kiki123 on April 05, 2016 at 03:41 PM

    Hello David,

    Lengthening or widening the form container window does not make a difference, the form still disappears. Thanks though!

  • Profile Image
    JotForm Support

    Answered by david on April 05, 2016 at 03:47 PM

    Since there are two forms in your page, the height of one may be affecting the other.  Try embedding the form using this code instead:

    <iframe id="JotFormIFrame2" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60612699705361" frameborder="0" style="width:100%;

          height:830px;

          border:none;" scrolling="no">

        </iframe>

    That will give the frame a different ID from your payment form.

  • Profile Image

    Answered by Kiki123 on April 05, 2016 at 04:55 PM

    Hoorah! Thanks-you David your suggestion has worked. I reduced the height to 490 px, otherwise there is a grey box under the form. The form's not perfect - a small portion gets cut off the bottom sometimes but the Submit box is still there, so that's ok. Also sometimes there is a small grey band at the bottom. However, I'm nit picking and I really can't complain. The site can now go live online.

    And David, you resolved the problem on my PayPal form too, many thanks!

    I'm grateful for everyone's help with this issue :)

  • Profile Image
    JotForm Support

    Answered by david on April 05, 2016 at 05:05 PM

    Glad to hear it!  We are happy to help.  Let us know if there is anything else we can assist with.