RealFoodKitchen365 Posted February 3, 2021 Share Posted February 3, 2021 Site URL: https://www.realfoodkitchen365.com/valentines-order-form It's another date formatting issue in my form section. I have amended the layout to show DD/MM/YY but when tab between it misses out MM entirely. Also when the form is submitted to the linked email address it changes the format back to American. Any way to sort this? Also because i'm a total newbie, i'm attempting to add numeric value to the food options given, can this be done in the form I am using? Option to select a a number of items not just tick box. Thanks to anyone that can help me. Also if a Date Picker resource pops up I cannot pay for a date picking plug-in as it is a work website. Link to comment
Beyondspace Posted February 3, 2021 Share Posted February 3, 2021 24 minutes ago, RealFoodKitchen365 said: Site URL: https://www.realfoodkitchen365.com/valentines-order-form It's another date formatting issue in my form section. I have amended the layout to show DD/MM/YY but when tab between it misses out MM entirely. Also when the form is submitted to the linked email address it changes the format back to American. Any way to sort this? Also because i'm a total newbie, i'm attempting to add numeric value to the food options given, can this be done in the form I am using? Option to select a a number of items not just tick box. Thanks to anyone that can help me. Also if a Date Picker resource pops up I cannot pay for a date picking plug-in as it is a work website. When I tab, it select Month first, I guess you just change the element css order instead of it actually place, since custom code is not an option, I think you should use a text box instead. Or place 3 dropdown selects on the same row BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
RealFoodKitchen365 Posted February 3, 2021 Author Share Posted February 3, 2021 17 minutes ago, bangank36 said: When I tab, it select Month first, I guess you just change the element css order instead of it actually place, since custom code is not an option, I think you should use a text box instead. Or place 3 dropdown selects on the same row Thank you for your help, how do i change the element css order? To explain I input the code below (taken from google) into the custom css which helped rearrange the DD/MM/YY for me but now as you said when tabbed it is in the original order. .form-wrapper .field-list .date .field { position: relative } .month { left: 7.5em; margin-left: 0 !important } .day { left: -1em; margin-left: 0 !important } .year { left: 5.5em; margin-left: 0 !important } Also is there anyway to amend the submission form, it sends to my email changing the date format again from 15/02/2021 to 02/15/2021. Can this be helped? Beyondspace 1 Link to comment
Beyondspace Posted February 3, 2021 Share Posted February 3, 2021 30 minutes ago, RealFoodKitchen365 said: Thank you for your help, how do i change the element css order? To explain I input the code below (taken from google) into the custom css which helped rearrange the DD/MM/YY for me but now as you said when tabbed it is in the original order. .form-wrapper .field-list .date .field { position: relative } .month { left: 7.5em; margin-left: 0 !important } .day { left: -1em; margin-left: 0 !important } .year { left: 5.5em; margin-left: 0 !important } Also is there anyway to amend the submission form, it sends to my email changing the date format again from 15/02/2021 to 02/15/2021. Can this be helped? That what I meant, you are using css re-order the input, so it wont change the order in the submission. BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
RealFoodKitchen365 Posted February 3, 2021 Author Share Posted February 3, 2021 12 minutes ago, bangank36 said: That what I meant, you are using css re-order the input, so it wont change the order in the submission. Right so a text box or drop down option is my only way to fix it. Thank you Beyondspace 1 Link to comment
WillMyers Posted March 23, 2021 Share Posted March 23, 2021 (edited) Hey, I've seen this pop up a few times. I think I've got a fix that will do it: <script> function switchDDMM() { let fields = document.querySelectorAll('.field.day.two-digits'); fields.forEach(field => { field.parentNode.insertBefore(field, field.previousElementSibling) }) } function switchMMDD(form) { let fields = form.querySelectorAll('.field.month.two-digits'); fields.forEach(field => { field.parentNode.insertBefore(field, field.previousElementSibling) }) } function switchOnSubmit(){ let submitBtnArr = document.querySelectorAll('.form-button-wrapper'); submitBtnArr.forEach(submitBtn => { let form = submitBtn.closest('.form-block'); submitBtn.addEventListener('click', function(){ switchMMDD(form); }) }) } window.addEventListener('load', function(){ switchDDMM(); switchOnSubmit(); }) </script> <style> .form-item.fields.date.error .field.month{ left: calc(3.5rem + 2%) } .form-item.fields.date.error .field.day{ left: calc(-3.5rem - 2%) } </style> I've got a tutorial that goes over how I built this. You can check it out here: https://www.will-myers.com/articles/switching-the-day-and-month-field-on-squarespace-forms Edited March 25, 2021 by WillMyers ArminB and nickstein 2 Hey there, my name is Will and I help Squarespace designers and developers with my plugins, tutorials, and my Code Curious Membership. I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life - I'm an expert in 2 of these. Youtube | Website Link to comment
nickstein Posted April 10, 2021 Share Posted April 10, 2021 Hey @WillMyers, is there a way that this can change the date format in the email that's sent when they submit the form too? or would that still arrive as MM/DD/YYYY? Beyondspace 1 Link to comment
Beyondspace Posted April 27, 2021 Share Posted April 27, 2021 On 4/10/2021 at 3:33 PM, nickstein said: Hey @WillMyers, is there a way that this can change the date format in the email that's sent when they submit the form too? or would that still arrive as MM/DD/YYYY? You can make sure the dateformat correctly by using datepicker on a normal text input BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
nickstein Posted April 27, 2021 Share Posted April 27, 2021 3 hours ago, bangank36 said: You can make sure the dateformat correctly by using datepicker on a normal text input How do I do this please? Link to comment
Beyondspace Posted April 27, 2021 Share Posted April 27, 2021 22 minutes ago, nickstein said: How do I do this please? You can implement on your own or hire a dev for that https://flatpickr.js.org/ BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
KHDigital Posted June 15, 2022 Share Posted June 15, 2022 On 4/27/2021 at 5:11 PM, nickstein said: How do I do this please? @nicksteindid you ever find a solution (short of a plugin) to getting the date in the correct order in the email that's sent when a form is submitted? Link to comment
paul2009 Posted June 15, 2022 Share Posted June 15, 2022 5 hours ago, KHDigital said: nicksteindid you ever find a solution (short of a plugin) to getting the date in the correct order in the email that's sent when a form is submitted? It isn't possible to do this on Squarespace because you have no access to the form data between the point of submission and receipt of the email. If you are using a standard form block (not a product form or a custom checkout form) then one possible workaround is to send the data to a different storage medium, like Google Drive or Zapier, and then use these tools to manipulate the data before sending it on. However it is a lot of effort for little gain. It is much better to ensure data accuracy when the form is being completed, for example with a datepicker. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment