Jump to content

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

Go to solution Solved by paul2009,

Recommended Posts

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

Screen Shot 2023-05-01 at 11.08.59 AM.png

Link to comment
  • Solution
On 5/1/2023 at 4:15 PM, mbockmaster said:

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.

It is nothing that you have done! 

To explain, a Form Block update is currently being rolled out to all Squarespace websites, on a site by site basis. This update improves forms for global visitors by making a number of welcome changes to dates, times, addresses and telephone numbers.

In addition to the functional changes, there are also some design tweaks. For example, required fields now show as “(required)” - or the equivalent when other language settings are used - as opposed to showing “*”.

The downside of these changes is that they break all custom scripts and custom CSS on all sites. If you've used any custom code, it will need to be rewritten. This is a huge undertaking for anyone who produces third party addons for Squarespace (please be patient with them!) but, if you're only using some custom CSS, it should be straightforward to update it for the new form markup and classes. Here are some examples of the changes:

  • The form-inner-wrapper class has been removed and replaced by the new react-form-contents class
  • The field-element class has been removed. The selector ".form-item input" may be useful when targeting form inputs.
  • The classes three-digits and four-digits have been removed. The phone class can still be used.
  • The classes day, month, year, two-digits and four-digits have been removed. You can still use the date class.
  • The classes hourminute, second, am and pm have been removed. You can still use the time class.
  • The classes address1address2, citystate-provincezip and country have been removed. Address fields are now dynamically generated, depending on the selected country and there is a new country-select class for the country dropdown. You can still use the address class.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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

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*/
   }
}

Link to comment

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;}

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Screenshot 2023-05-04 at 8.14.04 PM.png

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

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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

Link to comment

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.

Edited by SocialJungle
Link to comment

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

 

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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. 

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.

Edited by SocialJungle
Link to comment
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 🙂

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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;
}

Link to comment

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

 

 

Link to comment

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.

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.