Why is my Embedded Form not Displaying Fully?

  • bsch
    Asked on January 28, 2019 at 12:44 PM

    I'm having problems getting the 2nd JotForm to publish in its entirety on the 'Submit' page of Dear Diagnosis. When opened, the complete form is there but from the published view, it is missing most of the form... Please advise? A

    lso wondering about ability to access an italian keyboard - as you will see the respective form is being written in Italian
  • Donald_H
    Replied on January 28, 2019 at 2:40 PM

    I can see what you mean by inspecting the page where the form is embedded. I would recommend using the Iframe Embed Method and adjusting the height of the form from the copied code that is pasted onto your website for the form to display. 

    Modify height:539px; to height:539px !important; you can also increase the numerical value to adjust the height of the iframe to your requirements.

    1548704204Selection 262 Screenshot 10


  • Donald_H
    Replied on January 28, 2019 at 2:46 PM

    I have moved the query about the keyboard language to this thread: https://www.jotform.com/answers/1715071

    It will be answered separately since it is a separate issue.

  • bsch
    Replied on January 28, 2019 at 8:13 PM

    Thank for your guidance with issue #1, which fixed the height - the entire form is now viewable - but resulted in a problem with respective width of form. Please note how the 2nd form has been cut off & advise as to how to further alter the embedded code? If you can help me adjust the code so that the formatting is consistent with it's English pair please do so (note that there is no space between border & wording on English form but is a big space between border & wording on Italian form). https://www.deardiagnosis.us/submit.html Thanks! 

  • bsch
    Replied on January 28, 2019 at 8:24 PM

    Also, can you advise as to how I would then make changes to the form - how would I navigate back to the original form to, then, make amendments to it after establishing it as an embedded code on the site...? 
  • jherwin
    Replied on January 28, 2019 at 10:42 PM

    You can use two iFrame codes to embed your form so it will look like the same and aligned.

    But first, add an English sub-header to this form: https://www.jotform.us/form/80225469552156. You can see in my screencast that they are not aligned because the other has a sub-header text.1548732935align Screenshot 10

    For ENGLISH form, here is the embed code:

    <iframe
          id="JotFormIFrame-80225469552156"
          onDISABLEDload="window.parent.scrollTo(0,0)"
          allowtransparency="true"
          allowfullscreen="true"
          allow="geolocation; microphone; camera"
          src="https://form.jotform.com/80225469552156"
          frameborder="0"
          style="width: 1px;
          min-width: 450px!important;
          height:height:1645px;
          border:none;"
          scrolling="no"
          >
    </iframe>

    For Italian form, here is the embed code:

    <iframe id="JotFormIFrame-90265654019155" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/90265654019155" frameborder="0" style="width: 1px; min-width: 450px!important; border: none; height: 1645px;" scrolling="no"> </iframe>

    Please give it a try and let us know how it goes.

    I moved your other question to a new thread to avoid confusion: https://www.jotform.com/answers/1715597. Please refer to that thread for any related questions and/or follow-ups.


  • bsch
    Replied on January 29, 2019 at 10:40 AM

    I made these changes but, as you can see, the English form is still not right & the Italian form is cut off at the very bottom: https://www.deardiagnosis.us/submit.html

  • David JotForm Support
    Replied on January 29, 2019 at 11:30 AM

    The English form looks to have incorrect formatting for the height attribute:

    1548779304Capture Screenshot 10

    Change that to height:1645px; instead of height:height:1645px;

    For the Italian form, increase the height value in the iFrame code until the full form is shown:

    1548779404Capture1 Screenshot 21