Jump to content

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

Go to solution Solved by paul2009,

Recommended Posts

  • Solution
On 5/4/2023 at 10:42 PM, jamieFromOttawa said:

I have sites which operate in French, and all the required fields on a form now have an English 'required' on them.

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 & RegionRegion) to check they are correctly configured for French?

image.thumb.png.58c4ff3c5e111fe90f2be81189d3bbc7.png

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;
}
.form-wrapper .react-form-contents--submitted .required:before {
  visibility: hidden!important;
}

Let me know how you get on.

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

Edited by paul2009
Updated due to Sqsp changes

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.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment

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

 

Screen Shot 2023-05-08 at 10.31.02 AM.png

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

image.thumb.png.8d8d5098221b47af3111c9ba1eb2253b.png

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  ⬇️

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.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment

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?

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

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.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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

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.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
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 & RegionRegion) to check they are correctly configured for French?

image.thumb.png.58c4ff3c5e111fe90f2be81189d3bbc7.png

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. 

Link to comment

 

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 & RegionRegion) to check they are correctly configured for French?

image.thumb.png.58c4ff3c5e111fe90f2be81189d3bbc7.png

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!

Edited by cinnamoncat
Link to comment
On 5/8/2023 at 10:25 PM, Lyndsay06 said:

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

You're welcome 🙂

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.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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

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.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
  • estloris changed the title to Change "Required" to other word in forms
  • 2 months later...
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 & RegionRegion) to check they are correctly configured for French?

image.thumb.png.58c4ff3c5e111fe90f2be81189d3bbc7.png

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!

Link to comment
  • 4 months later...
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;
}

image.png.faa8898a29bdc963f339095c048a4d74.png

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

image.png.faa8898a29bdc963f339095c048a4d74.png

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

Link to comment
  • 2 weeks later...
  • 1 month later...
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/  

Captura de tela 2024-02-11 155948.png

Use this CSS code

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

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

 

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
  • 3 weeks later...

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.

 

with CSS.png

without CSS.png

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

 

with CSS.png

without CSS.png

Use this CSS code under

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

image.png.9e8b0829377b93aa9f9af79b3c113c1c.png

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
  • 2 weeks later...

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

 

Screenshot 2024-03-11 at 12.33.12.png

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

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.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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.