I'm at a loss...My form styling is suddenly broken

Hello! I had created beautiful form styles in custom css (screenshot of the style). Somewhere in the last day, I updated something that has added classes to my form fields and try as I might, I can't figure out where they are coming from.

The site was meant to launch on Saturday, and then Sunday, and now today. I'm hoping that someone here who's smarter than me can take a look? Perhaps the always incredible @tuanphan?

https://www.andasanas.com/sponsored-pass pw 140ann

Thanks so much for the reply @paul2009! Honestly, I'm relieved that it's happened because of updates on the Squarespace side, and not as a result of a very-tired me making careless mistakes. You've saved me any more time digging around looking for a problem, and now I can just restyle and move forward! Thanks so much for your help.

Thank you so much for this, I thought I was going crazy too! 

I can't figure out how to target just the form fields to style in this new version. This is the code I was using before. I know .field-element is removed, but can I get some help updating the rest?

.form-wrapper .field-list .field .field-element {   
border: none !important; 
border-bottom: 1px solid #7B666A !important;
border-radius: 0px !important;
background: #ffffff;
}

Hi @paul2009, I was able to restyle my form but am struggling to target the error state. It seems that each field gets its own unique class which makes it difficult to set a global style. Do you happen to know how I can go about changing the background colour etc.?

@Kambree, i was able to update my field elements with the following selectors:

.form-wrapper .react-form-contents .field-list {
   input, text area {
      /* your styles here*/
   }
}

Hi! 

I've had a customized CSS for my submission form but now it has gone back to default with the white boxes etc. I can see that Squarespace has updated some features (I'm Swedish so it seems like a few features have been implemented to adapt to our market, e.g. adding dates in the correct way). My customized CSS doesn't respond anymore and as you can see below it should be without white description boxes and with red lines. What's wrong/what happened to Squarespace? Is it a bug? Have no idea when it changed since I'm very rarely visiting that page on my website. 

.form-wrapper .field-list .field .field-element{border-top:none!important;

border-left:none!important; border-right:none!important; border-bottom:1px solid

#F11B1F!important; background-color:transparent!important;

color:#F11B1F!important} .form-wrapper .field-list .title{color:#F11B1F!important;

text-transform:!important; letter-spacing:.1em} .required {color: #F11B1F

!important} .form-wrapper .field-list .field .caption {color:#F11B1F!important;

text-transform:lowercase!important; letter-spacing :3em; font-size:8px} .form-wrapper

.field-list .field .caption,.form-wrapper .field-list .field.checkbox label,.form-wrapper

.field-list .field.likert .option,.form-wrapper .field-list .field.likert .question,.form-wrapper

.field-list .field.radio label {color:#F11B1F!important;

text-transform:uppercase!important; letter-spacing:.2em; font-size:10px}

