WHY does my form now say "required" and not the asterisk???

I have sites which operate in French, and all the required fields on a form now have an English 'required' on them. Any thoughts on how I can change that. 

I have a similar issues name and address blocks where the fields headings are in English.

Thx in advance.

There doesn't even appear to be an option to change this? To make it even worse, there isn't even a space between the field and the "(required)"! (Screenshot) I even tried adding a space after the field name and it did not add a space.

How do I fix this to go back to the asterisk please???

This is truly disappointing and looks HORRIBLE. Like?????

26 minutes ago, cinnamoncat said:

there isn't even a space between the field and the "(required)"!

I'm not seeing the spacing issue that you've reported (see my screenshot below).

Have you perhaps added some custom CSS that may be causing this?

A link to the site may help us to see any issues 🙂

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

Hi @paul2009, thank you for your response. The issue only occurs on Safari. Maybe the issue is that Safari is on v14, but I would like to think Squarespace wouldn't deprecate design support that quickly.....

The only custom CSS code I have is:
 

form .select optgroup {
  display : none;
}

which is to remove the blank option that was appearing at the bottom of drop-down lists on forms.

I feel like the space may be a lost battle, unless you/others have custom CSS suggestions?
Is there no way to choose between the asterisk and the "required" text? If not, do you have any insight as to why?

2 hours ago, cinnamoncat said:

The issue only occurs on Safari. Maybe the issue is that Safari is on v14, but I would like to think Squarespace wouldn't deprecate design support that quickly.

Yes. The spacing is created using column-gap in a Flex Layout, and that is only supported in Safari from version 14.1 onwards (April 2021). If that's an issue, you may want to reach out to Squarespace Customer Care using a support ticket.

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

2 hours ago, BoonVivant said:

I want to change the word 'required' on the Form Block back into an asterisk

Please try the custom CSS that I posted above.

This code worked perfectly for me.  Thank you for sharing.

On 5/5/2023 at 1:43 AM, paul2009 said:

The change from "*" to "(required)" is part of the Form Block update, currently being rolled out to all sites.

Have you checked the Language & Region settings on your sites (in Settings > Language & Region > Region) to check they are correctly configured for French?

If you're looking for a CSS solution to restore the asterisk on form titles, please try this:

/* 
Hide required on field titles 
Tip by sf.digital
*/
.form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required {
  visibility: hidden;  
}
.form-wrapper .react-form-contents .field-list .title .required:before, .form-wrapper .react-form-contents .field-list .fields .description.required:before {
  visibility: visible;  
  content: "*"; 
  font-size: 1.5em;
  line-height: 1em;
}

Let me know how you get on.

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

This is ridiculous and incredibly stupid. This should be a simple setting for users to choose from, and not something that requires a code change. 

On 5/5/2023 at 1:43 AM, paul2009 said:

The change from "*" to "(required)" is part of the Form Block update, currently being rolled out to all sites.

Have you checked the Language & Region settings on your sites (in Settings > Language & Region > Region) to check they are correctly configured for French?

If you're looking for a CSS solution to restore the asterisk on form titles, please try this:

/* 
Hide required on field titles 
Tip by sf.digital
*/
.form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required {
  visibility: hidden;  
}
.form-wrapper .react-form-contents .field-list .title .required:before, .form-wrapper .react-form-contents .field-list .fields .description.required:before {
  visibility: visible;  
  content: "*"; 
  font-size: 1.5em;
  line-height: 1em;
}

Let me know how you get on.

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

ALSO, it should be COMMON SENSE that any "change" that prompts so many forum questions is probably a bad idea!

On 5/8/2023 at 10:25 PM, Lyndsay06 said:

This code worked perfectly for me.  Thank you for sharing.

You're welcome 🙂

36 minutes ago, cinnamoncat said:

This is ridiculous and incredibly stupid. This should be a simple setting for users to choose from

I hope that the workaround that I provided above was helpful, at least for the moment. 

Your comments in this user forum may not been seen by anyone from Squarespace, but you can make a feature request and ensure it is seen by the right people at Squarespace, by raising it via a support ticket.

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

Hi, is it possible to change that "Required" word to another one?

On 5/5/2023 at 8:43 AM, paul2009 said:

