Form Block Color

Hello I have 2 forms on my website which are being affected. The one form I am trying to have this gray background but when I add the CSS it adds the gray background to the "Contact" page form. How can I do it where the gray is ONLY on the https://www.kathrynlandisconsulting.com/coaching-onboarding-form (Password kickstart) page and NOT the contact page form
 

Please note this was the CSS i was using but removed for the time being

.form-wrapper
{background:#F5F5F5;
padding:40px;
border-style:solid;
border-width:1px;
border-color:#F5F5F5}

Screenshot is also attached.

3 hours ago, Mifamedianj said:

Hello I have 2 forms on my website which are being affected. The one form I am trying to have this gray background but when I add the CSS it adds the gray background to the "Contact" page form. How can I do it where the gray is ONLY on the https://www.kathrynlandisconsulting.com/coaching-onboarding-form (Password kickstart) page and NOT the contact page form
 

Please note this was the CSS i was using but removed for the time being

.form-wrapper
{background:#F5F5F5;
padding:40px;
border-style:solid;
border-width:1px;
border-color:#F5F5F5}

Screenshot is also attached.

You can try 

#collection-635737ba2a2a3d7110a74e44 #block-3823a0927264678c095d {
  background: rgb(245,245,245);
  padding: 20px;
}

@bangank36 Is there a way on mobile to have it hidden since the screen is so much smaller? Besides that it's perfect

@bangank36 sorry just realized 2 things needs to be resolved if possible. 
1. Remove on mobile the gray box
2. When you fill out the form. (Screenshot attached) you still see the gray box and the text is white and not legible. It's also so long that there is a huge separation from this and the bottom section.

On 11/3/2022 at 7:30 PM, Mifamedianj said:

@bangank36 Is there a way on mobile to have it hidden since the screen is so much smaller? Besides that it's perfect

We can set it works only on desktop with the following code:

@media only screen and (min-width: 768px) {
  #collection-635737ba2a2a3d7110a74e44 #block-3823a0927264678c095d {
    background: rgb(245,245,245);
    padding: 20px;
  }
}

Let me know how it works on your site

Support me by pressing 👍  or marking as solution if this useful for you

I can not fill out the forum due to the alert of zip code. Which code should I use to complete your form?

@bangank36 

1. The hidden on mobile is perfect!
2. For the zip code you can just try 07432 that should work.

4 hours ago, Mifamedianj said:

@bangank36 

1. The hidden on mobile is perfect!
2. For the zip code you can just try 07432 that should work.

Hi,

Kindly remove my previous code and use the following one

@media only screen and (min-width: 768px) {
  #collection-635737ba2a2a3d7110a74e44 #block-3823a0927264678c095d .field-list:not(.hidden) {
    background: rgb(245,245,245);
    padding: 20px;
  }
  
  /*text color after submission*/
  #collection-635737ba2a2a3d7110a74e44 #block-3823a0927264678c095d  .form-submission-text:not(.hidden) {
    color:#000;
  }
}

@bangank36 this is perfect but i'm noticing the "Submit" button isn't behind the gray box anymore. Could we revise that?

Lastly i just added this page which is a different form page https://kathrynlandisconsulting.com/session-prep-form the password is still kickstart. How do I go about editing the code so that I can add that square color behind this as well?

On 11/7/2022 at 7:00 PM, Mifamedianj said:

this is perfect but i'm noticing the "Submit" button isn't behind the gray box anymore. Could we revise that?

Lastly i just added this page which is a different form page https://kathrynlandisconsulting.com/session-prep-form the password is still kickstart. How do I go about editing the code so that I can add that square color behind this as well?

You can add a Code Block under Form > Use this code, so no need to find page id.

<style>
  @media only screen and (min-width: 768px) {
 .field-list:not(.hidden) {
    background: rgb(245,245,245);
    padding: 20px;
  }
.form-submission-text:not(.hidden) {
    color:#000;
  }
}
</style>