European/UK Dates on Squarespace Forms

Squarespace have an excellent Form Block for collecting information from website visitors. It is most frequently used for contact pages, surveys and signup forms and yet, it doesn't offer any customisation for their customers outside the US.

US Date Format

If you add a date field it will look like this. Month before Day. Not great for those of us who are east of the Atlantic. 

We've been nagging Squarespace to improve non-US compatibility, but in the meantime you can use a little LESS CSS, to adjust the date field so that the day is before the month. Add the following code to your Squarespace site using the CSS Editor on the Design menu (Design > Custom CSS):

/* Soundfocus code sample to format the form for UK dates */
.form-wrapper .field-list .date {
  .month {
    left: 5.5em; 
    margin-left: 0
  }
  .day {
    left: -2.5em; 
    margin-left: 0
  }
  .year { 
    left: 3.1em; 
    margin-left: 0
  }
}

The numbers in this code have been set for a form on the Bedford template. Depending upon the template you are using and the font sizes you've selected, these may need to be adjusted. After the code, the same form looks like this:

UK Date Format on Squarespace Form

Foreign Languages

It's also possible to change the "DD MM YYYY" labels for your language. If you need to do this, here's some example LESS to change them to "GG MM AAAA". It works by reducing the font of the existing labels to "0" so that they effectively disappear. We then use something called a pseudo-element to add the new text after the input box.

To change the labels to Italian, add this code to the CSS editor:

/* Soundfocus code sample to change date labels on forms */
.form-wrapper {
  .field.day.two-digits label, .field.year.four-digits label { 
  font-size: 0; 
  }
  .field.day.two-digits label:after { 
    content: "GG"; 
    font-size: 12px; 
  }
  .field.year.four-digits label:after { 
    content: "AAAA";
    font-size: 12px; 
  }
}

After you've added this code, it should look like this:

GG MM AAAA Italian Date Format

The example above only changes the day and year because the month is still "MM" in Italian. To change all three groups of letters, you can use the full code below instead:

.form-wrapper {
  .field.day.two-digits label, .field.month.two-digits label, .field.year.four-digits label { 
  font-size: 0; 
  }
  .field.day.two-digits label:after { 
    content: "11"; /* Day */
    font-size: 12px; 
  }
  .field.month.two-digits label:after { 
    content: "22"; /* Month */
    font-size: 12px; 
  }  
  .field.year.four-digits label:after { 
    content: "3333"; /* Year */
    font-size: 12px; 
  }
}

We hope this has given you some ideas to help you with your website, and taught you a little about CSS.