Form Formatting Issues - Date and Checkbox/Numered

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.

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

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?

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. 

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

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

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?

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

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?

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/

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?

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.