Dynamic translation of Squarespace form error messages
More in Plugins, Scripting and Styling
Squarespace websites don't currently support localisation into non-English languages.
There are workarounds, using code injection and/or custom css that make it possible to localise a lot of the interface but, until now, there was no published solution for translating Squarespace form error messages.
When you load a Squarespace page that has a form on it, the error messages are not a part of the document. Instead, they are dynamically loaded by a validation script that runs when the form's submit button is pressed.
This means that a simple script that runs on page load can't perform the translations, as the error messages are not yet a part of the page.
I wrote a script that fires off a listener when the Submit button is clicked.
This script checks every 100 milliseconds to see if an error field has become visible on the page.
If the script finds a visible error message it steps through every error message on the page and swaps its English error message for the translated version.
Demo 1 - Embedded form
Click submit without filling in the following form and you'll see the modified error messages.
Demo 2 - Lightbox form
Open the form then click submit without filling any fields and you'll see the modified error messages.
Code samples may be reused subject to certain conditions.
- The code will work to translate the error messages for this form in this Squarespace template. It's probable that other templates have different error messages that would require a script modification for the translations to be applied.
- Only the error messages are being translated here -the other form elements remain in English.
Need Help With Localising Your Squarespace Site?
Squarespace site localisation is a service I offer.
Use the form above to find out how I can help.