How to hide elements in the thank you page?

I added an image to my form on the Thank You page but it is showing some kind of automatic overlay on top of the image. I want just the image, no overlay. Is that possible to adjust?

In my screenshot, you can see the image in Jotform, and the source image.

https://www.jotform.com/build/241624719936162/settings/thankyou

Hi Alegre,

Thanks for reaching out to Jotform Support. We can hide some elements on your thank you page by using a few CSS codes. Let me walk you through it:

1.First, copy the codes below:

/* hide ty page elements - 17157211*/

#stage > div.form-all > div.wrapper > div.col-2 > div.thankyou-wrapper > div > h1, #stage > div.form-all > div.wrapper > div.col-2 > div.thankyou-wrapper > div > p:nth-child(2) {

 display: none;

}

.col-1 {

  display: none !important;

}

/* Ends here */

2.Next, click on the Paint roller icon on the right.

3.Under the Styles tab, paste the codes into the CSS box.

Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject Custom CSS Codes that you can check out.

Give it a try and let us know if you need any help.

Hi! Thank you for this.

I followed the instructions but now the overlay on the image is still there, and the thank you message we had above the image is missing. This didn't work for me.

What is showing now on the Thank You page with the code:

What is supposed to show (without an overlay on the image):

Can you assist?

Hi Alegre,

I cloned and tested your form, and in order to show the Thank You Page the same as the second screenshot you recently sent, you need to remove some CSS codes from your form. Here's how to do it:

1. In Form Builder, click on the blue roller paint icon.

2. Then go to Styles.

3. And scroll down, then remove the custom CSS code that has:

#stage > div.form-all > div.wrapper > div.col-2 > div.thankyou-wrapper > div > h1, #stage > div.form-all > div.wrapper > div.col-2 > div.thankyou-wrapper > div > p:nth-child(2) {

 display: none;

}

Here's the result:

Give it a try and reach out again if you need any more help.

thank you but this isn't resolving my initial issue. My issue is that the image asset (reference $10 off coupon on Thank You page) has a white overlay on top of the image and I need the source image to have no overlay.

see screenshot for what I am referring to.

Hi Alegre,

Kindly replace this CSS code with the code my colleague Raymond provided to display the icon and text and, remove the overlay from your image in the Thank You page.

.thankyou-sub-text{

  opacity: 1!important;

}

Result:

Give it a try and let us know if you need any other help.