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

Hi, I've been using forms for my clients for a long time now and have used the following code to make the background of the form fields match the background of the page, so that the text is actually visible.

}
.form-wrapper .field-list .field .field-element {
    background-color: #f2f3ec !important;
    border-color: #ddbaba;
      color: #000000;
}

This appears to have changed across the board for all of my websites and now the fields are white, so you can't see when you type in them as the text is also white. The radio buttons are also black and I'd prefer for them to match the rest of the colours.

I'm also unable to use custom fonts anymore...

Help please 🙂 

On 5/8/2023 at 11:48 AM, stateofreveriestudio said:

Hi, I've been using forms for my clients for a long time now and have used the following code to make the background of the form fields match the background of the page, so that the text is actually visible.

}
.form-wrapper .field-list .field .field-element {
    background-color: #f2f3ec !important;
    border-color: #ddbaba;
      color: #000000;
}

This appears to have changed across the board for all of my websites and now the fields are white, so you can't see when you type in them as the text is also white. The radio buttons are also black and I'd prefer for them to match the rest of the colours.

I'm also unable to use custom fonts anymore...

Help please 🙂 

See this comment

https://forum.squarespace.com/topic/199760-aligning-form-input-boxes-and-button-next-to-each-other/?do=findComment&comment=628718

Hey! 

I have been trying to style my form using CSS. The form is from as far as I can tell correct, I've used it before (and it was working) but now its not and I can't work out why! 

Is this a broarder Squarespace issue? I have noticed other sites on Squarespace (and not just my sites) forms styling has all reverted back to a default style form. 

The code I have used is: 

//Style Form// 
.form-wrapper .field-list .field .field-element { 
border-style:solid;  
border-width:1px ;  
border-color:#172438 ; 
border-radius: 29px !important; 
background: transparent !important; 
}

I've tried adding !important to all of them, I've tried having the border styling on one line, but no matter what I do the form styling won't budge! Any assistance would be greatly appreciated. 

I could send 50 websites I am finding with the same issue, but the one I am working on is: 

https://crimson-shark-y36w.squarespace.com/
Pword: melville

I've added 2 files, one how it should look and one with how it is displaying now... 

Please note, the CSS above is saved in the back end of the site. 

Thanks

@tuanphan are you able to help with this one? 

On 5/16/2023 at 7:01 PM, elisemcg said:

@tuanphan are you able to help with this one? 

Just enable this option

https://forum.squarespace.com/topic/199760-aligning-form-input-boxes-and-button-next-to-each-other/?do=findComment&comment=628718

Hello, 

I am also having an issue following this update:

I use hidden forms to retrieve data such as email adresses and orderID after checkout and I am sending the ID of the delivery point chosen by the customer in another hidden field.

The email and orderID are still going through when the form is submitted (I use the SQF variables) but the field where the Delivery ID is sent comes always empty when submitted (But I can see that the ID is still sent to the field when I inspect the hidden filed before submitting.)

Do you have any idea from where the problem comes from or how I can overcome it? It was working fine before the update.

Many Thanks

On 6/13/2023 at 7:22 PM, Fauillac said:

Hello, 

I am also having an issue following this update:

I use hidden forms to retrieve data such as email adresses and orderID after checkout and I am sending the ID of the delivery point chosen by the customer in another hidden field.

The email and orderID are still going through when the form is submitted (I use the SQF variables) but the field where the Delivery ID is sent comes always empty when submitted (But I can see that the ID is still sent to the field when I inspect the hidden filed before submitting.)

 

Do you have any idea from where the problem comes from or how I can overcome it? It was working fine before the update.

 

Many Thanks

Can you share site url?

On 6/13/2023 at 7:22 PM, Fauillac said:

Hello, 

I am also having an issue following this update:

I use hidden forms to retrieve data such as email adresses and orderID after checkout and I am sending the ID of the delivery point chosen by the customer in another hidden field.

The email and orderID are still going through when the form is submitted (I use the SQF variables) but the field where the Delivery ID is sent comes always empty when submitted (But I can see that the ID is still sent to the field when I inspect the hidden filed before submitting.)

 

Do you have any idea from where the problem comes from or how I can overcome it? It was working fine before the update.

 

Many Thanks

Send us your site url, or even better, the post purchase order page where you place the form, we can help easier

Your issue is similar to this

Thank you for your quick reply !

Here is the URL of the post purchase order page : https://www.eclipse-store.com/mondial-relay

And the code of the widget from which I get the ID of the delivery point just in case.  https://widget.mondialrelay.com/parcelshop-picker/v4_0/codesamples/Sample-LightImplementation.aspx

But as I said, I can see that the ID is still sent to the field when I inspect the hidden filed before submitting.

Thanks again !

Hello 🙂

I'm trying to change the colour of the radio buttons and check box fill when they're in the checked state. My code works when I'm in the editor, but when previewing the site, it doesn't. I can see my code but it's being overridden.

https://fife-sunflower-68mk.squarespace.com/appointment-enquiry
pw: elipsis

1 hour ago, mbockmaster said:

Hello 🙂

I'm trying to change the colour of the radio buttons and check box fill when they're in the checked state. My code works when I'm in the editor, but when previewing the site, it doesn't. I can see my code but it's being overridden.

https://fife-sunflower-68mk.squarespace.com/appointment-enquiry
pw: elipsis

Add these code

html body.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked, html body.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .sqs-block-form .form-item.email label input[type="checkbox"]:checked, .form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label input[type="radio"]:checked~.radio-mark::after {
    background-color: var(--sage) !important;
}