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

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?

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.

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.

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.

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

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.

@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!