Jump to content

Form Formatting Issues - Date and Checkbox/Numered

Recommended Posts

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...

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 by WillMyers

Hey-o, my name is Will and I help Squarespace designers and developers with technical things.

I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life  - although I'm only an expert in 2 of these. 

Check out my plugin store or sign up for my newsletter

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 year later...
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.

Buy me a coffee

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.