Form's iframe does not have the correct height sometimes

  • Profile Image
    PelegFromHelloRented
    Asked on March 26, 2018 at 05:52 AM

    I've implemented your form in my site and it's been fine for a while.

    Now, every time the page with the form is loaded the from is being generated randomly! Meaning, sometimes I see the form and sometimes I don't...

    From what I've seen the main iFrame does NOT always get a height... sometimes it renders correctly [with a height], but other times [and seems like most of the times] it renders with height=0. I've tried to control it via the CSS option [within your form editor] and also via my CSS [figured I could affect, at least, the first iFrame] but to no avail, so far.

    This issue also occurred within an inner iFrame [but with the width attribute], which I managed to fix by overriding the min-width of that iFrame, through your form editor's CSS.

    You must fix these unbearably annoying issues, as your forms are unreliable [which makes them useless] with this behavior...

  • Profile Image
    Victoria_K
    Answered on March 26, 2018 at 09:18 AM

    Can you kindly share the URL of your site, where the form is embedded, so we could check it closer?

    Thank you. We will wait for your response.

  • Profile Image
    PelegFromHelloRented
    Answered on March 29, 2018 at 04:06 AM

    Paste in this URL: https://stage.hellorented.com/payment/confirmation/138


    Login with these credentials:

    Email: peleg+jotform@hellorented.com

    password: 1234


    I've already pre-filled everything needed.

    So, in order to get to the embedded form:

    Page 1 - Tick the checkbox 'Address of the apartment to be covered' and press 'Next: Payment Confirmation'.

    Page 2 - Again, tick the checkbox under the 'Pay with Bank Transfer [ACH]' tab and press 'Complete Checkout'.

    At this point, you should see a lightbox with a contract [that part, sits in our side] and at the bottom there should be the embedded form [which consists of the smooth signature a few hidden fields and a submit button. *** DO NOT press the 'Submit' button *** cause if you do, you'll be done with that part of the flow and wont be able to get back to the form].


    Sometimes you see the embedded from, sometimes you don't and sometimes you see it with a very small signature pad/canvas [e.g. below]...

    1522310410Unsuccessful_Render_Small_SigP


    Thank you,

    please keep me posted.

  • Profile Image
    aubreybourke
    Answered on March 29, 2018 at 10:05 AM

    I checked your "Suretec Indemnity" form http://www.jotform.me/form/72483568484470

    And it seems the reason the three fields aren't showing is because they have been hidden.

    For example:
    1522332189woz5m.png

    You will see if you open the properties for each field (on the advanced tab) the field is hidden. You can change its visibility there.

    For example:

    1522332351yq971.png


  • Profile Image
    PelegFromHelloRented
    Answered on March 29, 2018 at 03:31 PM

    The hidden fields are not the problem. I know they are hidden [that's why I wrote 'which consists of the smooth signature a few hidden fields and a submit button']. They are there on purpose. So I could push data from the back end into the form, to create a connection between a user's signature and other relevant data.

    My problem is that the iFrames, regardless, just don't render correctly [or at all] a lot of the time. If you refresh the page a bunch of times and open the form you should see that the iFrames do NOT get stable heights, which affects the eSignatue's canvas size [as shown in the screenshots I've added].


  • Profile Image
    Victoria_K
    Answered on March 29, 2018 at 04:02 PM

    Thank you for providing additional details. When checking the page you shared and reloading it several times, I was not able to reproduce the issue. 

    But, I believe that some times codes can have conflicts. From what I can see, the form embedded does not have many fields and none of them are shown under condition. So, I can suggest re-embedding the form with it's IFRAME embedding code, but to exclude the script part. You might also want to set the default height of the iframe:

    1522353686screenshotrfyiz.png

    Please let us know how it goes, so we could investigate further.