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

    Is there a scrolling function for forms embedded in a website?

    Asked by Nzia on October 19, 2015 at 01:20 AM

    Embedded forms on my website appear truncated. Although they aren't, when completing them you can tab to the fields that are not visible, is there a way of being able to scroll up and down?

    uploads height godaddy iframe height html snippet
  • Profile Image
    JotForm Support

    Answered by beril on October 19, 2015 at 04:40 AM

    Hi,

    Unfortunately, it is not possible with JotForm. However, I've tested your form and I am able to see all of your fields on preview from my side.

     

    If you embedded the code to your website, can you provide the Url of your website? At that time, we can assist you more properly.

    I will wait for your response

    Thank you.

  • Profile Image
    JotForm Support

    Answered by beril on October 20, 2015 at 07:51 AM

    Hi again,

    Now I am able to see the scrolling issue from my side.

    You can re-embed your form again on your website using its ifame code. But you need to change the scrolling function of IFrame Code.

    user guide: -Getting-the-Form-iFrame-Code

     Here is the how to do :

    1) Copy the Iframe code to a text file.

    2) change the scrolling code below:

    From:

    scrolling="no"

    To:

    scrolling="yes"

    I hope it works. I will wait for your response

    This should resolve the issue. Please let us know if issue remains even after re-embedding the correct form

  • Profile Image

    Answered by Nzia on October 20, 2015 at 09:14 AM

    Afternoon Beril, I've tried it, and when I click through the link to page 1 of the form, the scroll bar flashes on for a moment, on the right hand side beside the text, then it almost instantly flashes off again. And it doesn't appear at all on the page 2 containing the form itself.

     

    http://www.instanzia.com/annual-report-compilation-enquiry.html

  • Profile Image
    JotForm Support

    Answered by beril on October 20, 2015 at 10:40 AM

    Hi,

    Good afternoon. Please, give me sometime and I will try to solve this issue.

    Thank you for your understanding.

  • Profile Image

    Answered by Nzia on October 20, 2015 at 10:43 AM

    Thank you Beril, I await your fix

  • Profile Image
    JotForm Support

    Answered by beril on October 20, 2015 at 11:05 AM

    Hi,

     

    You have a snippet that holds the form. Can you try to adjust the snippet?

     

  • Profile Image

    Answered by Nzia on October 20, 2015 at 12:06 PM

    Unfortunately Beril, I know how to access these areas, but I have no idea about adjusting the snippet and what I would adjust it to

  • Profile Image
    JotForm Support

    Answered by Charlie on October 20, 2015 at 01:52 PM

    Hi,

    May we know what website builder you are using? Are you using the website builder in GoDaddy? If that's the case, you can refer to the support team or the help page for that website builder on how to adjust the height of that specific snippet.

     

    To add a scroll, you can try changing the values that are highlighted in bold below:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//forms.instanzia.com/52894745116362" frameborder="0" style="width: 100%; height: 924px; border: none;"scrolling="yes">

        </iframe>

    We want to match the current height of the element, which is around 960px, the iFrame you have embedded has 2500px, so we changed the iFrame almost the same with the parent element. After that, to show the other fields at the bottom that are being cut, we will set the scrolling to "yes".

    This is how it looks like:

    I hope that helps.

  • Profile Image

    Answered by Nzia on October 21, 2015 at 12:03 PM

    Thanks Charlie, yes I'm using Godaddy web builder.

    I changed the values in the iframe code on this and two other forms but it made no difference, embedded forms are still not scrolling.

    I'm on the phone to Godaddy right now they've put me on hold. I'll let you know what they say

  • Profile Image

    Answered by Nzia on October 21, 2015 at 12:08 PM

    They've asked me to find out from you what the adjustment to the snippet code should be. Can I have it please

  • Profile Image

    Answered by Nzia on October 21, 2015 at 12:31 PM

    They said they don't have coders and asked if you could literally spell out what the code should be and they'll make the adjustments. Apparently as Godaddy customers we don't have access to it?

  • Profile Image

    Answered by victor on October 21, 2015 at 02:19 PM

    Sorry you are still having issues with this. Could you try re-embedding the form. As my colleague indicated the parent frame is smaller of the frame needed to open the form. When you re-embed the form, please adjust the height of the form (something around 925px) and make sure the SCROLLING attribute is YES 

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//forms.instanzia.com/52894745116362" frameborder="0" style="width: 100%; height: 924px; border: none;"scrolling="yes">

        </iframe>

    If not maybe the support team in GoDaddy can make this changes in your page.

    Please let us know if this helps.

    Regards

  • Profile Image

    Answered by Nzia on October 21, 2015 at 06:17 PM

    Victor, this was the suggestion made by both Charlie and Beril yesterday, whichtried on both occasions and advised both of them that it hasn't worked.

    The latest postion was Charlie suggesting Godaddy could adjust the snippet. As you see from my message which preceded yours, Godaddy have asked for the snippet codes. Can you provide the snippet codes, I've many more forms to create, until this is resolved, I've reached an impass.

  • Profile Image
    JotForm Support

    Answered by jonathan on October 21, 2015 at 11:28 PM

    Charlie was refering to the HTML web-snippet where the form iframe was contained.

    If you look at the screenshot image above, you can see the html snippet height is only at 963px.

    The form iframe height is at 2556px. So the lacking of height of the snippet results to the form not being fully displayed (cut-off)

    I am sure there is a way in your web builder (godaddy) to inrease the html snippet height.  If you can find this property of the snippet in the editor you can increase it.

    Check the image below that simulate what should be change. I increase the snippet height and it was able to display the form fully.

     

    Hope this help. Let us know if you need further assistance.

  • Profile Image

    Answered by Nzia on October 22, 2015 at 07:59 AM

    Jonathan, could this be simply solved by dividing the form up into pages?

     

  • Profile Image
    JotForm Support

    Answered by Charlie on October 22, 2015 at 09:28 AM

    You could try making the form multi page, that should make the size fit, although if for example page 3 has a total height of greater than 900px (which the HTML snipper has), then it might be cut off again or a scroll bar will be displayed. Here's a guide on how to make the form multipage: http://www.jotform.com/help/119-How-to-Create-Multi-Page-Forms 

    Here's a guide I saw about the GoDaddy web builder: https://www.godaddy.com/help/add-html-code-to-page-12286. If the element is somewhat a widget, you could try resizing the element or widget by press and holding the corners of the element, similar to a drag and drop?