Preview before submit - page not fully loaded for embedded form

  • Profile Image
    portraitkanrisha
    Asked on May 29, 2018 at 01:17 AM

    Hi,

    When users fill my form on their mobile, whenever they reach the preview before submit page, the page is automatically scrolled to the bottom and the form is only partially showed (we can only see a little part of the submit button).

    I tried to also add ?nojump at the end of the form address in the iframe integration but it didn't help..

     

    I tried to embed only the form in a blank html page and the user is still taken to the bottom.

    Thanks in advance

  • Profile Image
    portraitkanrisha
    Answered on May 29, 2018 at 01:37 AM

    I may not have been very clear in my previous explanation which may explain the absence of assistance on my topic, sorry about that.

    To sum things up, I have two separate problems that come to my understanding from the same source being the Preview before submit widget.

    The first one is that the div where the preview is loaded seems truncated and doesn't display the bottom part where the Submit button is located.

    The second issue is related to the fact the page jumps to the bottom when the user clicks on the preview button.

     

    I'm sorry as my forms are in Japanese it may not facilitate debugging but I would appreciate if anyone could take a look at it. Also, feel free to ask me any further details.

  • Profile Image
    Victoria_K
    Answered on May 29, 2018 at 09:50 AM

    Hello,

    The issue is likely script conflict related. Can you please try to embed your form using Iframe code, but to exclude it's script part. Like shown:

    152760175706-11-2017-1497190688.png

    Getting-the-Form-iFrame-Code

    Please let us know if this does not help.

    Thank you.

  • Profile Image
    portraitkanrisha
    Answered on May 29, 2018 at 09:56 AM

    Hi Victoria,

    Thank you for your reply.

    After trying your suggestion, it actually made the matter worse and the form doesn't even fully load now... 

    https://www.studio-ivy.jp/test.html 

  • Profile Image
    Mike
    Answered on May 29, 2018 at 12:40 PM

    When using the iframe code, you may change scrolling to "yes" to allow it.

    I am not sure if we can fix the jumping issue, but if there is a problem with the height of the preview page, you may try adding a custom CSS to your form to set a minimal height.

    Example:

    #previewContainer {
    min-height: 800px !important;
    }

    Also, you can try a standard embed code instead of the iframe code.

  • Profile Image
    portraitkanrisha
    Answered on May 30, 2018 at 12:41 AM

    Thanks Mike for your pointers.

    The standard embed method doesn't fix the jump indeed.

    Also, enabling scrolling kind of hinders usability on the desktop version so I guess I will just entirely get rid of the preview widget and create a custom preview in a regular text field. 

    Thank you for both of your help anyway !