How to display order details on the Thank You page.

Hi there,

I'd like to know if it's possible to show the clients their ordered items on a thank you page after their submission?

Or, is there any way for the client to consult what they have ordered? I don't consider sending emails because not all of my clients have an email address, plus it generates recaptcha.

Thank you.

Hi,
You can do it by simply adding (or typing out) this field in your Thank You, Page:

This will create a summary of the selected items, that would look somewhat like this:

Should you have any more questions please let us know.

Kind Regards,

It works, thanks!

Also on the mobile version, the thank you page contains many blank spaces on the top and bottom, so after the submission, the client will see a blank page at first sight, and they will have to scroll down a lot to see the real thank you page.

Is there any way to improve that?

Thank you,

Hello,

Is your form embedded on a website?

If so, can you please try to embed your form using iframe embed code https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code. Then add the onDISABLEDload="self.scrollTo(0,0)" code in your iframe code.

Your iframe code should look like this:

 <iframe onDISABLEDload="self.scrollTo(0,0)" id="JotFormIFrame-XXXXX" etc> </iframe>

If not, you could try the example following CSS code (https://www.jotform.com/help/117-how-to-inject-custom-css-codes):

.form-all{

  margin-top:-50px !important;

}

Adjust the number px as needed.

Best regards

Hi,

Sorry, it doesn't really solve the problem on mobile device, there are still huge spaces on the thank you page on the top and bottom...even though the margin has been reduced on desktop device.

The spaces exist in thank you page not the form itself, is there anyway to modify the CSS of the thank you page? Thank you

Hi there,

I just tested the cloned vevrsion of your form but I could not see the spaces: 

Let us know if you need further assistance.

Hi there,

Somehow when I use my mobile device (iphone 11 pro), I still see the same problem. I have attached the photos to show you the spaces.

Or is there any way that I could upload a video here in the Q&A ? 

Thank you.

I can see that you have the form embedded on this website: labasebakery.com. My colleague has done the test using the cloned form's direct URL reason why it's showing only the Thank You Page, not how it looked like when embedded.

Allow me some time to test it on my end and please expect a few test submissions to it from us. I will get back to you here with a possible solution.

Hi there,

Ok thanks cuz it’s kinda confusing for the clients. If you’re testing next week please use another cloned form « 10/4-10/7 », not the one « 10/12-10/16 » Thank you!

We apologize for the inconvenience. I assumed all is good now.

If there are still related issue that comes up, you can update us here using the ticket link https://www.jotform.com/answers/3394659

Thank you.

Hi there,

Nope unfortunately the problem remains the same… the thank you page is still not adapted to the mobile version, or maybe it’s just my phone ??

Thank you,

Probably it's due to the browser cache that is not updating. Could you try clearing it or test in private mode and check if it makes any difference? I found this external guide to help you do it.

You can also try on another device to check further.

Hi @happy1591 - Thank you for waiting! I can see that you are using WordPress so what I did is clone your form and embed it on my WordPress site that I use for testing, and of course, using Elementor as you did.

Also, before I proceed with the specifics, I can see you have embedded the form using it's script code:

Personally, I do not recommend this when using WordPress/Elementor. I prefer using the iframe embed code of the form just what I did in my test below.

So first, I have embedded the form here: http://rex-testing.rf.gd/elementor-227/

I then tried to submit it on a mobile browser and was able to replicate the issue with the Thank You Page:

There's a lot of whitespace on top of the Thank You Page.

Now, I was able to fix it by injecting this custom CSS code below to the form:

.wrapper.isPDF {

  min-height: 250px!important;

}

This worked in my test website:

Please try that on your form, too. Here's a guide on how-to-inject-custom-css-codes.

Sorry, the correct code should be:

@media screen and (max-width: 480px){

    .wrapper.isPDF {

  	 min-height: 250px!important;

    }

}

This is so the custom code will only apply if the form is viewed on mobile and will not affect the desktop view.

Please try that and let us know how it goes.