Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Form Formatting Issues - Date and Checkbox/Numered


Question

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 post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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'); fi

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

Right so a text box or drop down option is my only way to fix it. Thank you

6 answers to this question

Recommended Posts

  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...