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

    Why my embedded form in Buildfire is displaying cut off?

    Asked by diabetesed on September 19, 2016 at 07:29 PM

    I have just added four more questions to our quiz "CDE Prep Quiz"  When I preview the quiz, I can see all the questions, but when I view them inside our app, the questions cut off.  When I originally put these questions in our app (Buildfire platform), they put the iframe code inside our app.  Do I have to do this everytime I add questions or change the format?  And if I grab the iframe code do I take out the old code or just add it after the existing code?

    If you could let me know, I would appreciate it.

    Susan

  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 19, 2016 at 07:48 PM

    I found another thread where you were assisted about embedding your form in the Buildfire app, here is the link: https://www.jotform.com/answers/920697 

    On that thread you were provided with an iFrame code that needs to be embedded in your app and it has a fixed height, here is the code you received before: 

    <iframe

          id="JotFormIFrame-62367646869171"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/62367646869171"

          frameborder="0"

          style="width:100%;

          height:1400px;

          border:none;"

          scrolling="no">

        </iframe>

    Highlighted is the height for that code, please do note that adding more questions will increase the form's height and you will need to manually update it in your app, I have checked the current height for your form and I  can see it has 120px, please try setting up the height to 2300px, the form should display completely once you set this height. 

    Please make the change to the code you have embedded and let us know how it goes. 

    We look forward for your response. 

  • Profile Image

    Answered by diabetesed on September 20, 2016 at 01:55 PM

    It finally worked!  So each time I add questions, I should change the height in my code?  If so, what is the next increment I should change it to?

    Is there a height to set it to so I would never have this problem?  We plan on eventually adding up to 100 questions.

    If you could let me know, that would be great!

    Susan

  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 20, 2016 at 03:22 PM

    Yes, you will need to manually set up the height in order to show your form completely, when you get the iFrame code directly from the Publish wizard it includes a JavaScript code that automatically calculates the form's height and set it to the iFrame, please refer to this guide for more information: Getting-the-form-iFrame-code

    I can see on another thread you opened before about the same (the one I stated above) we suggested to embed your form using the complete code as it is provided by the wizard, I'm not sure if embedding the full iFrame code with the JS code generates conflicts in your app, but I would suggest you to test it so you will avoid to manually change the height each time an element is added to the form. 

    In case that embedding the iFrame code with the JS generates conflict, I would suggest you to turn the scroll option on, so does not matter if the form's length is greater than the iFrame's length, but the form will be displayed completely. 

    <iframe

          id="JotFormIFrame-62367646869171"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/62367646869171"

          frameborder="0"

          style="width:100%;

          height:1400px;

          border:none;"

          scrolling="yes">

        </iframe>

    Please give it a try and let us know the results. 

  • Profile Image

    Answered by diabetesed on September 22, 2016 at 04:47 PM

    I have set the form to scroll "yes" and everything seems to be fine for now.

    Now I have an issue with my "Thank you" that the user receives after they submit the quiz.  I know one of your team members worked on this as well because it was appearing too low on the screen (mobile device), but now it is not showing up again.  The user has to scroll way up to see it.  Here is the source code:

    <p style="text-align: center; margin-top: 100px;"><img src="https://cdn.jotfor.ms/img/check-icon.png" alt="" width="128" height="128" /></p>

    <div style="text-align: center;">

    <h1 style="text-align: center;">Thank You!</h1>

    <p style="text-align: center;">Your quiz has been received. You will receive your results in a few minutes. &nbsp;If you have any questions or having technical difficulties, contact susan@diabetesed.net</p>

    <p style="text-align: center;"><img style="width: inherit;" src="//www.jotform.com/uploads/forum/diabetesed/1472242724Capture (100x38).jpg" alt="" /></p>

    </div>

    Should I change the margin top to a larger or smaller number?

    Thanks

    Susan

  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 22, 2016 at 06:04 PM

    Thank you for letting us know it worked fine. 

    Regarding to your second report about the Thank You page, I have moved your question to another thread, it can be found here: https://www.jotform.com/answers/939758 

    We will assist you on that thread as soon as possible. 

    Thanks.