m_lundberg Posted November 18, 2020 Share Posted November 18, 2020 Site URL: https://finn1pt.squarespace.com/lag-en-profil Hello, I have been searching around here on the forum and found a few others asking this. What I have done so far is to add three separate drop-down menus in the form, and used CSS (Position and top/left) to get them in-line vertically. Like this: #select-yui_3_17_2_1_1604061689568_154917 { position: absolute; top: 273px; left: 65px; I was happy with that solution until I tried the site using Mozilla Firefox, all three check-boxes was a few pixels off. IE and google chrome works fine. Any suggestions? https://finn1pt.squarespace.com/lag-en-profil password: access Link to comment
tuanphan Posted November 22, 2020 Share Posted November 22, 2020 Hi. Have you solved this yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
m_lundberg Posted November 26, 2020 Author Share Posted November 26, 2020 On 11/22/2020 at 2:46 AM, tuanphan said: Hi. Have you solved this yet? Hello, I have not solved this yet. Link to comment
creedon Posted November 26, 2020 Share Posted November 26, 2020 Can you use a standard date field instead of three separate text fields? I think a solution would be easier if you could. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
m_lundberg Posted November 28, 2020 Author Share Posted November 28, 2020 On 11/26/2020 at 9:17 AM, creedon said: Can you use a standard date field instead of three separate text fields? I think a solution would be easier if you could. Agree, using a standard date field would be the best solution. Unfortnuately Squarespace has not a date field in the DD/MM/YYYY format. Link to comment
creedon Posted November 28, 2020 Share Posted November 28, 2020 (edited) A standard date field can be changed with CSS much more easily than three separate text fields. This would allow you to change the date to DD/MM/YYYY. Because the date field is grouped and ordered in a specific way, reordering them is pretty easy. Add the follow to Design > Custom CSS. #block-cd9a11642ad010a98fec .date { display: flex; } #block-cd9a11642ad010a98fec .day { order: -1; } This is for a v7.1 site and the block id is specific to m_lunberg's site. Let us know how it goes. Edited May 30, 2022 by creedon TaranTim 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
m_lundberg Posted November 29, 2020 Author Share Posted November 29, 2020 12 hours ago, creedon said: A standard date field can be changed with CSS much more easily then three separate text fields. This would allow you to change the date to DD/MM/YYYY. Because the date field is grouped and ordered in a specific way, reordering them is pretty easy. Add the follow to Design > Custom CSS. #block-cd9a11642ad010a98fec .date { display: flex; } #block-cd9a11642ad010a98fec .day { order: -1; } This is for a v7.1 site and the block id is specific to m_lunberg's site. Let us know how it goes. That worked perfectly, thanks a lot! This problem has been bugging me for a while. creedon 1 Link to comment
m_lundberg Posted December 23, 2020 Author Share Posted December 23, 2020 On 11/28/2020 at 8:32 PM, creedon said: A standard date field can be changed with CSS much more easily then three separate text fields. This would allow you to change the date to DD/MM/YYYY. Because the date field is grouped and ordered in a specific way, reordering them is pretty easy. Add the follow to Design > Custom CSS. #block-cd9a11642ad010a98fec .date { display: flex; } #block-cd9a11642ad010a98fec .day { order: -1; } This is for a v7.1 site and the block id is specific to m_lunberg's site. Let us know how it goes. Sorry, I didn't test this thoroughly enough first and I didn't notice the tabbing-order is as the old arrangement, i.e when you are on the date field and and hit the TAB-key to enter the next field it goes straight to the year-field. Is it possible to change the tabbing-order as well as the visual order. Fortunately it's no problem on phones or tablets. Link to comment
paul2009 Posted December 24, 2020 Share Posted December 24, 2020 (edited) An alternative solution is to use a datepicker, as this makes date selection unambiguous. We sell a datepicker that you can add to almost any Squarespace form to make it easy for visitors to enter dates reliably and visually. It's in use on thousands of Squarespace websites. With two clicks visitors can enter a valid date in a format of your choice. For more information and live examples, see the datepicker product page. Edited January 9, 2021 by paul2009 Removed link to Circle post About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
creedon Posted December 25, 2020 Share Posted December 25, 2020 Add the following to Page Settings > Advanced > Page Header Code Injection for the page. <script> $( ( ) => { $( '[data-form-id="5f5611b7a081cc5ab340fd40"] *' ) .filter ( ':input' ) .slice ( 0, 4 ) .attr ( 'tabindex', 1 ) .end ( ) .slice ( 4 ) .attr ( 'tabindex', 3 ) .end ( ) .slice ( 5, 6 ) .attr ( 'tabindex', 2 ); } ); </script> This is specifically for this site. Because we changed the visual order we now need to override the natural tab order. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
m_lundberg Posted January 5, 2021 Author Share Posted January 5, 2021 On 12/25/2020 at 1:12 AM, creedon said: Add the following to Page Settings > Advanced > Page Header Code Injection for the page. <script> $( ( ) => { $( '[data-form-id="5f5611b7a081cc5ab340fd40"] *' ) .filter ( ':input' ) .slice ( 0, 4 ) .attr ( 'tabindex', 1 ) .end ( ) .slice ( 4 ) .attr ( 'tabindex', 3 ) .end ( ) .slice ( 5, 6 ) .attr ( 'tabindex', 2 ); } ); </script> This is specifically for this site. Because we changed the visual order we now need to override the natural tab order. Let us know how it goes. Thanks Creedon! that worked perfectly! I also have 3 different forms (the first part of the forms are identical) that prompts when you hit the "add to cart" button. I copied the code into the product page (Page Header Code Injection) and changed the data-form-id (the only part of the above code I do actually understand) . I wasn't able to edit it to work on the product page forms. Is it possible to make the script work at the product forms as well? I have added the productpages and their data-form-id's below. -finn1pt.squarespace.com/betalingsside/p/d2fjnb9tfbqqpr2jdaavgkataw0noa (data-form-id="5fd0895e281783041124d4ba") -finn1pt.squarespace.com/to-annonser/p/mnedlig-abonnement (data-form-id="5feadcbf9dff657eec243c9e") -finn1pt.squarespace.com/treannonser/p/rlig-abonnement (data-form-id="5feaf787d54d01335d5a3b1e") Link to comment
tuanphan Posted January 6, 2021 Share Posted January 6, 2021 On 1/5/2021 at 8:49 PM, m_lundberg said: Thanks Creedon! that worked perfectly! I also have 3 different forms (the first part of the forms are identical) that prompts when you hit the "add to cart" button. I copied the code into the product page (Page Header Code Injection) and changed the data-form-id (the only part of the above code I do actually understand) . I wasn't able to edit it to work on the product page forms. Is it possible to make the script work at the product forms as well? I have added the productpages and their data-form-id's below. -finn1pt.squarespace.com/betalingsside/p/d2fjnb9tfbqqpr2jdaavgkataw0noa (data-form-id="5fd0895e281783041124d4ba") -finn1pt.squarespace.com/to-annonser/p/mnedlig-abonnement (data-form-id="5feadcbf9dff657eec243c9e") -finn1pt.squarespace.com/treannonser/p/rlig-abonnement (data-form-id="5feaf787d54d01335d5a3b1e") Have you found the code yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
m_lundberg Posted January 6, 2021 Author Share Posted January 6, 2021 19 minutes ago, tuanphan said: Have you found the code yet? I haven't found out of this yet. I thought it was just to change the data-form-id, which is the only part of the code I understand 😄 Link to comment
creedon Posted January 6, 2021 Share Posted January 6, 2021 On 1/5/2021 at 5:49 AM, m_lundberg said: I also have 3 different forms (the first part of the forms are identical) that prompts when you hit the "add to cart" button. I copied the code into the product page (Page Header Code Injection) and changed the data-form-id The code won't work as is. The forms for product items are not available when the page loads. The code above runs right after the page is loaded. In other words when you click on the button to bring the form up it is loaded on the fly, after the page has already loaded. There is a way to modify forms that are loaded on the fly using a Mutation Observer. It is not an insignificant amount of work. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
paul2009 Posted January 6, 2021 Share Posted January 6, 2021 On 1/5/2021 at 1:49 PM, m_lundberg said: I wasn't able to edit it to work on the product page forms. If it helps, our datepicker extension works on custom product forms too. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
m_lundberg Posted January 7, 2021 Author Share Posted January 7, 2021 10 hours ago, creedon said: The code won't work as is. The forms for product items are not available when the page loads. The code above runs right after the page is loaded. In other words when you click on the button to bring the form up it is loaded on the fly, after the page has already loaded. There is a way to modify forms that are loaded on the fly using a Mutation Observer. It is not an insignificant amount of work. Ok, thanks! That was what I was worried about. Link to comment
m_lundberg Posted January 7, 2021 Author Share Posted January 7, 2021 8 hours ago, paul2009 said: If it helps, our datepicker extension works on custom product forms too. Thanks! Good to know, I will look into the datepicker more closely. Link to comment
TaranTim Posted June 8, 2022 Share Posted June 8, 2022 On 12/25/2020 at 12:12 AM, creedon said: Add the following to Page Settings > Advanced > Page Header Code Injection for the page. <script> $( ( ) => { $( '[data-form-id="5f5611b7a081cc5ab340fd40"] *' ) .filter ( ':input' ) .slice ( 0, 4 ) .attr ( 'tabindex', 1 ) .end ( ) .slice ( 4 ) .attr ( 'tabindex', 3 ) .end ( ) .slice ( 5, 6 ) .attr ( 'tabindex', 2 ); } ); </script> This is specifically for this site. Because we changed the visual order we now need to override the natural tab order. Let us know how it goes. Hi @creedon, or anyone else. Would it be possible to break down the slice javascript? Presumably it's jquery syntax. Do I need to load jquery myself too? The tab order issue is catching me out too, but the original example site has now expired. Thanks. Link to comment
paul2009 Posted June 8, 2022 Share Posted June 8, 2022 (edited) Note that changing the order of the elements on the form won't make any difference to the data that you receive when the form is submitted. The date will still be shown in the format mm-dd-yy. I mention it because it's probably the last thing on your mind when the submissions arrive 🙂 Edited June 8, 2022 by paul2009 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
creedon Posted June 8, 2022 Share Posted June 8, 2022 36 minutes ago, TaranTim said: Would it be possible to break down the slice javascript? https://api.jquery.com/slice/ Quote Presumably it's jquery syntax. It is a jQuery method. Quote Do I need to load jquery myself too? To use jQuery you need to install it. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
TaranTim Posted June 8, 2022 Share Posted June 8, 2022 23 minutes ago, creedon said: https://api.jquery.com/slice/ It is a jQuery method. To use jQuery you need to install it. Thanks for such a quick reply. It's really appreciated. I've now implemented some rather less sophisticated (non-jQuery) code, which works (running in a code block since I'm not admin on this site). The problem now is that all the other form elements still have a tabIndex of 0, so the date-picker doesn't sit within the tab order of the rest of the rather longer form. Tabbing out of the Year field just takes me back to the top of the page. I suppose I'll just have to set the tabs of all the input elements in the form. And all because the Americans use such a daft date format. I really wanted to like Squarespace, so I'm really disappointed they don't provide standard date-picker options in other (better) formats. Link to comment
TaranTim Posted June 8, 2022 Share Posted June 8, 2022 52 minutes ago, paul2009 said: Note that changing the order of the elements on the form won't make any difference to the data that you receive when the form is submitted. The date will still be shown in the format mm-dd-yy. Thanks. I'd noticed that already but it's a good point. I'm bound to forget and mess it up at some point! I did also have a look at your date-picker, and I'm sure it's worth the money, but as a volunteer working on a website for a volunteer-run, not-for-profit running-club website, sadly I can't justify it. paul2009 1 Link to comment
DreamrW Posted July 21, 2022 Share Posted July 21, 2022 Site URL: https://www.garybarrettphoto.com/ I've used the following CSS to change the date format from MM DD YYY to DD MM YYYY on a contact form and although it has worked on the front end, the date on the form submission (the content that's sent to the recipient) is still in the original MM DD YYYY. Is it possible to change this on the back end so that the recipient receives the date in the revised format of DD MM YYYY? .field.month.two-digits{ left:~'calc(3.5rem + 2%)' } .field.day.two-digits { left:~'calc(-3.5rem - 2%)' } Link to comment
paul2009 Posted July 21, 2022 Share Posted July 21, 2022 11 minutes ago, DreamrW said: Is it possible to change [the contact form date] on the back end so that the recipient receives the date in the revised format of DD MM YYYY? No. As you've found, changing the form's appearance with CSS is just a workaround. It isn't possible to change the underlying date format. It has been an issue on Squarespace since the beginning. Another workaround is to use some text or drop-down boxes to try to capture a date but the user experience is not ideal. If you are interested in a paid solution, we sell a Datepicker Extension for Squarespace that automatically adds a datepicker to fields that have 'date' in the name (or the equivalent in another language). It makes it super easy to add a datepicker to Contact Forms. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
DreamrW Posted July 23, 2022 Share Posted July 23, 2022 On 7/21/2022 at 9:49 PM, paul2009 said: No. As you've found, changing the form's appearance with CSS is just a workaround. It isn't possible to change the underlying date format. It has been an issue on Squarespace since the beginning. Another workaround is to use some text or drop-down boxes to try to capture a date but the user experience is not ideal. If you are interested in a paid solution, we sell a Datepicker Extension for Squarespace that automatically adds a datepicker to fields that have 'date' in the name (or the equivalent in another language). It makes it super easy to add a datepicker to Contact Forms. Much appreciated Paul 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