The change from "*" to "(required)" is part of the Form Block update, currently being rolled out to all sites.

Have you checked the Language & Region settings on your sites (in Settings > Language & Region > Region) to check they are correctly configured for French?

If you're looking for a CSS solution to restore the asterisk on form titles, please try this:

/* 
Hide required on field titles 
Tip by sf.digital
*/
.form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required {
  visibility: hidden;  
}
.form-wrapper .react-form-contents .field-list .title .required:before, .form-wrapper .react-form-contents .field-list .fields .description.required:before {
  visibility: visible;  
  content: "*"; 
  font-size: 1.5em;
  line-height: 1em;
}

Let me know how you get on.

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

Thank you, this worked!

Hi @paul2009, your CSS solution to restore the asterisk didn't work on our website. Have you got an alternative solution to change (required) on our form?  https://happydrops.nl/offerte

Thx in advance.

On 12/5/2023 at 5:01 AM, BRands said:

Hi @paul2009, your CSS solution to restore the asterisk didn't work on our website. Have you got an alternative solution to change (required) on our form?  https://happydrops.nl/offerte

Thx in advance.

 

You can use this CSS code

span.description.required {
    visibility: hidden;
}

span.description.required:before {
    content: "(*)";
    visibility: visible;
    color: red;
    font-size: 18px;
}

23 hours ago, tuanphan said:

You can use this CSS code

span.description.required {
    visibility: hidden;
}

span.description.required:before {
    content: "(*)";
    visibility: visible;
    color: red;
    font-size: 18px;
}

You're a genius!! Thanks a lot for sharing your knowledge! 

@tuanphan and @paul2009

Thanks so very much for your contributions (code) to address this issue (the Safari 'required' was neither required nor wanted!)

I am promoted to say so, in part, because of the less-than generous comments above.

Thank you again!

@tuanphan can you please help me fix the formatting on my contact form? I want the asterisk to stay tight next to the writing and the Name and Last Name to show separately side by side as required fields but without the "NAME" title as it feels redundant.

https://seadragon-gold-ge8l.squarespace.com/  

On 2/12/2024 at 2:05 AM, Leticia said:

@tuanphan can you please help me fix the formatting on my contact form? I want the asterisk to stay tight next to the writing and the Name and Last Name to show separately side by side as required fields but without the "NAME" title as it feels redundant.

 

https://seadragon-gold-ge8l.squarespace.com/  

Use this CSS code

span.description.required {
    display: none !important;
}

div.required span:after {
    content: " *" !important;
}

Hi @tuanphan this was really helpful, thank you!

Something strange is going on with my form where the asterisk is only appearing for half of the required fields. It doesn't show up next to Name or the dropdown menu.

I'm using this code:

span.description.required {
    display: none !important;
}

div.required span:after {
    content: "*" !important;
}

Here's a screenshot of without the CSS and with the CSS.

Website is https://www.hoptroff.com/contact-1 password "Test" if you need to look at the site.

On 2/28/2024 at 11:56 PM, ClaireHops said:

Hi @tuanphan this was really helpful, thank you!

Something strange is going on with my form where the asterisk is only appearing for half of the required fields. It doesn't show up next to Name or the dropdown menu.

I'm using this code:

span.description.required {
    display: none !important;
}

div.required span:after {
    content: "*" !important;
}

Here's a screenshot of without the CSS and with the CSS.

 

Website is https://www.hoptroff.com/contact-1 password "Test" if you need to look at the site.

 

Use this CSS code under

div#block-914b1263d69605b89af3 .name span:first-child:after, div#block-914b1263d69605b89af3 .select span:first-child:after {
    content: "*";
}

I´m having issue when I put this code after I submit the form the "asterisks" still stay there. www.gunter.ee/gg800

I used this code:

.form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required {
  visibility: hidden;  
}
.form-wrapper .react-form-contents .field-list .title .required:before, .form-wrapper .react-form-contents .field-list .fields .description.required:before {
  visibility: visible;  
  content: "*"; 
  font-size: 1.5em;
  line-height: 1em;}

36 minutes ago, Rauno said:

I´m having issue when I put this code after I submit the form the "asterisks" still stay there.

@Rauno Please take a look at my post here:

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

Great insight, this was incredibly helpful!