input[type=radio]:after {width:15px; height:15px; border-radius:15px; top:0!important;

left:-1px; position:relative; background-color:#000000; content:''; display:inline-block;

visibility:visible; border:1px solid #000000} input[type=radio]:checked:after{width:15px;

height:15px; border-radius:15px; top:0!important; left:-1px; position:relative;

background-color:#ffffff; content:' '; display:inline-block; visibility:visible; border:0px

solid #ffffff} input[type=checkbox]:after{width:15px; height:15px; top:0!important;

left:-1px; position:relative; background-color:#fffff; content:''; display:inline-block;

visibility:visible; border:1px solid#ffffff}

input[type=checkbox]:checked:after{width:15px; height:15px; top:0!important; left:-1px;

position:relative; background-color:#000000; content:' ✔ '; text-align:center; color:#ffffff;

font-size:10px; display:inline-block; visibility:visible; border:1px solid a#50BDB8}

.form-wrapper .field-list .field select{border-top:none!important;

border-left:none!important; border-right:none!important; border-bottom:0px solid

#000000!important; background-color: transparent !important;

color:#000000!important; color:#000000!important} .form-wrapper .field-list

.section.underline {border-bottom: 1px solid #000000!important} .form-wrapper

.field-list .section{font-size:20px; text-transform:uppercase}

body:not(.button-style-default) .sqs-editable-button, body:not(.button-style-default)

.sqs-editable-button-color {background-color: !important; border: 2px solid

; color: !important;} body:not(.button-style-default)

.sqs-editable-button:hover, body:not(.button-style-default)

.sqs-editable-button-color:hover {background-color:  !important; border: 2px

solid #ffffff; color: !important;}

On 5/2/2023 at 6:06 PM, Jenniferkivinen said:

Hi! 

I've had a customized CSS for my submission form but now it has gone back to default with the white boxes etc. I can see that Squarespace has updated some features (I'm Swedish so it seems like a few features have been implemented to adapt to our market, e.g. adding dates in the correct way). My customized CSS doesn't respond anymore and as you can see below it should be without white description boxes and with red lines. What's wrong/what happened to Squarespace? Is it a bug? Have no idea when it changed since I'm very rarely visiting that page on my website. 

 

.form-wrapper .field-list .field .field-element{border-top:none!important;

border-left:none!important; border-right:none!important; border-bottom:1px solid

#F11B1F!important; background-color:transparent!important;

color:#F11B1F!important} .form-wrapper .field-list .title{color:#F11B1F!important;

text-transform:!important; letter-spacing:.1em} .required {color: #F11B1F

!important} .form-wrapper .field-list .field .caption {color:#F11B1F!important;

text-transform:lowercase!important; letter-spacing :3em; font-size:8px} .form-wrapper

.field-list .field .caption,.form-wrapper .field-list .field.checkbox label,.form-wrapper

.field-list .field.likert .option,.form-wrapper .field-list .field.likert .question,.form-wrapper

.field-list .field.radio label {color:#F11B1F!important;

text-transform:uppercase!important; letter-spacing:.2em; font-size:10px}

input[type=radio]:after {width:15px; height:15px; border-radius:15px; top:0!important;

left:-1px; position:relative; background-color:#000000; content:''; display:inline-block;

visibility:visible; border:1px solid #000000} input[type=radio]:checked:after{width:15px;

height:15px; border-radius:15px; top:0!important; left:-1px; position:relative;

background-color:#ffffff; content:' '; display:inline-block; visibility:visible; border:0px

solid #ffffff} input[type=checkbox]:after{width:15px; height:15px; top:0!important;

left:-1px; position:relative; background-color:#fffff; content:''; display:inline-block;

visibility:visible; border:1px solid#ffffff}

input[type=checkbox]:checked:after{width:15px; height:15px; top:0!important; left:-1px;

position:relative; background-color:#000000; content:' ✔ '; text-align:center; color:#ffffff;

font-size:10px; display:inline-block; visibility:visible; border:1px solid a#50BDB8}

.form-wrapper .field-list .field select{border-top:none!important;

border-left:none!important; border-right:none!important; border-bottom:0px solid

#000000!important; background-color: transparent !important;

color:#000000!important; color:#000000!important} .form-wrapper .field-list

.section.underline {border-bottom: 1px solid #000000!important} .form-wrapper

.field-list .section{font-size:20px; text-transform:uppercase}

body:not(.button-style-default) .sqs-editable-button, body:not(.button-style-default)

.sqs-editable-button-color {background-color: !important; border: 2px solid

; color: !important;} body:not(.button-style-default)

.sqs-editable-button:hover, body:not(.button-style-default)

.sqs-editable-button-color:hover {background-color:  !important; border: 2px

solid #ffffff; color: !important;}

Can you share link to page where you use form? We can check easier

Hello!

I created a nicely customized contact form but for two days in a row now, I've come to work on the site and all of the customization is gone. The CSS is still there but it just doesn't show up and I can't get the CSS to work again at all. I put the code into a new site and it works perfectly. After going through and removing code one bit at a time and no change, I ended up duplicating the site and the CSS changes came back. However, this site is a big one so replicating and fixing all the block ids, etc is really time-consuming and I really don't want to do that again. But I really can't find the issue. 

This also happened on another site I'm working on so wondering if this is a Squarespace platform issue and not just a code issue?

The product page fields seem to overlap with the contact form pages and I suspect that may be causing a problem, though I did remove that CSS and it didn't change anything. And there isn't a store on the other website that also had this issue.

PLEASE HELP.

site: flute-piccolo-zfhl.squarespace.com
password: Sawchukwebsite

In the image, you can see both forms. The left side is how its supposed to look, the right side is what it keeps changing to.

4 hours ago, RMorrisDesign said:

I created a nicely customized contact form but for two days in a row now, I've come to work on the site and all of the customization is gone

@RMorrisDesign Please see my post above. 

@paul2009 Thank you for sharing your insights and knowledge!
It's clear that Squarspace has a tough job, on the one hand evolving the product, but on the other hand ensuring backwards compatibility as much as possible.
Of course, we have to expect scripts and CSS classes to change. Sometimes this results in problems with customizations of our own.
Here knowledge is everything, so thanks again.

Hi there, I changed the style of my form fields a while back, but all of a sudden there's an issue with it (I haven't tinkered with CSS for months). Could someone offer some advice as to why the issue's occurring? 

Here is the page with the form in question. The fields should be black with no border, but should have an orange bottom border.

The CSS I input which worked up until yesterday is:

.form-wrapper .field-list .field .field-element {background-color: #000000; border-top:none; border-left:none; border-right:none; border-bottom: 2px solid #ff7300; }

Any help would be appreciated, as currently, users are unable to contact us via the from.

Thanks in advance.

You're not alone! Have a read through of this thread:

Thanks for your reply Ziggy. Sadly I can't access that link. I'm getting a message saying:

Error code: 2F173/H

Sorry that was from the Circle forum, try this one instead:

Thanks for sharing Ziggy.

Although I appreciate you sharing that article with me, Squarespace isn't being much help, in offering what the new commands for the removed ones are.

I'm not a developer, and input the original CSS from following a tutorial, so without Squarespace offering a list of updated commands etc, it's impossible for me to update the CSS and get my form working again. Feels like they didn't consider a fallback or safety net for many of its customers. Disappointing. 

1 minute ago, SocialJungle said:

I'm not a developer, and input the original CSS from following a tutorial, so without Squarespace offering a list of updated commands etc, it's impossible for me to update the CSS and get my form working again. Feels like they didn't consider a fallback or safety net for many of its customers. Disappointing. 

Despite so many Squarespace websites relying on Custom CSS, it's not something that they "support" so it's all done at our own risk. Squarespace occasionally changes code structures to improve the platform, which should be a good thing overall, but it sadly can have negative repercussions like this.

Could someone please help; after Squarespace's update, my form appears as if it's not working. The font is white but the colour of the form fields are also white; this makes it look as if nothing appears in the fields when you type. This is the form in question.

The font on my site is whit across the whole site, so changing the font colour isn't an option. Could someone please help me by telling what CSS could use to change the colour of the font only in the form fields?

Thanks in advance.

Does anyone know the selector specifically for the message box?

Everything else works with the new selectors except the message box. 

 

3 minutes ago, RMorrisDesign said:

Does anyone know the selector specifically for the message box?

It consists of a number of elements, including the form-item 'wrapper', label and the textarea elements. The selectors will depend on what you are trying to achieve. Some more details and link to the (new) form will help forum users to respond 🙂

I've tried multiple selectors and they all work on all of the other form fields but the problem is, nothing seems to target the message field.

code and form image attached for reference.

9 minutes ago, RMorrisDesign said:

code and form image attached for reference

Try .form-wrapper .field-list textarea

(It always helps if you can include a link to the page as we can't check our suggestions without it 😉)

Hi, cant seem to get my forms background color for the input boxes to change....any suggestions.  I have tried using .form-wrapper .field-list .field .field-element {} to no avail. 

Here is the current code for the form

//Form Fields 

.form-wrapper input[type=submit] {
  color: #2F5597!important;
  background-color: #DBE3F4! important;
  font-family: "Calibre-Light", serif!important;
  font-size: 10px;
  border: 1px solid #2F5597!important;
  width: 200px
}

.sqs-block-form .field-element::placeholder {
  font-family: "Calibre-Light" !important;
color: #2F5597!important;
}

button {
     font-family: "linotype-didot", serif !important;
  color: color: #2F5597!important;
}

Hello,

I've used the code below on various client sites to customize the form block, and it's worked perfectly until recently. Now, I've gone back to check old sites where the code was working (I think until just a few weeks ago), and it's no longer targeting correctly.

I've tried variations of the code (adding !important to all elements, trying different classes and ids), and nothing seems to be working. I don't think this is a 7.1 issue as the code seemed just fine until recently. Would really appreciate some help on this. I'm no expert when it comes to CSS and coding and just rely on my tiny bit of school training and what I can find online.

.form-wrapper .field-list .field .field-element
{
  background-color:  #fff;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
}

For reference, I also used the code successfully on this site.

Thanks!
Carolina

Hi, I assume this code should add thick borders to every input boxes in the form. Because I no longer see the .field-element class in your form fields. For this, you can try changing the css to the following:

.form-wrapper .field-list .field textarea,  
.form-wrapper .field-list .field input {
  background-color: #fff !important;
  border: 2px solid #000 !important;
}

!important is needed because I see that squarespace is applying a class directly to the input (for example: class="eTv7qUMqLR9lJxpIAC3F" ) and adding css. so you need to override it.

Quote

I don't think this is a 7.1 issue as the code seemed just fine until recently.

It is a v7.1 issue in that SS has changed how form blocks work. One of the changes was to the CSS classes.