Jump to content

Form Block Color

Recommended Posts

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.

Screen Shot 2022-11-02 at 8.17.03 PM.png

Link to comment
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.

Screen Shot 2022-11-02 at 8.17.03 PM.png

You can try 

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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

image.thumb.png.0880a570b465b0c9c1f6ede103001a89.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
  }
}

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Edited by Mifamedianj
Change needed
Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.