jamieFromOttawa Posted May 4, 2023 Share Posted May 4, 2023 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. raeroshow 1 Link to comment
Solution paul2009 Posted May 5, 2023 Solution Share Posted May 5, 2023 (edited) 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 & 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; } .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 March 12 by paul2009 Updated due to Sqsp changes PartTwoDesign, Thea_Rose, vk2020 and 8 others 5 6 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
popofglitter Posted May 8, 2023 Share Posted May 8, 2023 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????? Link to comment
paul2009 Posted May 8, 2023 Share Posted May 8, 2023 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 ⬇️ 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
popofglitter Posted May 8, 2023 Share Posted May 8, 2023 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? paul2009 1 Link to comment
paul2009 Posted May 8, 2023 Share Posted May 8, 2023 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
paul2009 Posted May 8, 2023 Share Posted May 8, 2023 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. mop, Lyndsay06 and BoonVivant 1 1 1 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
Lyndsay06 Posted May 8, 2023 Share Posted May 8, 2023 This code worked perfectly for me. Thank you for sharing. mop and paul2009 1 1 Link to comment
popofglitter Posted May 10, 2023 Share Posted May 10, 2023 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. Link to comment
popofglitter Posted May 10, 2023 Share Posted May 10, 2023 (edited) 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! Edited May 10, 2023 by cinnamoncat BoonVivant 1 Link to comment
paul2009 Posted May 10, 2023 Share Posted May 10, 2023 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
paul2009 Posted May 10, 2023 Share Posted May 10, 2023 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 ⬇️ PartTwoDesign 1 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 Posted May 17, 2023 Share Posted May 17, 2023 (edited) Hi, is it possible to change that "Required" word to another one? Edited May 17, 2023 by estloris Mistake Link to comment
Countonlola Posted July 25, 2023 Share Posted July 25, 2023 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! Link to comment
BRands Posted December 4, 2023 Share Posted December 4, 2023 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. Link to comment
tuanphan Posted December 6, 2023 Share Posted December 6, 2023 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; } delphine_nt and BRands 1 1 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
BRands Posted December 7, 2023 Share Posted December 7, 2023 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! Link to comment
Jump Posted December 20, 2023 Share Posted December 20, 2023 (edited) @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! Edited December 20, 2023 by Jump creedon and paul2009 1 1 Link to comment
Leticia Posted February 11 Share Posted February 11 @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/ Link to comment
tuanphan Posted February 13 Share Posted February 13 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; } 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
ClaireHops Posted February 28 Share Posted February 28 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. Link to comment
tuanphan Posted March 2 Share Posted March 2 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: "*"; } 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
Rauno Posted March 12 Share Posted March 12 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;} DebbieL 1 Link to comment
paul2009 Posted March 12 Share Posted March 12 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 ⬇️ Rauno 1 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
smith4743 Posted March 13 Share Posted March 13 Great insight, this was incredibly helpful! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment