Switching the Day And Month Fields on Squarespace Forms

UPDATE - MAR 25, 2021

The original code in this article wouldn't let the form submit! Squarespace forms will produce an error unless the date field is in MMDDYYYY formate. So I went back and updated this article so everything works. Thanks for letting me know, Lea!

Let’s switch the date and month fields from MM/DD/YYYY to DD/MM/YYYY.

We American’s (as well as a few other stragglers) are determined to stick with our confusing date configurations starting with the month, then day, then year. And as long as Squarespace doesn’t update their form date fields, you will also have to channel your inner Yankee and deal with it. UNLESS you have the code to change it.

In this tutorial I will show you how to use javascript to change the date field formats in Squarespace forms and why CSS might not work for you. This is for anyone who wants to embrace a Euro-vibe and use the more globally-standard day/month/year format (because as much as I love America, it does make sense to start with the smallest unit of time and move to the largest… if you’re into that kinda thing).

If you just want the answer, open the accordion below, and if you want to see how I got that answer, keep reading. I’m going to present two options, one using CSS that I think is worse (I’ll explain why), and another that uses Javascript which I think it better. 

The Solution

Don’t care to learn how/why? Just paste this code into your Page Settings » Advanced » Code Injection area.

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

The CSS Solution

I don’t recommend this approach, since tabbing through the date items is out of order, but it’s definitely the simplest approach. This approach uses CSS to re-position the date and month elements.

After taking a quick peek at the underlying HTML that Squarespace uses for form fields, these are the elements that hold the month and date fields:

DAY FIELD
.field.day.two-digits

MONTH FIELD
.field.month.two-digits

Using the below bit of CSS, we can move the elements around:

/*If there is an error in the form, we'll just switch things visually*/
.field-error + .field-list .form-item.fields.date .field.month {
  left: calc(3.5rem + 2%)
}
.field-error + .field-list .form-item.fields.date .field.day {
  left: calc(-3.5rem + 2%)
}

Be sure to put this in the Custom CSS area of your website. Check out how the date field below looks before and after this code.

Before Adding CSS

After Adding CSS

Great, right?

Well, not exactly…

The problem with this is that the CSS just adjusts the visual layout of things, but the underlying HTML structure hasn’t changed. This might not seem like a problem, but let’s try and tab through this form and see what happens:

Notice as I tab through the items, it still tabs to the Month first, then the day, then the year. Again, this is because CSS adjusts the visual layout, not the underlying structure (HTML) of the page — and it’s this underlying structure that the tabs function uses to tab through a page.

The Javascript Solution (better)

This is what I would recommend and how I got to the code I have in The Solution above.

Before we get started, it’s important to know that Squarespace forms produce an error, if the date fields aren’t MM DD YYYY. It assumes the dates are in the MMDDYYYY format, so we have to switch the fields back just before we submit the form.

So what we need to do is:

1. When the page loads, move the Day HTML element before the Month HTML element,

2. Set a trigger on the submit button to switch back the fields so no errors are produced.

So first let’s take a look at the HTML:

By opening up the web inspector and checking out the HTML we know we can select the month and day fields using these selectors, .field.month.two-digits and .field.day.two-digits, relatively, and for the submit button we can use the selector .form-block .form-button-wrapper.

Now, using Javascript, we can set up our 2 functions that switch the day and month field back and forth, our function that listens for when we hit submit on a form, and our function that will set things up after the page loads.

  <script>
  /*This function will move the day field before the month field*/
  function switchDDMM() {
    let fields = document.querySelectorAll('.field.day.two-digits');
    if (!fields) return;
    
    fields.forEach(field => {
      field.parentNode.insertBefore(field, field.previousElementSibling)
    })
  }
  /*This function will move the month field before the day field*/
  function switchMMDD(form) {  
    let fields = form.querySelectorAll('.field.month.two-digits');
    if (!fields) return;
    
    fields.forEach(field => {
      field.parentNode.insertBefore(field, field.previousElementSibling)
    })
  }

   /*This function runs whenever a form submit button is clicked 
    This will run the function to switch the date fields back */
  function switchOnSubmit(){
    let submitBtnArr = document.querySelectorAll('.form-block .form-button-wrapper');
    if (!submitBtnArr) return;

    submitBtnArr.forEach(submitBtn => {
      let form = submitBtn.closest('.form-block');
      submitBtn.addEventListener('click', function(){
        switchMMDD(form);
      })
    })
  }

   /* This function waits until the page is loaded before anything initializes. */
  window.addEventListener('load', function(){
    switchDDMM();
    switchOnSubmit();
  })
</script>
<style>
  /*If there is an error in the form, we'll just switch things visually*/ 
  .field-error + .field-list .form-item.fields.date .field.month {
    left: calc(3.5rem + 2%) 
  }
  .field-error + .field-list .form-item.fields.date .field.day {
    left: calc(-3.5rem + 2%) 
  }
</style>
  

And that code should do it! Now we should be able to tab through the items correctly.