Why my embedded form in Buildfire is displaying cut off?

  • diabetesed
    Asked on September 19, 2016 at 7: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

  • Kevin Support Team Lead
    Replied on September 19, 2016 at 7: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"

          onDISABLEDload="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. 

  • diabetesed
    Replied on September 20, 2016 at 1: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

  • Kevin Support Team Lead
    Replied on September 20, 2016 at 3: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"

          onDISABLEDload="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. 

  • diabetesed
    Replied on September 22, 2016 at 4: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="Why my embedded form in Buildfire is displaying cut off? Image-0" 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="Why my embedded form in Buildfire is displaying cut off? Image-0" /></p>

    </div>

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

    Thanks

    Susan

  • Kevin Support Team Lead
    Replied on September 22, 2016 at 6: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.