Preview Before Submit: Preview remains above the currently viewed area of the page

  • Profile Image
    melodicsounds
    Asked on February 23, 2016 at 11:54 PM

    In this form: https://form.jotform.com/60527500792959 I have the preview widget... works fine but since the form is really long when you preview it let you on the exact point you stayed before clicking "Preview" so it looks like its all white but actually you are now in the preview but it is on top (since its smaller now). Is there any way we can fix this? Like when clicking preview it takes you to the top of the page?

  • Profile Image
    Boris
    Answered on February 24, 2016 at 08:22 AM

    I have checked your form through the direct link you provided, and upon filling it out and clicking on the Preview/Revisar button, the Preview that appears is still visible:

    Is your form perhaps embedded somewhere when you are experiencing the issue?

    I'm afraid that the Preview Before Submit widget is currently not able to scroll the page automatically to the start of the page when it is clicked. This is why you could experience such a problem on an embedded form, as your users scroll down to below the point where this widget is visible.

    If your form is always of a similar height, we could try working around this issue by using some custom CSS:

    #previewContainer { padding-top: 650px; }

    This will add a blank area above the preview container, which will make sure that the preview container is pushed down into the visible area of the embedded form. You can add custom CSS by opening your form in the Designer, and pasting the codes into the textbox under the CSS tab:

    Please let us know if this workaround is something that could work in your case.

  • Profile Image
    melodicsounds
    Answered on February 24, 2016 at 11:20 AM

    Yes sorry, the direct link works just fine! But please recreate what I am saying in my MAIN form: https://form.jotform.com/60415836657967 Use Ensayo/Trabajo sobre Libro since those are the longest ones please and let me know your thoughts/solutions.

  • Profile Image
    Boris
    Answered on February 24, 2016 at 12:47 PM

    I see, the form with Preview Before Submit is embedded inside another form, and the iFrame in which this form is embedded is set to be 2500 pixels high:

    When your users scroll all the way down to click on the preview button, they are about 2000 pixels down the form - and the preview needs only about 700 pixels to be displayed. I would recommend using the same workaround as posted above, but for your Ensayo form, use 1300px as the padding-top:

    #previewContainer { padding-top: 1300px; }

    For your Trabajo sobre Libro form, I would recommend using 1100px:

    #previewContainer { padding-top: 1100px; }

    You will have to edit each of these forms separately, and add their CSS code to them. Please follow the same instructions as in the previous reply on how to add the CSS code to your forms, and let us know if this makes your Preview Before Submit widgets appear near the place where the Preview/Revisar button was clicked.

  • Profile Image
    melodicsounds
    Answered on September 12, 2016 at 06:00 PM

    Hey! I have this problem but not with the preview, instead with the Thank You message that you guys offer.

    How to add a padding top to that Thank You message?
  • Profile Image
    liyam
    Answered on September 12, 2016 at 09:11 PM

    Hello, 

    Since your follow-up question is no longer related to the title of the thread, I have moved it to a new one, which can be found here. We'll respond to your question in a short while.

    Thanks.

  • Profile Image
    Kiran
    Answered on September 13, 2016 at 07:29 PM

    @melodicsounds,

    Somehow your response is not posted in the thread. However, since the issue with the Thank you page it is moved to a separate thread and I notice that the issue is already addressed by one of our colleagues. If you have any questions with the issue, we request you to follow-up on the other thread.

    Thank you!